Blogのタイトル画像変更

| | コメント(0) | トラックバック(0) |
まずはここから攻めましょう。
Blogのトップにある画像は、MovableTypeのシステムフォルダの下、テンプレートフォルダ内にあるCSSファイルで定義されます。
今後、これをいじりやすくするために、個別のBlogがあるルートの下に、「css」フォルダを作ります。
その中に、元になるcssファイルを持ってきます。
1.「default-template」フォルダの中にある"styles.mtml"を"styles.css"とリネームしてコピー。
2.「mt-static」フォルダの中にある"blog.css"をコピー。
3.「themas」フォルダ内の任意のスタイルのフォルダごと、「css」フォルダ内にコピー。
4."styles.css"の編集を行い、blog.cssとscreen.cssの位置を定義します。
これはBlogの管理画面で、スタイルシートのテンプレートを編集して行います。

080715_01.jpeg
要は、下の青字の部分を記述するだけです。

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(blog.css);
@import url(screen.css);
/* end StyleCatcher imports */

同じフォルダ内にあるので、特に場所は指定しなくてもOKですね。
ただし、このテンプレートそのものの出力場所を、cssフォルダに指定してやる必要はあります。
(画像の下の方で定義しています。)
これで思うさま、スタイルシートをいじくって、Blogを変えることが出来ます。
取り敢えずTopの画像を、ランダムに変更するcgiに変えましょう。
旧Blogのルートに置いてあった、ランダム画像表示cgiを、新Blogのルートにコピーします。
その後、画像を納めるフォルダを作り、何種類かの画像を作って置いておきます。
画像は、基本となるテンプレート「Cityscape」のTop画像にあわせて、940px*191pxとします。
その上で、screen.cssを編集します。
具体的には、Top画像を指定している部分に、random.cgiを置き換えてやればOKです。

#header {
    border-color: #121a3f; 
    background: #06161c url(http://jaklab.com/blog2/random.cgi) no-repeat bottom right;
}

この部分ですね。

そしてこれだけでも、Blogが変わって見えます。
あとは本体の色調変更ですが...こちらはまた後日のお楽しみということで...。

トラックバック(0)

このブログ記事を参照しているブログ一覧: Blogのタイトル画像変更

このブログ記事に対するトラックバックURL: http://jaklab.com/mt4/mt-tb.cgi/13

コメントする

2018年10月

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

中の人について

  • ・くつろぐ筆者 test image
  • ※画像はイメージです。
  •  実際とは異なる場合があります。
  •  
  • ・EVE Online Character Redrick JJ
  • Redrick JJ:
  • ニヤニヤ笑いのCaldari人。
  • お仕事は主に掘りと生産。
  • 発明はギャンブルだ!
  • 所属corp:Wildcat Idc.
 

リンク集


月別 アーカイブ

アイテム

  • 181018_01.jpeg
  • 181016_01.jpeg
  • 181011_01.jpeg
  • 181004_01.jpeg
  • 180927_01.jpeg
  • 180925_01.jpeg
  • 180920_02.jpeg
  • 180920_01.jpeg
  • 180913_01.jpeg
  • 180911_01.jpeg
Powered by Movable Type 4.2-ja