超簡単！はてなブログでサイドバーをカスタマイズする方法
スポンサードリンク
こんにちは！
ブログを始めたばかりの私ですが、サイドバーのカスタマイズをやってみたい！と思ったのでその方法をご紹介します。
初心者の方にも分かりやすいよう、初心者がお伝え致します(笑)
サイドバーとは
サイドバーとは、ソフトウェアの操作画面やWebページなどの左端や右端に配置された縦長の表示・操作領域のこと。操作メニューや補助的な情報、（Webページの場合）広告などの表示に用いられることが多い。
サイトの側面（右・左）に設置されているプロフィールや検索、最新記事などが載ってる部分になりますね。
右に配置するか、左に配置するか、私は左側が良いと思います。
文章は左から右に読みますし、左の方が慣れています。
しかし、どっちが良いか悩むという方はこちらの記事を参考にしてみてはいかがでしょうか？
参考記事↓↓
【ブログ】右サイドバーと左サイドバーどちらが良いのか？ | Last Day. jp
サイドバーの設定
はてなブログでは、サイドバーの設定は管理画面から「デザイン」→「スパナみたいなやつ」→「サイドバー」になります。
ここにサイドバーに入れたコンテンツを入れていくという感じですね！
サイドバーに何を入れたらいいのか分からない
元々の設定ではプロフィール、検索、最新記事あたりが入っていると思います。
自分で付け加えるなら何を追加した方がいいのか悩む
POINT
- 分かりやすい
- 読みやすい
- 調べやすい
サイトを訪問した人が次の行動をしやすいようにしてあげることが大事。
よく分からないから何でも入れてしまえ！というのは訪問者にとっては情報を整理するのも大変ですしサイドバーが見にくくなります。
サイドバーに入れるのは、
- プロフィール
- おすすめ記事ランキング
- ソーシャルボタン
このあたりが最適ではないでしょうか。
サイドバーの背景色を変える
ここからは見た目のカスタマイズになります。
サイドバーの色を変える設定は、管理画面から「デザイン」→「スパナみたいなやつ」
→「デザインCSS」
/* サイドバー */
.side{
background-color: 好きな色; /*背景色 */
}
カラーコードはこちらから↓↓
サイドバーの項目部分を変える
せっかくなので、サイドバーにある項目の部分もカスタマイズしていきましょう。
こちらの記事を参考に作業を進めていきます。
今回使用したデザインはこんな感じのやつです
───プロフィール───
シンプルなものを選びました！
/* サイドバー 直線重ねる */
.hatena-module-title {
color: #555;
font-size: 120%;/* 文字サイズ */
position: relative;
text-align: center;
display: -webkit-flex;
display: flex;
padding: 0;
margin-bottom:15px;
align-items: center;
}
.hatena-module-title::before,
.hatena-module-title::after {
content: '';
flex-grow: 1;
background-color:#555;
height: 1px;
}
.hatena-module-title::before {
margin-right: .5em;
}
.hatena-module-title::after {
margin-left:.5em;
}
コピペでOKだから簡単だね！
アイコンを入れたい
せっかくなら分かりやすいアイコンでもひとつ入れたいですよね。
なてなブログの純正アイコンがありますので、今回はこちらを使います。
純正アイコンは１２０種類程あるそうなので、その中から自分が使いたいアイコンを選びます。
.hatena-module-title::before {
content:"\f004";
font-family: blogicon;
}
赤い文字のところを好きなアイコンのコードに変更してください。
これを先程のデザインのCSSに追加します。
これでサイドバーにアイコンを設置することが出来ます。
注意点
しかし、こちらのコードでは全部の項目の前にアイコン（同じやつ）が表示されるので項目ごとにアイコンを変えたいという場合にはそれぞれで設定する必要があります。
参考記事↓↓
また、アイコンを入れたことによってサイドバーのデザインが崩れる場合があります。
上記で紹介したデザインコード（───プロフィール─── のやつ）にアイコンを入れようとしたところデザインが崩れてしまいました。
他の背景だけのデザインとかだとアイコンもちゃんと表示されるみたいですね・・・。
背景だけのCSS
/* サイドバータイトル */
.hatena-module-title {
position: relative;
color: #fff;/* 文字色 */
background-color: 好きな色;/* 背景色 */
font-size: 120%;/* 文字サイズ */
font-weight: bold;/* 太字 */
margin-bottom: 15px;/* 下余白 */
padding: .5em 0 .5em 1em;/* 左内余白1em */
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;/* フォント指定 */
}
これに先程のアイコンのコードを足して下さい！
最後に･･･
サイドバーのカスタマイズも色んなデザインがあることに驚きです！
可愛いデザインが多くてどれにしようか本当に悩みます・・・。
皆さんもカスタマイズを楽しんで下さい！
ありがとうございました。
