人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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 -->

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


●質問者: clinejp
●カテゴリ:インターネット ウェブ制作
✍キーワード:GIF HTML livedoor Blog Mt アイコン
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●60ポイント ベストアンサー

これも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インスペクタ」も便利です。)

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ