• アフィリエイト
    TopBuzzは2日で稼げる?実際に投稿して収益を得てみた。
    2017年12月21日
  • WordPress
    SEO対策自動キーワードカウンターについての謝罪とこれからの方針について
    2018年8月16日
  • アフィリエイト
    ブログの収益はアフィリエイトだけじゃない!お仕事を貰えるブログの書き方。
    2018年8月9日
  • WordPress
    Table of Contents Plusの目次を綺麗にカスタマイズする方法。WordPress必見。
    2018年2月1日
  • アフィリエイト
    Twitterのフォロワー30人だけど、サイト公開3日目で600PVを達成した集客方法。
    2018年2月14日
  • アフィリエイト
    アフィリエイトの意味とマネタイズを解説してみる。【稼げない人必見】
    2018年8月6日
  • WordPress
    アフィリエイトリンクを2分で綺麗にカスタマイズする。Amazon、楽天向き。
    2017年11月23日
  • アフィリエイト
    A8.net始めて1週間で約20万の利益を発生させたアフィリエイトの2つの柱
    2018年2月20日
サイドバーのカテゴリーメニューがそっけないので綺麗にカスタマイズしてみた。

サイドバーカテゴリーメニューって…なんかイマイチじゃないですか?

こう、ただカテゴリーを並べて、投稿数表示してますよ〜って感じの。

 

確か投稿数が表示されて、中身があるブログと見られるのはプラスと見ても…

サイドバーを見てみると…どうしても…心の中の声が出てしまう。

 

 

 

ジョグ

なーんかそっけねぇ!!(笑)

 

というわけで…少し夢中になってカテゴリーメニューを作ってみました。

今回はそのカテゴリーメニューに対する奮闘記方法の記事です。

 

カテゴリーメニューは最終的にこうなった

ということで…いじりにいじり…どうなったかと言いますと…

 

こうなりました(o・ω・o)。

記事一覧の下に、上手く配置しました。

 

ちなみにスマートフォンで表示させる時は、画像等が入ってしまうと他のコンテンツを見るのが面倒になってしまうので…

 

素直にプルダウン式のシンプルなカテゴリーメニューにしました。

これで、サイドバーのコンテンツにも気がついてくれるはず…!

 

ではでは、この様なカテゴリーメニューにいたった経緯と方法を…メモしていきます!

 

HTMLでカテゴリーメニューを作成する

Goumbik / Pixabay

まずは、HTMLでカテゴリーメニューを作成していきます。

箇条書きのHTMLを参考に、サクサクっと作成します。

コードは記事の一番下に載せておきますので、JOSALOGので良かったらコピーして使ってください( ´∀`)

 

 

はい、こんな感じでまずは作っていきます。

 

 

コレ知っとくと便利だわ〜!

僕は新しいブログパーツなどのHTMLを作成する時は、全てWordPressの新規投稿機能を使います。

理由は、まっさらなメモ帳から作るよりも、絶対に簡単に綺麗なHTMLコードが作成できるからですね!

色を付けたり、文字を大きくしたり、太字にしたり。

「ビジュアルエディタ」画面で作った文章などは、「テキスト」に切り替えると全てHTMLコードで見ることが出来ます。

HTMLを1から勉強する前に、このやり方に慣れておくと便利かも。

 

…んでもって、そのカテゴリーメニューにアンカーリンクを設置していきます。

要は文字をクリックしたらそのページに飛ぶようにするってことね。

そして、文字のレイアウトなどをしっかりと整えて…。

うん、ここまで出来たら、あとは出来たようなもの。

 

配置して実際に見てみる

うん、こうなりました。

 

 

ジョグ

…悪くないね?

でも普通。

 

 

これが、僕が思った率直な感想。

しかも、なんかダラダラとサイドバーにならぶカテゴリーも、あんまり好かない。

う〜ん…どうしようかなぁ〜と思って目に入ったのが、現在広告を入れている記事一覧の下の部分。

 

ジョグ
あ、ここ…カテゴリーメニューゾーンにしちゃうか。

 

と、いうことで、僕の作業は終わることを知らず、またまたカテゴリーメニュー作成が始まります。

 

2カラムにして設置してみる

はい、Albatrossテンプレートならではですね。

2カラムにして、カテゴリーを配置してみました。

 

ジョグ
うん!なかなか良いんじゃない?!

 

と思うけども…何故か僕は画像作成に走ってしまい…

 

 

こうなる。

 

 

ジョグ

あー画像があった方が分かりやすいな。

でも、画像ももっとインパクト欲しいし、2カラムってなんかダルいな。

3カラムにするか。

 

という何故か納得しない僕…。

 

3カラムのカテゴリーメニューにしてみる

ジョグ
おおお…良いじゃないか…!

作って気付いたけど、ジュンイチさんのブログにもこんなのあったな…。(笑)

 

3カラムにして、2段にしてみました。

4つのカテゴリーだと、2つほど空きが出来るので、「PLOFILE」「CONTACT」の2つのカテゴリーを追加。

画像編集アプリで、角を丸くして、文字やフォントをもう少しインパクトのある画像にしました。

 

どうでしょうかね…?カテゴリーメニュー。

ちなみに、このカテゴリーメニューは、冒頭でも言ったとおりPC限定で表示されるようになっています。

スマホでこんなにカテゴリーアピールするよりも、見てほしいものがたくさんあるからね!

 

サイドバーにも良い感じにスペースが出来たし、なんか追加しよ〜っと。

 

まとめ:デザインは凝れば凝るほど楽しい

rawpixel / Pixabay

いや…楽しかった(・∀・)

デザインって、なんでこう弄り出すと止まらないんだろうね。

 

今回やったことは、以下の通り!

  1. カテゴリーメニューのHTMLコードを作成
  2. コードの文字にアンカーリンクを設置
  3. 文字のレイアウトを整える

うん、単純に言ってしまえば、これだけ!(笑)

2カラムとか3カラムにしたい時は、そのままのテンプレートだと少しHTMLの知識が必要になります。




⇧の、アルバトロスというテンプレートなら、超絶簡単に2カラムや3カラムのコンテンツが作成できます。

ジョグ
マジでアルバトロス様様です。(笑)

 

ではこれにて、今日の奮闘記を終わります。(笑)

皆も楽しんで、ブログデザインいじってみてね。

 

コピペ用コード

改行多くなっちゃったけど許してね。





<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>



スポンサードリンク

⇩〜〜お知らせ〜〜⇩

読者さん
JOSALOGが、無料のメールセミナーを始めたって…?
 
じょさなん
そうなんすよ。 【JOSALOGのブログで稼ぐ★メールセミナー】をはじめました…。 無料で、「僕がブログを始めた時に知りたかった情報」を毎日配信し続けるっちゅうものですね。
   

副業としてブログを始めてみたい。

ブログの集客や収益化がうまくいかない。

稼いでいる人は何を考えているのか知りたい。

てか、まず何から始めればいいかわからない。

 

そんな人は、迷わず登録や!

 

 

関連キーワード
  • ブログで稼ぎたいならまずWordPressではなく、自分自身を見つめ直そう。
  • SEO対策自動キーワードカウンターについての謝罪とこれからの方針について
  • WordPressの有料テンプレートが本当に必要だと思う僕の理由
  • SEO対策は何をしたらいいのか?キーワードの視点を絞った僕の対策例
  • ブログの収益はアフィリエイトだけじゃない!お仕事を貰えるブログの書き方。
  • ネットで収益を得る方法!20記事で10万アクセスを集める本が面白かった。
おすすめの記事