注目タグ

質問・疑問

トピック詳細

サイドバーのタイトルの横に画像を入れたい

プロフィール、カレンダーなどの、プラグインのサイドバーのタイトルの左横に小さいアイコン画像を入れたいです。

使っているテンプレートは【tmp_dot_combination】です。

ブログURLは
http://closewhite.blog.fc2.com/
です。

記事タイトルの左横にあるリボンのアイコンのように、サイドバータイトルの左横にも同じように表示させたいです。

「プラグインサイドバーのタイトル部分(画像)の変更方法。」というトピックも見ましたが理解できませんでした…。

リボンのアイコン画像はプロフィール、カレンダーなど種類を個別にしたいです。

よろしくお願いします。

2014年06月13日 18:27  by 深雪

コメント一覧 23件中、21~23件表示

  • 標野ゆきさん
    とてもわかりやすい解答ありがとうございます。
    とりあえずアイコンを表示させることはできました。
    二つ目の解答、紹介してくださったサイトも見ながら、各タイトルごとにまた設定してみます。またわからなかったら質問します。
    ありがとうございます!

    2014年06月14日 00:30 by 深雪

  • 具体的にいうと
    テンプレートHTMLの以下の部分に
    <div class="sidebar_title" style="text-al ign:<%plugin_first_talign>" id="pt_<% plugin_first_title>">
    太字部分のようなID指定を追加して

    テンプレートのスタイルシートの以下の部分に
    /*サイドバーの各タイトル*/
    .sidebar_title {
    font: bold 13px "Trebuchet MS", Monaco, sans-seri f;
    letter-spacing: 1px;
    color: #362F2D;
    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;}

    太字部分のようなスタイル指定を必要な数だけ追加していくというやり方です。

    スタイル指定のpt_の後ろの文字列は
    AMAZON CALENDAR CATEGORIES などをそれぞれ挿入してください。

    2014年06月13日 23:25 by 標野ゆき

  • テンプレートのスタイルシートの以下の部分に
    /*サイドバーの各タイトル*/
    .sidebar_title {
    font: bold 13px "Trebuchet MS", Monaco, sans-seri f;
    letter-spacing: 1px;
    color: #362F2D;
    margin-bottom: 5px;
    padding: 5px 5px 0 20px;
    background-image: url(http://blog-imgs-68.fc2.com/c/l/o /closewhite/2014061219461752a.jpg);
    background-repeat : no-repeat;
    background-position : left top;

    }
    質問者さんがカスタムしたものと同じ太字部分を挿入すると
    プラグインタイトルの左端にリボンアイコンが表示されると思います。
    表示位置については background-position : left top の部分を値による指定に
    変更するなどして調整してみてください。

    自分が参照したのは
    カスタマイズ前のtmp_dot_combinationなので
    あちこちカスタマイズされているご使用中のテンプレートとは
    動作が異なる可能性も否定できませんし
    カスタム後の正確な表示を確認することもできませんので、飽くまで一般論です。

    プラグインタイトルに
    プラグインごとに違うスタイルを指定する方法については
    http://paro2day.blog122.fc2.com/blog-entry-531.html
    こちらの古参ブロガーさんが解りやすく解説されていますので、ご参考まで。

    回答者さんのテンプレートのプラグインタイトルはシンプルな英語題なので
    <%plugin_first_title> <<この手の変数を使って
    HTMLのプラグインタイトル部分にクラス名かIDを設定してから
    スタイルシートにスタイルの指定を追加する方法が使えるのではないかと思います。
    参考URLのページの最下部、備考のあたりに触れられています。

    2014年06月13日 22:38 by 標野ゆき

<< < 1 2 3