livedoor blogの質問です。


ブログパーツの題名の部分を非表示にし、それに差し替える形でオリジナルのアイコンを入れたいと考えています。

例)検索 という文字を非表示にし、gif画像などで、【Search it】などを張りたいと思います。

デザインのカスタマイズで、おそらくトップページのhtmlを変えるのだと思いますが、MTのようなタグで処理しているようで、個別のパーツごとにアイコンを埋め込むことができないように思えるのですが、方法はあるのでしょうか。

以下が、htmlファイルです。

----------------------------83行目あたり-----------------
<!-- ..... PluginList A ..... -->
<$PluginList_A$>

</div>
</div>
</div><!-- subColumn End -->

<div id="extra" class="column">
<div class="column-inner">
<div class="column-inner-2">
<!-- ..... PluginList B ..... -->
<$PluginList_B$>

<$LDServices$>
</div>
</div>
</div><!-- extraColumn End -->

</div><!-- content End -->
</div><!-- container End -->

---------------------------------------------------------------------------
方法があれば教えてください

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2009/11/04 15:43:46
  • 終了:2009/11/06 04:17:40

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512009/11/04 18:54:38

ポイント60pt

これもCSSを編集すれば可能です。

目的の部分のHTML要素を調べて、編集するCSSの箇所を特定します。

例にある検索の場合ですと、以下のようなHTMLが出力されています。

<div class="plugin-search_internal sidewrapper">
<div class="sidetitlebody">
<div class="sidetitle">記事検索</div>
</div>

スタイルシート(CSS)を以下のように変更します。

div.sidetitlebody {
	background: url(http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20091104/20091104183439.gif) repeat-x;
	height: 23px;
}

※あまり上手ではありませんが、画像は一応私の方で作成してみました。(ご自分で作成した画像がある場合は差し替えてください。)

※画像はフォトライフにアップしてあります。一旦ダウンロードしてから、自分のフォトライフの領域またはライブドアのブログ領域にアップロードして使用してください。

※作成する場合は、上記CSSに合わせて高さ23pxにすると良いです。

後は、「div.sidetitle」のフォントカラーを好みに変更するだけです。


背景画像の変更だけでなく、各タイトル表示を画像にしたい場合は以下のようにします。

まず、タイトルの背景画像の指定を無効にします。

div.sidetitlebody {
/*	background: url(http://parts.blog.livedoor.jp/img/usr/lohas001_2/bg_header.gif); */
	height: 23px;
}

タイトル文字の表示も無効にします。

div.sidetitle {
	padding: 0 13px 0;
	text-align: left;
	font-size: 90%;
	font-weight: bold;
	line-height:23px;
	color:#664321;
	display: none;
}

検索の場合、「<div class="plugin-search_internal sidewrapper">」なので、「div.plugin-search_internal」に対する背景画像指定のCSSを追加します。

div.plugin-search_internal {
	background: url(検索用タイトル画像のURL) no-repeat 0 -4px;
}

他のタイトルに関しても、同じように要素に適用されているクラス名を調べて、上記と同じように背景画像を指定すると良いです。


※HTML構造など要素の調査は、FirefoxFirebugが便利です。(Safari4以降に標準搭載されている「開発」ツールの「Webインスペクタ」も便利です。)

  • id:clinejp
    追記

    プラグイン名ではなく、そのパーツそのもののデザインを変える(背景をオレンジにするなど)はCSSでできますよね
    http://blog.livedoor.jp/customize_blog/archives/cat_13638.html

    題名だけをアイコンに置き換えることはできるのでしょうか
  • id:clinejp
    必死に考えております

    CSSの下記の部分を変更するというので可能になりますかねえ
    この場合は、バックグラウンドイメージにして、パーツ名は表示させる感じで
    あれこれ悩んでおります。

    -----------------------------------------------------------------------
    .sidetitle{
    background:url(http://parts.blog.livedoor.jp/img/usr/XXXXXXXXXXXXXXXXXXX.gif) repeat-x;
    border-top:1px solid #FFA07A;
    border-right:1px solid #FFA07A;
    border-left:1px solid #FFA07A;
    background:#FFE9D3;

    padding:10px 15px 0;
    line-height:100%;
    text-align:left;
    font-size:12px;
    font-weight:bold;
    }---------------------------------------------------------------------------------------------
  • id:clinejp
    また補足です

    http://lifehacking.jp/
    の右側の園児とモスグリーン(?)のような背景色をつけたいのです。
    グラデーションがかかっていますが、これは画像じゃないのかな
  • id:rouge_2008
    補足の「右側とエンジとモスグリーンのような背景色」ですが、「Ads by AMN」の背景の事ですか?
    それは画像です。
    http://ad.agilemedia.jp/embed/img/bob/AMN-sponsors-head-bg.gif
    URLは上記ですが、拝借するのはちょっとなので、自分で作成する必要があると思います。
  • id:rouge_2008
    目的のような画像ですが、ソフトによって作り方は異なると思いますが、以下が参考になると思います。

    http://journal.mycom.co.jp/series/web20/001/
    http://www.aivy.co.jp/BLOG_TEST/nagasawa/a/archives/2006/11/csweb20.html
  • id:clinejp
    解決いたしました
    これでデザインの幅が広がりそうです。

    HTMLから、CSSの該当箇所を割り出す方法ありがとうございました。
    他にもチャレンジしてみます。
    分からなかったらまたよろしくお願いいたします。
  • id:rouge_2008
    解決おめでとうございます。
    私もまだまだ試行錯誤しながらデザインしていますが、分からない事があったらどんどん聞いてください。
    ポイントといるかもありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません