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

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

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

初心者でもブログにドロップダウンメニューをつけたい

f:id:sibalove:20170824013443j:plain

こんばんは!

 

前回の記事で記事のカテゴリー分けを行ないましたが、今回はその続きで「ドロップダウンメニュー」をつけてみたいと思います!

 

 

ドロップダウンメニューとは

 

ドロップダウンメニューってなに?という方もいらっしゃると思います。

よくブログについている

f:id:sibalove:20170824012644p:plain

こういうやつです。

 

他の方のブログを見ていて、これがあるとブログを訪問した時に興味のあるカテゴリーが一目でわかると思い、導入してみようと思った次第です。

 

今回は私が使用しているテーマ

Minimal Green - テーマ ストアのなかで紹介されていた

こちら↓のサイト様を参考にしていきたいと思います。

www.yukihy.com

 

コピペでOKとのことなので、簡単そうです!

さっそくやってみましょう。

 

変更前

 

まずは比較用に現在の私のブログの画面がこちらです。

f:id:sibalove:20170823231140p:plain

 

シンプルですね!

一応カテゴリーもサイドバーに表示されるようにはなっていますが、パッと見ではわかりにくいところにあるので、ドロップダウンメニューでもっとわかりやすくしたいです。

 

コードを貼る

 

※実装前に以前のコードをメモ帳などにコピーしておくことを推奨されていたので、まずは現在のコードを保存しておきます。

 

そしてサイト様で公開されているコードをコピペします。

CSSコードはデザインCSS

f:id:sibalove:20170823235948p:plain

 

HTMLはヘッダのタイトル下に

f:id:sibalove:20170824000040p:plain

 

これで「変更を保存する」を押すとこんな感じになります!f:id:sibalove:20170824003735p:plain

そう!これがやりたかった!(歓喜)

私にしては珍しく、一発で成功しました。

 

HTMLをカスタマイズする

このままではまだ使えないので、カスタマイズする必要があります。

HTMLのコードの中の”カテゴリ1”などを自分のサイトに合う名前に変更していきます。

 

 

私のブログの場合は

カテゴリ1→アフィリエイト

カテゴリ1-1→ブログ運営

カテゴリ1-2→ASP

カテゴリ2→メルカリ

としました、

 

 

同様にリンクも設定します。

私の場合

1階層目のリンク→アフィリエイトのリンク

2階層目のリンク→ASPのリンク

2階層目のリンク→ブログ運営のリンク

1階層目のリンク→メルカリのリンク

のようになりました。

 

そして必要のないコードを削除していきます

削除はコードの”<li>”から”</li>”で囲まれている塊で必要のないところを消していきます。

 

変更後

変更を保存してから自分のブログを確認してみました。

 

f:id:sibalove:20170824012158p:plain

無事にドロップダウンリストができました!!

(思っていたよりすんなりできて感動!)

 

まとめ

 

いかがでしたでしょうか?

今回はソースコードを実際に触ってみましたが、コードが読めなくてもドロップダウンリストの設定を行なうことができました!

 

まだカテゴリーの数が少ないのですが、今後記事が増えていくにつれてカテゴリーも、もっと増えていくと思うので、いずれはこのドロップダウンリストが活躍してくれる時が来ると思います。

 

CSSとか、HTMLとか、一体なんなのか?ということすらいまいちわかっていない私でもできてしまったので、初心者の方でも簡単に組み込むことができると思います。

 

ソースが載せられないので説明が大雑把になってしまった部分もあったかと思いますが、このブログが参考になれば幸いです。

 

それではまた別の記事で。

 

f:id:sibalove:20171013193546p:plain