スポンサー広告

スポンサーサイト

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

《FC2》(マルチカテゴリー)《FC2》テンプレ改造etc.

プラグインタイトルを画像ロゴに

いくつかの共有テンプレートで、メニューのタイトルに、画像ロゴをつけてます。
これの方法について、ご質問がありました。
共有テンプレートの場合、多くの方は公式プラグインをお使いだろう、という前提で、もっともよく使う公式プラグインは無改造でロゴがでるように、下記のように設定しています。

▼HTML

<!--plugin-->
<!--plugin_first-->
<div class="sidemenu_body0 p<%plugin_first_tag>" id="p<%plugin_first_no>">
(略)
<!--/plugin_first-->
<!--/plugin-->
<!--plugin-->
<!--plugin_second-->
<div class="sidemenu_body p<%plugin_second_tag>" id="p<%plugin_second_no>">
(略)
<!--/plugin_second-->
<!--/plugin-->


ソースを見ると、p<%plugin_first_tag>、p<%plugin_second_tag>の部分が、.pentry、.ptrackback、.plinkなどと、出力されています。

▼スタイルシート

/* Sidemenu logo */
.puser{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_menu.gif) no-repeat;}
.pentry{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_recent.gif) no-repeat;}
.ptrackback{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_trackback.gif) no-repeat;}
.plink{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_link.gif) no-repeat;}
.prss{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_rss.gif) no-repeat;}
.parchive{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_archive.gif) no-repeat;}
.pcategory{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_category.gif) no-repeat;}
.padvcategory{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_category.gif) no-repeat;}
.pcomment{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_comment.gif) no-repeat;}
.plink{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_link.gif) no-repeat;}
.parchive{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_archive.gif) no-repeat;}
.psearch{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_search.gif) no-repeat;}
.pcalendar{background:url(http://blog-imgs-34.fc2.com/a/d/a/adankadan/key_dt7_calendar.gif) no-repeat;}



しかし、個別のブログで設定する場合、とくに複数のフリーエリアをお使いの場合は、プラグインナンバーだけでいいんじゃないかと思います。2段階でカスタマイズするのが、たぶん、楽かと。

 いただいた例は公式「Japon」なので「plg_title」部分に背景がついています。
まず、第一段階としては、「plg_title」を下記のように手直しして、一度表示させ、プラグイン番号を正確にメモをとります。

<!--plugin-->
<!--plugin_first-->
<dl class="sidemenu_body">
<dt class="plg_title" id="p<%plugin_first_no>"><%plugin_first_title>★p<%plugin_first_no></dt>
(略)
<!--/plugin-->

<!--plugin-->
<!--plugin_second-->
<dl class="sidemenu_body">
<dt class="plg_title" id="p<%plugin_second_no>"><%plugin_second_title>★p<%plugin_second_no></dt>
(略)
<!--/plugin-->

 第二段階として、上で判明したプラグイン番号に従って、スタイルシートを設定します。
▼HTML

<!--plugin-->
<!--plugin_first-->
<dl class="sidemenu_body">
<dt class="plg_title" id="p<%plugin_first_no>"><img src="[透過GIFのURL]" title="<%plugin_first_title>"></dt>
(略)
<!--/plugin-->

<!--plugin-->
<!--plugin_second-->
<dl class="sidemenu_body">
<dt class="plg_title" id="p<%plugin_second_no>"><img src="[透過GIFのURL]" title="<%plugin_second_title>"></dt>
(略)
<!--/plugin-->


▼スタイルシート

#p[番号]{background:url(入れたい画像のURL) no-repeat;}



 これだけの説明だとわかりにくいとは思いますが、実際にテンプレートに第一段階の手直しをしていただければ、各プラグインに違う番号が表示されてきますので、ピンとくるんじゃないかと思います。


1/17追記


入れる画像を見せていただいて思ったのですが、コレですとおそらく、梅の花+曲線の画像は生かすんですよね?
そういう前提で、タグを調整しました。
http://adankadan.blog47.fc2.com/?template=japon&index
▼HTML

<!--plugin-->
<!--plugin_first-->
<dl class="sidemenu_body">
<dt class="p<%plugin_first_tag>" id="p<%plugin_first_no>"><img src="http://blog-imgs-18.fc2.com/a/d/a/adankadan/touka.gif" title="<%plugin_first_title>"></dt>
(略)

<!--plugin_second-->
<dl class="sidemenu_body">
<dt class="p<%plugin_second_tag>" id="p<%plugin_second_no>"><img src="http://blog-imgs-18.fc2.com/a/d/a/adankadan/touka.gif" title="<%plugin_second_title>"></dt>
(略)

▼スタイルシート

#right .sidemenu_body {
margin-bottom: 5px;
background: url(http://templates.blog.fc2.com/template/japon/japon_side.gif) right top no-repeat;
}
.sidemenu_body dt{height:31px;
margin:0;
padding:5px 20px 10px 0px;
color:#000;
font-family : Verdana, "Century Gothic", sans-serif;
font-size : x-small;
voice-family : "\"}\"";
voice-family : inherit;
font-size : small;
}
#p625248{background:url(http://blog-imgs-35.fc2.com/a/d/a/adankadan/dt7_category.gif) no-repeat;}
(略)

関連記事
スポンサーサイト

ありがとうございます!

麻生さん、本当にありがとうございます(泣)
プラグイン番号の意味もやっと分かったので早速やってみました!

が、プレビューしてみるとやはりちゃんと表示されないのです。
こんなに丁寧に解説してくださったのに…。何てダメな私…orz
本当にすみません。

【透過GIFのURL】というのが、よく分からなかったのですが
【入れたい画像のURL】とはまた違うんでしょうか?

使いたい画像は文字を組み込んで一つの画像にしています。
http://blog-imgs-35.fc2.com/h/a/p/hapiholi/profile.gif


#p105119{background:url(http://blog-imgs-35.fc2.com/h/a/p/hapiholi/profile.gif) no-repeat;}

↑これを挿入する場所はスタイルシートのサイドメニューの所であっていますか?

もうホントに質問ばかりですみません(泣)
よろしくお願いします_○/|_

ごめんなさい、いま、「デザインテーマ」の締め切りを

にらみながらの作業が入っているので、、
そっちが一段落したら、ちょっと実際に組み立ててみますね>Japon

少々お時間ください。

すみませんー!

こちらこそお忙しいのにお手間とらせてしまって申し訳ないです(泣)
いつでもお時間のある時で構いません。
ホントにすみません。よろしくお願いしますー。

梅さん

とりあえず、記事の末尾に追記しました(1/17追記の部分)。

>【透過GIFのURL】というのが、よく分からなかったのですが
【入れたい画像のURL】とはまた違うんでしょうか?
「入れたい画像」は背景として表示させますので、「何も入れなくてもいい」のですが。それだと視覚障害者向けのブラウザなどで支障がでるので、いちおう「見えない画像」をいれて、そこに「title」指定できるようにしています。

出来ました(号泣)

麻生さん本当にありがとうございましたー!!
おかげさまでやっとやっと出来ました(泣)

最後まで親切丁寧に教えていただき大感謝です!!
貴重なお時間とらせてしまって本当にすみませんでした((○┓
ありがとうございました!!!

おお、「なるほど」の

仕上がりではないですか^^

お役にたって光栄です。

コメントの投稿

非公開コメント

プロフィール

麻生(阿檀) Author:麻生(阿檀)

【このブログについて】
ブログで小説を手軽に連載したい方のための、
ブログ紹介/FC2テンプレート紹介が、メインだったはずなのですが。

ミ^。^彡っ。oO○(いつのまにやら、かなりとんでもなくごった煮ブログになっております。)

MyToyBox

Clock!
doodel ?publish
?style3=10084&index



35101 02 03 04
カレンダー
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 - - - - -
検索フォーム
タグリスト
                                                 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。