このブログを作る際、twentyelevenのCSSで変更したこと


ここのブログでは、WordPressに標準で入っているtwentyelevenというテーマを少し改造したものを使っています。今回はどこをどう変更したのか、その一部を書いていきます。

Before

before

After

after

ヘッダー背景をデコレーションに

Before

ヘッダー背景をデコレーションに

After

ヘッダー背景をデコレーションに

ヘッダーの背景にCSS3のグラデーション機能で色をつける変更をしました。ただ、CSS3の機能を使ってみたかっただけ。IEには対応してないので、IEでは単色で表示されているはずです。

ナビゲーション等の角を丸く

Before

ナビゲーション等の角を丸く

After

ナビゲーション等の角を丸く

ナビゲーションやメインのコンテンツ、サイドメニューなどの角をborder-radiusで丸くしています。ただ、CSS3の機能を使ってみたかっただけ(二回目)

一つの段落(pタグ)に1文字分のインデントを入れる

Before

ヘッダーの幅を細く

After

ヘッダーの幅を細く

一応、見やすいかなと思って、ひと段落ごとにインデントをつけています。改行一つ分だと、同じ段落だと判断されてしまうようなので、たまに全角スペースを使うこともありますが。

ヘッダーの縦幅を細く

ヘッダーの幅を細く

After

ヘッダーの幅を細く

どうやらこの縦幅は、タイトルやブログの説明部分にかかってるpaddingが原因のようなのでそれを0に変更。

他にもエントリーのタイトルフォントを少し大きくしたり、マージンやパディングをいろいろ変更したりあるのですが、どの部分か自分もはっきり覚えてるわけではないのでこのあたりで。

なお、このブログではキーボードのCを押すだけでスタイルシートを変更するように設定しています。試しに、Cキー(1月29日追記:Ctrl+Cで文字列コピーしようとしても変更しちゃうので、/キーに変更しました)を押してみてください。あっ、もう一度押しても元に戻らないので注意。

なお、代替スタイルシートとして、元のtwentyelevenのCSSを指定しているので、代替スタイルシートが使えるブラウザでは試しに変更してみてください。IEならメニューの表示(Altキー+Vキー)→スタイル→twentyeleven。Firefoxならメニューの表示(Altキー+Vキー)→スタイルシート→twentyelevenとなります。Chromeでの代替スタイルシートへの変更方法は分かりませんでした。調べてもよく分からなかったので、多分できないのだと思われます。

コメントを残す

メールアドレスが公開されることはありません。