さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

【はてなカスタマイズ】サイドバーをボックス化する【見出しも作れる】

f:id:sanrisesansan:20201222211010p:plain

「はてなブログ」でサイドバーをボックス化したいけど、どうやるの?

そんな疑問のお答えします。

今回は、「サイドバーをボックス化するカスタマイズ」とと、「個別の見出しを入れるカスタマイズ」の2つを紹介していきます。

完成系はこちらです。

①ボックス型の例

f:id:sanrisesansan:20201222175351j:plain:w330

(これは、当ブログ「さんログ」プロフィール欄)

②個別の見出しの例

f:id:sanrisesansan:20201222175356j:plain:w330

(こっちは、サイドマップの見出し枠)

こんな感じでカスタマイズできます。


スポンサードリンク

なんで「サイドバー」デザインにこだわるの?


そもそもなんで、サイドバーデザインにこだわるの?ってことを話します。

最近はスマホからの検索需要も増え、Google先生も評価としてモバイルユーザーへの見易さを重要視しています。

でも、「サイドバー」ってスマホだと、記事の下、スクロールをいっぱいしたところに表示されるから、初見で読者の目に触れない。

しかし、個人的には、サイト検索されているデバイスの約3割はPCサイトから訪問してくれています。

3割って結構大きいと思う。

PCの場合、「サイドバー」は、記事横に表示されていることが多いので、タイトルの次に目に付く場所でもあります。

(ブログでよく使われるZとFの法則というやつ。)

なので、サイドバーを見やすい内容にした方が、読んでくれる人がわかりやすいし個性を出しやすいかったりします。

貼り付ける場所→サイドバー「HTML」

で、早速カスタマイズにいきたいのですが、先に参考にさせていただいたガテン系ブロガー「フジグチさん」のサイトを貼っておきます。

コピペして定型文に登録するだけ!見たまま編集で使える囲み枠 - フジブロっ!

詳しいコードの説明などが載っていますので、よかったらどうぞ。

(「フジグチさん」のサイトにはいつもにお世話になってます。)

このカスタマイズの手順は、

・はてな記事編集で内容作成

・サイドバーの「HTML」に貼り付ける

このようになります。

貼り付ける場所は、サイドバーの「HTMLモジュール」です。

デザインカスタマイズ(スパナマーク)サイドバーモジュールの追加HTMLに貼り付けます。

f:id:sanrisesansan:20201222165452j:plain:w330

f:id:sanrisesansan:20201222165448j:plain:w330

次に、HTMLを見ていきます。

①「ボックス型」として表示するHTMLコード

①のカスタマイズは、当ブログ「さんログ」プロフィール欄を例に見ていきます。

f:id:sanrisesansan:20201222175351j:plain:w330

↑このカスタマイズができます。

HTMLコードは下記になります。

<div style="padding: .5em 1em; margin: 2em 0; border: solid 2px #333; background: #fff; box-shadow: 4px 4px 0 #cacaca;">表示させたい内容</div>

背景色はbackground: 部分で変更できます。

詳しいカラーコード一覧はこちらから調べてみてください。

WEB色見本 原色大辞典 - HTMLカラーコード

表示させたい内容には、「はてな編集画面のHTML編集」で内容を作成して、コードをコピペして貼り付けます。

②「見出し」として表示するHTMLコード

②のカスタマイズは、「見出し」として表示する方法です。

サイドバーにオリジナルの見出しを入れたい時などに使えます。

f:id:sanrisesansan:20201222175356j:plain:w330

↑このカスタマイズができます。

HTMLコードは下記になります。

<div style="padding: .5em 1em; margin: 2em 0; border: solid 2px #333; background: #000; box-shadow: 4px 4px 0 #cacaca;"><span style="color: #ffffff;"><strong>タイトル</strong></span></div>

背景色はbackground: 部分で変更できます。

(カラーコードのリンクは上記参照)

ブログのイメージに合わせて変更してみてください。

表示したい内容→「はてな記事編集」で作成

表示したい内容は、「はてな記事編集画面」で作成します。

f:id:sanrisesansan:20201222180731j:plain

こんな感じで、いつも記事を書くように作成してOKです。

f:id:sanrisesansan:20201222173517j:plain:w660

ここに上記のボックスHTMLコードを「HTML編集」にして、貼り付けます。

見たままモード(プレビューでも良いよ。)で正しく表示されていることを確認してみてください。

正しく表示されていたら「HTML編集」コードをコピペして「サイドバー」に貼り付けて完了です。

f:id:sanrisesansan:20201222174852j:plain:w660

このような感じになります。

まとめ

HTMLコードだけで簡単にカスタマイズできるので、初心者の人やコードに詳しくない人でもカスタマイズできちゃいます。

サイドバーのデザインが変わると全体のサイトの印象が変わるので、ぜひ試してください。

最後まで読んでいただき、ありがとうございます。

関連記事

www.sunrise033.com


この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

 「ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村