節約ママの暮らしを豊かにするヒント

1歳の娘を育てながらOLとして働くワーキングマザー。育児・ブログ運営・格安SIM(MVNO)・節約の話題多し。無理せず節約しながら、毎日を豊かに暮らすためのヒントを発信します。

コピペだけ!ブログデザインのカスタマイズしました【はてなブログ】

f:id:Sachit:20180220143807p:plain

最初の頃から少しずつ追加でカスタマイズしていたブログデザイン。CSSもよくわかっていないので、どれが何のカスタマイズがわからなくなり、修正したい部分がありつつもなんとなく放置していました。

このままではいけないと、思い切って最初からカスタマイズを直してみました。今回のカスタマイズで心がけたのはシンプルで見やすいデザイン。レスポンシブではなく、PCとスマホを分けてカスタマイズしました。

参考にさせていただいたページをすべてのせましたので、シェアボタンやカエレバヨメレバまでこのページを見れば全部できるようになっています。(すべてコピペで完成します)

【事前準備】コメントアウトをつけておくのがおすすめ

コメントアウトとは、CSSやHTMLに名前を付けておくことです。

programming-study.com

コメントアウトの部分は、カスタマイズするときに自分確認できますが、ブログ上では表示されません。

コメントアウトはつけなくてもカスタマイズはできるのですが、見直したり修正するときに、あるとないとではかなりわかりやすさが違います。(サイトによってはもともとコメントアウトでなんのカスタマイズか書いてくれているところもあります)

CSSとHTMLの2種類がわかっていれば大丈夫だと思います。

きれいなデザインにするために配色を考えてみました

シンプルできれいなデザインにするために、配色パターンというのを参考にしました。

saruwakakun.com

このサイトは万人受けする色の上から2番目の配色パターンで作っています。ベストな色の組み合わせというのがあるんですね。

サルワカさんのサイトは他にもCSSのことをわかりやすく書いてくれている記事も多くて勉強になってます。

PC版はMinimalismをベースにしました

今回のカスタマイズはPC・スマホともにこどみすさんのカスタマイズをベースにしています。

PCはこどみすさんが配布されているテーマ「ミニマリズム」を使用しました。

hitsuzi.hatenablog.com

こちらのページで

  • シェアボタン
  • 見出し
  • ヘッダー
  • グローバルメニュー

スマホの基本カスタマイズ

hitsuzi.hatenablog.com

  • シェアボタン
  • 見出し
  • ヘッダー
  • グローバルメニュー
  • プロフィール
  • フォローボタン

アドセンスコードはこちらでPCもスマホも

文中や記事下に自動で入れているアドセンス。

こちらのサイトを使って自動でコードを作成しました。

www.kanamalu.com

文中も記事下も横並びもPCもスマホも全部こちらのサイトでOK。ものすごく助かります。

広告を入れたくない記事もあるのですが、カテゴリー指定でできるようになってます。

twitter埋め込みしてみました

PCのサイドバーにツイッターを埋め込んでみました。ワードプレスだけだと思っていたのですが、はてなブログでもできるんですね。

Twitter Publish

カスタマイズもしてみました。 souken-blog.com

カエレバヨメレバのカスタマイズはやっぱりもっちさん

カエレバヨメレバのカスタマイズはもっちさんのもの。

happylife-tsubuyaki.hatenablog.com

他の方が公開されているものも試したんですが、記事によってはボタンが縦長になったりボタンが表示されなかったり。コードもちょっと見てみてもよくわからず対応できませんでした。

もっちさんのこちらのコードは確認する限り、どの記事でも表示崩れなくきれいに表示されていて助かりました。

blog.setsuyakumama.net

前回のカスタマイズ時、できなかったときに声をかけていただいてお世話になっています。

スマホデザインはこちらを参考にしました。

www.yukihy.com

かなり思い通りのデザインになりました!

久しぶりに大幅にデザインを変更しましたが、(1年以上前)何となくわかる部分が増えています。自分の成長も感じることができました。わからないなりにも調べたりしながら試行錯誤すると少しずつ分かってくるものですね。

ただ、サイト名が長いのでスマホ画面でタイトルが入り切りません。ヘッダ画像を作成するかサイト名変更が必要なようです。(とりあえずヘッダ画像を作成予定)

とはいってもまだコピペしかできないレベル。自分でもう少しデザインをカスタマイズできるようになりたい。