はてなブログでメニューバーとSNSボタンを設置する方法
こんにちは!IT女子のちーさんです。
無料会員でも非エンジニアでも、はてなブログのカスタマイズを楽しみたい!という方向けに、記事を書いています。
前回は、見た目を整える方法について解説しました。
今回は、機能性を高めるためのデザイン変更、「メニューバー作成」と「サイドバー編集」の方法を紹介します!
今回行うデザイン変更について
最初に、今回解説することが私のブログのどの部分か、説明します。
メニューバー
メニューバーがあると、いろんな記事を見たいユーザーにとってはとても便利ですよね。
カテゴリに合わせた記事が一覧で見ることもできるので、自分にとっても便利です。
サイドバー
はてなブログでは、サイドバーを自由にカスタマイズすることができます。
今回は、SNSボタンをつける方法について解説します。
メニューバーを作成する方法
ステップ【1】コードを手に入れる
まずは、メニュー作成用のCSSとHTMLコードを入手します。
「ブログ メニュー作成」などで検索すると出てきます。
私が参考にしたサイトはこちらです。
ステップ【2】CSSにコードをコピペ
管理画面デザイン→カスタマイズ→デザインCSSの順に開きます。
ここに、コピペしたCSSを貼り付けましょう。
この時点では、何も起こりません。
ステップ【3】HTMLを記述する
管理画面デザイン→カスタマイズ→ヘッダーの順に開きます。
ここにコピペしたHTMLコードを貼ります。
デフォルトでは以下のようになっています。
<div id="menu">
<div id="menu-inner">
<div id="btn-content">
<span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
</div>
<ul id="menu-content">
<li>
<a href="1階層目のリンク">カテゴリ1 <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="2階層目のリンク">カテゴリ1-1</a></li>
<li><a href="2階層目のリンク">カテゴリ1-2</a></li>
<li><a href="2階層目のリンク">カテゴリ1-3</a></li>
<li><a href="2階層目のリンク">カテゴリ1-4</a></li>
</ul>
</li>
<li>
引用:Yukihy Life
「カテゴリ1」のところに、自分のサイトからカテゴリ名を持ってきてコピペします。
私のサイトの場合、「webサービス体験談」です。
「1階層目のリンク」のところに、カテゴリ1が入っているURLをコピペします。
私のサイトの場合、以下のURLになります。
webサービス体験談 カテゴリーの記事一覧 - IT女子ちーさんのwebろぐ
これを全てのカテゴリで繰り返します。
さらに細かいカテゴリがある場合は、「カテゴリ1-1」のところで同様の操作をします。
ない場合は、その部分は消します。
これでメニュー完成です!
スマホで見ると、こんな感じ。
サイドバーにSNSボタンを設置する方法
管理画面デザイン→カスタマイズ→サイドバーと開きます。
はてなブログのサイドバー編集では、「プロフィール」「検索」など基本的なメニューがすでに入っています。
ちなみに、ツイッターのフォローボタンは「プロフィール」から設置できます。
LINEやFacebookのSNSボタンを置くには、「モジュールを追加」から「HTML」を選びます。
HTMLでは、SNSボタンに限らず、いろんなものを設置することができます。
私のブログの赤枠部分の記述は以下のようになっています。
<a href="https://line.me/R/ti/p/@bns9746c"><img height="10" border="0" alt="友だち追加" src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png"></a>
<p>公式facebookページ</p>
<iframe src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/itchihiro/?modal=admin_todo_tour&width=149&layout=button&action=like&size=large&show_faces=true&share=true&height=65&appId" width="149" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<p>ご意見・ご質問はこちらまで(★を@にしてください)【i.chihiro93115★gmail.com】</p>
facebookボタンはこちらから作成できます。
いいね!ボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook
ただし、個人ページでは作れなくなってしまったので公式ページを作る必要があります。
SNSボタン以外にもいろんなことで試してみてもいいですね!