livedoor Blog のヘッダー画像を変更する

概要:livedoor Blogのヘッダー画像を変更する手順をメモ。


知人から「livedoor Blog」のヘッダー画像を自分で用意した画像に変更したい。という依頼が来たので、手順をメモ。

現在使用しているテーマは下図のとおり。

sample

 

大まかな手順としては、下記のとおりです。

  • 現在使用しているテーマの画像と同じサイズの画像を作成する。

  • livedoor Blogへアップロード

  • 「管理画面」の「デザインカスタマイズ」で、「cssファイル」の画像URLをアップロードした画像のURLに書き換える

というわけで、記事内の画像を入れ替えるのとは違い、簡単には出来ませんね。
下記に、手順を詳しく書いておきます。

 

 

1.画像のサイズとファイル名を確認する

まず、現在のテーマに使われている画像の大きさとファイル名を確認します。
背景画像を右クリックしてダウンロードしちゃいましょう。

image_download

 

保存した画像をマイコンピュータで確認すると、画像サイズとファイル名が確認できますね。

image_property

このテーマの例では、画像サイズが 788×283。ファイル名は m_top.jpg となっています。(テーマ毎に違うと思われます)メモしておきましょう。

 

 

2.画像を用意する

ダウンロードした画像と、同じサイズで画像を作ります。画像作成ソフトを駆使して、がんばって同じサイズにします。(苦)
今回の例では、788×283です。

topimg

上図のような画像を作ってみました。ファイル名は適当で良いです。画像形式も JPGでなくてもOKです。(JPG, GIF, PNGなど)

 

 

3.画像をアップロードする

完成した新しい画像を「管理画面」からアップロードします。

img_upload

 

アップロードが完了すると、画像のリストに追加されます。

img_list

「注意」アップロードすると、ファイル名は勝手に変更されるみたいですね。

 

 

4.アップロードした画像のURLを確認する

アップロードした画像のURL(アドレス)を下記のように確認します。

  • 画像リストの画像を右クリックして、「ショートカットのコピー」でURLのコピーが出来ますので、メモ帳などに貼り付けておきます。

    url_copy



  • メニュー「ショートカットのコピー」が無い場合は、画像を右クリックして、「リンクを新しいウィンドウで開く」で画像を表示させて、アドレスをコピーします。

    url_copy2

 

 

5.cssを書き換えて画像を変更する

「管理ページ」から「ブログ設定」「デザイン」「デザインカスタマイズ」「CSS」の順に開いていきます。

css_window_open

 

最初の説明でメモした画像ファイル名(今回の例では m_top.jpg )が記述された行を探します。一箇所しか無いハズなので、簡単に見つかると思います。
このURLを、アップロードした画像のURLに書き換えます。

(下画像クリックで拡大できます)
css00

 

最後に「保存」をクリックして完了です。

 

 

6.結果


finish

 

私はWordPressしか使ったことが無いので、説明はイマイチかも知れませんが、出来ちゃったので良しとしましょう。

カテゴリー: パソコン日記   タグ: ,   この投稿のパーマリンク

livedoor Blog のヘッダー画像を変更する への1件のコメント

  1. のっぽ より:

    こんにちは、助かります!
    あの、毎回訪れる度にヘッダー画像が変わるブログがありますが、あれはどうやっているのでしょう。教えていただけたら幸いです。
    おねがいします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>