質問する
質問を探す 詳しく検索する

解決済

clip!clip!
Ads By Google
オショウ

ライブドアブログのタイトル背景に写真をアップして、タイトル文字を変えたい！

ライブドアブログを使っているのですが、ブログトップページのタイトル欄（一番上のタイトルが表示されているところです）を変更したいのです。

現在、「デフォルト2008（若緑,2カラム）」を使っているのですが、そこのタイトルのところに写真を使い、併せてタイトル文字を「勘亭流」とかに変更できればと思います。

お詳しい方、何卒お知恵をお借りしたいと思います。

2008-04-14 21:00の質問
ブログ  ライブドア  
ライブドアブログ
ライブドアブログ　のホームページはこちらです
blog.livedoor.com/
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2008-04-17 13:17:13ベスト
imq
こんにちは。

ブログタイトルの変更は「カスタマイズ/管理 」のページにその項目があります。

タイトル画像の挿入は
1. 画像を作成
2. 画像をブログにアップロード
3. CSSの修正
という手順で行います。

1の画像の作成は自分のPCで行います。
画像の高さは130ピクセル程度必要ですが、見る人の環境によって多少は変わりますので、エリアいっぱいに表示させたい場合は少しだけ余裕を見て作成した方が良いかもしれません。
幅の方はブログのデザインが可変になっていますので、こちらも途切れないようにするには大きめに作成します。画像が途切れた場合は横に画像を繰り返す設定もできます。

2については通常の記事に画像を載せる場合と同じです。
ブログの管理画面から「ファイルのアップロード」をクリックしてください。

3はブログの管理画面から
カスタマイズ/管理 -> デザインのカスタマイズ
と選択してスタイルシート(CSS)の編集を行います。

まず↓の項目を探して、
div.blog-title-outer-3
backgroundの行でurlに続くカッコ内に、上記2でアップロードした画像のURLを挿入します。
background: transparent url(画像URL) no-repeat scroll left top;
横に画像を繰り返す場合は「no-repeat」のところを「repeat-x」としてください。


分からないことがありましたらコメント欄に書き込んでいただければ対応します。
よろしくお願いいたします。

で、できました～～！！　痒いところに手が届くくらいの御丁寧なお教えのお陰です。本当に助かりました。心より、お礼申し上げます。

Ads By Google

コメント(4)

コメントする
#1.  オショウ
2008-04-17 19:06:45

ありがとうございます。

早速試してみたのですが、画像の高さを132ピクセルに調整し、アップロード。
それで、お教えいただいたとおりにしてみたのですが、画像の下の部分が切れた感じに表示されており、大部分はデフォルトの緑のままでした。もともとの雛形に不都合があるのかな～と思いつつ、またお尋ねさせていただきました。

あと、タイトル名は変更できました＾＾　ただ、タイトルのフォント変更もしたかったのですが、これも御存知でしたらお願いします。

#2.  imq
2008-04-17 22:19:01

＞画像の高さ
画像の透明ではない部分は132ピクセルみたいですが、画像自体の高さは600ピクセルあるようです。
600ピクセルの画像を130ピクセルの枠で表示しているので、ほんの上の部分しか見えていない状態です。

＞タイトルのフォント
CSSのカスタマイズで、

h1#blog-title
の中に
font-family: フォント名;
という指定を追加します。
フォント名にスペースが入る場合は
font-family: "フォント名";
といったように、ダブルクォートで囲います。

ただしブログを見ている人のPCにフォントがインストールされていないと正しく表示されないので、特殊なフォントは指定しない方が良いです。
どうしても変えたいのでしたら画像に好きなフォントで字を書いて、貼り付けるという手もありますね。

ちなみに
body, textarea
のフォントに「勘亭流」とありますが、これは殆どのPCにインストールされていないので効果が無いと思います。

#3.  imq
2008-04-18 07:01:39

どういたしまして。
お役に立てまして何よりでした。

ついでに

div.blog-title-outer-2
の中のpadding-rightを
/*padding-right: 10px*/
に、
div.blog-description-outer
のなかのbackgroundを
/*background: … bottom*/
という感じに /* … */ で囲むともう少し見栄えがするようになると思います。

#4.  オショウ
2008-04-18 17:59:09

ありがとうございます＾＾
早速お教えいただいたとおりにやってみたところ、タイトルのところがちゃんとできました～。
ちょっとだけ気になっていましたので、ありがたかったです＾＾

トラックバック(2)

トラックバック一覧
トラックバックURL: