1. TOP
  2. アメブロカスタマイズ
  3. ブログヘッダーのカスタマイズ⑤・(3-2) ブログヘッダー・初級アメブロカスタマイズガイド

ブログヘッダーのカスタマイズ⑤・(3-2) ブログヘッダー・初級アメブロカスタマイズガイド

お知らせ(2016年3月8日追記) 2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。 新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

>>こちらもどうぞ

このコラムは連載コラムです。過去の記事は上記のアメブロカスタマイズガイドまたは、以下の記事をご覧ください。前回の記事はこちらです。まだ見ていない方はこちらから見ていただくとより理解が深まるかと思います。

ヘッダーに画像を挿入する方法を解説

では早速はじめましょう。今回も前回に引き続きCSS編集用画面の(3) エリアのスタイルブロックの中の、「(3-2) ブログヘッダー」のを解説します。第5段となります。今回からは前回までの解説を総括し、ヘッダーに画像を挿入する方法を解説します。

これであなたのブログは一層華やかになることでしょう。

目を惹くブログに一歩近づけるようにがんばりましょうね☆

ヘッダーに画像を挿入する方法

では早速ヘッダー画像を挿入しましょう!!!といいたいところなのですが・・・

今回はまずはヘッダーに画像を挿入する際に確認するべきことをまず解説します。

設置は次回に解説します。すみません・・・

あたりまえの確認事項ですが、早速簡単に2点解説します。

その1 そもそもヘッダー画像がない・・・

ヘッダー画像がない場合は作らなければいけませんが、一番簡単なのはご自分の好きな写真をヘッダーにすることです。そしてそれもないという方の為にこのコラムでは緑の葉っぱの画像をご用意しています。これからの解説ではこの画像を使っていきますので、よろしければそちらもダウンロードして使ってください。そしてご自分で作りたという方の為に優良なサイトもご紹介いたしますのでそちらもご確認くださいね♪

参考サイト
あなたのアメブロカスタマイズのデザインを助けるお助けサイト

画像ダウンロード
葉っぱの画像ダウンロードはこちら
画像はzip形式の圧縮ファイルになっていますので解凍してお使いください。

 その2 画像が用意できたらヘッダー画像の大きさをチェックしましょう

画像配置をする際はどんな画像でもそうなのですが、まずあなたが設置したい画像の大きさは縦の寸法と横の寸法がいくつなのかを把握する必要があります。

この大きさを把握していないと画像の配置はうまくいきません。アメブロカスタマイズで使う画像は縦方向はいくらでも構いません(あまり高すぎるとブログが見ずらいです・・・)が、横方向は最大980px(設定でいくらでもかえられるがこの幅以内が望ましい)までです。

ですので、もしその幅よりも大きければ、修正をする必要があります。上で紹介したサイトの画像編集ソフトでサイズ調整をするか、ウィンドウズの場合付属のペイントのソフトがありますので、そちらで拡大縮小を行ったり、切り取りをして画像の調整をしてみてください。

画像の大きさはどうやって確認するの?

以下の方法で確認してみてください。パソコンによって若干画面が異なります(わたしのパソコンはウィンドウズ7ですので・・・)

①画像の上にマウスを置くと大きさが表示される
image-11049529244-11553319713

 

②画像の上で右クリックし、「プロパティ」をクリック「詳細」タブで確認できます。
image-11049529244-11553319712

これでヘッダー画像を挿入する準備が整いました。

今回はここまでとします。

次回はこのブログでダウンロードできる葉っぱの画像(あなたの用意した画像があればそれを使ってください)を使ってヘッダーに画像を挿入する方法を紹介します。

画像はzip形式の圧縮ファイルになっていますので解凍してお使いください。

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ