解決済

clip!clip!
Ads By Google

タイトルの後ろに画像を入れたい。

タイトルとコメントの後ろに画像を入れて綺麗に作ってるブログをみかけたので、問い合わせしたのですが教えてくれませんでした。
どのようにするとあのようなタイトルの後ろに画像が入れられるのでしょうか?

2006-03-07 05:19の質問
画像  
画像整理
デジカメに撮りっぱなしの写真はありませんか?フジフイルムのオンラインプリントサービスで楽々プリント
fujifilmmall.jp/shop/c/c10/
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(2)

2.

2006-03-07 08:55:31ベスト
ライブドアブログなら、画像を用意してテンプレートを修正します。

 画像は別途作りますが、用意したものを別途アップロードしなければなりません。ブログの投稿画面、左側にある「ファイルのアップロード」から行います。あらかじめ画像をアップロードしておくのですが、「ファイルをアップロードする」を選ぶと出てくる画面で「ファイルを選択」の右側にある「参照」ボタンを押して、自分のコンピュータにある画像を選びます。タイトルは適当に入力して、「選択したファイルをアップロードする」ボタンを押します。ファイルのアップロードが完了した旨、表示されれば成功です。

 ブログの投稿画面へ戻り、本文入力欄の上にある、「B」、「I」、「U」と書いてある列の右側にある「IMG」というボタンを探して、押します。先ほどアップロードしたものが選び、「投稿する」ボタンを押します。本文入力欄にタグが入ったはずですから、urlだけ抜き取ります。

挿入されたタグの例)
<a href=" src=" ; width="159" height="187" border="0" alt="a2" hspace="5" class="pict" align="left" /></a>

抜き出した例)


 urlが分かれば、今度はスタイルシートを修正します。ブログの投稿画面で、上のメニューから「カスタマイズ/管理」を選び、左側「デザインの設定」を選びます。一番右下、「カスタマイズ」を選びます。表示されているのがスタイルシートになります。

修正前の例)
#banner,#subbanner{
width:722px;
height:209px;
text-align:left;
background:url('http://image.blog.livedoor.com/img/usr/sky_02/main.jpg') no-repeat;
}

修正後の例)
#banner,#subbanner{
width:722px;
height:209px;
text-align:left;
background:url('先ほど抜き出した画像のurl') no-repeat;
}

 終わったら「この内容で保存する」を選んで保存します。仕上げは再構築です。左上、「ブログに設定を反映(再構築)」を選び、下の方に「再構築する部分を指定」があるので、「全てのページ」を選んで「ブログを再構築する」というボタンを押せば完了です。

1.

2006-03-07 08:40:44ベター
どこのブログサービスをご利用ですか?
テンプレートのHTML部分をカスタマイズできるところと、できないところでは、二通りの方法が考えられます。
一つはテンプレートをカスタマイズして、タイトルやコメントを表示する変数の後ろに<img src="画像のURL">などと記述します。
もう一つは、タイトルまたはコメントを表示する欄の背景画像をCSSで表示する方法です。
あなたがご利用のサービスが判らないのですが、背景画像を変えたいところに
「background: url(画像のURL) no-repeat right;」
などと加えます。
罫線代わりに例えば「400px(幅)×12px(高さ)」の画像を使いたいということでしたら、
「background: url(画像のURL) no-repeat bottom center; padding-bottom: 22px;」
この場合の22pxは、画像の高さ(12px)と余白(10px)を合計したpx指定です。
参考になれば幸いです。

あと、質問する際は、なるべくカテゴリには気を付けた方が、回答がつきやすいのでは、と思います。
Ads By Google

コメント(2)

#1.  
2006-03-08 01:48:45

皆様、本当に丁寧な回答ありがとうございました。
言われた通りにやってみましたら画像が表示されました!
嬉しいです。
質問文が説明不足で失礼しました。

2006-03-08 03:08:23

吉永さん、うまくいったようで良かったです。ベスト回答もありがとうございます。

トラックバック(2)

トラックバックURL: