最初の頃から少しずつ追加でカスタマイズしていたブログデザイン。CSSもよくわかっていないので、どれが何のカスタマイズがわからなくなり、修正したい部分がありつつもなんとなく放置していました。
このままではいけないと、思い切って最初からカスタマイズを直してみました。今回のカスタマイズで心がけたのはシンプルで見やすいデザイン。レスポンシブではなく、PCとスマホを分けてカスタマイズしました。
参考にさせていただいたページをすべてのせましたので、シェアボタンやカエレバヨメレバまでこのページを見れば全部できるようになっています。（すべてコピペで完成します）
[toc]
【事前準備】コメントアウトをつけておくのがおすすめ
コメントアウトとは、CSSやHTMLに名前を付けておくことです。
コメントアウトの部分は、カスタマイズするときに自分確認できますが、ブログ上では表示されません。
コメントアウトはつけなくてもカスタマイズはできるのですが、見直したり修正するときに、あるとないとではかなりわかりやすさが違います。（サイトによってはもともとコメントアウトでなんのカスタマイズか書いてくれているところもあります）
CSSとHTMLの２種類がわかっていれば大丈夫だと思います。
きれいなデザインにするために配色を考えてみました
シンプルできれいなデザインにするために、配色パターンというのを参考にしました。
このサイトは万人受けする色の上から２番目の配色パターンで作っています。ベストな色の組み合わせというのがあるんですね。
サルワカさんのサイトは他にもCSSのことをわかりやすく書いてくれている記事も多くて勉強になってます。
PC版はMinimalismをベースにしました
今回のカスタマイズはPC・スマホともにこどみすさんのカスタマイズをベースにしています。
PCはこどみすさんが配布されているテーマ「ミニマリズム」を使用しました。
こちらのページで
- シェアボタン
- 見出し
- ヘッダー
- グローバルメニュー
も
スマホの基本カスタマイズ
- シェアボタン
- 見出し
- ヘッダー
- グローバルメニュー
- プロフィール
- フォローボタン
も
アドセンスコードはこちらでPCもスマホも
文中や記事下に自動で入れているアドセンス。
こちらのサイトを使って自動でコードを作成しました。
文中も記事下も横並びもPCもスマホも全部こちらのサイトでOK。ものすごく助かります。
広告を入れたくない記事もあるのですが、カテゴリー指定でできるようになってます。
twitter埋め込みしてみました
PCのサイドバーにツイッターを埋め込んでみました。ワードプレスだけだと思っていたのですが、はてなブログでもできるんですね。
カスタマイズもしてみました。 souken-blog.com
カエレバヨメレバのカスタマイズはやっぱりもっちさん
カエレバヨメレバのカスタマイズはもっちさんのもの。
happylife-tsubuyaki.hatenablog.com
他の方が公開されているものも試したんですが、記事によってはボタンが縦長になったりボタンが表示されなかったり。コードもちょっと見てみてもよくわからず対応できませんでした。
もっちさんのこちらのコードは確認する限り、どの記事でも表示崩れなくきれいに表示されていて助かりました。
前回のカスタマイズ時、できなかったときに声をかけていただいてお世話になっています。
スマホデザインはこちらを参考にしました。
かなり思い通りのデザインになりました！
久しぶりに大幅にデザインを変更しましたが、（１年以上前）何となくわかる部分が増えています。自分の成長も感じることができました。わからないなりにも調べたりしながら試行錯誤すると少しずつ分かってくるものですね。
ただ、サイト名が長いのでスマホ画面でタイトルが入り切りません。ヘッダ画像を作成するかサイト名変更が必要なようです。（とりあえずヘッダ画像を作成予定）
とはいってもまだコピペしかできないレベル。自分でもう少しデザインをカスタマイズできるようになりたい。
