2008年02月02日
ブログのデザインを改造してみました
何度も微調整を加えながらなんとかデザインを修正しました。
一からHTMLを弄くろうとしましたが、一部の互換タグが分からなかったために諦めて既存のテンプレートの改造に終始しました。
一からHTMLを弄くろうとしましたが、一部の互換タグが分からなかったために諦めて既存のテンプレートの改造に終始しました。
見た目は壁紙と文字色を変えただけですが、CSS以外に、アーカイブページのHTMLを弄りました。
単純に言うと、カテゴリー別に表示した時は目次が出るようにしました。
上はニュースで表示した時のものです。
これを活かせるように、もっとカテゴリの所を目立つようにしておきました。
とはいえ、記事の数が少ないのでなかなか使うことはなさそうですが(笑)
そうそう、左のリンクの色を変えるのは実は少し上級者テクニックだったりします。
CSSで「a{}」の中身を弄ればリンクの色は変えられますが、ここで一つの問題が発生します。
ブログのテンプレート通りだと「id」も「Class」も変えられないので、カテゴリの場合は赤、最新記事の場合は緑、と場合分けするには通常の記述では変えられません。
変更する場合は以下の記述をCSSに書き加える必要があります。
ちなみに、上の「aside」は3カラムだと「bside」になる場合があるので注意してください。
ある程度、CSSが読める人なら上の記述の特殊さに気付くと思います。
「a」の前にスペースを入れて「div」の上位のクラス名を書いてます。
これは「category」クラスの中にある「a(リンク)」の「aside」クラスのものの変更を指定してます。
これによって、両方とも「a.aside」という名前なのに、置いてる場所が違う(カテゴリー欄と最新記事欄)ということで色違いを指定することが出来るのです。
……初心者には全く分からない話ですいません。
まあ、ともかく大分ブログがすっきりしたのではないかな、と思います。
単純に言うと、カテゴリー別に表示した時は目次が出るようにしました。
上はニュースで表示した時のものです。
これを活かせるように、もっとカテゴリの所を目立つようにしておきました。
とはいえ、記事の数が少ないのでなかなか使うことはなさそうですが(笑)
そうそう、左のリンクの色を変えるのは実は少し上級者テクニックだったりします。
CSSで「a{}」の中身を弄ればリンクの色は変えられますが、ここで一つの問題が発生します。
ブログのテンプレート通りだと「id」も「Class」も変えられないので、カテゴリの場合は赤、最新記事の場合は緑、と場合分けするには通常の記述では変えられません。
変更する場合は以下の記述をCSSに書き加える必要があります。
.category a.aside{
color:red;
}
.recententry a.aside{
color:green;
}
ちなみに、上の「aside」は3カラムだと「bside」になる場合があるので注意してください。
ある程度、CSSが読める人なら上の記述の特殊さに気付くと思います。
「a」の前にスペースを入れて「div」の上位のクラス名を書いてます。
これは「category」クラスの中にある「a(リンク)」の「aside」クラスのものの変更を指定してます。
これによって、両方とも「a.aside」という名前なのに、置いてる場所が違う(カテゴリー欄と最新記事欄)ということで色違いを指定することが出来るのです。
……初心者には全く分からない話ですいません。
まあ、ともかく大分ブログがすっきりしたのではないかな、と思います。
Posted by 哲学 at 07:19│Comments(0)
│日記
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。