このサイトはwordpressというブログツールで構築しています。
wordpressはたくさんのフリーのテーマがありますが、
そのなかでも人気のsuffusionテーマを使わして貰っています。
(wordpress.orgのサイトからだけでも本日まで約40万ダウンロードされているようです)
suffusionテーマはデザインがシンプルなため、デザインで悩まなくて済みます。
色やサイズは専用のインターフェイスで簡単にカスタマイズできますので、
すっきりデザインでよければ、すぐに開設できます。
ここでは、どうしても一部ファイルの中身を自分用に書き換えなければならない箇所や
一部見逃し勝ちなことなどを備忘録も兼ねてまとめておきます。
なお、suffusionのバージョンは3.7.8をもとに書いています。
フォントの大きさ
全体のフォントの色はsuffusion optionsのTheme skinning->Body Fontsで設定します。
リンクの文字の色やdecorationもここで設定できます。
しかし、大きさは外観->テーマ編集でstyle.cssファイルの中身を編集する必要があります。
このサイトでは、以下のように本文の文字を少し大きめ、色を若干薄くしています。
.entry, .non-wp-entry { padding: 15px 0 5px; clear: both; /* font-size: 14px;*/ font-size: 130%; line-height: 145%; color:#333; margin-bottom: 1em; }
また、部分的にフォントの色を変えたい場合もstyle.cssを編集します。
このサイトでは以下のように投稿のタイトル部分だけ色を変えています。
h1.posttitle, h2.posttitle { color: #1e90ff; margin: 3px 0 2px; padding-bottom: 4px; font-size: 200%; border-bottom: dotted 1px #CCCCCC; } h1.posttitle a, h1.posttitle a:visited, h2.posttitle a, h2.posttitle a:visited { color: #1e90ff; text-decoration: none; }
ページ幅を可変にする
このサイトは、メインカラムとサイドバーの2カラムで構成されていますが、
それぞれのサイズは、suffusion optionsのOther Graphical Elements->Sizes and Marginsで設定できますが、以下のように変更したそれぞれのサイズに応じて、ページ幅も変わるようにしないと、いくらメインカラムやサイドバーの幅を広くしても反映されません。
Continue readingを続きを読むに変更する
インストールした後は、通常日本語のブログでは、「続きを読む」となっているリンクが、英語の「Continue reading」のままになっています。これは、外観->テーマ編集でactions.phpのContinue readingの部分を日本語に置換するだけです。
_____________________________________
このサイトのような超シンプルでスッキリデザインのブログであれば、気をつける箇所は
この程度で構築できてしまいます。
基本的には、デザインはsuffusionのoptionsとしてデータベースに格納され、style.cssを後からオーバーライドします。そのため、各要素の幅などはstyle.cssにもありますが、実際にはoptionsの値が反映されます。これだけ念頭においておくと効率があがります。
どうしても、サイトを構築する時間を割くのは大変です。
このような便利はテーマはとても重宝します。作者に感謝です。