ブログタイトルでHTMLを有効にするカスタマイズ 
ずっとやり方を試行錯誤してて実現出来なかったカスタマイズが、ひょんなことから簡単に実現できたのでまとめました
。今思えばなんだかなぁという感じですが・・あはは。こういうこともありますよね。
FC2のブログではあまり見かけないのですが、記事タイトル部分に記事毎に好きなアイコンをつけたりしたいなぁ・・・とずっと思っていました。「オススメ」マークとか「注目」マークとか、ジャンル毎にアイコンを使い分けたりとかそういうことを考えていました・・。
それでFC2ブログ公式マニュアルの「テンプレート用変数一覧」を見ていたら、記事タイトルの表示でHTMLが有効になる変数があるのを発見。なので現在利用しているテンプレートの変数をこれに変更するだけで、記事を書いてタイトルにHTML付のものを書けばタイトルに反映されるハズ・・。
<%topentry_title> を <%topentry_title_w_img> に変更
コレだけです！！。試しに利用している 
のアイコンを付けてみる。おぉ・・、うまくいった。他のブラウザで確認してみる。げ！！、ＩＥ６は表示が変だ・・・、これだから困る。
ＩＥ６だと上下がつぶれたようにタイトルが細く表示されてしまう。これは前にも新着表示のNEWマークをつけるカスタマイズを行った際にも発生した。結局、アイコンを利用するのをあきらめてテキスト表示に切り替えた問題と同じことが発生・・。どうもタイトル部分でバックグランドに画像を利用している場合に画像を重ね合わるとＩＥ６ではこの症状が発生する模様。FirefoxやＩＥ７、GoogleCromeでは発生しないので、ＩＥ６は推奨環境サポート外としているサイトさんでは考えなくても良いかも。アイコンとかもいろいろつけられますね。記事毎にタイトルの色分けとかも自由自在です。
ただウチではＩＥ６を最低環境としているので残念ながらこのままではちょっと問題。同じような感じになるようにテキスト装飾で対処してみる。スタイルシートに以下を追加。
.yellow {
background-color: #ffff00;
}
バックグランドカラーを黄色に指定してます。記事のタイトルは入力後、その後ろに以下のように記載します。ただここで注意点なのですが、先に「ジャンル」を指定するようにしてください。これって選びなおすと画面がリフレッシュされますが、先にタグが入っているとエラーになってしまいます（Firefoxで確認）。先に選んだ後で変更しなければ問題はでないです。
<span class="yellow"><font color="#000000" size="1">注目</font></span>
これで背景は黄色で字は黒色で”注目”という文字が付加できます。ブラウザによってちょっと表示に差がでますがタイトル欄がつぶれることはないのでうちではこれで良しとします。クラスで色をいくつか用意しておけば使い分けが出来ますね。
それと忘れないようにＩＥ５．５用のスタイルシートにも追加しておかなきゃ
。ＩＥ５．５でも問題なく表示できることを確認。
ＩＥ６を意識するとちょっと制限が出ますが、考えないなら自由度は高いカスタマイズではないでしょうか。
- 関連記事
-
- ブログタイトルでHTMLを有効にするカスタマイズ（その３） (2010/01/24)
- ブログタイトルでHTMLを有効にするカスタマイズ（その２） (2010/01/22)
- ブログタイトルでHTMLを有効にするカスタマイズ (2010/01/22)
- タイトル画像をランダム表示 その９ (2010/01/11)
- タイトル画像をランダム表示 その８ (2010/01/09)
  記事タイトル レイアウト変更 を行いました(2010.02.09)
 記事に tag関連エントリの自動表示 を行うようにしました(2010.01.05)
  伊東温泉・共同浴場１０湯比較リスト 公開しました！(2009.12.20)
表示高速化のため、記事を要約して表示する方法へ変更しました(2009.12.13) 伊東温泉共同浴場温泉マップ 公開しました！
★全国駅前温泉リスト★ 随時更新中 (2010.8.17 更新) |
投稿後は管理人承認待ちとなり、承認の上公開されます。記事とは関係のないトラックバックは予告なく削除対象となりますので予めご了承ください。
