理想のママにはほど遠い

主婦ネタ・ママネタメインの雑記帳

ブログ全体カスタマイズ 参考記事まとめ

こんにちは、もちみです。

 

ブログのカスタマイズはちょこちょこしているのですが、いつの間にか何をどういじったのか…になってしまっていました。

カスタマイズで参考にした記事はほぼブクマしていたので、今回大幅にいじったのをきっかけに、それらをきちんと整理しました。

履歴を残すためにもこの記事にまとめていきます。(随時追加予定) 

 f:id:nottari:20171013021438p:plain

 

使用したテーマ

www.notitle-weblog.com

説明不要の大人気テーマ、Brooklynを使用させていただいています。

他のテーマに変更したこともあったのですが、やはり使いやすくてこのテーマに戻ってきました。スマホはレスポンシブデザインに対応。

 

ヘッダー

画像

変更前)

f:id:nottari:20170805191710p:plain

変更後)

f:id:nottari:20171007124341p:plain

 

変更前のやっつけ感よ…

本当はココナラとかで注文した方がいいのでしょうが、普段の自分のイラストとクオリティの差が出て悲しくなりそうだったので自作しました。

絵日記の配色もパステル系が多いので、同じようにパステル系の色味にしてみました。

 

レスポンシブ対応

画像ははてな推奨の横1000px×縦200pxで作成していますが、スマホやタブレットで見ると画像が切れるため、こちらの記事を参考にサイズを可変にしました。このサイズの場合、変更する比率箇所の値は20%です。

また、テーマのでデフォルトCSSで余白が40pxに設定されていたので、上のみ30px、それ以外は0pxに修正しました。上だけ30pxなのは、レスポンシブモードだとグローバルナビが上に表示されるのでヘッダ画像に被るのを避けるためです。

#blog-title {
padding: 30px 0px 0px 0px;
}

 

グローバルナビ

サブメニューの表示

本家の方で解説があったので、そのまま流用。

サブメニューがドロップダウンで表示されるのオサレすぎる。

 

色の変更

テーマ配布元のコメント欄でQ&Aみたいなのをやっていて、その内容をまとめてある記事です(多分)。ありがたや~。

元々ナビの色は黒で、シックで男前な雰囲気だったのですが、ヘッダ画像を変えたことで合わなくなってしまったので色味を変更しました。

変更前)

f:id:nottari:20171013004853p:plain

変更後)

f:id:nottari:20171013004903p:plain

一気にブログ全体の雰囲気が変わりました。これはやってよかったです。

同じ記事に書いてあるのですが、brooklynのcssはここにあるので、

http://hatenablog.com/theme/6653586347155924442.css

見出しや、日付欄の色、サイドバーメニューの色など細々変更してます。

昔々(学生時代)cssをちょびっとかじっていたのでこういうのハマります・・・!

 

メニューにアイコン表示

上の画像には反映されてませんが、各メニューにアイコンをつけました。

【Font Awsomeを読み込んでる場合】

【Font Awsomeを読み込んでない場合】

なんとはてなのデフォルトのcssでwebアイコンを読み込んでいるらしいのです(知らなかった!)。これだとFont Awesomeを読み込まなくても使えます。

※Font AwesomeはWEB上で使えるアイコン集。様々なアイコンが使えて便利な反面、サイト表示が遅くなるデメリットもあるとかないとか。うちのブログはシェアボタンカスタマイズの為に読み込んでます。

 

記事タイトル

二重線のものにしました。

 

サイドバー

フォローボタン

洗練されたデザインのこちらを使用。カーソルあてると色が変わるのオシャレ。

 

カテゴリー

階層化し、かつサイドバーでは折り畳み表示されるように。

 

メニューの追従

サイドバーの一番下の項目がスクロールしてもついてくるようにしました。

 

シェアボタン

テーマ配布元で既に用意してあるのをそのままコピペしてます。

 

記事装飾

太文字をマーカー風に

太文字に自動的に色がつきます。こんな感じ

 

背景に色を付ける

これの「背景をグレーにする」を使って、後で色だけ変更しています。他にも色々できるので、この拡張機能入れておくとものすごい便利。

 

リンクを目立たせる

リンク箇所を囲って目立たせてくれます。色味は変更。

 

引用のスタイル変更

引用時の見た目を変えています。色味のみ変更。 

 

広告関連

アドセンス

google神から、「あなたのサイドバーとフッタの広告全然見られてないから改善しなさい」という指摘が来たので、適当に配置してた広告を見直しました。

自分はPC閲覧メインですが、アナリティクスによるとこのブログはスマホ閲覧がほとんど。スマホで見てみると、サイドバーやフッタって記事の下に来るので、そこの広告が見られないのは納得…

ということで記事内に入れました。自動挿入できるなんてすごすぎる便利すぎる。

 

ヨメレバ・カエレバ

ヨメレバ・カエレバで本や商品を紹介するときの見た目を変えました。

 

フッタ

フッタの表示、色も変更。はてなのフッタは非表示にしてます(PRO機能)

フッタつくだけでなんか締まりが出る気がします!

 

TOPへ戻るボタン

右下に「TOPへ戻る」ボタンをつけました。オリジナル画像でやると笑える…!

 

まとめ

あまりに細かいものは省いていますが、およそこのくらいだと思います。

テーマ配布元の「NO TITLE」さんのところには、たくさんネタがまとまっているので何か変えたいときはのぞいています。

 

たくさんカスタマイズしてしまうと、コードが被っていたり、同じCSSを読み込んでいたりすることもあったりで、表示が無駄に重くなってしまう点は注意ですね。

そういうのはバックアップを取ったうえでこつこつ省いたりしました。

  

最後に、カスタマイズがコピペ一発でできるなんて、本当にありがたいです。

配布元の方々に敬意をこめて・・・ありがとうございます。

 

本日は以上です。