サイドバーのカテゴリーメニューって…なんかイマイチじゃないですか？
こう、ただカテゴリーを並べて、投稿数表示してますよ〜って感じの。
確か投稿数が表示されて、中身があるブログと見られるのはプラスと見ても…
サイドバーを見てみると…どうしても…心の中の声が出てしまう。
なーんかそっけねぇ！！（笑）
というわけで…少し夢中になってカテゴリーメニューを作ってみました。
今回はそのカテゴリーメニューに対する奮闘記と方法の記事です。
目次
カテゴリーメニューは最終的にこうなった
ということで…いじりにいじり…どうなったかと言いますと…
こうなりました(o・ω・o)。
記事一覧の下に、上手く配置しました。
ちなみにスマートフォンで表示させる時は、画像等が入ってしまうと他のコンテンツを見るのが面倒になってしまうので…
素直にプルダウン式のシンプルなカテゴリーメニューにしました。
これで、サイドバーのコンテンツにも気がついてくれるはず…！
ではでは、この様なカテゴリーメニューにいたった経緯と方法を…メモしていきます！
HTMLでカテゴリーメニューを作成する
Goumbik / Pixabay
まずは、HTMLでカテゴリーメニューを作成していきます。
箇条書きのHTMLを参考に、サクサクっと作成します。
コードは記事の一番下に載せておきますので、JOSALOGので良かったらコピーして使ってください( ´∀｀)
はい、こんな感じでまずは作っていきます。
コレ知っとくと便利だわ〜！
僕は新しいブログパーツなどのHTMLを作成する時は、全てWordPressの新規投稿機能を使います。
理由は、まっさらなメモ帳から作るよりも、絶対に簡単に綺麗なHTMLコードが作成できるからですね！
色を付けたり、文字を大きくしたり、太字にしたり。
「ビジュアルエディタ」画面で作った文章などは、「テキスト」に切り替えると全てHTMLコードで見ることが出来ます。
HTMLを1から勉強する前に、このやり方に慣れておくと便利かも。
…んでもって、そのカテゴリーメニューにアンカーリンクを設置していきます。
要は文字をクリックしたらそのページに飛ぶようにするってことね。
そして、文字のレイアウトなどをしっかりと整えて…。
うん、ここまで出来たら、あとは出来たようなもの。
配置して実際に見てみる
うん、こうなりました。
…悪くないね？
でも普通。
これが、僕が思った率直な感想。
しかも、なんかダラダラとサイドバーにならぶカテゴリーも、あんまり好かない。
う〜ん…どうしようかなぁ〜と思って目に入ったのが、現在広告を入れている記事一覧の下の部分。
と、いうことで、僕の作業は終わることを知らず、またまたカテゴリーメニュー作成が始まります。
2カラムにして設置してみる
はい、Albatrossテンプレートならではですね。
２カラムにして、カテゴリーを配置してみました。
と思うけども…何故か僕は画像作成に走ってしまい…
こうなる。
あー画像があった方が分かりやすいな。
でも、画像ももっとインパクト欲しいし、２カラムってなんかダルいな。
３カラムにするか。
という何故か納得しない僕…。
3カラムのカテゴリーメニューにしてみる
作って気付いたけど、ジュンイチさんのブログにもこんなのあったな…。（笑）
3カラムにして、2段にしてみました。
4つのカテゴリーだと、2つほど空きが出来るので、「PLOFILE」「CONTACT」の2つのカテゴリーを追加。
画像編集アプリで、角を丸くして、文字やフォントをもう少しインパクトのある画像にしました。
どうでしょうかね…？カテゴリーメニュー。
ちなみに、このカテゴリーメニューは、冒頭でも言ったとおりPC限定で表示されるようになっています。
スマホでこんなにカテゴリーアピールするよりも、見てほしいものがたくさんあるからね！
サイドバーにも良い感じにスペースが出来たし、なんか追加しよ〜っと。
まとめ：デザインは凝れば凝るほど楽しい
rawpixel / Pixabay
いや…楽しかった(・∀・)
デザインって、なんでこう弄り出すと止まらないんだろうね。
今回やったことは、以下の通り！
- カテゴリーメニューのHTMLコードを作成
- コードの文字にアンカーリンクを設置
- 文字のレイアウトを整える
うん、単純に言ってしまえば、これだけ！（笑）
2カラムとか3カラムにしたい時は、そのままのテンプレートだと少しHTMLの知識が必要になります。
⇧の、アルバトロスというテンプレートなら、超絶簡単に2カラムや3カラムのコンテンツが作成できます。
ではこれにて、今日の奮闘記を終わります。（笑）
皆も楽しんで、ブログデザインいじってみてね。
コピペ用コード
改行多くなっちゃったけど許してね。
[html]<ul class="sideMenu">
<li>アフィリエイト
<ul>
<li>アフィリエイト</li>
<li>アフィリエイトノウハウ</li>
<li>アフィリエイターのぼやき</li>
</ul>
</li>
<li>WordPress
<ul>
<li>WordPress</li>
<li>デザインカスタマイズ</li>
<li>SEO対策</li>
</ul>
</li>
<li>ガジェット
<ul>
<li>ガジェット</li>
<li>Chromebook</li>
<li>AmazonEcho</li>
<li>Cyber-shot DSC-W830</li>
<li>海外輸入してみた</li>
</ul>
</li>
<li>ブログ
<ul>
<li>ブログ</li>
<li>ジョグの記憶</li>
<li>仮想通貨</li>
</ul>
</li>
</ul>
[/html]
