【マナブログminimal】ブログ上部にカテゴリーを設定する方法
こんにちは！初心者ブロガーの味方むっくんです！
マナブログの学さんが開発したWordPressテーマ【minimal】を使っています。このWordPressテーマは各部の設定方法が少々難しいので迷う方が多いかと思い、初心者向けに細かく説明をしています。
今回説明するのは
ブログ上部にカテゴリーを設定する方法です
具体的には、ブログ上部のこの赤枠の部分ですね。
スポンサードサーチ
【マナブログminimal】ブログ上部にカテゴリーを設定する方法
それでは早速説明していきます！ブログ上部にカテゴリーが無いとSEO的に良くないので必ず設定しましょう。
実際にマナブログの学さんも、上部にはカテゴリーがありますよね！今回はあなたのMinimalでも、マナブログ同様のカテゴリーを設定してみましょう！
手順① ：カテゴリーを作成する
まずはブログの上部に設定するカテゴリー自体を作成します。
minimalにログインした最初の画面を開き、赤枠①「投稿」→赤枠②「カテゴリー」の順でクリックして下さい。
するとこのような↑画面に移りますので、ここでMinimalの上部に設定する為のカテゴリーを作成します。ここでは仮に「料理」という系統でカテゴリーを作る前提で話を進めます。
赤枠①：名前
「サイト上に表示される名前」との説明書きがありますが、ここで設定した名前以外に表示を変えることも可能です。自分でどういうカテゴリなのか理解できる文字が良いです。
赤枠②：スラッグ
ここは最重要。SEOに関係します。具体的、かつ端的に半角で文字を打ち込みましょう。今回は料理なので「cooking」としました。
今後記事を書く際、記事に対してカテゴリを当てますが、その記事のURLにここで設定した文字列がつくので、しっかり正しい文字を選びましょう。スペルミスなど決して無いよう注意して下さい。
赤枠③：親カテゴリー
カテゴリーというものは、「親–子–孫」というように枝分かれさせることができます。1つの親カテゴリーから、いくつかの子カテゴリーがあり、更に孫カテゴリーへと枝分かれが可能です。子以下のカテゴリーはどうしても必要なものじゃないので、親カテゴリーだけでもOKです。正しい枝分かれをさせることで記事のSEOが最適化されます。
今回作ろうとしている料理というテゴリーは、なにかのカテゴリーの下に子として作るわけでは無いので、「なし」を選択します。
赤枠④：説明
空欄でも良いくらいですが、一応説明を打てます。自分用に説明文を書いておけばOKです。
ここまで入力できたら赤矢印の指す「新規カテゴリーを追加」をクリックしましょう。
手順②：子カテゴリーを作成する（必須ではない）
もう１つカテゴリーを作ります。先ほど説明したように、カテゴリーは「親–子–孫」と枝分かれで作れるので、その例として先ほど作った「料理」というカテゴリーの下に「子カテゴリー」を作る手順を説明します。
赤枠①：名前
先ほどは料理という大きな分類だったので、その下に入れる子カテゴリーとして「イタリア料理」を作ることにします。
カテゴリーの親子関係は、関連があっても、同じ文字列や同じ意味合いのものを含まないほうが良いので、「イタリア料理」ではなく「イタリアン」と設定することにします。ここは結構重要なポイントです。
赤枠②：スラッグ
先ほど同様、URLに含まれる文字列になるので、正しく意味合いが通る半角英語を入力します。
赤枠③：親カテゴリー
ここが先ほど「料理」のカテゴリーを作った時と違うところです。先ほど作った「料理」というカテゴリーを親にして、このカテゴリーを子として作成したいので、ここで「料理」を選びます。
赤枠④の説明部分は、適当に打つなり空欄で結構です。「新規カテゴリーを追加」ボタンを押し、カテゴリー作成完了です。
カテゴリーの作成が完了すると、画面の右側に↑のように作成したカテゴリーが出てきます。赤矢印の示す「表示」という部分をクリックすると、作ったカテゴリーのページを見ることができます。
このカテゴリーページに、料理というカテゴリーをあてた記事がまとめられていくことになります。
※あとで使う事になるので、このページのURLはコピーしておきましょう！
手順③：minimalのCSSを変更する
まずは、
赤枠➀「外観」→赤枠②「テーマエディター」→赤枠③「nav-menu.php」
の順にクリックし、下の画面を開いて下さい。
こちらは、マナブログの学さんによるテーマminimalの根幹とも言える、CSSと呼ばれる部分の画像です。英語まみれでドン引きした方も多いかと思いますが、細かく説明するのでご心配なく。
マナブログの学さんは、こういった部分を自分でイジることにより、ブロガー側も知識を深められるようにminimalを作っているようです。僕と一緒に少しずつイジり、習得していきましょう♪
赤矢印で示した部分は行数を示した数値です。
今どこを見ているのかわからなくならないよう、この行数を基準に説明しますので、自分の画面と見比べながら説明を見て下さいね。
行12～19
この12行～19行にある文字列で、カテゴリーメニューのうちの１つをあらわしています。カテゴリーをクリックすることで、その下に子カテゴリーの選択肢が出るタイプの設定です。画像で言うと、これです↓
指示する通りに一部分を変更するだけなので、簡単です。
【13行】の文字列は↑このようになっていますが、赤文字「First nav」の部分が、ブログ上で表示されるボタンの名前になります。
なので、この「firstnav」を消して「料理」と打ち込みます。
【行15】に目をやると、↑このようになっていますが、赤文字「ALL」が、今ほど設定したカテゴリーの下に選択肢として出てくる子カテゴリーの名前をあらわしています。
この「ALL」という文字を消して「イタリアン」に変更しましょう
そして、最後にこの「イタリアン」の文字をクリックした時に、どのURLに飛ばすかを設定します。
これは簡単で、「ALL」という文字の手前に「＃」があるのはわかりますね？この「＃」を消してさっき作ったカテゴリーのページのURLをコピペします。これで、設定は完了なので、一番下の青色ボタン「ファイルを更新」をクリックしてください。
以上でマナブログの学さん作成のテーマminimalで、上部に基本的なカテゴリーページを作る方法は説明完了です！
ちなみに・・・
行20～26
この部分は、いま設定した【行12～19】とまったく同じものなので、必要に応じて内容を変えるか、もしくは消してしまっても構いません。
行28
行の28は↑このような文字列になっていますが、これは子カテゴリーをあてない、単品のカテゴリーを設定するのに使います。
使い方は同じで、「＃」の所をカテゴリーのURLに替え、「Nav menu 1」の所を表示させる名前に変えます。
行29も行28と同じなので、必要に応じて使って下さい。
【マナブログminimal】ブログ上部のカテゴリーに画像を挿入する方法
次は、いま設定したカテゴリーの頭に画像を表示させる方法です。
文字だけよりも、それに適した画像があるほうが見栄えが良いですね！
本家のマナブログでもカテゴリーナビには画像が挿入されているので、あなたのMinimalでも、成功者の真似をして画像を入れてみましょう！
テーマヘッダー（header.php）の変更
まずはCSSをイジる為、任意の画面を開いてもらいます。
下の画像が実際の画面です、赤枠➀「外観」→赤枠②「テーマエディター」→赤枠③「テーマヘッダー（header.php）の順です。
何もこのCSSをイジってなければ42行目が下記のようになっているはずです。
<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css” rel=”stylesheet”>
ここを下記の文字列に変更します。
<link href=”https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=”stylesheet”>
設定したい画像を探す
使用する画像はFont Awesomeという無料サイトから探しましょう！
このサイトは英語ばかりで少々困惑しますが、使い方は簡単です。まずは、サイト内にチラホラ出ている画像から、好きなものを探します。
好きな画像が見つかったら、クリックして下さい。下のような画面が出てくるので、赤矢印のボタンをクリックします。
すると、次はこのような↓画面に変わりますので、赤枠内の部分をコピーしておきましょう！
nav-menu.phpの変更
先ほど開いたnav-menu.phpを再度開いて下さい。開き方は一緒です
赤枠➀「外観」→赤枠②「テーマエディター」→赤枠③「nav-menu.php」
の順にクリックし、下の画面を開いて下さい。
この中から、先ほど設定したカテゴリーの部分を探して下さい。
1つ例に出すと、下記のような文字列があると思います。
<li itemprop=”https://yuusya-mukkun.com/”><a href=”/category/lvup/” itemprop=”name”>カテゴリーの名前</a></li>
この、カテゴリーの名前の直前に先ほどコピーした画像の文字列を加えると、画像が表示されます。要はこういうことです。
<li itemprop=”https://yuusya-mukkun.com/”><a href=”/category/lvup/” itemprop=”name”><I class=”fas fa-apple-alt”></i>カテゴリーの名前</a></li>
この黄色線の部分が、先ほどの画像の文字列です。これで画像つきのカテゴリーに変わったはずです！
ブログ上部のカテゴリーの設定方法、説明終了
いかがでしたか？自分でこれを調べてやるとなると、なかなか難しいものがありますね。ましてや全く知識が無いところからスタートして、この設定をしなければならないとなると、それはもう大変なことです。
しかし、当ブログでは今回のように1つ1つ丁寧に各部の設定を説明しますので、一緒にあなたのminimalを完成させましょう♪
それではまた明日！
