上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


拍手する ※見てくださった方々へ、、ご参考になれば幸いです。よろしければ「拍手」頂ければウレシイです


にほんブログ村 旅行ブログ 温泉・温泉街へ にほんブログ村 旅行ブログ 旅行グルメへ にほんブログ村 鉄道ブログ 鉄道旅行へ ブログランキング・にほんブログ村へ
ブログランキング【くつろぐ】 ブログランキング ブログランキングのブログん家 blogram投票ボタン

 注目 Blog 記事タイトル レイアウト変更 を行いました(2010.02.09)
 注目 Blog 記事に tag関連エントリの自動表示 を行うようにしました(2010.01.05)
 注目 伊東温泉・共同浴場10湯比較リスト 公開しました!(2009.12.20)
 注目 Blog 表示高速化のため、記事を要約して表示する方法へ変更しました(2009.12.13)
 注目 伊東温泉共同浴場温泉マップ 公開しました!
 注目 ★全国駅前温泉リスト★ 随時更新中 (2010.8.17 更新) オススメ

ブログタイトルでHTMLを有効にするカスタマイズ オススメ

ずっとやり方を試行錯誤してて実現出来なかったカスタマイズが、ひょんなことから簡単に実現できたのでまとめました236。今思えばなんだかなぁという感じですが・・あはは。こういうこともありますよね236

FC2のブログではあまり見かけないのですが、記事タイトル部分に記事毎に好きなアイコンをつけたりしたいなぁ・・・とずっと思っていました。「オススメ」マークとか「注目」マークとか、ジャンル毎にアイコンを使い分けたりとかそういうことを考えていました・・。

それでFC2ブログ公式マニュアルの「テンプレート用変数一覧」を見ていたら、記事タイトルの表示でHTMLが有効になる変数があるのを発見。なので現在利用しているテンプレートの変数をこれに変更するだけで、記事を書いてタイトルにHTML付のものを書けばタイトルに反映されるハズ・・。


<%topentry_title> を <%topentry_title_w_img> に変更


コレだけです!!。試しに利用している 注目 のアイコンを付けてみる。おぉ・・、うまくいった。他のブラウザで確認してみる。げ!!、IE6は表示が変だ・・・、これだから困る。


20100122-02.jpg


IE6だと上下がつぶれたようにタイトルが細く表示されてしまう。これは前にも新着表示のNEWマークをつけるカスタマイズを行った際にも発生した。結局、アイコンを利用するのをあきらめてテキスト表示に切り替えた問題と同じことが発生・・。どうもタイトル部分でバックグランドに画像を利用している場合に画像を重ね合わるとIE6ではこの症状が発生する模様。FirefoxやIE7、GoogleCromeでは発生しないので、IE6は推奨環境サポート外としているサイトさんでは考えなくても良いかも。アイコンとかもいろいろつけられますね。記事毎にタイトルの色分けとかも自由自在です236

 

ただウチではIE6を最低環境としているので残念ながらこのままではちょっと問題。同じような感じになるようにテキスト装飾で対処してみる。スタイルシートに以下を追加。

 

.yellow {
   background-color: #ffff00;
}


バックグランドカラーを黄色に指定してます。記事のタイトルは入力後、その後ろに以下のように記載します。ただここで注意点なのですが、先に「ジャンル」を指定するようにしてください。これって選びなおすと画面がリフレッシュされますが、先にタグが入っているとエラーになってしまいます(Firefoxで確認)。先に選んだ後で変更しなければ問題はでないです。


<span class="yellow"><font color="#000000" size="1">注目</font></span>

 

これで背景は黄色で字は黒色で”注目”という文字が付加できます。ブラウザによってちょっと表示に差がでますがタイトル欄がつぶれることはないのでうちではこれで良しとします。クラスで色をいくつか用意しておけば使い分けが出来ますね。

 

それと忘れないようにIE5.5用のスタイルシートにも追加しておかなきゃ230。IE5.5でも問題なく表示できることを確認。


IE6を意識するとちょっと制限が出ますが、考えないなら自由度は高いカスタマイズではないでしょうか。


【2010.01.26 追記】
その後アイコン利用時のレイアウト修正に成功。具体的な手法については「ブログタイトルでHTMLを有効にするカスタマイズ(その4)」でまとめています。
関連記事


拍手する ※見てくださった方々へ、、ご参考になれば幸いです。よろしければ「拍手」頂ければウレシイです

テーマ : ブログ
ジャンル : ブログ

tag :日記 ブログレイアウト カスタマイズ タイトル 

にほんブログ村 旅行ブログ 温泉・温泉街へ にほんブログ村 旅行ブログ 旅行グルメへ にほんブログ村 鉄道ブログ 鉄道旅行へ ブログランキング・にほんブログ村へ
ブログランキング【くつろぐ】 ブログランキング ブログランキングのブログん家 blogram投票ボタン

 注目 Blog 記事タイトル レイアウト変更 を行いました(2010.02.09)
 注目 Blog 記事に tag関連エントリの自動表示 を行うようにしました(2010.01.05)
 注目 伊東温泉・共同浴場10湯比較リスト 公開しました!(2009.12.20)
 注目 Blog 表示高速化のため、記事を要約して表示する方法へ変更しました(2009.12.13)
 注目 伊東温泉共同浴場温泉マップ 公開しました!
 注目 ★全国駅前温泉リスト★ 随時更新中 (2010.8.17 更新) オススメ

tag関連エントリ(Google AJAX Feed)

Loading..Please Wait

trackback


この記事にトラックバックする(FC2ブログユーザー)

投稿後は管理人承認待ちとなり、承認の上公開されます。記事とは関係のないトラックバックは予告なく削除対象となりますので予めご了承ください。



ブログタイトルでHTMLを有効にするカスタマイズ(その4)

やっと試行錯誤の結果・・・・、うまくいきました。いやぁ、、疲れた。 「ブログタイトルでHTMLを有効にするカスタマイズ(その3)」の記事...

ブログタイトルでHTMLを有効にするカスタマイズ(その3)

近日、タイトルにアイコンを付加した場合IE6ではタイトル部分がつぶれたようになってしまうことへの対応はないものか・・・、この検証を...

ブログタイトルでHTMLを有効にするカスタマイズ(その2)

前記事で「ブログタイトルでHTMLを有効にするカスタマイズ」を紹介したが、今回はその補足記事となります。 IE6との兼ね合いでアイコンで...

コメント


コメントの投稿

投稿後は管理人承認待ちとなり、承認の上公開されます。記事とは関係のないコメントは予告なく削除対象となりますので予めご了承ください。


非公開コメント

ブログ内 記事検索
カテゴリ
全記事一覧表示
カテゴリ別全タイトル表示 NEW
最近のコメント(コンパクト)
データ取得中...
最新記事
最新コメント
最新トラックバック
カレンダー(月別)
06 ≪│2017/07│≫ 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
月別アーカイブ
タグリスト

RSSリンクの表示
メールフォーム

名前:
メールアドレス:
件名:
本文:

ホームページリンク
素材リンク集
ゆーりの休日 2000ピクセル以上のフリー写真素材集 写真素材ポラリス
フリーエリア
リンク
プロフィール

やっすぃぃぃー

Author:やっすぃぃぃー

趣味はダイビングと鉄道旅行。ダイビングライセンスはダイブマスター、鉄道ではJR全線乗りつぶし達成済という異才。温泉、駅弁、ラーメン、路面電車、お城巡りも好きな凝り性。横浜市内在住。HP

やっすぃぃぃーの愛車
レガシィ

スバル・レガシィB4の話題を『みんカラ』SNSでいろいろまとめてます。車の話題を随時掲載中です♪
『亡き後を考える』シリーズ記事
温泉トピックス
温泉比較リスト
温泉マップ
GoogleMAPで温泉マップを作成しました。湯巡りの際のご参考に!

伊東温泉共同浴場10湯
鹿児島市内温泉銭湯20湯
ブログ開設から何日経った?
サイト内 人気ページランキング
検索サイト キーワードランキング
FC2拍手ランキング
FC2アクセスランキング
26位 温泉旅行
418位 旅行
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
ブログパーツ レンタルCGI
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。