さるぼろぐ

カナダ生活なましぼり情報

ブログ収益化するなら‼ 登録必須のASPはコチラ▶

 本サイトはプロモーションが含まれています

はてなブログ以外にも適用!! サイドバーのカテゴリーをアイコン表示にする方法


スポンサーリンク

ブログを始めたら、こだわりたくなるのが「デザイン」ですよね^^

 

🙈「まだ、誰にも読まれないって分かっているけど、、、かっこよくしたい!!」

🙈「せっかく訪れてくれた読者さんに、見やすいと思ってもらいたい!!

...分かります!私も記事を書くより没頭してました💦

 

そこで、この記事では「サイドバーのカテゴリーをアイコン表示にしちゃう」カスタマイズ方法をご紹介したいと思います^^

「ど素人」の私でもできたので、安心して取り組んでみてくださいね^^

 

この記事では、私が実際に利用中の「はてなブログPro」での、サイドバーのカテゴリをアイコン表示にする方法を紹介しています。

現在、はてなブログの無料版をご利用中の方は、今後、収益化を目指すのであれば「独自ドメイン」で運営できるはてなブログPro」へのアップグレードは必須^^

はてなブログPro版であれば、あのワードプレスと大きく違わず、ブログを運営できるので安心ですよ^^

 

\ 素人の私でもできた!! はてなブログPro /

セキュリティ対策不要!今すぐ始める、はてなブログPro 

 

 

サイドバーのカテゴリー表示ってどんなの?

まず、そもそも「サイドバー」って何?という方もいると思うので、説明しておきますね^^

 

サイドバーって、携帯電話のような端末からだと、一番下へ移動しちゃうので「あまり見たことない」という方もいるかもしれません。ですが、パソコン画面だと一目瞭然☝️

その名の通り、サイトやホームページのメインコンテンツエリアの両サイドに区別されたエリアの事を指します。

 

 

「さるぼろぐ」のトップページ:右サイドのプロフィール以下がサイドバー

サイドバー自体、必ずなくてはいけないというものではないのですが、大体のブログやサイトには設置されています^^

「さるぼろぐ」を参照していただければ分かりやすいと思いますが、多くのブロガーさんはサイドバーに、

 

  • プロフィール
  • 検索窓
  • スポンサー(広告)
  • おススメ記事
  • 過去記事
  • カテゴリー
  • リンク

 

などといった情報を設置していて、イトに訪れたユーザーが回遊しやすい工夫がされています^^

 

 

アイコン表示にしたカテゴリー:さるぼろぐ

 

この記事では、そのサイドバーのカテゴリー表示を、上の図の様に文字ではなくアイコンで見やすく表示してみよう!! という事ですね👍👍

 

 

 

はてなブログProでのカスタマイズ方法

それでは早速、ご自身のブログをカスタマイズしていきましょう👍

 

と、こんなに偉そうに言ってますが、私、はてなブロガーである「フジブロっ!」さんの記事のとおりに、ただただコード作成しただけなのであります💧

 

www.fuji-blo.com

※「フジブロっ!」さんのブログで紹介されているHTMLコードやCCSは転載許可が出ていないので、直接👆リンクに飛んでみてくださいね^^

 

手順は、使用するアイコンを決めて、フォームに入力していくだけ!

それだけで、あなただけの「アイコン表示版カテゴリー」が出来上がっちゃいますよ✨

 

⚠️万が一、表示がズレてしまった時の為に、「必ず!!!」バックアップを取ってから、コードを触りましょう!

 

⚠️もしも!! 表示がズレたり、「やばい!どうしよう💦」なんて事が起きたら、スキルシェアサービスのココナラ (coconala)がベスト👍

>>私に起きた悲劇はコチラで紹介(笑)👇👇

saruboro.com

 

はてなブログ以外でも使う事はできる?

無事アイコン表示に変える事はできましたか?

「フジブロっ!」さんの記事は、本当に素人にも分かりやすく説明してくださっているので有難いですね^^(お陰様で、カスタマイズが上手くいきました✨)

 

今回は、はてなブログでのカスタムという事で紹介させてもらいましたが、これって「他のブログサービスでも使えるのか」、、気になりませんか??

 

という事で!!! 「Blogger(ブロガー)」で、英語ブログの運営を始めた私が、早速使えるのか試してみました^^

 

Blogger(ブロガー):Googleが提供する無料ブログサービス

まだまだ立ち上げたばかりで、恥ずかしくて紹介してなかったのですが、「さるぼろぐ」とは別に、「Japanize note」という海外向けブログを運営している私。

 

💡海外の英語ユーザーの方向けに、英語でブログを作成中なのですが、そこではGoogleが提供する「Blogger」というブログサービスを使っています。

そちらでも今回紹介したカスタマイズが使えるのか試してみました^^

 

 

細かい事は、また追い追い記事で紹介させていただきますが、結論としては、、、、

✨✨「Blogger」でも、問題なくアイコン表示にすることができました✨✨

🔻🔻🔻

japanize-note.comのトップ画面:カテゴリーがアイコン表示に^^

Bloggerを使っているブロガーさんは日本では少ないので、ここでは作成方法はスキップしますが、もし「知りたい!!」という方がいましたら、下のコメント欄で質問してくださいね^^

 

まとめ

無事、アイコン表示にすることができたでしょうか?

読者のみなさんに、見やすいページを提供するのはもちろんの事、見た目を自分好みにカスタムすると、どんどん愛着が湧いてきますよね^^ 

「ど素人」の私でもできたので、心配ありません👍 あなただけのブログを作り上げてくださいね^^