WordPressでウィジェットタイトルやh2、h3タグのCSSをカスタマイズ

思い立って、このブログの見栄えを少しカスタマイズしました。以前から自分でも見づらいと感じていて、少し変更したいなーでも時間ないし面倒だなーと思っていましたが、この記事を読んだらうずうずしてきて、カスタマイズしてしまいました。

NUMBER333のPC用WordPressテーマを新しく作成しました。今回覚えたテクニック7つをメモを兼ねてご紹介するので参考にどうぞ! | iPhone・Macの情報発信ブログ “NUMBER333”

いくつか変えたところを書いておきます。

 

記事およびサイドバーの見出しを変更

見出しをデザインすると、区切りを人が認識しやすくなるので、可読性が上がります。今回一番気になっていたのが、サイドバーの見出しだったので、そこから着手しました。(サイドバーの見出しのことを、ウィジェットタイトルと呼ぶそうです。)

 

ウィジェットタイトルのCSSカスタマイズ

あまり日頃CSSなどを読み込んでいるわけではないので、久しぶりに触ると「どのあたりを編集するんだっけ?」と探すところから始まります。

ただ、Wordpressの良いところはネット上にいろんなカスタマイズに関する情報が掲載されていることです。ウィジェットタイトルの見直しも、ここを参考に行いました。今回は、背景をつけて見出し部分を認識しやすく変更しています。

TwentyTwelve サイドバー/ウェジェットタイトルの表示変更 | 初めてのワードプレス カスタマイズ

 

エントリー記事にあるh2、h3タグのCSSカスタマイズ

エントリー本文で良く使うh2、h3タグもカスタマイズしました。こちらも、思いっきり以下の記事を参考にさせていただきました。すみません。僕にとってはやりたいことがすごいストライクに書いてありました。

CSSで見出し(h1,h2,h3)の装飾|WordPressのカスタマイズ|ワードプレス | みみみんメモ

 

配色を考える

冒頭でご紹介した記事に、カラーパレットに関する記載がありました。これ、いいなーと思ったので、CSSをカスタマイズして色付けしていくときに、適用してみました。まあ、あまり多く色を使っていないので、劇的な変化はない気がしますが。

Palette / don’t you go down :: COLOURlovers
[browser-shot url=”http://www.colourlovers.com/palette/625987/dontyougo_down” width=”600″ height=”450″]

配色を外すことがないということと、具体的な色のコードまで示されているので、すごい使いやすかったです。

 

その他細々と

プラグインのSharebarを使っていたのですが、どの程度効果があるのかわからなかったことと、単に記事を見づらくしてるんじゃないかと思えてきたので、外しました。SNSへシェアされたい方は、記事下にボタンがありますので、そちらをご利用ください。

あと、アドセンスの位置も今回を機に見直しています。ヘッダーにあるの、うざいなと。

 

おまけ:CSSカスタマイズ中はCloudflareを一時的に止める

一応ブログを速くしたいのでCloudflareを使っているのですが、CSSなどはCloudflare側でキャッシュされてしまうので、どうしようかと思っていました。

今回カスタマイズする中でついでに調べると、解決策が丁寧に書かれていて助かりましたよ、と。

CDNサービス「CloudFlare」で一時的にキャッシュをOFFにする方法 | gori.me(ゴリミー)

 

意外にやり始めると面白くなるんですよね、コーディング。もっと勉強したいなー。