2017年04月21日

ファンブログのカスタム向けテンプレートにヘッダ画像を設定する(後編)

ファンブログのカスタマイズ向けデザインテンプレートで、ヘッダー画像を設定する方法の(後編)です。

(前編)では、画像を用意するところまでを説明しています。

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


上部のメニュー[画像管理]をクリックします。

SC17421155049.png

「クリック、もしくはここにファイルをドロップ」のところをクリックして、(前編)で用意した画像を選択します。
(もしくはその画像ファイルをドロップします)

SC17421155217.png

数秒で下の「ファイル一覧」に、アップロードした画像ファイルが表示されます。
これで画像のアップロードは完了です。

SC17421155845.png


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


「ファイル一覧」に表示された画像ファイルのタイトル部分をクリックします。

SC17421155845a.png

開いたページの「元ファイル」のところが画像のURLです。
その部分(下の画像の赤枠部分)を右クリックして、「リンクアドレスをコピー」します。

SC1742116646.png

コピーしたリンクアドレスは、メモ帳・テキストエディタなどに貼り付けて保存しておきます。


5.CSSを編集する


[デザイン]メニューから[デザイン設定]を開きます。

SC1742113829.png

[PC]・[デザイン選択]タブが選択された状態で開いていますので、CSSの列の[編集]をクリックして開きます。

SC17421115838.png

少し下にスクロールしたところ(場所は、下の画像の右側の赤〇の位置を参考にしてください)に「 /*  ヘッダー  */ 」と書いてあるところがあります。
そこの最初の部分「 div#header 」の { } 内を編集します。

SC17423006.png

「 div#header 」部分を、元のCSSと編集後のCSSで比べると、下のようになります。
実際のCSSでは、{ } 内コードは[TAB]で5文字分くらい右に寄っていますが、ブログに貼ると右に寄らないので、[TAB]を全角スペース2個に変えて、それらしく見せています。
CSSの編集で下のコードをコピーして使うときは、左側のスペース部分はコピーしないで、文字部分だけをコピーしてください。
また、CSSの編集で行を追加するとき、ブラウザによっては[TAB]キーで右に寄せられないので、そのときは他の行の左の[TAB]部分をコピーして使います。

元のCSSの「 div#header 」部分
div#header {
  padding:20px 0;
  background-color:#ffffff;
  display:block;
}


編集後のCSSの「 div#header 」部分
div#header {
  width:980px;
  background:url(https://fanblogs.jp/pontaoyaji/file/undefined/header.jpg?no_header=1);
  padding:65px 0 0 20px;
  margin-bottom:15px;
  display:block;
  min-height:227px;
}


1)最初に「 width:980px; 」を書き加えます。

 ブログ全体の幅(width)は 1000px ですが、ブログタイトルの文字を20pxだけ右に寄せたいので、幅(width)を980pxにしています。

2)次に「 background:url(https://〜〜); 」を書き加えます。

 この部分がヘッダー画像を指定する部分です。
 「 https://〜〜 」のところに、上の「4.アップロードした画像のURLをコピーする」で保存しておいた画像のURLを貼り付けます。

3)次の「 padding 」の値を、「 65px 0 0 20px 」に変えます。

 padding は、領域内の余白を指定するものです。
 ヘッダー領域の中の、上の余白を65px、左の余白を20pxにしています。

4)「 background-color:#ffffff; 」の行を削除します。

 これはヘッダー部分の背景色の指定ですが、今回はその背景に画像を指定するので、不用になります。

5)「 margin-bottom:15px; 」を書き加えます。

 ヘッダー部分の下(記事部分との間の部分)に、15pxの余白を設けるという意味です。

6)「 min-height:227px; 」を書き加えます。

 今回用意した画像の高さが 292px ですが、3)padding で上の余白を 65px にしたので、65px 分差引いて227px をヘッダー領域の高さの最小値として指定しています。

以上でCSSの編集は完了です。
下の[プレビュー]ボタンをクリックして、ヘッダー部分がうまく表示されているか確認して、[保存]ボタンをクリックして保存します。

CSSの各余白などの値は、[プレビュー]で確認しながら、お好みで変えてみるといいと思います。

以上で、ヘッダー画像を設定する方法の(後編)は終わりです。


ファンブログでブログを始めたい人は、こちら ↓ から。




にほんブログ村 IT技術ブログ フリーソフトへ
この記事へのコメント
アキさん、こんにちは。
コメントありがとうございます。

前編の記事も読んでいただいたでしょうか。
私の記事も間違ったことを書いている可能性もありますが、できれば記事の中のどの部分ができないか書いてもらえると、何かアドバイスできるかもしれません。
Posted by ぽん太親父 at 2018年07月22日 11:34
書いてある通りにやっていますができません。
Posted by アキ at 2018年07月20日 21:34
コメントを書く

お名前: 必須項目

メールアドレス:


ホームページアドレス:

コメント: 必須項目

この記事へのトラックバックURL
http://fanblogs.jp/tb/6190387

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
ブログ内を検索

ファン
最新記事
カテゴリー
最新コメント
ツイッター

広告設置のお知らせ

当ブログは、Amazonアソシエイト・プログラムの参加者です。
(Amazonアソシエイト・プログラムは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムです)
記事内で使用している画像の一部は、Amazonの商品画像を使用しており、その商品へのリンクになっています。

また、その他のアフィリエイト・サービス・プロバイダなどの広告も表示しています。
当ブログをご覧の際は、cookie を有効にし、Webブラウザの広告ブロック機能を使用しないで、ご覧いただきますようにお願いいたします。

プロフィール
ぽん太親父さんの画像
ぽん太親父
建築関係の小さな事務所で、他に適当な人間がいないことから、コンピューター関連の担当をさせられています。 趣味でけっこう長い間パソコンを使っていますが、ちゃんと勉強していないので、うまくいかなくて冷や汗をかくこともしばしば。
プロフィール