ライブドアブログのヘッダー画像を変更する方法

livedoor

今回もライブドアブログのカスタマイズ方法について書いていきます。

今回はヘッダー画像を変更していきます。

ヘッダー画像を変更する意味とは?

ヘッダー画像を変更することで、訪問者に自分のサイトを印象づけることができ再訪問されやすくなります。

いわばサイトの玄関口のようなものです、そのため自分のサイトのイメージに合ったヘッダー画像にすることが重要です。

今回はヘッダー画像をご自身で準備ができることを前提に進めていきます。

カスタマイズ方法(PC)

前回同様、管理人が使用しているデザインは以下の通りです。

※その他のデザインでは設定方法が変わる場合があるのでご注意下さい。

  • デザイン:「まとめ(グレー)」

最初に現在既に設定されているヘッダー画像のサイズを確認しましょう。

マイページから「ブログ設定」をクリックします。

「デザイン/ブログパーツ設定」の「PC」をクリックします。

①「カスタマイズ」→②「CSS」をクリックします。

「/* ヘッダー タイトル,画像部分」にヘッダー画像のwidth(幅)とheight(高さ)が設定されています。

このデザインでは、「width(幅)が1168px、height(高さ)が295px」と記述されています。

そのためこのサイズと同じサイズでオリジナルの画像を用意しましょう。

今回はテストサイト用に以下の画像を用意しました。

管理人が使用しているデザイン「まとめ(グレー)」はヘッダー画像を簡単に設定することができる「かんたんタイトル画像」機能に対応しています。

上部メニュー①「タイトル/背景」をクリックし、かんたんタイトル画像の②「アップロード」をクリックします。

ご自身が準備した画像ファイルをアップロードしたら「画像を切り抜く」のチェックを外します。またヘッダー画像にサイト名を入れてある場合は「タイトルテキストを隠す」にチェックを入れて「決定」をクリックします。

ブログを確認してみましょう。

ヘッダー画像が設定されました。以上で完了です。とってもカンタン!

続いて、スマートフォンのヘッダー画像を設定していきます。

カスタマイズ方法(スマートフォン)

マイページから「ブログ設定」をクリックします。

「デザイン/ブログパーツ設定」の「スマートフォン」をクリックします。

①「レイアウト」→②「ブログタイトル」の「設定」をクリックします。

「画像」を選択し、画像ファイルをアップロード後、「背景画像を表示しない」にチェックを入れ、「保存する」をクリックします。

この作業をトップページ、アーカイブページ、個別記事ページ、画像ページそれぞれ表示したい箇所で設定を行って下さい。

ブログを確認してみましょう。

以上でスマートフォンでのヘッダー画像の設定も完了しました!

まとめ

  1. 自分のサイトのヘッダー画像のサイズを調べる
  2. オリジナルのヘッダー画像をアップロードする
  3. スマートフォンのヘッダー画像もアップロードを行い設定する

以上です。

The following two tabs change content below.

にーお

アラサー周辺に会社勤めに疑問を感じ、思い切って退職!それからずっとニートをしています。会社員(約3年間)になる前にもニートをしていた期間があり、ほぼ社会には出てないかも…。今日も人柱精神で色々なことに挑戦していきたいと思います。