ブログタイトルでHTMLを有効にするカスタマイズ
ずっとやり方を試行錯誤してて実現出来なかったカスタマイズが、ひょんなことから簡単に実現できたのでまとめました。今思えばなんだかなぁという感じですが・・あはは。こういうこともありますよね
。
FC2のブログではあまり見かけないのですが、記事タイトル部分に記事毎に好きなアイコンをつけたりしたいなぁ・・・とずっと思っていました。「オススメ」マークとか「注目」マークとか、ジャンル毎にアイコンを使い分けたりとかそういうことを考えていました・・。
それでFC2ブログ公式マニュアルの「テンプレート用変数一覧」を見ていたら、記事タイトルの表示でHTMLが有効になる変数があるのを発見。なので現在利用しているテンプレートの変数をこれに変更するだけで、記事を書いてタイトルにHTML付のものを書けばタイトルに反映されるハズ・・。
<%topentry_title> を <%topentry_title_w_img> に変更
コレだけです!!。試しに利用している のアイコンを付けてみる。おぉ・・、うまくいった。他のブラウザで確認してみる。げ!!、IE6は表示が変だ・・・、これだから困る。
IE6だと上下がつぶれたようにタイトルが細く表示されてしまう。これは前にも新着表示のNEWマークをつけるカスタマイズを行った際にも発生した。結局、アイコンを利用するのをあきらめてテキスト表示に切り替えた問題と同じことが発生・・。どうもタイトル部分でバックグランドに画像を利用している場合に画像を重ね合わるとIE6ではこの症状が発生する模様。FirefoxやIE7、GoogleCromeでは発生しないので、IE6は推奨環境サポート外としているサイトさんでは考えなくても良いかも。アイコンとかもいろいろつけられますね。記事毎にタイトルの色分けとかも自由自在です。
ただウチではIE6を最低環境としているので残念ながらこのままではちょっと問題。同じような感じになるようにテキスト装飾で対処してみる。スタイルシートに以下を追加。
.yellow {
background-color: #ffff00;
}
バックグランドカラーを黄色に指定してます。記事のタイトルは入力後、その後ろに以下のように記載します。ただここで注意点なのですが、先に「ジャンル」を指定するようにしてください。これって選びなおすと画面がリフレッシュされますが、先にタグが入っているとエラーになってしまいます(Firefoxで確認)。先に選んだ後で変更しなければ問題はでないです。
<span class="yellow"><font color="#000000" size="1">注目</font></span>
これで背景は黄色で字は黒色で”注目”という文字が付加できます。ブラウザによってちょっと表示に差がでますがタイトル欄がつぶれることはないのでうちではこれで良しとします。クラスで色をいくつか用意しておけば使い分けが出来ますね。
それと忘れないようにIE5.5用のスタイルシートにも追加しておかなきゃ。IE5.5でも問題なく表示できることを確認。
IE6を意識するとちょっと制限が出ますが、考えないなら自由度は高いカスタマイズではないでしょうか。
- 関連記事
-
- ブログタイトルでHTMLを有効にするカスタマイズ(その3) (2010/01/24)
- ブログタイトルでHTMLを有効にするカスタマイズ(その2) (2010/01/22)
- ブログタイトルでHTMLを有効にするカスタマイズ (2010/01/22)
- タイトル画像をランダム表示 その9 (2010/01/11)
- タイトル画像をランダム表示 その8 (2010/01/09)
※見てくださった方々へ、、ご参考になれば幸いです。よろしければ「拍手」頂ければウレシイです
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |