サイドバーのタイトルの横に画像を入れたい
プロフィール、カレンダーなどの、プラグインのサイドバーのタイトルの左横に小さいアイコン画像を入れたいです。
使っているテンプレートは【tmp_dot_combination】です。
ブログURLは
http://closewhite.blog.fc2.com/
です。
記事タイトルの左横にあるリボンのアイコンのように、サイドバータイトルの左横にも同じように表示させたいです。
「プラグインサイドバーのタイトル部分(画像)の変更方法。」というトピックも見ましたが理解できませんでした…。
リボンのアイコン画像はプロフィール、カレンダーなど種類を個別にしたいです。
よろしくお願いします。
2014年06月13日 18:27 by 深雪
横から失礼します。
http://www.tohoho-web.com/css/prop/background-position.htm
値の指定は、こちらで紹介されているように
background-position: 20px 30px; /* 左上から右に20px, 下に30px */
のようにするのだと思います。
2014年06月15日 11:56 by ギル
標野ゆきさん
おっしゃる通りで、<%plugin_first_title>が抜けていました…
本当にありがとうございます。
この調子でこれから一つずつ設定していきます。
それとリボンの位置ですが、
>表示位置については background-position : left top の部分を値による指定に
変更するなどして調整してみてください。
ということでしたが、値による指定変更のやり方がよくわからなくて、
<div class="sidebar_title" style="text-al ign:<%plugin_first_talign>" id="pt_<%plug in_first_title>"> &nbs p<%plugin_first_title>
</div>
このように空白を入れたのですが、これでも大丈夫でしょうか?
よろしくお願いします。
2014年06月15日 10:21 by 深雪
今気づいたのですが
<!--▼プラグイン1-->
<!--plugin_first-->
<div class="sidebar_title" style="text-a lign:<%plugin_first_talign>" id="pt_<%plu gin_first_title>"><%plugin_first_title> </div>
もしかして
太字の部分の変数が落ちているのではないでしょうか。
この部分に<%plugin_first_title>がないとタイトル自体が表示されません.
2014年06月14日 23:32 by 標野ゆき
#pt_PROFILE {
id="pt_<%plugin_first_title>
上のアンダーバーをいったん外してみてください。
自分が試したときには
うっかりひらがな入力で打ち込んでしまった全角アンダーバーを
半角に変換した、たったそれだけでも正しく反映されませんでした。
(半角英数で入力しなおしたら正しく表示されました)
なかなか気難しいテンプレートのようです。
挿入した文字の半角全角が違っていて
うまく表示されなかったケースもありますので、そうした点にもご注意ください。
これまでの例では
デフォルトのテンプレートなら首尾よくいくのに
質問の時点ですでにかなりカスタマイズしてあったテンプレートだった所為か
どうしてもうまくいかなかった~というケースが確かにあります^^;
2014年06月14日 21:28 by 標野ゆき
標野ゆきさん
解答ありがとうございます。
太字の部分入れてみましたが、何も変わりませんでした…
なんででしょう…
これ以上はわかりませんかね?
もしわかればよろしくお願いします…。
2014年06月14日 18:07 by 深雪
回答者さんのブログページのHTMLソースを参照してみると
<div class="sidebar_title" style="text-a lign:left" id="pt_PROFILE">
</div>
このように、前後の指定はちゃんと読みこまれているようです。
読みこまれているのに表示されないということは
このIDで他の表示スタイルを全部指定しなければならないということかも。
#pt_PROFILE {
font: 12px "Trebuchet MS", Monaco, sans-serif ;
letter-spacing: 1px;
color: #c4efff;
margin-bottom: 5px;
padding: 5px 5px 0 20px;
background-image: url(http://blog-imgs-68.fc2.com/c/l/o/clo sewhite/2014061219461752a.jpg);
background-repeat : no-repeat;
background-position : left top;}
太字部分の文字をこのカッコ内に挿入してみてください。
2014年06月14日 17:05 by 標野ゆき
yosoilueさん、標野ゆきさん
ありがとうございます。}が抜けていたんですね…
}をちゃんと追加しましたが、ブログが今のようになってしまいました。
リボンの画像が半分しか表示されていなくて、PROFILEの文字もありません。
どこを直せばしっかり表示されますか?
何度もすみません。
よろしくお願いします。
2014年06月14日 15:29 by 深雪
yosoilueさんも指摘してくださってますが
padding: 5px 5px 0 20px;
}
#pt_PROFILE {
閉じカッコが落ちてますね。
この修正でうまくいくと良いのですが。
2014年06月14日 14:37 by 標野ゆき
}
コピーミス
2014年06月14日 14:19 by ロギラキ
全く同じように、以下のように変更しましたが、ブログが見ての通りの状態になってしまいます…
HTML↓
<!--▼プラグイン1-->
<!--plugin_first-->
<div class="sidebar_title" style="text-al ign:<%plugin_first_talign>" id="pt_<%plug in_first_title>">
</div>
<div class="sidebar_contents" style="text -align:<%plugin_first_ialign>">
<%plugin_first_description>
<%plugin_first_content>
<%plugin_first_description2>
</div>
<!--/plugin_first-->
スタイルシート↓
/*サイドバーの各タイトル*/
.sidebar_title {
font: 12px "Trebuchet MS", Monaco, sans-serif;
letter-spacing: 1px;
color: #c4efff;
margin-bottom: 5px;
padding: 5px 5px 0 20px;
#pt_PROFILE {
background-image: url(http://blog-imgs-68.fc2.com/c/l/o/clo sewhite/2014061219461752a.jpg);
background-repeat : no-repeat;
background-position : left top;}
何が違うのか全然わかりません…
すみません。よろしくお願いします。
2014年06月14日 08:53 by 深雪
Copyright(c)1999 FC2, Inc. All Rights Reserved.
@fc2infoさんをフォロー