月収が12万しかないので、お金稼いでみた

月収が12万しかないので、お金稼いでみた

超初心者のアフィリエイト実践記

ブログ初心者がドロップダウンメニューをカスタマイズしてみた【不要な下矢印”V”を消したい】

f:id:sibalove:20171013002419j:plain

 

こんにちは!

しばらぶです!はじめましての方ははじめまして。

今日たこ焼きパーティーをしたら生地が全部鉄板にこびりついて泣きそうになりました。鉄板はきちんと温めてから油をしくと良いそうです。

 

さて、そんなことは置いておき、今回はドロップダウンメニューのカスタマイズ第三弾です!!

 

ドロップダウンメニューの設置方法と色の変更は以下の記事からどうぞ。

sibalove.hatenablog.com

sibalove.hatenablog.com

 

さて、だいぶブログの体裁も整ってきましたが、実は以前から気になっていたことがあります。

それが、これです↓

f:id:sibalove:20171011234624p:plain

 

ドロップダウンメニューの矢印マーク!!

 

アフィリエイトの記事はカテゴリーを階層化しているので、この矢印マークがあることで「サブカテゴリがありますよ」という指標になるのですが、サブカテゴリを設定していないにも関わらず矢印マークが出てきてしまっています

 

これの消し方がわからなくて今まで放置していましたが、やっぱり気になって仕方ないので、何とかこの不要なマークを消しておこうと思います!

 

 

メニューの下矢印を消す方法

 確認してみると、いつも参考にさせていただいているサイト様に書いてありました。

design.syofuso.com

 

要は、カテゴリーを階層化させている場合に矢印を出すようにソースが書かれているので、階層化させなければいいというだけのようです。

 

 階層構造にしない場合は

 

<li>
<a href="1階層目のリンク">カテゴリ5 <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="2階層目のリンク">カテゴリ5-1</a></li>
<li><a href="2階層目のリンク">カテゴリ5-2</a></li>
<li><a href="2階層目のリンク">カテゴリ5-3</a></li>
<li><a href="2階層目のリンク">カテゴリ5-4</a></li>
</ul>
</li>


の部分は消して下さい。余った部分も消去してください。

引用元:デザインテーマ「Minimal Green」のカスタマイズの手引 - Minimal Green

 

ということだったので、HTMLコードの上記の部分を消してみます。

(※注意:ソースを修正する前に、修正する前のソースをメモ帳などにコピーしておいた方が安全です)

 

デザイン→カスタマイズ→ヘッダ→タイトル下のHTMLの不要なコードを削除します。

 

f:id:sibalove:20171012233933p:plain

 

やりながら思ったのですが、不要な部分を消すより、必要なものだけ新しく書き直したほうが手っ取り早かったです(笑)

 

<li><a href="1階層目のリンク">カテゴリ1</a></li>

 

引用元:デザインテーマ「Minimal Green」のカスタマイズの手引 - Minimal Green

 

このコードを必要な分だけ増やせばOK!

 

ついでに作っていなかった「ハンドメイド」のカテゴリーも追加して、こんな感じになりました↓↓

f:id:sibalove:20171012234616p:plain

無事に必要な箇所にだけ矢印が表示されるようになりました!

 

まとめ

今回は、不要な矢印マークを消していきました。

 

正直、もっと大変な作業になると思っていたので、簡単にできてしまって拍子抜けしています。(所要時間約3分)

 

ソースを見るときは「難しいだろう」という先入観からかまえてしまう癖があるのですが、参考にさせていただいているサイト様にもやりかたが詳しく書いてあるので、簡単に修正ができました。(いつもありがとうございます)

 

今後も記事を増やしていくにつれてカテゴリーも増えていくと思うので、より見やすいブログ作りを心がけていこうと思います!

 

ここまで読んでくださり、ありがとうございました!

よかったらぜひ、他の記事も見ていってくださいね。

それでは!!

f:id:sibalove:20171013193546p:plain