So-net無料ブログ作成
検索選択
需要

オリジナルのヘッダー画像にする

【目的】
ブログタイトル部分に画像を表示させ見栄えを良くする。


【解説】
自分の気に入ったヘッダー画像を、ブログタイトルの背景に使っている人はたくさんいます。
そこで、今回はヘッダー画像の表示方法について解説します。

【変更方法】
スタイルシート編集」で行います。
デザインテンプレート管理→テンプレート選択 & CSS編集の[編集]


あらかじめヘッダー画像をアップロードしておきます。
編集ボックスのすぐ下に「+ファイル」という項目がありますので、
オレンジ色の「+」ボタンをクリックしてファイル追加エリアを拡大します。

ファイルを選択してアップロードボタンをクリックすれば、
ファイル追加エリアにアップロードされた画像のサムネイルが表示されます。

詳しい操作はソネットブログ公式ヘルプを参照してください。



では、目的の作業に入ります。

まずは編集ボックスの中から #banner { を見つけます。
banner エリアの大きさを指定します(通常はヘッダー画像のサイズ)
今回用意したヘッダー画像は 900×400 ですので、

  width:900px;
  height:400px;

を追加します。

  #header {
  width:900px;
  height:400px;

  }

こんな感じですね。

続いて、ヘッダー画像を指定します。
「height:400px;」のところでエンターキーを押して改行します。

  #header {
  width:900px;
  height:400px;
         ←ここに画像URLを挿入します
  }

1行分のスペースの先頭位置にカーソルがあることを確認して
冒頭のヘッダー画像のサムネイルをクリックします。

  background:url("×××××××××××××××") no-repeat;

と画像のタグが挿入されます。

プレビューをクリックして確認してみましょう。




ヘッダー画像の一部だけが表示されたハズです(笑)
ここは慌てず、サムネイルの「編集」をクリックします。

詳細編集ダイアログボックスが表示されますので
「サムネイル長辺」に画像の横サイズを入力します。

これで、無事オリジナルのヘッダー画像により、
ブログのトップを飾ることが出来ました。


変更後はこのような構成になります。

  #banner {
  width:900px;
  height:400px;
  background:url("×××××××××××××××") no-repeat;

  clear:both;
  }

保存をしてブログに変更を適用させましょう。
nice!(14)  コメント(1)  トラックバック(0) 

nice! 14

コメント 1

小松 毅鑑


萬屋猫右衛門 さん、初めまして!!

貴殿の記事を参考にさせて頂き、早速

KAETENの無料テンプレートで

カスタマイズさせて頂きました。

有難うございました。m(__)m
by 小松 毅鑑 (2015-06-21 23:51) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この記事のトラックバックURL:
TOPに戻る

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。