はてなブログProでデザインを楽しむ！当ブログで行ってきたカスタマイズまとめ！
こんにちは。旅好きママブロガーのナナミ（@mumlovestravel） です。
最近、記事を書かずにブログのデザインをちょくちょく変えていました。そこで、備忘録も兼ねて当ブログで行ってきたデザインカスタマイズをまとめます！
当ブログで行ってきたカスタマイズまとめ！
Blog / christophe.benoit74
当ブログは、はてなブログPro版を利用しています。Proにするとカスタマイズできる幅が大幅に広がります！
最近、デザインをいろいろとカスタマイズしてきたので、簡単にできるカスタマイズをご紹介します！
PC・スマホ共通
PC・スマホ共通でのカスタマイズは以下の項目を変更しています。
- 目次
- 見出し
- シェアボタン
- フォローボタン
- パンくずリスト
- カエレバ
- リンクボタン
- 参考・関連記事
目次
はてなブログの場合、［：contents］と記入することでそこに目次が入ります。
参考：
ゆきひーさんのブログにははてなブログでカスタムできる情報がたくさんあり、よく使わせて頂いています！
上記のコードを足して目次をアレンジしています。
ただ、上記のコードだとスマホ版でうまくいかなかったため、スマホ版では下記も参考にさせて頂きました！
参考：
見出し
大見出しは吹き出しを利用しています^^
参考：
シェアボタン
参考：
フォローボタン
参考：
ゆきひーさんのブログには、他にもたくさん使える情報が掲載されています！
パンくずリスト
参考：
カエレバ
アマゾン、楽天などのアフィリエイトを貼る際に便利なカエレバ！
参考：
リンクボタン
参考：
参考・関連記事
記事内で参考記事や関連記事、記事下のおすすめ記事のURL前の文字を強調してわかりやすくしました。
⇩こんなやつです。
おすすめ記事寄稿、記事広告の執筆依頼募集中！バナー広告も受付中！
下記の記事の内容とは違うのですが、紹介されているコードを使用しました！
PC版
PC版のみは以下の項目を変更しています。
- おすすめ記事リスト
- ナビゲーションバー
- 合わせて読みたい
- トップへ戻るボタン
- 続きを読むボタン
- サイドバー固定
おすすめ記事リスト（画像付き）
当ブログはブログテーマInnocentを利用させて頂いているんですが、こちらで利用できるおすすめ記事リストを導入しました！
見た目がオシャレに見えて気に入っています！
参考：
ナビゲーションバー
参考：
合わせて読みたい
参考：
トップへ戻るボタン
参考：
続きを読むボタン
参考：
サイドバー固定
サイドバーのプロフィールをスクロールしても固定するようにしました^^
スマホ版
スマホ版は以下の項目を変更しています。
- 追尾ヘッダの削除
- タイトル文字
- ナビゲーションバー
- 固定メニューバー
- 記事一覧の日付・画像
- おすすめ記事の囲み枠
追尾ヘッダの削除
追尾ヘッダ以外も削除している部分があります。
参考：
タイトル文字
cssの.blog-title内に指定したいフォントタイプを追加しました。
参考：
ナビゲーションバー
参考：
固定メニューバー
参考：
記事一覧の日付・画像
参考：
おすすめ記事の囲み枠
フッダに表示しています。３つのおすすめ記事を囲みました！
参考：
michiko-70554148.hatenablog.com
追記（2017年5月14日）
上部の人気記事とおすすめ記事の囲み枠を変更しました！
下記を参考にさせて頂きました！
トップタイトル部 追記（2017年5月7日）
トップのタイトル部分からスライド画像を変更しました！
下記の記事を参考にさせて頂きました！
ありがとうございます。
最後に
参考にさせて頂いた皆様、ありがとうございました^^
