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


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


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

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

記事タイトル横にカテゴリ毎のアイコンを設置するカスタマイズ オススメ

お知らせの「記事タイトル レイアウト変更」記事で概要はお伝えしましたが、今回は具体的なカスタマイズ方法について記事にまとめました。FC2のいろいろなテンプレートでも該当箇所に手を加える事で実現できるはずなので、興味がある方はご参考にどーぞ。

さて実際の対処方法(仕様)を考慮している際にいくつか方法は思いついたのですが、できるだけ手軽にしたいのとアイコンを設定していなくてもデザインに影響がないように組み立てるのが課題でした。

まずテンプレートの記事タイトル該当箇所にアイコンをつけるスペースを確保します。当初はタイトル背景自体をカテゴリ毎に切り替える事を考えていたのですが、そうすると全カテゴリの背景画像を作成しなければならないのとカテゴリを追加するごとに一緒にメンテするのも手がかかります。そのためアイコンを表示するエリアを確保し、アイコンの設定をしていなければ表示しないように出来るよう考えました。


<div class="content">
<div class="c_title<%topentry_category_no>">
<h2 id="e<%topentry_no>" class="entry_header">

~~略~~

</h2>
</div>


上記はウチで利用しているsky_cubeテンプレートの場合ですが、<div>タグでエリアを確保し専用のclassを指定します。名前は好みでいいのですが、うちではc_titleとしています。
<%topentry_category_no>はカテゴリの番号の変数なので記事で設定しているカテゴリ番号が代入されます。例えばカテゴリ番号が1ならば、上記では c_title1 となります。<div>タグを入れる位置には気を付けてください。ご利用のテンプレートによって異なりますし、挿入場所を間違えるとレイアウトは必然的に崩れます。プレビューで確認しながら進めてください。

設置するアイコンですが、32x32以下のものがいいでしょう。現状だとアイコンの表示位置とタイトル背景が重なってしまうので、スタイルシートのタイトル背景の表示場所をずらします。


h2.entry_header,
h3.entry_header {
background-image: url(画像のURL);
background-position: 30px top;  /* タイトル背景開始位置 */
~~略~~
}


sky_cubeテンプレートのスタイルシートだと上記部分となりますが、ご利用のテンプレートで相当する部分で調整してください。ここでは左から30pxずらして表示するように手を加えています。またウチでは元々の背景画像自体にも手を加えたので背景の画像URLも変更してます。

スタイルシートに表示するアイコンを必要分記載します。


.c_title1 { 
background-image: url(画像のURL);
background-repeat: no-repeat;
}

.c_title2 { 
background-image: url(画像のURL);
background-repeat: no-repeat;
}


この例ではカテゴリ番号1と2に対しての指定です。該当するカテゴリの番号を指定し画像のURLでアイコンの指定、必要分繰り返し作成すればカテゴリ毎にどんどん増やして個別にアイコンを表示させることができます。指定していないカテゴリはアイコンは表示されません。必要なものだけ指定するのもいいでしょう。

関連記事


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

テーマ : ブログカスタマイズ
ジャンル : ブログ

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ブログユーザー)

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



鍵マークをつけました

このブログには パスワードが要る記事があります。

コメント


cup トラバさせて頂きました


私のやり方があってるか解りませんが、ありがたく使わせて頂きます。

cup sakuraiさん


コメント&トラバありがとうございます。

パスワードの要る記事タイトルに鍵アイコンをつけられたのですね。FirefoxとGoogleChromeではちゃんと表示されています。

ただ、IE6だと表示がこんな感じです。

http://blog-imgs-30.fc2.com/y/a/s/yassee/20100215-2.jpg

sakuraiさんはIE6はサポート範囲でしょうか?

cup ありがとうございます


すいません、サポート範囲とか余り考えてないです。
とりあえず私のところで見れればいいかな程度です。

それから、画像はPGN⇒GIFに変えました。
ここで紹介された「IE TESTER」でも大丈夫なのでたぶん大丈夫でしょう(^_^;)
また、よろしくお願いします。

cup sakuraiさん


IE6でちゃんと表示されるようになりましたね(^^)。

ただ右のメニューがカラム落ちになってます。こちらのIE6でもIETesterでも状況は同じです。
それとエラーメッセージがいくつか見られます。一応、ご報告まで。

cup 返事が遅れてすいません


一応、コラム落ちは防げてますが、もう疲れたので、また、気が向いたら、IE6と対決したいと思います。

cup sakuraiさん


お疲れ様です・・・。

IE6は本当にダダっ子なので手がかかりますね。
がんばってください~

コメントの投稿

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


非公開コメント

ブログ内 記事検索
カテゴリ
全記事一覧表示
カテゴリ別全タイトル表示 NEW
最近のコメント(コンパクト)
データ取得中...
最新記事
最新コメント
最新トラックバック
カレンダー(月別)
07 ≪│2017/08│≫ 09
- - 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アクセスランキング
13位 温泉旅行
227位 旅行
ブロとも申請フォーム

この人とブロともになる

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