2007年09月03日
記事タイトルをカスタムしちゃお
今回の滋賀咲くブログのバージョンアップによって、ブログ記事タイトルがリンク化されましたね。
その記事タイトルのリンク化ですが、標準では下線が表示されているようになっていると思います。
また、記事タイトルのフォントを指定されてた方は、上手く表示されず、ページ全体のフォント設定が反映されていると思います。
ってことで、今回は、記事タイトルのリンク設定を紹介したいと思います。
設定
まずクラス名ですが、以前紹介したように、リンク設定してあるクラスには「a」が付きます。
そして記事タイトルのクラス名は「title」ですから、記事タイトルリンクは「title a」のようになります。
ですからスタイルシートには↓のように入力します。
こんなかんじになります。
↑以外の属性(font-sizeなど)は今までのように「title」の方でも構いません。
みなさんの描くイメージどおりになるよう、いろいろ試してみてくださいね。
※リンクの各設定の意味が分からない方は、詳しい説明をこちらでしていますから参考にしてくださいね。
まとめ
どうでしたか
僕も急な対処でまだまだブログ全体の変更点を把握しておりませんが、とりあえず記事タイトルのリンク化はクリアできたと思います。
まだまだこれまで紹介してきた画像などの修正が残っておりますが、のんびり楽しみながらやっていこうと思います。
それではお疲れ様でした
その記事タイトルのリンク化ですが、標準では下線が表示されているようになっていると思います。
また、記事タイトルのフォントを指定されてた方は、上手く表示されず、ページ全体のフォント設定が反映されていると思います。
ってことで、今回は、記事タイトルのリンク設定を紹介したいと思います。
設定
まずクラス名ですが、以前紹介したように、リンク設定してあるクラスには「a」が付きます。
そして記事タイトルのクラス名は「title」ですから、記事タイトルリンクは「title a」のようになります。
ですからスタイルシートには↓のように入力します。
| /*記事タイトルリンク*/ .title a{ color:#0000cd; text-decoration:none; font-family:"HGS創英角ポップ体"; } .title a:link{ color:#0000cd; text-decoration:none; } .title a:visited{ color:#0000cd; text-decoration:none; } .title a:active{ color:#0000cd; text-decoration:none; } .title a:hover{ color:#ffffff; text-decoration:none; background:#0000cd; } |
こんなかんじになります。
↑以外の属性(font-sizeなど)は今までのように「title」の方でも構いません。
みなさんの描くイメージどおりになるよう、いろいろ試してみてくださいね。
※リンクの各設定の意味が分からない方は、詳しい説明をこちらでしていますから参考にしてくださいね。
まとめ
どうでしたか
僕も急な対処でまだまだブログ全体の変更点を把握しておりませんが、とりあえず記事タイトルのリンク化はクリアできたと思います。まだまだこれまで紹介してきた画像などの修正が残っておりますが、のんびり楽しみながらやっていこうと思います。
それではお疲れ様でした

この記事へのトラックバックURL
http://customshichao.shiga-saku.net/t50494
この記事へのコメントを書く




