アフィリエイト入門ブログ~それなり

イチから始めるアフィリエイト入門ブログ

スポンサーリンク

高さの調節もバッチリ!はてなブログのヘッダーに画像を入れる方法

 

f:id:sorenari77:20170421160347j:plain

ヘッダーに入れる画像は、ブログの印象をぐっとアップしてくれる重要なポイントです。そこで今回は、はてなブログのヘッダーに画像を入れる方法を見ていきます。

 

はてなブログにタイトル画像を入れよう

f:id:sorenari77:20170421160622j:plain

はてなブログでは、ヘッダー部分に入れる画像を「タイトル画像」と呼びます。その設定方法を見ていきましょう。なお、使う画像は先に用意しておきます。

一つ前の記事で、簡単にオリジナルのタイトル画像が作れるおすすめツールを紹介していますので、画像がまだない人はぜひチェックしてみてください。

 

ブログのデザイン設定用画面を表示する

まずは設定用の画面を表示します。はてなブログにログインして、自分のブログを表示したら、画面左上の「ブログ名」をクリックして、「デザイン」を選択しましょう。 

f:id:sorenari77:20170421161008j:plain

 

スパナ型のアイコンをクリックして、「ヘッダ」をクリックします。

f:id:sorenari77:20170421161025j:plain

 

利用するファイルを選択する

「タイトル画像」の「ファイルを選択」をクリックすると、ファイル選択用の画面が表示されるので、利用したいタイトル画像を選択しましょう。図の例では前回の記事で作成した画像を選択しました。 

f:id:sorenari77:20170421161108j:plain

 

ブログ上に表示する範囲の設定画面が開きます。表示したい部分にグレーの四角が被らないようにドラッグで位置を調節して、「適用」をクリックします。

f:id:sorenari77:20170421161430j:plain

◆画像がはみ出す場合◆

はてなブログで初期設定されているヘッダは高さがあまりないため、Picky-Picsで作ったタイトル画像は、上図のように表示されない部分が多くなってしまいます。

このように「使いたい画像の高さが多くはみ出してしまう」場合は、下記の方法でヘッダの高さを調節しましょう。なお、ヘッダの高さ調節を行う場合は、この時点ではタイトル画像の位置は調整せずに、「適用」をクリックしてOKです。

 

これでタイトル画像が入りました。例のように画像内にタイトルも入れている場合は、最初から表示されているタイトルの文字が不要です。「タイトル画像」の「表示設定」で「画像だけ表示」を選択すると、元からあったテキストを消すことができます。

f:id:sorenari77:20170421161453j:plain

編集が終わったら設定を保存しよう

ブログの設定の編集が終了したら、編集画面の左上にある「変更を保存する」をクリックして設定を保存しましょう。

図の例のように、以下の手順でヘッダーの高さを調節する場合は、その調節後に保存すればOKです。一方、手持ちのタイトル画像がきちんと収まり、ヘッダーの高さ調整が不要な場合は、ここで「変更を保存する」をクリックして編集を終えて問題ありません。

 

ヘッダーの高さを調節して、タイトル画像をすべて表示する

f:id:sorenari77:20170421160931j:plain

次に、はみ出てしまったタイトル画像が入るように、ヘッダーの高さを調節する方法を見ていきます。

ヘッダーの高さなど、デザインテンプレート(テーマ)に設定されている内容を変更するには、デザインの設定画面の一番下にある「デザインCSS」にコードを貼り付けます。

 

必要なコードを「デザインCSS」にコピーする

はてなブログには、デザインの調節に使えるコードを公開している親切なWebサイトがたくさんあります。その中から、ヘッダの高さ調節で私が参考にさせていただいたのが「えむしてっく」さんです。

とても詳しい貼り付け方法と、コピーだけで使えるコードがあるので、参考にしてコードを貼り付けましょう。

◆貼り付け時の注意

初心者の方が「ちょっと迷って」しまいそうなポイントを確認しておきましょう。

「デザインCSS」に何かを貼り付けるときは、先に入っている文字は消さないようにします。「デザインCSS」を始めて使う人でも、「/* <system section="theme"」で始まる文字列(図の青枠部分)がすでにあると思います。これは使うテーマを設定するためのコードなので消しません。その下(または上)にヘッダー画像調節用のコード(図の赤枠部分)を貼り付けましょう。

f:id:sorenari77:20170421162523j:plain

  

画像のサイズに合わせてコードを調節する

この記事では、Picky-Picで作った画像を使用しています。この画像を高さ「250」で使用すると図の状態になります。もう少し横幅を広げたいと思う人もいるかもしれません。 

f:id:sorenari77:20170421162645j:plain

 

そんなときは、貼り付けたコードの「画像の高さ」の数値(図の赤丸部分)を変更しましょう。

f:id:sorenari77:20170421162839j:plain

 

ちなみに「300」に変更するとこのようになります。高さに合わせて横幅も伸びました。好みに合わせて調節しましょう。

f:id:sorenari77:20170421162947j:plain

 

タイトル画像を入れ替えるには

f:id:sorenari77:20170421160948j:plain

タイトル画像を削除する方法もチェックしておきましょう。デザインの設定画面の「タイトル画像」で「画像を外す」をクリックすると画像が削除されます。 

f:id:sorenari77:20170421163219j:plain

 

タイトル画像の設定部分で紹介した手順で「ファイルを選択」から別の画像を選べば簡単にタイトル画像を変更できます。

f:id:sorenari77:20170421163259j:plain

f:id:sorenari77:20170421163310j:plain

 

タイトル画像によってブログの印象はずいぶん変わります。何パターンか候補があるときは、それぞれを入れて見てみましょう。

最低限整えたいタイトル画像が入ったので、次回はこのデザインをスマホ用としても表示させる設定を見ていきたいと思います。