【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

【はてなブログ】サイドバーをボックス化する方法【画像解説】

どうも、ブログ運営者のポチ(@sunrise_033)です。

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。
うさぎ
「はてなブログ」でサイドバーをボックス化したいけど、どうするんだろう?

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

この記事では、「サイドバーをボックス化するカスタマイズ」とと、「個別の見出しを入れるカスタマイズ」の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コードだけで簡単にカスタマイズできるので、初心者の人やコードに詳しくない人でもカスタマイズできちゃいます。

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

NEXT→サイドバーを追従させる方法

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

あわせて読みたい
はてなブログ基本カスタマイズ、手順まとめ【初心者向け】 今回は、はてなブログの基本カスタマイズ記事をまとめてみました。 いろんな方のブログから情報を得て、自分なりにカスタマイズした内容をくわしく見ていきたいと思います。

 

ポチ
この記事が良いと思ったら、ポチっ!してくれると嬉しいです!
↓「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

カスタマイズ性の高いテンプレートやSEO対策機能で、プロフェッショナルなブログを作り、ブログの魅力と集客力を高めましょう!

\ サーバーやインストール不要、2年版でお得!

\ はてなPROで出来るカスタマイズまとめ

コメント

コメントする

目次