博士の自由研究

ワードプレステーマminimalでmanablogの見た目にする方法

投稿日:2019年1月13日 更新日:

どうも、今日も休みの日に昼の15:00まで寝てしまった博士です。

まだ眠たいですが、前回の「」に引き続き更にワードプレステーマ「minimal」をカスタマイズしていきたいと思います。

今回の記事の目標はワードプレステーマ「minimal」の販売者であるmanablogさんのサイトの見た目に近づけるようにしていきたいですねー

具体的には以下のような変更を加えていこうと思います!

  • メニューの左側にアイコンを入れる
  • トップページのみに常表示させる記事
  • 画像サイズ変更

メニューの左側にアイコンを入れる

minimalのテーマを導入した段階ではカテゴリーの左側にアイコンがついていませんでした。Font Awesomeで設定されているので、簡単にアイコンを入れる事ができますね!さっそく設定していきましょう!

 

「外観 > テーマの編集」からテーマヘッダー (header.php)の中のコードで以下の部分を

このように書き換えます。

書き換えれたら、nav-menu.phpの中から以下のコードを探し出して以下の要素を付け足します(例としてシシトウ団の場合を載せます)

このコードの文字の手前に・・・

Font Awsomeから引っ張て来たコードを付け足しましょう!

i classの後の部分をこちらのページからあなたの好きなアイコンにのコードに変えていただきたい!!

 

キレイに表示させるために半角スペースを文字の手前に入れておきましょう!

同じ手順で全てのメニューにアイコンを設置してサイトを確認しましょう!

 

Font Awsomeはアイコンの種類が4,845種類もあるので、いったん仮でアイコンを置きましたが、これでメニュー部分は完成ですね!

 

トップページのみに常表示させる記事

続いてはトップページのみに表示させる記事を作っていきます!

「外観 > テーマの編集」のテーマヘッダー(header.php)

このコードに以下のコードを差し込みます!場所はarticleタグのマークアップの直前にしますぞ!

するとこのようになります

しっかり反映されていますね!あとは内容だけです!しかし、説明するとかなり長くなる上に、htmlとcssとブートストラップ3つの知識が必要になってきますので、今回コピペで反映できるようにまとめておきます。

以下のコードをごっそり「ここにコンテンツ」の部分に入れてください!

そして、cssの部分に以下のコードを追加します!どこに追加してもいいんですが、以前の記事から続きで見ていただいている方はスマホ版ロゴのスタイルの下に追加が一番スマートでしょう!!

header.phpとstyle.cssにコードを追加できたらサイトを確認しましょう!

バッチリ反映されていますね!文章や画像URLはheader.phpに張り付けたコードを見て適切あなたのサイトに合わせてください!

画像サイズ変更

style.cssに以下のコードを追加してください!(ワードプレスの新エディターグーテンベルクの場合)

いい感じに画像に余白が出来たと思います。

この記事を見ても解決できない方へ

いかがでしたでしょうか?これでmanablogさんのサイトに近づいたかと思います!もし、この記事を見ても解決できない場合は、
もし今回の設定でわからない事があればツイッターなどで連絡をくれれば、力になれると思いますので、お気軽に連絡ください!(連絡に気づけば)

今回の記事作成にかかった時間

  • 記事構成 10分
  • コード修正 70分
  • 文章作成 80分
  • 記事作成中に食べた物 カップラーメン

合計作業時間 180分と 386キロカロリー

  • この記事を書いた人
アバター

edonikov

-博士の自由研究

Copyright© 秘密結社シシトウ団 , 2019 All Rights Reserved.