解決済

clip!clip!
Ads By Google

このデザインに画像を入れたいのですが可能ですか?

はじめまして。デフォルト2008(スカイ,3カラム) を使用していますが、タイトル部分の水色の所に自分で撮影した画像をいれたいのですが、どこをどうやったら良いのか素人なので全く分りません。素人でも分かるような手順でどなたか教えて頂けないでしょうか?宜しくお願い致します。

2008-03-21 14:57の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2008-03-22 03:58:24ベスト
まず、タイトルに使いたい画像を準備します。お使いのデザインは横幅がブラウザの大きさによって自在に変わるタイプなので、画像をタイルのように敷き詰めても平気なものか、もしくは大きい画像にするのがいいと思います。

次に準備ができればWebにアップロードします。アップロードは管理画面から「ファイルのアップロード」を選択し、画像をアップロードしてください。アップロードが完了すると、「ファイル一覧」に画像が追加されているので、その画像のタイトルのリンクを開き、画像のURLをコピーしてください。

次にデザインをカスタマイズします。「カスタマイズ/管理」→「デザインのカスタマイズ」を選択し、「スタイルシート(CSS)」を選択します。そして

/** 03. Title - ブログタイトルエリア */

というセクションの適当なところに下記を追加します。
div.blog-title-outer-4 {
 background: #63abec url(アップロードした画像のURL);
}
追加したら、「この内容に変更する」をクリックし保存します。つぎに「トップページ」を選択します。そして下記の部分を変更します。

<div class="blog-title-outer">
<div class="blog-title-outer-2">
<div class="blog-title-outer-3">
 <h1 id="blog-title"><a href="<$BlogUrl$>" title="<$BlogTitle ESCAPE$> トップへ"><$BlogTitle ESCAPE$></a></h1>
 <div class="blog-description-outer"><p id="blog-description"><$BlogDescription$></p></div>
</div>
</div>
</div>

<div class="blog-title-outer">
<div class="blog-title-outer-2">
<div class="blog-title-outer-3">
<div class="blog-title-outer-4">
 <h1 id="blog-title"><a href="<$BlogUrl$>" title="<$BlogTitle ESCAPE$> トップへ"><$BlogTitle ESCAPE$></a></h1>
 <div class="blog-description-outer"><p id="blog-description"><$BlogDescription$></p></div>
</div>
</div>
</div>
</div>
追加したら、「この内容に変更する」をクリックし保存します。同様に「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」も変更します。

全ての変更が完了すれば「再構築」を行えば画像が追加されます。

ありがとうございました。無事に解決できました。

Ads By Google

コメント(3)

#1.  sunako
2008-03-23 23:38:01

tani_masaruさん
ブラウザの大きさによって自在に変わるタイプと書いてありますが、自分の写真をデザインに出来てブラウザの大きさが変わっても変化しないタイプのデザインがあれば教えて頂けますか?

2008-03-24 05:00:12

むしろ逆に殆どのデザインが横幅固定です。デフォルト2008というシリーズが横幅可変です。ただ今のデザインでもカスタマイズを行うことで横幅固定には簡単に出来ます。

デザインのカスタマイズからCSSを選択し、

div#container {
 width: 97%;
 ...
}

ここの「width」の値を「95%」などとパーセンテージで指定するとブラウザの大きさに対して相対的な大きさに、「700px」などと値で指定すると、ブラウザの大きさに関わらず絶対的な大きさになります。

#4.  sunako
2008-03-28 17:48:07

tani_masaruさんへ
ありがとうございます!横幅固定も出来ました。
トップデザインの写真はアップロードしたサイズがトップデザインの高さ・幅とも合っていなかったようです。
無事に解決しました。ありがとうございます。

トラックバック(2)

トラックバックURL: