ヘッダー画像の作り方~設定＊ブログタイトルとブログ説明文の消し方。トップページへのリンクの方法

大山美保子です(^-^)
 

 

②　ブログの基本設定
　・ブログタイトル、説明文　何屋さんをしてるか書きましょう。
　・記事の表示数　５に変更
　・記事投稿エディタ　旧エディタか新エディタ
　・読者登録、コメント受付の画像認証をはずす
　　　（プロフィール、最新記事、テーマ、読者一覧、お気に入り、ブログ検索）
④　メッセージボード（わかりやすい、見やすい、リンクを張る）

 

ヘッダーはブログの看板

ブログを開いたときにこのブログがなんのブログか、どんなサービスをしているか

わかります。

 

画像と文字であなたの想いを訴えましょう！

 

 

ブログのヘッダーの設定方法

 

①　ブログヘッダー画像を作ります。

②　ブログに画像を保存します。

③　cssに画像の設定をします

④　ブログタイトルとブログ説明文を消します

⑤　ヘッダー画像にトップページのリンクをはります。

 

 

ヘッダー画像の作り方

 

画像を作るには、Excelで作ることもできますが、基本的には画像編集ソフトが必要です。

いろんなソフトがあるのですが、私が使っているのは無料でサイト上でできるので便利です。

https://pixlr.com/editor/

私のヘッダーもこのサイトを利用して作っています。

 

文章で作り方を説明するのはわかりにくいと思うので、動画をご覧ください。

リンク　なるべく簡単にヘッダーを作る動画解説

 

 

また、ほかの方法で作る方法もあります。（やさしいブログの作り方の松田さんの動画です）

リンク　こちらには簡単にヘッダー画像が作れる方法が動画解説されています

 

 

ヘッダー画像が出来上がったら保存します

 

まずは、マイページの右上の三本線をクリックし

【デザインの変更】をクリックします

 

 

これはCSS編集用デザインを選択していることを前提に説明していきます。

 

【CSSの編集】をクリックします

 

 

ブログデザインの編集画面になり、

【ファイルを選択】ボタンをクリックします。

ヘッダー画像を保存したところを探して、画像を選びましょう。

 

選ばれたら【アップロード】ボタンをクリックします

 

 

すると、アップロードされた画像とかいてある下に

保存された画像と、画像のパスが表示されます。

 

このパスがのちほど、設定するときに必要なので、

メモ帳などに記録しておくとあとの作業がらくです。

 

続いて

このヘッダー画像のcssコードを【現在使用中のブログデザインcss】の一番下に貼り付けます。

 

 

/* アメブロヘッダー画像 */
.skinHeaderArea{
  height:300px;
  background-image:url(画像のURL);
  background-repeat:no-repeat;
  background-position:center top;
}

 

 

 

貼り付けたら、次は、さきほどのヘッダー画像のパスが必要になりますので、

少し上にもどって、パスをコピーします。

 

 

そのコピーしたものを、先ほどcssの最後に貼り付けところの画像のURLに置き換えます。

 

 

/* アメブロヘッダー画像 */
.skinHeaderArea{
  height:300px;
  background-image:url(画像のURL);
  background-repeat:no-repeat;
  background-position:center top;
}

 

これで、ヘッダー画像の設定はおわりました。

 

 

ただ、これでは、ブログタイトルとブログ説明文がかさなってしまいまうので、

ブログタイトルとブログ説明文を、ブログがみえるところから消します

 

ブログタイトルとブログ説明文を消します

さきほどと同じように、ｃｓｓの最後にコピー＆貼り付けします。

 

 

/* ブログタイトル非表示 */
.skinTitleArea{
display:none;
}
/* ブログ説明文非表示 */
.skinDescriptionArea{
display:none;
}

 

 

最後にヘッダー画像にトップページのリンクをはります。

 

トップページへのリンク

 

 

/* ヘッダー画像をブログトップへのリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
  padding:0;
}
#header h1,.skinTitleArea{
  display:block;
  padding:0;
  text-indent:-9999px;
}
#header h1 a,.skinTitle{
  display:block;
  height:300px;
}

 

この時に、ヘッダー画像の縦のサイズに合わせて

 

height:300px;

を変更してください。

 

 

 

できましたでしょうか？

 

 

少し手間はかかりますが、これでブログのイメージもかわったと思います。

 

 

 

 

リンク　参考にさせていただいたのは、このブログです。わかりやすく説明されているので、こちらもごらんください。