【はてなブログ】フッターにナビゲーションを設置して内部リンクを強めよう【カスタム】

攻殻機動隊のサブタイトル「STAND・ALONE・COMPLEX」って文字を見るとB'zの「ALONE」が頭に流れる苦労詐欺だ。
攻殻機動隊はあんまり見たことがないんだけど、同じ世界観のアップルシードのフル3DCGアニメは見たことあるんだよね。

最近Milkさんが実写版攻殻機動隊の記事を出してたんだけど、読みながら頭のなかに攻殻機動隊のアニメが流れて「あんまり見たこと無いはずなんだが…」って困惑した。
ちょっと調べたらすぐわかって、何も知らないでたまたまDVDを借りて見た、攻殻機動隊の続編「イノセンス」の映像を思い出しただけだった。

【視聴】ゴースト・イン・ザ・シェル【感想】 - Milkのメモ帳

そんな僕の過去の話はどうでもよくて、今回はサイトのフッターにナビゲーションリンクを設置して内部リンクを増やそうじゃないかという企画。
実際にこのSEOブログのフッターにナビゲーションリンクを設置して、その方法を紹介していくよ～

cssでヘッダー、フッターの表示を消そう

はてなブログを使っている人で、はてなproにしている人だと、設定でサイトのヘッダー・フッターの表示・非表示が切り替えられるようになっているはず。
無料で使っている人の場合は、この設定ができないんだけど、cssで消すことができるよ。

今回は無料で使っている人もしくは、ヘッダーかフッターのどちらかを消したい人向けにcssのコードを置いておくよ。
ヘッダーとフッターを非表示するためのcssコードが↓になるよ

ヘッダーを消すコード

/* グローバルヘッダー */
#globalheader-container {
    display: none;
}

フッターを消すコード

 /* footerを消す */
#footer {
  display: none;
}

はてなブログ編集画面の「デザイン」→「カスタマイズ(レンチマーク)」→「デザインcss」の中に設置すれば反映されるよ。
フッターを消した場合は、ついでに自分用のコピーライトを置いちゃおう！

フッター用コピーライトのコードがこちら↓

<div id="copyright">Copyright cユーザーネーム All rights reserved.</div>

「ユーザーネーム」のところを自分のユーザーネームに変更して、「デザイン」→「カスタマイズ」→「フッタ」に設置すればOK
これだけだと文字が設置されだけだけど、↓のコードをデザインcss内に設置すれば装飾もされるよ。

/*コピーライト*/
#copyright {
    padding: 20px;
    text-align: center;
    background: #343838;/*背景色*/
    font-size: 14px;
    color:#fff;/*文字の色*/
}

背景色・文字色のカラーコードを変更すれば、それぞれの色が変更できるよ。
カラーコードについては↓の記事が参考になるよ～

WEB色見本 原色大辞典 - HTMLカラーコード
もう配色デザインには迷わない！すごい無料カラーツール19個まとめ - PhotoshopVIP

ちなみにこのブログにもコピーライトを設置してみたら、↓こんな感じになったよ。

そういえば、コピーライトってなんのために掲載するの？

著作権って意味で、サイトに記載しておけば「著作権があるからコピーしないでね」って意味になるのよ。

そうゆうことか。でも、明記していないところも多いよなぁ？

そうね、別に明記していなくても法律上では守られていることになっているからね。

でも、明記しておけば無断転載・無断コピーの抑止にはなるのよ。

はてなブログのフッター・ヘッダーはproにしなくても、cssが使えれば消すことは可能だよ。
フッターには通常ははてなブログのコピーライトが設置されているけど、表示を消したならついでに自分用のコピーライトを設置しちゃおう。
コピーライトは明記すれば、それだけで無断転載・無断コピーの抑止力になるから、是非やっておこう。

フッターカスタム用HTMLコードとcssコードを設置

フッター・ヘッダーの表示・非表示やコピーライトの設置ができたら、次はフッターカスタム用のHTMLを設置しよう。
HTMLやcssがいじれるならカラム数なんかも簡単に弄れるけど、そうじゃない人用に2カラム用と3カラム用のHTMLコードを置いておくよ。

3カラム用HTMLコード

<div id="footer_menu">
  <div class="footer_box01">
    <h3>タイトル</h3>
    <p>文章</p>
  </div>
    <div class="footer_box02">
    <h3>タイトル</h3>
    <p>文章</p>
  </div>
  <div class="footer_box03">
    <h3>リンク</h3>
    <ul>
    <li><a href="">リンク1</a></li>
　　<li><a href="">リンク2</a></li>
　　<li><a href="">リンク3</a></li>
    </ul>
  </div>
  <div class="footer_clear">
  </div>
</div>

2カラム用HTMLコード

<div id="footer_menu">
  <div class="footer_box01">
    <h3>タイトル</h3>
    <p>文章</p>
  </div>
  <div class="footer_box03">
    <h3>リンク</h3>
    <ul>
    <li><a href="">リンク1</a></li>
　　<li><a href="">リンク2</a></li>
　　<li><a href="">リンク3</a></li>
    </ul>
  </div>
  <div class="footer_clear">
  </div>
</div>

これを「デザイン」→「カスタマイズ」→「フッタ」に設置しよう。
反映させてみるとわかるけど、cssで何も設定してないと、フッター部分に書いたものが縦に表示されるよ。

そこで、きちんと横並びで装飾されて表示されるように↓のcssを追加しよう。
こちらも、2カラムVer.と3カラムVer.を置いておくよ。

cssコード3カラムVer.

/* bottom-editarea */
#bottom-editarea {
    background-color: #fff;  /*背景色*/
    margin: 0;
    padding: 0;
}
#footer_menu {
    width: 100%;  /*contentの幅と合わせる*/
    margin: 0 auto;
    padding: 40px 0 0 0;
    font-size: 90%;
}
#footer_menu h3 {
    color: #000;  /*見出し文字色*/
    font-size: 1.1em;
    margin: 0 0 20px 0;
}
#footer_menu p {
    color: #000;  /*pタグ内文字色*/
    margin: 1em 0;
}
#footer_menu ul {
    text-align: left;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#footer_menu ul li {
    line-height: 1.1em;
    color: #000;  /*リスト内文字色*/
    margin: 0 0 25px 0;
    padding: 0;
}
#footer_menu ul li a {
    color: #000;  /*リンク文字色*/
}
#footer_menu .footer_box01 {
    width: 30%;
    float: left;
    margin: 0;
    margin-bottom:40px;
    padding: 0;
    overflow: hidden;
}
#footer_menu .footer_box01 img {
    max-width: 30%;
    margin: 0 0 20px 0;
    padding: 0;
}
#footer_menu .footer_box02 {
    width: 33%;
    float: left;
    margin: 0 0 40px 10px;
    padding: 0;
    overflow: hidden;
}
#footer_menu .footer_box03 {
    width: 30%;
    float: left;
    margin: 0 0 40px 10px;
    padding: 0;
    overflow: hidden;
}
#footer_menu .footer_clear {
    clear: both;
}

cssコード2カラムVer.

/* bottom-editarea */
#bottom-editarea {
    background-color: #fff;  /*背景色*/
    margin: 0;
    padding: 0;
}
#footer_menu {
    width: 100%;  /*contentの幅と合わせる*/
    margin: 0 auto;
    padding: 40px 0 0 0;
    font-size: 90%;
}
#footer_menu h3 {
    color: #000;  /*見出し文字色*/
    font-size: 1.1em;
    margin: 0 0 20px 0;
}
#footer_menu p {
    color: #000;  /*pタグ内文字色*/
    margin: 1em 0;
}
#footer_menu ul {
    text-align: left;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#footer_menu ul li {
    line-height: 1.1em;
    color: #000;  /*リスト内文字色*/
    margin: 0 0 25px 0;
    padding: 0;
}
#footer_menu ul li a {
    color: #000;  /*リンク文字色*/
}
#footer_menu .footer_box01 {
    width: 45%;
    float: left;
    margin: 0;
    margin-bottom:40px;
    padding: 0;
    overflow: hidden;
}
#footer_menu .footer_box01 img {
    max-width: 45%;
    margin: 0 0 20px 0;
    padding: 0;
}
#footer_menu .footer_box03 {
    width: 45%;
    float: left;
    margin: 0 0 40px 10px;
    padding: 0;
    overflow: hidden;
}
#footer_menu .footer_clear {
    clear: both;
}

コンテンツの幅を%にしてあるから、レスポンシブサイトにも反映が可能になってるよ。
背景色と見出し・pタグ・リスト・リンクの各文字色は指定可能になっていて、記事の背景色・文字色と合わせれば、記事と同化してるように見えるよ。

逆にコピーライトのほうと背景・文字色を合わせて、フッターとして一体感を出すのもありね。

ここだけ違う色にして目立たせるってのも1つの手か？

ん～、個人的な意見だけど、デザインとしては結構微妙だと思うわよ。

(´ﾍ｀；)ｳｰﾑ…悪目立ちしてデザインとしては微妙か～

記事かフッターどちらかに合わせたほうがデザインとしても良くなるわね。

フッター専用のHTMLのみを設置しても全て縦並びになるから、専用のcssコードも設置して横並びになるようにしよう。
背景色と文字色を記事かフッターに合わせればデザインとして一体感がでるよ。
この部分の背景色と文字色だけ変更しちゃうとデザインとして浮いちゃうからあまりオススメはしないよ。

フッターのデザインを考えてみる

これでフッターにコンテンツの追加ができるところまで準備が整ったと思う。
あとは、どこに何を配置してどんなデザインにするのかを決めて実行するだけだね。

調べてみると意外とフッターのデザインって色々あるみたいだね。
背景画像を入れてちょっとオシャレにしているものとか、ロゴを入れたり、シェアボタンを設置したりしているのもあるね。

フッターデザイン.com -Webデザインの“フッター”を集めたサイト-

↑のサイトはフッターデザインを集めたサイトで、フッターデザインを作り込んでみたいって人には役に立つかも。
僕は今回シンプルなのがいいなと思って、cacooを使って3カラムと2カラムそれぞれのフッターに掲載するものと配置を考えてみたよ。

背景に街の絵の画像とか入れてオシャレにするのもいいんだけどね、僕的には飾り気のないシンプルなのがいいなと。
3カラムのほうはロゴができたらこっちに変更してみようかなと思っているから、今回は2カラムのオススメ記事とカテゴリリンクの設置にしようかと。

これ、1カラムで横を目一杯使ってもいいんじゃ…

実は作りながら、こんなことも思ってしまった。(；・∀・)
「フッターナビゲーションも横並びに…」とか考えたけど、せっかくだから2カラムスタイルにすることにしたよ。

フッターのデザインに凝ってる人も多いな。

サイトのデザインだから、フッターまで含めてしっかりデザインする人が多いのよ。

はてなブログにもフッターデザインできる機能とかほしいよな～

そうね～、でも、HTML・cssで弄れるようにしてあるだけマシな気もするわよ。

まったく弄れない所もあるわけだし、まだいいほうか。

色々調べてみるとフッターに拘って、オシャレなものにしている人とか結構いるみたいだよ。
今回はリンクの設置が目的だから、デザインはシンプルなもので問題ないよ。
はてなブログで本格的にフッターデザインに拘りたいのなら、HTML・cssの知識がある程度必要だと思うよ。

SEOブログではこんな感じにカスタムしてみた

最終的にはこんな感じになった。
2カラムで、おすすめの記事とカテゴリーリンクにして、コピーライトと一体化させてみた。

レスポンシブに対応させるために横幅100%でウィンドウの幅いっぱいいっぱい使ってるんだけど、できれば記事幅の方に合わせたいね。
とりあえずで作ったから、そういった細かいところは今後修正していくつもり。

ちなみにテキストリンクの横に表示させているマーカーは↓の記事からコピペさせてもらったよ。

画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 | NxWorld

記事幅に合わせてないせいか出来栄えが微妙になったな。

設置した本人が一番それを感じているわよ。

途中から「bottom-editarea」のcssが反映されなくなって困ってたな。

諦めて「footer_menu」に背景色を設定してどうにかしたのよ。

傷口に塩を塗るのを止めなさいよ。

今回は2カラムにして、コピーライトと一体化させてみたよ。
リストタグのマーカー部分だけをおしゃれに装飾させてみたよ。
できれば、コピーライトよりも記事と一体化させるほうが見やすくなると僕は思うよ。

共通部分にナビゲーションリンクを設置するSEO的メリット

フッターやヘッター・サイドみたいなサイト共通部分にナビゲーションリンクを置くことで、SEO的にメリットが発生しているよ。
ここにリンクを設置するだけで、全ページに設置されるから、それだけ内部リンクがサイト内に追加されて、強化されることになるよ。

被リンクやコンテンツほどの影響力はないけど、サイトのSEOパワーを強めるのには十分貢献しているよ。
また、ナビゲーションリンクは設置してあれば、サイトの利便性向上にも繋がっていると考えられるよ。

ナビゲーションは名前の通り、サイトの中を案内するような役割を果たしているからね。
こういった点でも、SEOとしての効果があると考えられるから、まだフッターナビを設置していないのなら設置しておくことをおすすめするよ。

内部リンクってSEO効果結構高いの？

被リンクやコンテンツと比べるとそこまでじゃないけど、利便性向上にも繋がるからある程度はあったほうがいいわね。

じゃあ、共通部分だけじゃなくていろいろなところにおけばいいんじゃないの？

不自然な出し方をするとペナルティになる可能性があるから、今回みたいに共通部分に設置するだけとかのほうがいいわよ。

サイト共通部分にナビゲーションリンクを設置することで、全ページに設置されて内部リンクを強化することができるよ。
被リンクやコンテンツほどの影響力はないけど、サイト利便性の向上に繋がるから、設置しておくことをおすすめするよ。
変に出しすぎるとペナルティになる可能性もあるから、今回みたいに自然と出す形が一番いいよ。

まとめ

じゃあ、フッターナビゲーション設置についてまとめていくよ。

• はてなproならブログのヘッダー・フッター表示を設定で消すことができるよ
• 無料版でもcssでヘッダー・フッターの表示を消すことができるよ
• ヘッダー・フッターを消したら、ついでに自分用のコピーライトを設置しておこう
• コピーライトは設置しておけば、無断転載・無断コピーの抑止になるよ
• 今回は2カラム用と3カラム用のHTML＆cssを用意したよ
• どちらを使うかはお好みで選んでOK
• 用意したやつは幅を100%にしてサイト幅に合わせているよ
• %で合わせることでレスポンシブに対応させることができるよ
• 背景色・文字色を記事やフッターに合わせれば一体感を出すことができるよ
• 最近ではフッターも作り込まれていてオシャレなデザインも多いよ
• 今回のSEOブログのフッターはシンプルなものにしたよ
• フッターを作り込みたいならHTML・cssの知識は必須になってくるよ
• cacooを使って掲載する内容と配置を予め決めたよ
• 今回SEOブログで作ったフッターは幅を記事に合わせなかったため少し微妙になったよ
• 掲載する内容とかにもよるけど、記事と一体化させたほうがより自然に見えると思うよ
• 共通部分にナビゲーション等のリンクを設置することとでSEOとしての効果も高まるよ
• 被リンク・コンテンツほどの効果はないけど、サイトの利便性向上にも繋がるよ
• 簡単なものでいいからサイト共通部分にナビゲーションを設置してみよう！

一度作ってしまえば、気に入らなくてもあとからいくらでも修正できるから、とりあえずで作ってみよう。
作り込みたいって人も設置だけしておいて、HTML・cssについて学んでから修正でも十分間に合うと思うよ。