【レスポンシブ対応】ブログをリニューアルしたので使用したカスタマイズをいっきに紹介する！！
どうも！なめこちゃんです！！
前からやろうやろうと思っていたブログのカスタマイズを気が向いたので一気にしてみました！！
ブログの名前も「ブログと芝居と音楽とか。」から「なめこちゃんじる！！」に変更しました！
今後も役者の日常や趣味の音楽のことなどをつらつらと書いていきますのでよろしくお願いします！！
今回は、使用したカスタマイズデザインを紹介していきます！
見栄えはかなり良くなったと思うので、カスタマイズで悩んでいる方の参考に少しでもなればと思います
それではいっていましょ！
ブログをカスタマイズで意識した事
今回、ブログを全面リニューアルした目的は、
・PCとスマホでのサイトのイメージを統一させたい
・ブログ見てくれる人にとって見やすい環境にしたい
・おすすめ記事への誘導リンクの変更を楽にしたい
この３つを意識してブログ作りを始めました！ グーグルアナリティクスによると、このブログもスマホからのアクセスの方がが多いです
それを意識すると自然とこんな感じになってきました！
シンプルで、見やすく、更新が楽なサイトを目指して以下のカスタマイズを施して行きました！！
はてなブログで仕様したテンプレート
PCとスマホで表示形式を統一するという目的を達成するには、やっぱりレスポンシブデザインのテーマ！
たくさんあるテーマの中から、イメージカラーも自由にカスタマイズできるという理由からCONTENTSを使わせていただきました！
www.dreamark.tokyo
丁寧なカスタマイズ記事のおかげで、簡単にグローバルメニューを追加できました！
最初の状態だと太字にした部分にピンクの蛍光マーカーが引かれてしまっていて、少し見づらい気がしたので無効化しています
色の変更はこちらの記事を見ながら密柑（太陽）に変えています www.dreamark.tokyo
使用したカスタマイズ
h2タグの見出し
今回使用したテンプレートに最初設定されていたh2タグの見出しがしっくりこなかったので変更しました
こちらの記事から、見出しカスタマイズ6を色を変更して使わせていただきました！！ www.tsubasa-note.blog
そのまま使うとスマホ画面での表示がうまくいかないので、こちらの記事で一番最初に書いてあるコードで一度、h2タグのデザインを無効化させています
参考にされる方はご注意を！！
フォローボタン
レスポンシブデザインに対応したフォローボタンを設置しています
こちらを使用させていただきました！ www.yukihy.com
設置した場所は、記事上・記事下・サイドバーのプロフィール下の三か所！！
レスポンシブデザインなのでPC表示では大きく、スマホ表示やサイドバーでは小さく表示されてとてもお気に入りです！！
シェアボタン
シェアボタンも同じくレスポンシブデザイン対応のものを設置！
使用したのはこちら！ www.yukihy.com
このシェアボタンのすごいところは、スマホでブログを表示するとLINEのアイコンが現れるところです！！
良いと思ってもらえた記事を友達なんかと簡単にシェアできるのは便利だと思って、このシェアボタンを選びました
フォローボタンが白を基調にしたものにしたので、カラフルなシェアボタンの方がバランスが取れていい感じ！！
TOPページの変更
トップページに記事がだらだらと続いたり、毎回続きを読むボタンを設置したりするのが面倒なので、TOPページが記事一覧で表示されるように変更しました！！
参考記事はこちら！ www.bombkun.com
ページトップに戻るボタンの設置
いろいろなサイトを見ていて、意外と使うことの多いこのボタン！！
僕のブログにも設置しました！！ blog.mshimfujin.net
読了時間を表示
滞在時間やはてなブックマークされる確率が高くなるらしいカスタマイズを入れてみました！
効果のほどはいかに！？ www.tsubasa-note.blog
サイドバーの固定
レスポンシブデザインのテーマにしたので、記事下に設置させていた合わせて読みたいのプラグインの設置をやめました！
これでスマホで表示したときもスッキリするかとは思ったのだけれど、PCで最後まで記事を読んでくれた人に別記事への誘導ができなくなってしまった：(；ﾞﾟ'ωﾟ')：
これは大問題！！
ということでこのカスタマイズを使って対応する事にしました！！ shiromatakumi.hatenablog.com
サイドバーの一番最後の項目を画面上で固定するというカスタマイズ
これで関連記事を追尾させることでこの問題を解決してみました！！
工夫するのって大事(笑)
おすすめ記事のリンクを枠で囲って目立たせる
記事下におすすめ記事へのリンクのコーナーを作りました！！ shiromatakumi.hatenablog.com
色もオレンジでデザインに統一性が出ました
レスポンシブデザインにしたので、ここをいじるだけでおすすめしたい記事への導線を簡単に確保できるようになったよ！！
これがやりたかった！！(笑)
記事直下にアドセンス広告をいれる
記事下ではなく記事直下にアドセンスを入れると効果があるらしいので加えてみました！ kumoaozora.hatenablog.com
レスポンシブデザインなので広告を２つならべてしまうとスマホ表示の時にデザインが崩れてしまうので、2個並べは使っていません
代わりに、記事下にも広告を入れてみました！
この恩恵がどれくらい出るのかはわからないけど、ブログのデザインがいい感じになったので満足！！
最後に
満足のいくブログデザインに仕上がりました！！
あとは記事を追加していくだけ
収益が増えていくことを願っています！！
すべてはグーグル神のみぞ知るって感じ(笑)
アドセンスを記事中にまえは入れていたのだけれど、やめました！
今は、必死に書いた記事を最後まで読んでもらいたい思いの方が強いから！！
がっつりとしたマネタイズについては、たくさんの人に記事を読まれるようになってからにしたいと思います
たくさんの方の記事やいろいろなブログを参考にカスタマイズしてきました！
本当にありがとうございます！！
満足のいくブログが完成したところで更新を頑張っていこうと思います！！
ではではー！！
