2008年02月25日

気になったので書いておく

看板を変える時に、ざざっとRSSリーダーに登録してあるブログを眺めまくったのだが、そのときに気になったブログがいくつかあった。
ココみたいに”ブログタイトル”(あるいは”ブログ名”等)の文字部分を画像に差し替えているブログなのだが、そのうちの幾つかは看板、タイトル画像がブログ記事本体に被っている所があった。
それもゲーム系で、システムがシーサー式のところ(と、言うと二つのブログサービスしかないが)。
自分が被らずに出来るようになったので、そういうのを見ると気になって仕方が無いのだがそこのコメント欄に書くのも何かいやらしい。
でも、このままじゃすっきりしないので、ココに書きなぐっておく。


(同じシーサー式でも各サービスによって表記やインターフェイスが微妙に違うが、ここではシーサーを見ながら書くことにしておく。そう極端には違ってないから分かるだろう。)
”マイ・ブログ”にはいって”デザイン”の”コンテンツ”へ、そして”ブログ名”を開く。(”コンテンツ”がノーマルとエキスパートとがある場合は、エキスパートにしたほうがやりやすい)
そして”コンテンツHTML編集”へのリンクを探し開く。

<% content.header -%>
<h1><a href="<% blog.page_url %>" accesskey="1"><% blog.title %></a></h1>
<% content.footer -%>

と、書かれているので「<% blog.title %>」を「<img src="http://○○" alt="◇◇◇" border="0">」といった感じに差し替える
「"http://○○"」はタイトル画像がおいてあるアドレス。
「alt="◇◇◇"」の◇◇◇にはブログのタイトルを書くといいかと思う。
「border="0"」はリンク時に画像につく枠線を見えなくするための設定、スタイルシート等で出ないように設定してあるな、この部分は必要ない。
これが第一段階。
これだけだと、文字のタイトルが画像のタイトルに差し替わっただけなので、画像が大きいものだとブログ記事の本体にまで被ってしまう。

そこで次にcss、スタイルシートをいじる。
まず、「#banner」という項目をさがす(予めメモ帳なり、ワードパッドなりにコピーペーストしておけば検索しやすい)。
(ブログタイトルがヘッダーに配置されている場合。(まず無いだろうけれど)ブログタイトルが左カラム(左サイドバー)に配置されているなら「#links-left」、右カラム(右サイドバー)なら「#links」、フッターなら「#footer」を探す)
その項目には

#banner{
width:1000;
height:270;
padding:10px;
background-color:#5a8364;
}

といったことが書かれているので、「height:△△△;」の数値を画像の高さより大きくする(単位が明記されて無い場合はピクセル)。
書かれていない場合には書き足す。
(フッターにブログタイトルが配置されている場合も同じ。右カラム、左カラムに配置されているなら、「width:▽▽▽;」を画像の横幅より大きくする)
これで、大き目の画像をブログタイトルに差し替えてもブログ記事本体に被ることはなくなる(はず)。


ココみたいに画像の上下(左右)に隙間を開けたい場合は「margin」や「padding」を指定する事になる。
(どっちが適切なのかは良く分からないが)
けれども今ここでは詳しくは書かない書けない(まだまだ覚えきっていないから)ので、『とほほのスタイルシート入門』『スタイルシート入門 - ウェブマイスター スタイルシート倶楽部 -』辺りを読めば大丈夫。
(細かいところが間違っていたりするらしい(俺には分からない)のだが、基本を抑えるには十二分なサイト)



posted by 壬風蛙 | Comment(0) | TrackBack(0) | ゑぶ弄り>Blog | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。