MENU

Blogデザインのカスタマイズ

 どうも、Blogデザインがメインサイトとのイメージの差があってよろしくない。
 せっかくローカルで色々いじれるiBlogを使用しているのだからイメージの統一を図るためにカスタマイズしてみることにした。
 併せてブログ本文の外枠を角丸にしたサイトがあって、なんだか読みやすい良い雰囲気だったので私もやってみることにする。

 BlogPage.txtの中にブログ本文の前後にテーブルタグを入れ子式にして、角丸の画像を挿入してみた。

<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”480″>
 <tr>
  <td>
   <img name=”blog_a” src=”http://y-sky.net/img/blog-b_a.gif” width=”480″ height=”5″ border=”0″ alt=””>
  </td>
 </tr>
 <tr>
  <td><table align=”left” border=”0″ cellpadding=”0″ cellspacing=”0″ width=”480″>
  <tr>
   <td width=”1″ bgcolor=”#CCCCCC”></td>
   <td width=”478″ bgcolor=”#FFFFFF”></td>
   <td width=”1″ bgcolor=”#CCCCCC”></td>
  </tr>
 </table>
 </td>
 </tr>

<tr>

<td>
<img name=”blog_e” src=”http://y-sky.net/img/blog-b_e.gif” width=”480″ height=”5″ border=”0″ alt=””>
</td>
</tr>
</table><br />

 当初、ブログ内容に付く枠が付いてしまい、どこを修正したらよいか判らなかったが、com_style1.css スタイルシート設定の中にBorder “1”となっている箇所を”0″と書き直すことで綺麗に消すことができた。

 現在の枠が横幅480と従来より幅が狭く、デザイン的にメニューリスト側、右側に全体をずらす必要がある。
 スタイルシート周りをいじって、調整する必要がある。

 下のうざかったPowerd by iBlogの表示とリンクはタグから該当項目を削除して消すことができた。だんだんとシンプルになって良い感じだ。
 自分好みをあくまでも押し通すって言うのは大変骨が折れる。既成のもので満足できたらこんな苦労も必要がないのに・・・。

 メニューにあるカウンターcgiへのリンクタグが相対パスになっているので、階層深く保存されているアーカイブなどのインデックスページではうまく機能しない。
 タグを絶対パスに書き換える必要がある。

 今日はここまで。メインのページ以外のデザインがまだ出来ていない。
 またたいしたテストもしていないので自分以外の環境でちゃんと見られるかどうか不安だ。どうせあまり人が来ないから、良いんだけど。
 まずはメインページを自分好みにしっかり作り込んでからにしよう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次