FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

プラグインタイトル前にアイコンを飾る

プラグインタイトル前にアイコンを飾る方法を紹介します。
HTMLを編集します。

【standard】

～
<div class="menu_title" style="text-align:<%plugin_first_talign>"><img src="http://～" align=absmiddle /><%plugin_first_title></div>
～


～


～
<div class="menu_title3" style="text-align:<%plugin_third_talign>"><img src="http://～" align=absmiddle /><%plugin_third_title></div>
～


～


～
<div class="menu_title" style="text-align:<%plugin_second_talign>"><img src="http://～" align=absmiddle /><%plugin_second_title></div>
～

【lightframe】

～
<div class="plugin3_title" style="text-align:<%plugin_third_talign>"><img src="http://～" align=absmiddle />
<%plugin_third_title></div>
～


～


～
<div class="plugin1_outline">
<div class="plugin1_title" style="text-align:<%plugin_first_talign>"><img src="http://～" align=absmiddle /><%plugin_first_title></div>
～


～


～
<div class="plugin2_title" style="text-align:<%plugin_second_talign>"><img src="http://～" align=absmiddle /><%plugin_second_title></div>
～

"http://～"にはアイコン画像があるURLを記述してください。
アイコン画像と文字列の中央が揃えて表示されるはずですが、下端を揃えたい場合は
align=absmiddle
を
align=absbottom
と書き換えてください。

記事編集 [ 2006/02/19 01:21 ] カスタマイズ　共通 | TB(0) | CM(37)

≪もう少々お待ちください | HOME | 新テンプレートをリリースしました。≫

出来ました～

いたおさん、ありがとうございます！！！
出来ました！とっても可愛くカスタマイズできました。
また何かあったらよろしくお願いします。

[ 2006/02/19 22:32 ] [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2006/02/24 02:25 ] [ 編集 ]

> かぴばらさん

こんばんは、かぴばらさん。
サイトにフィットした素晴らしいアイコンですね。
可愛くカスタマイズしてくれて私も嬉しいです。
また何かあれば何でも聞いてくださいね。

[ 2006/02/26 04:04 ] [ 編集 ]

いたおさん、こんにちは。
いつも丁寧な解説をありがとうございます。

ヘッダ部分背景に画像を置いているのですが、更にタイトルに画像（サイトロゴを作成したもの）を重ねることはできますか？
今の文字表示から画像表示にできれば、と考えています。
プラグインタイトル前にアイコンを飾る要領でやってみたのですが、うまくいきません。
よろしくお願いいたします。

[ 2006/04/01 13:00 ] [ 編集 ]

> たろんさん

こんばんは、たろんさん。
ヘッダ背景を画像にして更にタイトルを画像にすることは可能です。HTMLを編集します。


～
<h1><a href="<%url>"><%blog_name></a></h1>
～


これを次のように書き換えます。


～
<h1><a href="<%url>" title="<%blog_name>"><img src="画像URL"></a></h1>
～


これでタイトルを画像にすることが出来ますよ。

[ 2006/04/01 22:34 ] [ 編集 ]

ありがとうございます

いたおさん
ありがとうございます！
画像がちゃんとタイトルの場所に表示されました！

そこで、すみませんがもうひとつ質問させて下さい。
画像の周りに枠が紫色で出てしまいます。
これをとる方法はないでしょうか？
ちなみに背景色は白です。
どこを直せばいいでしょうか・・・
何度もすみませんが、よろしくお願いいたします。

[ 2006/04/02 13:10 ] [ 編集 ]

> たろんさん

こんにちは、たろんさん。
申し訳ありません。border="0"の指定を忘れていました。


～
<h1><a href="<%url>" title="<%blog_name>"><img src="画像URL" border="0"></a></h1>
～


これで画像周りの枠がなくなるはずです。

[ 2006/04/02 13:54 ] [ 編集 ]

多謝

ありがとうございます！！！
思い通りにカスタマイズできました。
これからも様々なテクニックを参考にさせて下さい。

[ 2006/04/04 00:25 ] [ 編集 ]

> たろんさん

こんばんは、たろんさん。
思い通りにカスタマイズ出来て良かったですね。
これからも少しでも参考に出来る記事を書けるように頑張ります。

[ 2006/04/05 00:01 ] [ 編集 ]

立て続けに失礼します

私のブログではカテゴリーの出だしのところが●になっているのですが、これを

金券カード

商品カード
などのようにするのは可能でしょうか？

[ 2006/09/19 10:54 ] [ 編集 ]

> マック星輝さん

リストの●を画像にしたいのであれば次の記述をスタイルシートに追加します。

ul {
list-style-image: url(http://～);
}

http://～の部分には画像があるURLを記述してください。
リスト化されたカテゴだけ変えたいのであれば、IDがcategorylistとされているので

#categorylist ul {
list-style-image: url(http://～);
}

とします。
たださらに細部(カテゴリ内の金券カードや商品カード別)に画像を変えることはできません。

[ 2006/09/19 23:37 ] [ 編集 ]

はじめまして

fullmoon_howli を使わせて頂いてます。
どうしてもわからないことがあったので質問させて頂きたいんですが、カテゴリーの前にアイコン画像を設定した後、画像と文字のズレを直す方法で

/* 画像 */
img {
margin: 5px;
}

を修正すればいいとのことですが、スタイルシートの所を探しても↑の部分が見つからないんです。
そういった場合どうすればズレを直せるでしょうか？
わかりづらい説明ですいません＞＜
返答よろしくお願いします。

[ 2006/10/22 11:30 ] [ 編集 ]

> Madderさん

こんにちは、Madderさん。
現状を確認したいのでブログURLを教えて頂けませんでしょうか。宜しくお願いします。

[ 2006/10/22 16:15 ] [ 編集 ]

すいません

URL明記するの忘れてました（汗）
あと、もしどこか変な所（崩れて表示されるとか見にくいとか）があればご指摘お願いします。

[ 2006/10/22 23:02 ] [ 編集 ]

> Madderさん

こんばんは、Madderさん。
なるほど。Ver.7をお使いでしたか。そういえばこのスタイルシートのimgは新バージョンでは取り外してました。私も過去記事を見直さないといけませね。

スタイルシートのどこでもいいので次の記述を加えてください。

.menu_title img {
vertical-align:middle;
}
.menu_title3 img {
vertical-align:middle;
}

と記述してください。これでプラグインタイトルのアイコン画像と文字を揃えることが出来ます。

記事中も含め、全ての画像と文字も揃って構わないのなら

img {
vertical-align:middle;
}

と加えてください。

他に特に変なところは見当たりません。
よくカスタマイズ出来てると思います＾＾

[ 2006/10/23 02:47 ] [ 編集 ]

ずいぶん期間があいてしまいましてすみません

「リストの●を画像にしたいのであれば次の記述をスタイルシートに追加します。」
とのことですが、スタイルシートのどこに入れればいいのでしょうか？

また「リスト化されたカテゴだけ変えたいのであれば」とのことですが、意味が理解できません（涙。すみません読解力なくて。。。

「たださらに細部(カテゴリ内の金券カードや商品カード別)に画像を変えることはできません。」とのことですが、すると、画像を入れたら全て同じ画像が●のところに付くという解釈でよろしいでしょうか？

またカテゴリの色を変えようと思っているのですが、どこをいじったらいいか分かりません。
私のブログの「金券カード全員プレゼント」などを他の色に変えたいのですが。。。

似たような質問ばかりですみませんが、よろしくお願いします

[ 2006/10/23 11:24 ] [ 編集 ]

こんばんは

さっそく教えて頂いた通りにやってみたら無事ズレを修正することができました♪
スタイルシートについてはあまり詳しくないのでとても助かりました、ありがとうございました!!
またわからないことがでてきたら質問させて頂くかもしれませんがよろしくお願いします。

[ 2006/10/23 17:53 ] [ 編集 ]

> マック星輝さん

こんばんは、マック星輝さん。

リストの●を画像にするためのスタイルシートへの記述ですが、一番下に書いて頂ければ問題ないはずです。

>「リスト化されたカテゴだけ変えたいのであれば」・・・
申し訳ありません。私の表現が適切でありませんでした。
「リスト化」→「ツリー化」と修正してください。

> 画像を入れたら全て同じ画像が●のところに付くという解釈でよろしいでしょうか？
その通りです。全ての●が同じ画像になってしまいます。

> 「金券カード全員プレゼント」などを他の色に変えたいのですが。。。
これも一箇所だけ違う色にすることは出来ません。大カテゴリの見出し全てが同じ色に変わってしまいますがよろしいでしょうか？

[ 2006/10/24 22:58 ] [ 編集 ]

> Madderさん

こんばんは、Madderさん。
アイコンと文字が揃ってますね。私が古い記事をそのままにしたために混乱させて申し訳ありませんでした。
また何でも聞いてくださいね。

[ 2006/10/25 01:13 ] [ 編集 ]

教えて下さい

初めまして。lightframe_whiteをカスタマイズしようと
思ってるんですが、プラグインタイトル自体を
画像にするにはどうしたらよいですか？
不可能であれば、せめてlightframe_whiteでの
プラグインタイトル前に
アイコンを飾る方法を教えて下さいませ。

[ 2006/11/18 03:38 ] [ 編集 ]

> toyotyunさん

こんばんは、toyotyunさん。

プラグインタイトルを画像にする方法を記事に掲載したのでこちらをご参照ください。

プラグインの背景を画像にする
http://10plate.blog44.fc2.com/blog-entry-100.html

カスタマイズ頑張ってくださいね。

[ 2006/11/18 23:32 ] [ 編集 ]

こんにちは

.menu_title img {
vertical-align:middle;
}
.menu_title3 img {
vertical-align:middle;
}

をスタイルシートに入れましたが高さが揃いません。
以前使用していた蝶のアイコンは画像の下を少々切り取り、無理矢理高さを合わせておりました。
今回の物はそれが出来なかった為合わせる事が出来ませんでした。

お忙しい所を申し訳ありませんが、御指導宜しくお願い致します。

[ 2006/12/04 13:52 ] [ 編集 ]

> ちゃんさん

こんばんは、ちゃんさん。
申し訳ありません。また私の回答が遅すぎました。既にアイコンを飾られてますね。画像の大きさを調整して合わせたのかな？
時既に遅しですがこの質問の記事を書かせてください。他の方にもためになるとても良い質問だと思います。

[ 2006/12/06 00:17 ] [ 編集 ]

お手数お掛けします

文字に対して画像が大きすぎるのが原因かな？
と思ったので、切り取りの加工をしていました。
しかしGIF動画だと動きが止まってしまうらしく…(私のやり方がまずいのかもですが

)

プラグインタイトルの文字を大きくすればいい事だとは思うのですが、「アイコンは大きく・タイトルは小さ目」の場合だと私の知識ではどうにもこうにも(汗)

と言う事で、現在最小のもの(8×8)に変えてあります。
文字と同じ大きさのpx数だとやはりしっくりきますね

[ 2006/12/06 14:10 ] [ 編集 ]

> ちゃんさん

こんばんは、ちゃんさん。
たしかに文字と同じ大きさの画像を使えば自然と揃って表示されるので問題ないですね。

一応この記事を書き直てみました。もし大きな画像を使いたいときはこの記事を参考にしてみてくださいね。

[ 2006/12/07 00:39 ] [ 編集 ]

いつも有難うございます！

いつも細かい質問ばかりですみません
早速貼りなおしました！

このタグの存在を知りませんでした
勉強不足です…
そしてまた教えて頂く事が度々あるかと思いますが宜しくお願い致します。

お手数お掛けしました

[ 2006/12/07 01:39 ] [ 編集 ]

> ちゃんさん

こんばんは、ちゃんさん。
早速アイコン画像が変わりましたね。GIF動画もちゃんと動いてますよ。
私もまだまだ知らないことがあるのですが、皆さんの質問について調べることで新たな発見をしています。今回もちゃんさんのおかげでまた一つ知識が増えました。有難う御座います。

[ 2006/12/07 23:14 ] [ 編集 ]

こんにちは

その後、「プラグインタイトルを画像にする」をやってみたくてアイコンを外してしまいました。。。
質問させて頂いて数日しかたっていないのに申し訳ありません

クリスマスが近かったので雪のアイコンをつけたのに、今度は和風(？)に…
季節無視ですね(^_^;)

[ 2006/12/09 16:10 ] [ 編集 ]

> ちゃんさん

こんばんは、ちゃんさん。
いいんですよ。どんどん新しいカスタマイズに挑戦してくださいね。雪のアイコンをつけるつもりが和風になりましたか。私もレンタルビデオやで目的のものとは違うものを借りてしまうことがあるのでその気持ち解かります＾＾

[ 2006/12/10 00:14 ] [ 編集 ]

アイコンとタイトルの間

はじめまして。
こちらの記事を参考にしてプラグインタイトルの前後にアイコンを置くことができました。ありがとうございました。
ところで質問なのですが、アイコンとタイトルがぴったりとくっついてしまっていて、なんだか窮屈な感じがします。間を広げるにはどうすればいいでしょうか？
お忙しいところ申し訳ありませんがアドバイスいただければ幸いです。

[ 2007/04/20 02:11 ] [ 編集 ]

>ぷふさん

アイコンとタイトルの間に

を加えてください。これは半角スペースを表示するタグです。連続して加えると加えただけスペースが広がりますよ。

[ 2007/04/22 00:55 ] [ 編集 ]

＞いたおさん

＞いたおさん
半角スペースのタグが表示されていないようですが、

＆ｎｂｓｐ；

↑これのことですよね？
（※ここでは全角で書いてますが、本来は半角です）

[ 2007/04/22 11:28 ] [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/04/22 17:13 ] [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/04/22 17:38 ] [ 編集 ]

＞いたおさん＆かどりんさん

あの隙間に何かが書いてあって、私だけが見えないのかと思ってました。（ちょっと焦りました）
半角でと入れればいいのですね。
ありがとうございました。早速やってみます。
HTMLでstyle=・・・の形でマージンを入れる方法を薦められたのですが、それだと大きさが違うアイコンを使った時にまためんどくさくなりそうだったので敬遠してました。
ほんとにありがとうございました。

[ 2007/04/22 19:24 ] [ 編集 ]

> かどりんさん、ぷふさん

かどりんさん、ナイスフォロー有り難うございます＾＾

すみません、ぷふさん。そのまま書いてしまったために本当に半角スペースが表示されてしまうという大ボケをしてしまいました。かどりんさんの指示するとおりにすれば半角スペースをいれられます。

[ 2007/04/29 22:28 ] [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/06/20 22:38 ] [ 編集 ]

コメントの投稿