注目タグ

テンプレート・プラグイン

トピック詳細

プラグインサイドバーのタイトル部分(画像)の変更方法。

はじめまして。
プラグインサイドバーのタイトル部分(画像)の変更方法についての質問です。

以前のトピックにてサイドバーのタイトルを【画像】に変更する方法 というのがあったのですが、私の知識不足 、理解力不足の為、うまく処理することができませんでしたので、新しくトピックにて質問させていただくこととなりました。

テンプレートは【grey_3column】を使用しています。

プラグインサイドバーのタイトル部分(画像)を、自分で作成した画像にしたいのですが、上記のトピックにもあるように、フリー スペース・プロフィールなどすべての画像が同じ画像に変わってしまいます。
個別に1つ1つ画像を指定して変更したいのですが、HTML・CSSのどの辺を編集すればよろしいのでしょうか?

宜しくお願いいたします。

2010年11月07日 13:11  by 

コメント一覧 9件中、1~9件表示

  • 標野ゆき 様

    追記までいただきまして、ありがとうございます!!
    無事に着々と完成してきております。

    タイトル部分が消えなかったので、スペースを入れている状態ではありますが.....(汗

    あとは【ホーム】のボタンを画像に入れ替えるのと、【top pege】のボタンを画像に入れ替えようと思っています。

    2010年11月15日 19:56 by

  • ちゃんとプラグインにIDが表示されてますね。よかったです~。

    ただ
    フリーエリアのプラグインのスタイル指定に
    末尾の } が抜けているので、せっかくのオリジナル画像が
    反映されていないみたいですね。まだ編集中ということでしょうか。


    素敵なブログを完成なさって
    たくさんのゲストさんを迎えられるようお祈りしています。


    ****

    (2010/11/12 追記)

    dl.sidemenu_body .plg_title {
    (中略)
    }
    ↑この指示はもうサクッと削っちゃった方が良いかも。
    同じコンテンツに対する指定ですから、ダブらない方が良いかと。

    それでもプラグインタイトルの文字が消えなかったら
    #pt677487 {
    color: #ffffff !important;
    background-image: url(画像アドレス) !important;
    text-align: center !important;
    }

    color: #ffffff !important; の部分を
    color: #333333 !important; に
    替えてみたらどうでしょうか。
    少なくとも背景色に溶け込んで見えなくなるはずです。


    プラグインタイトルの上下左右が
    はめ込みたい画像に対して小さい所為で
    画像の大部分がはみ出してしまっているのは

    height:250px;
    ↑こういう指定をつけ加えたら少しは改善されると思います。
    250の部分は表示を確認しながら調整が必要だと思いますが。

    今使っておられる画像は横幅が大きすぎるので
    今のままではどうがんばってもサイドカラムに収まりませんよね。
    サイドカラムの幅は現行で210pxなので、それより小さくされれば
    スムーズにいくのではないでしょうか。

    2010年11月10日 22:34 by 標野ゆき

  • 標野ゆき 様

    細かい説明のあるサイトを教えていただき、大変ありがとうございました!!
    Parodayさんのページ と標野ゆき様の説明を合わせてできるようになりました!!

    本当に、本当にありがとうございます。


    #pt554050 { /* 最新記事 タイトルのスタイル */
    color: #ffffff !important;
    background-image: url(http://blog-imgs.fc2.com/paroday/st0 1.gif) !important;

    このようにCSS上に指定をしたら解決いたしました。
    ※こちらはParodayさんのページを参考にしています。

    奥が深いんですね。
    テンプレートを変えずに済みました。
    お忙しい中、質問にお答えいただきまして、ありがとうございました。

    2010年11月10日 20:29 by

  • タイトルの表示を変更したいプラグインのidを
    すべて書き取って控えたら、このidを元にスタイルシートに
    タイトル画像を表示するための記述を書き込みます。


    例としてはこんな感じですね。
    #pt309953 {
    color: #ffffff;
    background-image: url(http://blog-imgs-××.fc2.com/×/×/×/×× ×××/plg_prof.png);
    }

    もちろん
    前もってタイトル画像を作って
    plg_prof.pngという名前でアップロードしておく必要があります。


    ↓もともとあるプラグインタイトルの指定↓

    dl.sidemenu_body .plg_title {
    padding-bottom:5px;
    padding-left:5px;
    padding-right: 15px;
    padding-top:5px;<<ここまで4行は囲み罫内の文字の配置
    border-left: 10px solid #FF6600;<<左側の橙色の四角
    border-bottom: 1px dashed #FF6600;<<橙色の下線
    background:#666666;<<背景の色
    color:#FFFFCC;<<文字の色
    }

    を編集しても構わないと思います。
    その場合はdl.sidemenu_body .plg_titleの部分を
    #pt309953といったidの数字で上書きします。

    新しく指定する場合には
    もともとの記述は削ってしまいましょう。



    このように
    タイトルを変更したいプラグインのスタイルを全部
    書き加えて更新すれば、晴れてカスタマイズの完了という事になります。


    なんでしたら挑戦してみて下さいね。

    2010年11月10日 00:10 by 標野ゆき

  • この2ヶ所の記述に
    以下のように赤文字の部分を挿入します。


    <div id="sidemenu1">
    <!--plugin-->
    <!--plugin_first-->
    <dl class="sidemenu_body">
    <dt class="plg_title" id="pt& lt;%plugin_first_no>" style="text-align:< ;%plugin_first_talign>"><%plugin_first_title&g t;</dt>

    ~~~(隔たっています)~~~

    <div id="sidemenu2">
    <!--plugin-->
    <!--plugin_second-->
    <dl class="sidemenu_body">
    <dt class="plg_title" id="pt& lt;%plugin_second_no>" style="text-align:&l t;%plugin_second_talign>"><%plugin_second_titl e></dt>

    その後
    プレビューボタンを押してプレビュー画面を表示させてから
    「ソースの表示」で、HTML(ソース)を表示させます。
    (たとえばIEの場合は
    画面の上にポインタを置いて右クリックして
    「ソースの表示」をクリックし、別窓が開くのを待ちます)


    HTMLソースの中からプラグインに関する記述を探すと
    たとえば次のようなものがあるはずです。

    <dl class="sidemenu_body">
    <dt class="plg_title" id="pt309953" ; style="text-align:left">プロフィール</dt>


    この id="pt309953" の部分が
    このプラグインの識別番号になります。

    2010年11月10日 00:05 by 標野ゆき

  • 必要ないかもしれないけど
    クダンの質問トピックの参考URLにあった
    プラグイン認識番号の指定法がようやくわかったので
    ちょっと触れてみますね。

    出典は
    Parodayさんのところの
    http://paro2day.blog122.fc2.com/blog-entry-531.html#ppno
    <<こちらのページです。


    以下は
    MovinさんのテンプレートHTMLの抜粋ですが
    (一番下までスクロールしてちょっと戻した辺りにあります)

    <div id="sidemenu1">
    <!--plugin-->
    <!--plugin_first-->
    <dl class="sidemenu_body">
    <dt class="plg_title" style="text-align :<%plugin_first_talign>"><%plugin_first_tit le></dt>

    ~~~(隔たっています)~~~

    <div id="sidemenu2">
    <!--plugin-->
    <!--plugin_second-->
    <dl class="sidemenu_body">
    <dt class="plg_title" style="text-align :<%plugin_second_talign>"><%plugin_second_t itle></dt>

    2010年11月10日 00:03 by 標野ゆき

  • 返信がとても遅くなってしまい、すいません!!

    標野ゆき様、ありがとうございます。
    プラグイン識別タグまでは辿り着いていたのですが、こちらもウマく理解できずに失敗していました.....。

    やはりHTMLを変更したり、テンプレートを変えたりするのが一番いいのでしょうか.....。

    自分の知識のなさにお付き合いいただき、ありがとうございます。
    もう少し調べて、プラグイン識別タグを理解してみようと思います!!

    2010年11月09日 22:15 by

  • どうやら
    プラグイン識別タグなるタグを画像ファイル名として利用する方法
    というのがあるようです。


    <a href=http://fc2blogwalker.squares.net/modules/xpwiki/ ?Q%A1%A7%B8%AB%BD%D0%A4%B7%A4%F2%B2%E8%C1%FC%A4%CB%A4%B7%A4% BF%A4%A4 target=_blank>Q: 見出しを画像にしたい~アルキカタQ&A</a>

    <a href=http://blog.fc2.com/forum/viewtopic.php?t=5177 t arget=_blank>プラグインごとのいじり方&題名の消し方~FC2ブログ ユーザーフォーラム</a&g t;


    2010年11月08日 22:35 by 標野ゆき

  • 上記のリンクを辿って
    質問トピックと回答者さんの参考リンクを閲覧してみたんですが
    一つ一つのプラグインに別々のIDを付与する為に、どんな方法が使ってあるのか
    よく判りませんでした^^;

    そんな標野がコメントをつけるのは
    そもそも間違っているような気がしないでもないのですが

    プラグイン対応のテンプレートで
    タイトル表示が全部一緒になっちゃうのは
    同じ形式のプラグインを繰り返すようにHTMLで指示してるからですよね。

    だから
    もっともプリミティブなやり方は
    必要なプラグインが元からHTMLに書き込んであるテンプレートを
    借りてきて使うことではないでしょうか^^;

    プラグインが外部管理になる前のテンプレートは皆そうでしたよね。
    (今でも<!--not_plugin-->で囲んで、プラグインHTMLが書き込んであるテンプレートがありま すし~たとえばNefert/rimseさんのnudeテンプレートですとか)

    見つからなければ、自分でHTML内に移植してしまう手もあると思います。


    一つ一つのプラグインに
    別々のIDまたはクラス名を与えることが出来れば
    あとはCSSで好きなように指定が出来ますよね。

    せっかく外部管理にしてあるテンプレートを
    ムカシのカタチに戻すなんて退化のようでもありますが
    どうしてもプラグインタイトルを個別にしたい場合、コレも一つのやり方だと思います。


    もう一つ考えたのは
    テンプレートのHTMLから
    プラグインタイトルを表示するための記述を削ってしまって
    個別プラグインのHTML内に タイトル表示のための記述を書き込めないか?ということです。

    こちらで
    プラグインタイトルに別々のクラス名やIDを割り振ることが出来れば
    やはり個別表示を指定することが出来ます。
    (ユーザーさんによってはHTML内に直接スタイルを書き込む人もいるかもしれませんが)


    なんとも
    具体性を欠く書き込みですが
    少しでもお役に立つようなら幸いです。

    2010年11月08日 10:18 by 標野ゆき