BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» livedoorブログカスタマイズ ヘッダー画像を変更する方法

このエントリーをはてなブックマークに追加

livedoorブログカスタマイズ ヘッダー画像を変更する方法

   投稿日: 2016/08/25    投稿者:webコラム

260fd38d32ee0f1fc62b20cfb2918cd9_s.jpg

こんにちは! ライターのモモタロウです。

今回は、livedoorブログカスタマイズ ヘッダー画像を変更する方法をお伝えします。

livedoorブログで以下のデザインを設定しました。
20160813-0.jpg

このデザインのヘッダー画像を変更してみます。

ヘッダー画像を変更しよう


201608013-2.jpg
まず、設定しているデザインのヘッダー画像を保存します。

201608013-4.jpg

保存したヘッダー画像の大きさを確認します。

幅 788ピクセル 高さ 182ピクセル です。

変更したいヘッダー画像をこの大きさに合わせて加工しておきます。
(今回は、トップにある画像に変更します)

201608013-5.jpg
画像の加工が終わったら、上の画像のように、livedoorブログにログインして、四角で囲んだ「画像/ファイル」をクリックします。



201608013-6.jpg

画面が変わったら、先ほど加工したヘッダー画像をアップロードするために、
「画像をアップロード」ボタンをクリックします。


201608013-7.jpg

画像がアップロードされると、一覧に表示されます。

このアップロードした画像のURLを確認するために、リンクを「新しいウィンドウで開く」をクリックして、新しいウィンドウを表示させます。
201608013-8.jpg

201608013-9.jpg

ウィンドウが立ち上がったら、アドレスバーに表示されているURLをコピーします。

201608013-10.jpg
次に上の画像のようにブログ管理画面で、「ブログ設定」→「デザイン設定(PC)」→「カスタマイズ」タブの
順番にクリックしていきます。

元デザインのヘッダー画像のURLを今回使用するヘッダー画像に置き換えるため「CSS」のヘッダー画像の
URL部分を変更します。

201608013-11.jpg

変更箇所は、上の画像で四角で囲ってある部分の一部です。
#banner
  background:url('http://image.blog.livedoor.com/img/usr/sakura_bird.jpg') 

カッコ内を変更します。

今回は、
http://livedoor.blogimg.jp/caagloble/imgs/2/7/27ff2733.jpg に変更します。

「プレビュー」すると・・・

201608013-12.jpg

まとめ


如何でしたか? ヘッダー画像をお気に入りの画像に変更させて、ブログデザインを魅力のあるものに仕上げていきましょう。

是非、試してみて下さいね!

カテゴリ:

TOPへ