RapidWeaverのテーマをカスタマイズする
2007.8.8
このサイトはRapidWeaverの「ブログ」テーマをカスタマイズして作っています。どうやってカスタマイズしたのかを参考までに書いておく事にします。
現在はRapidWeaverからBiND for WebLiFEに移行しています。このページはBiNDで作成しています。
テーマをコピーする
"Contents"フォルダが入ったウィンドウが開きますので、このフォルダをダブルクリックして開きます。この中には色々と入っていますが、"Resources"フォルダを開きます。その中の"Install"フォルダの中に目的のテーマファイルが入っていますので、カスタマイズしたいテーマを選んでコピーします。私は"Blog.rwtheme"を選びました。
これをどこにコピーするかですが、「ホーム」から「ライブラリ」フォルダを開いて"Application Support"を探します。このフォルダの中に"RapidWeaver"がありますので、そこに入れておいて下さい。これでRapidWeaverがこのテーマを認識してくれます。オリジナルとは異なるものである事がわかる様に、名前を変えておく事にします。"MyBlog.rwtheme"としました。
プロパティリストを編集する
さて、ファイル名を変えても中身は何も変わっていません。元のテーマと異なるものである事をRapidWeaverに認識させる為に、プロパティリストを編集します。"MyBlog.rwtheme"を右クリックして「パッケージの内容を表示」を実行します。
"Contents"フォルダが入ったウィンドウが開きますので、このフォルダをダブルクリックして開きます。"Theme.plist"がこのテーマのプロパティリスト なので、これをダブルクリックしてProperty List Editorで開きます。
最低限RWThemeNameとRWThemeShortNameだけ変えておけば大丈夫でしょう。テーマが一覧表示された時に出てくる名前を変えるにはRWThemeDisplayNameのjaのところを変えればOKです。
RWThemeAuthorは何に使っている訳でもないと思いますが、手を入れた覚え書きとして変えておきました。
CSSファイルを編集する
プロパティリストと同じ場所に"styles.css"があります。これをいじってみます。
全体に文字を大きくする
全体的に文字を大きくするため、bodyの中のfontを0.7から0.8に変えました。
body {
text-align: center;
font: 0.8em Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin: 0 10px;
padding: 0;
}
強調した時に色を付ける
変更点を強調する時にこれまで色指定をしていたので、これを引き継ぐ為に追加しました。
b, strong {
color:maroon;
}
行頭で一文字あける
本文の領域でpタグを使った時に、行頭一文字分が空く様にインデントを設けました。逆に空けたくない場合は<p class="noindent">と指定します。
#contentContainer p {
text-indent:1em;
}
#contentContainer p.noindent {
text-indent:0em;
}
見出しをカスタマイズ
本文の領域でh1〜h4タグを使った時のスタイルを指定しています。リニューアル前は見出しをカラフルにしていたのですが、リニューアル後はモノトーンのテーマに合わせています。
#contentContainer h1 {
margin-left:0px;
padding-left:0.5em;
padding-top:10px;
padding-bottom:10px;
border-style:solid;
border-width:0px 0px 2px 20px;
line-height:140%;
}
#contentContainer h2 {
margin-left:5px;
padding-left:0.5em;
padding-top:5px;
padding-bottom:5px;
border-style:solid;
border-width:0px 0px 0px 15px;
line-height:140%;
}
#contentContainer h3 {
margin-left:10px;
padding-left:0.5em;
border-style:solid;
border-width:0px 0px 0px 10px;
line-height:140%;
}
#contentContainer h4 {
margin-left:15px;
padding-left:0.5em;
border-style:solid;
border-width:0px 0px 0px 5px;
line-height:140%;
}
コラムとファイル名
背景に薄く色を付けたボックス領域を確保する時に使います。コラムは<div id="column"></div>として、本文とは区別した補足情報を書く時に使います。薄い緑のボックスです。
ファイル名は薄い赤で、横幅の半分の大きさのボックスです。<div id="filename"></div>として使います。
#contentContainer #column {
margin:0px auto 10px auto;
padding:1px 10px;
background:#c6e4c6;
border-style:none;
font-size:0.9em;
}
#contentContainer #filename {
margin:0px auto 0px 0px;
padding:0px 10px;
width:50%;
background:#f4d6d6;
border-style:none;
font-family:Courier,monospace;
font-size:12px;
text-indent:0em;
}
ソースコード
ソースコードは必ずpreタグで囲ってあるので、divでボックスを作らなくても背景を薄い青にする事ができます。
#contentContainer pre {
margin:0px auto 0px 0px;
padding:3px 10px;
background:#e0e0fe;
border-style:none;
font-family:Courier,monospace;
font-size:12px;
text-indent:0em;
line-height:125%;
}
長いページ名がナビゲーションボタンからあふれない様にする
ページ名が長いとナビゲーションボタンに途中までしか表示されないので、高さ指定を無効にしました。これでも一つの英単語が非常に長い場合はどうしようもないのですが・・・
#navcontainer a{
display: block;
padding-left: 10px;
padding-top: 6px;
/*height: 20px;*/
color: #ffffff;
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1px solid;
}
ナビゲーションボタンのインデントを変更
スペースを有効活用するため、ナビゲーションボタンのインデント幅を30,60,90,110,140から25,40,55,70,85に縮めました。
#navcontainer ul ul a {
padding-left: 25px;
}
#navcontainer ul ul ul a{
padding-left: 40px;
}
#navcontainer ul ul ul ul a{
padding-left: 55px;
}
#navcontainer ul ul ul ul ul a{
padding-left: 70px;
}
#navcontainer ul ul ul ul ul ul a{
padding-left: 85px;
}
テーマバリエーション
テーマバリエーションとして「スタイル」の「テクノ」を選んでいるので、"css"フォルダの中の"styles"フォルダに入っている"tech.css"も多少いじっていますが、ナビゲーションボタンの色を変えている程度なので省略します。
ただ、ページヘッダの画像をカスタマイズしているので、これについては説明しておきます。tech.cssでページヘッダの画像を指定しているのは以下の部分です。これを見るとページヘッダの画像がどこにあるのかわかります。
#pageHeader {
background: url(../../images/tech/header_bg.png) repeat-x;
}
"Contents"フォルダの中に"images"フォルダがあり、その中に"tech"フォルダがあります。そこに入っている"header_bg.png"を以下の画像に差し替えました。
HTMLファイルを編集する
リニューアル後、ページが表示されるまでに非常に時間がかかる事がたまにあります。Amazonの広告やページランクの表示を外すなどして様子を見ているのですが、それでも起きる様です。という事はGoogle AdSenseのせい?
リニューアル前はテーブルで全体構造を決めていたのですが、リニューアル後はCSSになっているので、そのせいでしょうか？もしそうだとすると、対策できません。
HOME
前のページへ