IT女子ちーさんのwebろぐ

面白いwebサービス・アプリの紹介を中心に、ユーザー目線でITな情報を発信!エンジニアではないですがweb広告メディア営業が本業のインターネット大好き女子。広く浅く情報収集も好きなので日々の学びもシェアします。主に週末に更新です。

はてなブログでメニューバーとSNSボタンを設置する方法

f:id:i-chihiro93115:20180419130328p:plain

こんにちは!IT女子のちーさんです。

 

無料会員でも非エンジニアでも、はてなブログのカスタマイズを楽しみたい!という方向けに、記事を書いています。

前回は、見た目を整える方法について解説しました。

 

i-chihiro93115.hatenablog.com

 

今回は、機能性を高めるためのデザイン変更、「メニューバー作成」と「サイドバー編集」の方法を紹介します!

 

 

今回行うデザイン変更について

最初に、今回解説することが私のブログのどの部分か、説明します。

 

メニューバー

f:id:i-chihiro93115:20180408111943p:plain

メニューバーがあると、いろんな記事を見たいユーザーにとってはとても便利ですよね。

カテゴリに合わせた記事が一覧で見ることもできるので、自分にとっても便利です。

 

サイドバー

f:id:i-chihiro93115:20180408112114p:plain

はてなブログでは、サイドバーを自由にカスタマイズすることができます。

今回は、SNSボタンをつける方法について解説します。

 

メニューバーを作成する方法

 

ステップ【1】コードを手に入れる

まずは、メニュー作成用のCSSとHTMLコードを入手します。

「ブログ メニュー作成」などで検索すると出てきます。

私が参考にしたサイトはこちらです。

www.yukihy.com

 

ステップ【2】CSSにコードをコピペ

管理画面デザイン→カスタマイズ→デザインCSSの順に開きます。

f:id:i-chihiro93115:20180407163241p:plain

ここに、コピペしたCSSを貼り付けましょう。

この時点では、何も起こりません。

 

ステップ【3】HTMLを記述する

管理画面デザイン→カスタマイズ→ヘッダーの順に開きます。

f:id:i-chihiro93115:20180408113402p:plain

ここにコピペした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-</a></li>

                <li><a href="2階層目のリンク">カテゴリ1-</a></li>

                <li><a href="2階層目のリンク">カテゴリ1-</a></li>

                <li><a href="2階層目のリンク">カテゴリ1-</a></li>

            </ul>

        </li>

        <li>

引用:Yukihy Life

「カテゴリ1」のところに、自分のサイトからカテゴリ名を持ってきてコピペします。

私のサイトの場合、「webサービス体験談」です。

1階層目のリンク」のところに、カテゴリ1が入っているURLをコピペします。

私のサイトの場合、以下のURLになります。

webサービス体験談 カテゴリーの記事一覧 - IT女子ちーさんのwebろぐ

これを全てのカテゴリで繰り返します。

さらに細かいカテゴリがある場合は、「カテゴリ1-1」のところで同様の操作をします。

ない場合は、その部分は消します。

これでメニュー完成です!

スマホで見ると、こんな感じ。

f:id:i-chihiro93115:20180408124142j:image

 

サイドバーにSNSボタンを設置する方法

管理画面デザイン→カスタマイズ→サイドバーと開きます。

f:id:i-chihiro93115:20180408115010p:plain

はてなブログのサイドバー編集では、「プロフィール」「検索」など基本的なメニューがすでに入っています。

ちなみに、ツイッターのフォローボタンは「プロフィール」から設置できます。

LINEやFacebookのSNSボタンを置くには、「モジュールを追加」から「HTML」を選びます。

HTMLでは、SNSボタンに限らず、いろんなものを設置することができます。

f:id:i-chihiro93115:20180408122844p:plain

私のブログの赤枠部分の記述は以下のようになっています。

<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ボタン以外にもいろんなことで試してみてもいいですね!