【マナブログminimal】ブログ上部にカテゴリーを設定する方法 | MUKKUN QUEST
MUKKUN QUEST     

 

【マナブログminimal】ブログ上部にカテゴリーを設定する方法

minimal

こんにちは!初心者ブロガーの味方むっくんです!
マナブログの学さんが開発したWordPressテーマ【minimal】を使っています。このWordPressテーマは各部の設定方法が少々難しいので迷う方が多いかと思い、初心者向けに細かく説明をしています。

今回説明するのは

ブログ上部にカテゴリーを設定する方法です

具体的には、ブログ上部のこの赤枠の部分ですね。

スポンサードサーチ

【マナブログminimal】ブログ上部にカテゴリーを設定する方法

それでは早速説明していきます!ブログ上部にカテゴリーが無いとSEO的に良くないので必ず設定しましょう。
実際にマナブログの学さんも、上部にはカテゴリーがありますよね!今回はあなたのMinimalでも、マナブログ同様のカテゴリーを設定してみましょう!

手順① :カテゴリーを作成する

まずはブログの上部に設定するカテゴリー自体を作成します。


minimalにログインした最初の画面を開き、赤枠①「投稿」→赤枠②「カテゴリー」の順でクリックして下さい。


するとこのような↑画面に移りますので、ここでMinimalの上部に設定する為のカテゴリーを作成します。ここでは仮に「料理」という系統でカテゴリーを作る前提で話を進めます。

赤枠①:名前
「サイト上に表示される名前」との説明書きがありますが、ここで設定した名前以外に表示を変えることも可能です。自分でどういうカテゴリなのか理解できる文字が良いです。

赤枠②:スラッグ
ここは最重要。SEOに関係します。具体的、かつ端的に半角で文字を打ち込みましょう。今回は料理なので「cooking」としました。
今後記事を書く際、記事に対してカテゴリを当てますが、その記事のURLにここで設定した文字列がつくので、しっかり正しい文字を選びましょう。スペルミスなど決して無いよう注意して下さい。

赤枠③:親カテゴリー
カテゴリーというものは、「親–子–孫」というように枝分かれさせることができます。1つの親カテゴリーから、いくつかの子カテゴリーがあり、更に孫カテゴリーへと枝分かれが可能です。子以下のカテゴリーはどうしても必要なものじゃないので、親カテゴリーだけでもOKです。正しい枝分かれをさせることで記事のSEOが最適化されます。
今回作ろうとしている料理というテゴリーは、なにかのカテゴリーの下に子として作るわけでは無いので、「なし」を選択します。

赤枠④:説明
空欄でも良いくらいですが、一応説明を打てます。自分用に説明文を書いておけばOKです。
ここまで入力できたら赤矢印の指す「新規カテゴリーを追加」をクリックしましょう。

手順②:子カテゴリーを作成する(必須ではない)


もう1つカテゴリーを作ります。先ほど説明したように、カテゴリーは「親–子–孫」と枝分かれで作れるので、その例として先ほど作った「料理」というカテゴリーの下に「子カテゴリー」を作る手順を説明します。

赤枠①:名前
先ほどは料理という大きな分類だったので、その下に入れる子カテゴリーとして「イタリア料理」を作ることにします。
カテゴリーの親子関係は、関連があっても、同じ文字列や同じ意味合いのものを含まないほうが良いので、「イタリア料理」ではなく「イタリアン」と設定することにします。ここは結構重要なポイントです。

赤枠②:スラッグ
先ほど同様、URLに含まれる文字列になるので、正しく意味合いが通る半角英語を入力します。

赤枠③:親カテゴリー
ここが先ほど「料理」のカテゴリーを作った時と違うところです。先ほど作った「料理」というカテゴリーを親にして、このカテゴリーを子として作成したいので、ここで「料理」を選びます。

赤枠④の説明部分は、適当に打つなり空欄で結構です。「新規カテゴリーを追加」ボタンを押し、カテゴリー作成完了です。


カテゴリーの作成が完了すると、画面の右側に↑のように作成したカテゴリーが出てきます。赤矢印の示す「表示」という部分をクリックすると、作ったカテゴリーのページを見ることができます。
このカテゴリーページに、料理というカテゴリーをあてた記事がまとめられていくことになります。
※あとで使う事になるので、このページのURLはコピーしておきましょう!

手順③:minimalのCSSを変更する

まずは、
赤枠➀「外観」→赤枠②「テーマエディター」→赤枠③「nav-menu.php」
の順にクリックし、下の画面を開いて下さい。

こちらは、マナブログの学さんによるテーマminimalの根幹とも言える、CSSと呼ばれる部分の画像です。英語まみれでドン引きした方も多いかと思いますが、細かく説明するのでご心配なく

マナブログの学さんは、こういった部分を自分でイジることにより、ブロガー側も知識を深められるようにminimalを作っているようです。僕と一緒に少しずつイジり、習得していきましょう♪

赤矢印で示した部分は行数を示した数値です。
今どこを見ているのかわからなくならないよう、この行数を基準に説明します
ので、自分の画面と見比べながら説明を見て下さいね。

行12~19

この12行~19行にある文字列で、カテゴリーメニューのうちの1つをあらわしています。カテゴリーをクリックすることで、その下に子カテゴリーの選択肢が出るタイプの設定です。画像で言うと、これです↓

指示する通りに一部分を変更するだけなので、簡単です。

【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を完成させましょう♪
それではまた明日!