MT4のカスタマイズに、いろいろとテンプレートが出ていますが、それぞれ独自色があります。
たとえば小粋空間風にクールに決めるのもいいですが、どうも自分らしくないという感じを持つ方もいるでしょうね。
思い切ってイメチェンするのは良いですが、
アイドルの＊＊風なヘアデザイン...、でも顔は全然違うネって、
かえって変に目立って恥ずかしく、ない？
というわけで、オリジナルテンプレートをちょこっといじって、
プチ整形カスタマイズをする方法をやってみましょうか。
ホームページは、ヘッダーを変えるだけで、印象が際だって違ってきます。
背景画像を、入れ替えてしまいましょう。
MT4x のサイト構成は、MT3x よりもモジュール化が進んでいます。
モジュールというのは、単機能で、差し替えができる構成要素のことです。
パーツよりも、もっと小さなマイクロ・パーツですね。
このモジュールが集まって、パーツを形成し、
パーツが集まって、全体が組み上がる、ということです。
言葉だけではイメージがわかないと思いますので、図解しましょう。
MT3でも、モジュール化は進んでいました。例えば、
＜＄MTInclude module="adsense"＄＞
という形で、アドセンスやアフィリなどのモジュールを作り、テンプレートにペタペタと貼り付けます。
サイドバーは、サイドバーというモジュールになり、その中にリンクリスト、とかアドセンとかを記述しておくわけです。
MT4では、モジュール化をいっそう進め、一つのテンプレートでインデックステンプレートとアーカイブテンプレートを切り替えて使えるようになっています。
MT3では、インデックステンプレートとアーカイブテンプレートが別々になっていて、ヘッダー＋コンテンツ＋フッターが一つのユニットになっていました。
MT4で、「デザイン→テンプレート→メインページ」を開いてみると、あっけないほどシンプルな記述で、とりつく島もない...という感じです。
さて、ヘッダーを差し替えるには、前回解説しました「screen.css」を書き換えます。
ヘッダー部の背景に自分の画像を指定するのです。
画像を使わない場合は、背景の色を変えるか、下地用の小さなgif画像をリピート指定で配置して、その画像で背景を埋めるようにします。
では、TeraPadやワードパッドで「screen.css」を開いて下さい。
190行目前後に（どのスタイルセットを選ぶかで違ってきます。）次のような記述があるはずです。
/* Header ----------------------------------------------------------------- */
#header {
border-color: #8e3b03;
background: #77dbfe url(header.png) no-repeat left bottom;
}
ボーダーの色を変えるか、消してしまうかはあなた次第ですね。
背景の色を指定してあるのは、画像を表示できないテキストブラウザ用です。
このUTRLは、この「screen.css」がおいてあるフォルダを示しています。
つまり、
/mt/mt-static/themes/cityscape sf/screen.css
「mt-static」フォルダにある「themes」フォルダの、「cityscape sf」というフォルダの中にあるということです。
フォルダ名は選んだスタイルセットによって、違ってきますね。
「MT4xカスタマイズ（１）」をご参照ください。
「cityscape sf」のCSSですと、175行目にヘッダーの文字指定があります。
（TeraPadで、行数は論理行ではなく、実体行計算設定です）
私の場合は、次のような記述になっています。
画像を左・上寄せにして、下にナビリンクをいれたからです。
/* Header ----------------------------------------------------------------- */
#header {
background: #003463 url(header.png) no-repeat left top;
}
あと、とりあえず修正する箇所としては、サイトタイトル文字の大きさですね。
200行目あたりに、指定箇所があります。
デフォルトは＜H1＞の標準サイズですが、日本語表記の場合文字が相当ギザつきます。
#header-name {
color: #083c54;
font-family: verdana, "ms pgothic", arial, helvetica, "hirakakupro-w3", ...
font-size: 28px;
font-weight: bold;
}
これを20ピクセル以下にします。好みの大きさでかまいません。
フォントの太字は汚くなりますので、font-weight: normal; が私の基本です。
さらに、35行目以下にあるサブタイトルの大きさも変えられます。
この大きさは大きすぎないので、そのままでもかまいませんね。
#header-description {
margin: 0;
font-size: 14px;
line-height: 1.125;
}
書き換えたファイルをパソコンに保存して下さい。
次に、FFFTPを起動して、
先ほど見たテーマセットの保管庫である「themes/」にあなたの好きな名前のフォルダを作って、アップロードします。
私の場合は「itodenwa」としました。
/mt/mt-static/themes/itodenwa/screen.css
となります。
このフォルダには、header.jpg と thumbnail.gif もアップロードします。
☆header.jpgはあなたが使いたいヘッダー画像です。画像の幅に注意して下さい。
→画像幅をブログの幅に合わせるか、画像幅に合わせてブログ幅を拡張するか...
☆thumbnail.gif は、自分のサイトをキャプチャーソフトで切り取って、140×100ピクセルで保存したものです。
これは作らなくともかまいません。後で紹介します。
screen.css とヘッダー画像をアップロードし終えたら、FFFTPを終了して、サイトにログインして下さい。
上のタブから「デザイン」→「スタイル」をクリックしますと、次のような画面になります。
あれ、左下にクールなデザインのスタイルセットがあるじゃん！
よし、これをいただきます、しちゃいましょう。クリック、クリック...
あれま、ラーメン、タンメン。僕イケメ～ン...。（画像をクリックすると大きくなります）
失礼致しました、thumbnail.gif(140×)とthumbnail-large.gif(400×)をわざわざ作ったのは、このためだけだったのですね。
面倒ですから、作らなくてもいいんですよ。
この記事を書くために、やっただけですので。ε- (^、^; ふぅ
ということで、選択したスタイルを保存して、再構築をすると、ヘッダー画像があなた好みになっているはずです。
こうしてスタイルキャッチしたスタイルCSSファイルは、
/mt/mt-static/support/themes/itodenwa/itodenwa.css
として、保存されます。
この「itodenwa.css 」と、先の「screen.css」は中身が同じものです。
後からCSSを変更する場合は、両方とも更新すれば、いちいちスタイル選択操作をしなくとも、
再構築をするだけで、変更OKです。
「screen.css」をアップロードする時に、「itodenwa.css 」とリネームするには、FFFTPでファイルを選択して、右クリックのメニューから「リネームしてアップロードする」を実行します。
他にも、CSSをいじるべきところがあったかもしれません。
うまくいかなければ、コメントにでも質問をお寄せ下さい。
TypeKey などの認証を一度取っておくと、いろいろ使えます。コメントでも、使えます。
しばらく、資格試験勉強のため、記事更新が少なくなります。
コメントする