カスタマイズアメブロヘッダーを機能的にする4つのカスタマイズ方法をご紹介

日頃WordPressというブログツールを活用してWebサイトを制作していると、アメブロのカスタマイズは容易にできるようになります。WordPressでは身につけるべき知識や技術が多いですからね。

自由度の低いとされるアメブロでも、柔軟なカスタマイズを施すことができるので、先日このブログをカスタマイズしてみました。そこで今回は、アメブロのヘッダーを自由にカスタマイズする方法をご紹介していきます。

アメブロでビジネスとしてブログ更新されている方は、ぜひ実践してみてください。コピー＆ペーストで結構簡単に変更できますので。

カスタマイズする前に

今回ご紹介するカスタマイズ方法は、『CSS編集用デザイン』というテンプレートを使用しております。この名前のテンプレートは現在4つありますが、一覧ページで記事が縦に並んでいるものを使用しております。

他のテンプレートではうまくカスタマイズできないものもあるかと思いますので、このブログと同じテンプレートを使用してください。

また、カスタマイズするために使用する管理画面のページは、『ブログデザインのCSSの編集』と、『プラグインの追加』の2ページを使用します。ここに追記していくことでカスタマイズできますので、まずはこれらのページを開いてからカスタマイズを施してみてください。

あと、『ブログデザインのCSSの編集』で『表示を確認する』というリンクがありますが、このカスタマイズの表示を確認することは仕様上できません。編集が終わりましたら『保存』ボタンを押して反映させてから、実際のブログを確認してみてください。

最後に、ここでご紹介しているコード類は当ブログで使用しているものですので、実際の表示はこのブログのヘッダーをご覧ください。

と、注意事項をお伝えしたところで、カスタマイズ方法を　ご紹介していきます。

アメブロヘッダーに背景画像を設置する

アメブロのヘッダーに好きな背景画像を設置するのは、とても簡単です。画像を用意して以下のCSSコードを記述し、画像のURLを貼り付けるだけですから。

.skin-bgHeader {
height: 420px; /*ヘッダー部分の表示縦サイズ*/
background-color: transparent;
background-image: url(画像のURLを記述する);
background-size: cover;
background-repeat: no-repeat;
}

2行目でヘッダー部分（背景が表示される部分）の縦サイズを指定します。お好きなサイズを指定してください。また、4行目では画像のURLを指定します。『画像のURLを記述する』部分にURLを貼り付けてください。

これだけでヘッダーの背景に画像を貼り付けることができます。とても簡単ですね。ここの画像は画面いっぱいに表示されるので、画像サイズはある程度大きいものを用意した方がいいです。最低でも横1200pxは欲しいところです。

あと、背景画像の上に後述するブログタイトルやナビゲーションなどを設置すると、その上に表示されたものが見づらくなりますので、背景画像との間に一枚半透明な要素を追加します。

.skin-bgHeader:after {
content: '';
display: block;
position: absolute;
top: 0;
width: 100%;
height: 450px;
background: rgba(0,0,0,.2);
background-image: radial-gradient(rgba(0,0,0,.2) 20%, transparent 0), radial-gradient(rgba(0,0,0,.2) 20%, transparent 0);
background-position: 0 0, 3px 3px;
background-size: 6px 6px;
z-index: 0;
}

.skin-bgHeader:afterは、.skin-bgHeaderというヘッダー要素の後に新しい要素を追加してます。

9行目、10行目、11行目で、細かい点の背景をつけております。もし、この模様を付けたくない場合は９〜１１行目を削除してください。

アメブロヘッダーの下にナビゲーションを設置する

アメブロには、ナビゲーションを配置する方法がありません。デフォルトではサイドバーのフリースペースでリンクを貼るくらいしか方法が無いのです。

しかし、今回のカスタマイズを施すと、ヘッダー下やヘッダー内にナビーゲーションリンクを設置することが可能となります。

まずは、アメブロ管理画面の『CSSの編集』ページ内に以下のCSSコードを記述します。

.header_nav_area {
border-bottom: 1px solid #e5e5e5;
}
ul.header_nav {
display: flex;
margin: 0 auto;
width: 1120px;
}
ul.header_nav li {
margin: .7px 0;
}
ul.header_nav li:last-child {
border-right: 1px dotted #e5e5e5;
}
ul.header_nav li a {
display: block;
padding: 13px 30px;
color: #666;
font-size: 1.5px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
border-left: 1px dotted #e5e5e5;
transition: .3s;
}
ul.header_nav li a:hover {
color: #fff;
background-color: #43abc9;
}

上記のCSSコードでナビゲーションのデザインを施すことができます。カラーや余白などはCSSの基本的な知識をお持ちの方であればご自由に変更してみてください。

次に、実際に表示させるHTMLを記述するのですが、これを記述する場所というとカスタマイズの定番であればフリースペースなのですが、今回は『フリープラグイン』に追加します。以下を記述してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var header_nav ='<ul class="header_nav"><li><a href="http://ameblo.jp/natural-creation/entry-11981481129.html">私に制作を依頼したいあなたへ</a></li><li><a href="http://ameblo.jp/natural-creation/entry-12213671190.html">Webサイト制作歴10年の私ができること</a></li><li><a href="http://ameblo.jp/natural-creation/entry-12216624665.html">Webサイトが完成するまでの制作の流れ</a></li></ul>'
$(function() {
$(".skin-bgHeader").after('<div class="header_nav_area">'+ header_nav + '</div>');
});
</script>

上記をフリープラグインに記述することにより、ヘッダー下部分にナビゲーションが表示されるようになります。

6行目の.skin-bgHeaderは、アメブロのテンプレート内に記述されているものです。ヘッダー部分のセレクタと呼ばれるものなのですが、この.skin-bgHeaderというのがヘッダー要素のclassとなってます。

.afterで、.skin-bgHeaderの下に4行目の内容が追記されるように設定してます。

また、4行目では、ナビゲーション用のHTMLを記述しております。ここは必ず1行で記述するようにしてください。2行以上で記述すると確実に表示されません。

編集しやすいように、下に4行目のHTML部分を記載しておきます。これをコピーしていき、ナビゲーションに表示させたいリンクテキストとURLを貼り付けてください。

<ul class="header_nav">
<li>
<a href="ここにURLを記述する">
ここにリンクテキストを記述する
</a>
</li>
<li>
<a href="ここにURLを記述する">
ここにリンクテキストを記述する
</a>
</li>
<li>
<a href="ここにURLを記述する">
ここにリンクテキストを記述する
</a>
</li>
</ul>

上記のHTMLが完成しましたら、余計な余白等を消してかならず1行にしてください。

これでヘッダー下にナビゲーションをつける事ができます。

ヘッダー内に、ブログタイトルとナビゲーションを設置するカスタマイズ

次に、ヘッダー内にブログタイトルとナビゲーションを設置するカスタマイズについて。このカスタマイズの注意点として、

ブログタイトル名が長すぎるとうまく表示できない。
ナビゲーション項目数が多すぎるとうまく表示されない。

というものがあります。

ブログタイトルが長い場合は、当ブログのようにロゴ画像などを用意して表示させるとスマートに表示させることができます。また、ナビゲーションに関しては、選択肢が多すぎると選ぶことができないという人間の心理もありますので、３〜６個くらいにしておいた方が良いです。

まずは、『CSSを編集する』に以下を記述します。

/*-- ヘッダー要素を中央揃えにする --*/
[amb-layout="headerInner"] {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin: 0 auto 7rem;
padding: 2rem 0 0;
width: 1120px;
height: 70px;
z-index: 10;
}
/*-- ブログタイトル名スタイル --*/
[amb-layout="headerInner"] > a {
display: block;
width: 180px; /*ブログタイトル名が表示される要素の横サイズ*/
height: 42px; /*ブログタイトル名が表示される要素の縦サイズ*/
}
.skin-blogMainTitle {
color: #fff;
margin-bottom: 10px;
font-size: 27px;
width: 128px;
height: 42px;
font-weight: bold;
text-indent: 100%;
text-shadow: 0 1px 1px rgba(0,0,0,.8);
white-space: nowrap;
overflow: hidden;
background-image: url(画像URLを記述); /*ブログタイトルを画像にする*/
background-size: 128px 42px;
background-repeat: no-repeat;
}
/*-- ブログ説明文を非表示 --*/
.skin-blogSubTitle {
display: none;
}
/*-- ナビゲーションスタイル --*/
ul.main_nav {
display: flex;
}
ul.main_nav li {
margin-left: 5rem;
}
ul.main_nav li a {
display: block;
color: #fff;
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
transition: .3s;
}
ul.main_nav li a:hover {
opacity: .6rem;
}

ブログタイトル名をロゴ画像にする場合には、先述したCSSコードの行目から行目を、以下のものに変更してください。

また、ロゴ画像に合わせて以下のCSSコード内を変更してください。

[amb-layout="headerInner"] > a {
display: block;
width: 128px; /*ロゴ画像の横サイズ*/
height: 42px; /*ロゴ画像の縦サイズ*/
}
.skin-blogMainTitle {
margin-bottom: 10px;
font-size: 27px;
width: 128px;
height: 42px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-image: url(画像URLを記述); /*ブログタイトルを画像にする*/
background-size: 128px 42px; /*ロゴ画像の横縦サイズ*/
background-repeat: no-repeat;
}

そして、以下を『フリープラグイン』に記述します。もし、ヘッダー下にナビゲーションを設置するカスタマイズを施している場合には、1行目は不要ですので、その下からコピーしてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var main_nav ='<ul class="main_nav"><li><a href="https://web-bruno.com/profile/" target="_blank">プロフィール</a></li><li><a href="https://web-bruno.com/about/" target="_blank">制作について</a></li><li><a href="https://web-bruno.com/price/" target="_blank">制作料金とプラン</a></li><li><a href="https://web-bruno.com/portfolio/" target="_blank">制作実績のご紹介</a></li><li><a href="https://web-bruno.com/questions/" target="_blank">よくある質問</a></li><li><a href="https://web-bruno.com/web-contact/" target="_blank">お問い合わせ</a></li></ul>'
$(function() {
$('[amb-layout="headerInner"] > a').after('<div class="main_nav_area">'+ main_nav + '</div>');
});
</script>

こちらも、先述したヘッダー下ナビゲーションと同じで、4行目の部分はかならず1行で記述してください。また、編集しやすいように下にHTMLタグを記載しておきます。同様にURLとリンクテキストを記述して、1行にしてからコピー＆ペーストしてください。

<ul class="main_nav">
<li>
<a href="ここにURLを記述する">
ここにリンクテキストを記述する
</a>
</li>
<li>
<a href="ここにURLを記述する">
ここにリンクテキストを記述する
</a>
</li>
<li>
<a href="ここにURLを記述する">
ここにリンクテキストを記述する
</a>
</li>
</ul>

ブログタイトルやヘッダー内にナビゲーションを追加するには、少々手間がかかりますが、これを施すことで全然見た目が変わりますので、ぜひチャレンジしてみてください。

ブログキャプションをつける

ブログを訪れてくれた人にどのようなブログなのかをアピールするためのキャプションをつけるカスタマイズ方法です。

これまでのカスタマイズ方法とほぼ同じなので、これまでのものができていれば簡単です。

『CSSを編集する』ページに以下を記述します。

.header-cap {
position: relative;
margin: 0 auto;
width: 1120px;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
text-shadow: 0 2px 2px rgba(0,0,0,9);
z-index: 100;
}
.header-cap-headering {
margin-bottom: 2rem;
font-size: 3.2rem;
}

『フリープラグイン』に以下を追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var header_cap ='<p class="header-cap-headering">小さな会社の大きなWebサイト戦略</p><p>Webサイトやブログ運営ノウハウをご紹介。<br>あなたのサイト運用をサポートするテクニックを<br>惜しげもなく公開してますので、ぜひ活用してください。</p>'
$(function() {
$('[amb-layout="headerInner"]').after('<div class="header-cap">'+ header_cap + '</div>');
});
</script>

他にカスタマイズしてあれば、1行目は不要ですのでその下からコピーしてください。また、編集しやすいように、下にHTMLタグを記載しておきます。こちらも1行にしてから貼り付けてください。

<p class="header-cap-headering">小さな会社の大きなWebサイト戦略</p>
<p>Webサイトやブログ運営ノウハウをご紹介。<br>あなたのサイト運用をサポートするテクニックを<br>惜しげもなく公開してますので、ぜひ活用してください。</p>

1行目は、大見出しです。短いフレーズであなたのブログを表現してみてください。2行目は、大見出しの下に表示される文章部分です。ここはある程度文章量があってもいいですが、読んでもらうというより認識してもらうという感覚で記載する部分ですので、できるかぎり短文で記述してみてください。

と、ヘッダーを機能的にするためのカスタマイズ方法についてご紹介してみました。特に難しい方法ではないので、初心者の方であっても比較的簡単にカスタマイズすることができます。

ただ、画像を用意したり、このスタイルではなくカラーなどを変更したい場合には、専門的な知識が必要となりますのでその辺は調べてみてください。基本中の基本的な内容ですからすぐ理解できると思います。

また、これを応用してさまざまな部分に要素を追加することができます。例えば、記事下に要素を追加する（この記事の下にもある『ブログ執筆者』部分）といった事も、このカスタマイズを応用して設置してます。かなり使える方法なので、あなたのブログに合わせてぜひカスタマイズしてみてください。

では、また書きます。

※カスタマイズ方法についてのお問い合わせはお受けできませんのでご了承ください。