サイトのデザイン変更して少しだけオシャレで今風な感じにしました。
[2014-02-01追記]
これ、間違ってました。細字というのは今のブラウザで対応している物はないみたいです。
太字がダサいってだけだったんですね…
細字が今風
タイトルで言い切ってる感じなんですが、タイトルを細字にするだけで、なんかオシャレな感じが格段にアップします。
変更前はこんな感じでした。
なんか変だと思ってたけど、文字が太いんですね。もさい。たぶん何もしないとこんな感じになると思います。
細字にするとこんな感じになります。
全然、オシャレになってるじゃないですか!
これ、CSSで「font-weight: 300;」を指定して文字の線を細くしてるんです。font-weightは400で普通の文字の太さになるらしいです。
細くするだけだとインパクトが弱くなる気がしたので代わりにフォントサイズは大きくしています。本文の二倍にしてます。
なんか今風な感じになった気がする。
アイコンがあるとなんかプロっぽい
気づきました? 投稿日時と投稿者のところがアイコンになってるんです。
ここはWebフォントというネット経由で自動的にフォントをダウンロードして表示する機能を使っています。Genericonsというフォントなんだけど、中身はアイコンという変わったフォントを使っています。これに関してはすんません詳しい使い方は他のサイトを探してみてください。結構導入に苦労しました。ちなみに日付や投稿者の文字も細字にしています。
私はTwenty Elevenの子テーマを作っていろいろカスタマイズしているのですが、Twenty Fourteenテーマ中からgenericonsディレクトリだけをコピーして、WordPressのfunction.phpに以下を追加しました。
/**
Twentyfourteenテーマから一部移植
*/
function twentyfourteen_scripts() {
// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_stylesheet_directory_uri() . '/genericons/genericons.css', array(), '3.0.2' );
}
add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );
あとはcssに…
.entry-date a:before {
content: "\f303";
margin-right: 1px;
font: normal 1rem Genericons;
position: relative;
top: 4px;
}
.author a:before {
content: "\f304";
margin-right: 1px;
font: normal 1rem Genericons;
position: relative;
top: 3px;
}こんな感じで追加しました。 content: “\f304”;ってなってるところがいろんなアイコンによって変わってきます。
WordPressの新テーマは勉強になる
今回の変更ですが、この前リリースされたWordPress3.8で追加されたテーマの「Twenty Fourteen」を参考にしているんです。
Twenty Fourteen | A beautiful magazine theme
かっこいい(笑)
でも、うちのサイトの場合本文の最初に画像を貼るパターンで記事作ってしまっているので、Fourteen使うとアイキャッチの画像と本文の画像がダブって表示されて変なのよね。サイトのロゴも黒背景にマッチしないし。
ただ、タイトルの文字やアイコンがかっこよかったので、いろいろ研究させてもらいました。こういう時にSafariの右クリックして「要素の詳細を表示」が凄く役立つ。
タイトルだけではなくて記事の最後に前後の記事のリンクをタイトル付きで出すようにしました。これもFourteenのテーマから使わせてもらいました。あ、記事の下に付いているタグの表示も真似させてもらいました。
毎年WordPressのテーマは新しい標準テーマが追加されていくんだけど、今回のは特に勉強になりました。みなさんも参考にしてみてはどうでしょうか?
