ヤプログ・タイトル画像(ヤプ画)のつけ方 長靴猫...★ 旧オロルンのヤプログ講座





↓--------

スポンサーサイト

 スポンサー広告



上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


↓2005-09-27

ヤプログ・タイトル画像(ヤプ画)のつけ方

 ヤプログ講座



タイトル部分に長方形の画像(いわゆるヤプ画)をつけます

スタイルシート・メインテンプレート・一記事テンプレート・アーカイブテンプレートをいじります。
いまからカスタマイズに入るので、バックアップを取って、メモ帳に移した状態にしてください
参考→カスタマイズの基礎
★★1★★

まずメインテンプレートを開いてください。上のほうに

<div class="blog_title"><a href="{$BlogUrl$}">{$BlogName$}</a></div>
とかかれた行があるハズです。ココをいじります

★画像にトップページへのリンクを張る場合

<div class="blog_title"><a href="{$BlogUrl$}">{$BlogName$}</a></div>
の{$BlogName$}を削除して、画像タグを入れます

<div class="blog_title"><a href="{$BlogUrl$}"><img src="画像のアドレス" border=0></a></div>

★画像にトップページへのリンクを張らない場合

<div class="blog_title"><a href="{$BlogUrl$}">{$BlogName$}</a></div>
の<a href="{$BlogUrl$}">{$BlogName$}</a>を削除して、画像タグを入れます

<div class="blog_title"><img src="画像のアドレス" border=0></div>



コレと同じことを一記事テンプレート・アーカイブテンプレートにもします

★★2★★

つぎに、スタイルシートをいじります。上のほうにある、

.blog_title
{
width:90%;←この行
padding-right:10px;←この行
MARGIN: 30px auto 10px 20px;←この行

FONT-WEIGHT: bold;
FONT-SIZE: 16px;
OVERFLOW: hidden;
COLOR: #f99;
WORD-BREAK: break-all;
LETTER-SPACING: 1px
}

の、上の3行を下のように変更します

.blog_title
{
width:100%;
padding:0px;
MARGIN: 0px;

FONT-WEIGHT: bold;
FONT-SIZE: 16px;
OVERFLOW: hidden;
COLOR: #f99;
WORD-BREAK: break-all;
LETTER-SPACING: 1px
}

としたらOK。さらに、画像を真ん中寄せにしたい人はtext-align:center;というタグを入れ、

.blog_title
{
text-align:center;
省略
LETTER-SPACING: 1px
}

とします。

参考→画像をランダムに表示する



講座の目次


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。