2012年08月05日
ファンブログのフッタにナビゲーションとコピーライト（Copyright）を表示させてみよう！
シンプル系スキンのフッタには何も記述されていませんので、只の一本の横棒が表示されているだけで活用されていません。今回はこのフッタにテキスト型のナビゲーションと著作権表示のコピーライト（Copyright）を表示させる方法を説明します。 
テキスト型のナビゲーションにつきましては、本来はテキストリンクをリストタグで囲ってCSSで装飾する方法が推奨されていますが、リストタグをCSSで装飾するのは初心者の方では少し大変なので、テキストリンクを横一列に記述した単純な方法で説明します。
フッタの上段に基本的な4個のナビゲーションとRSSフィードへの別窓リンクのナビゲーションを配置し、下段には一般的なコピーライト（Copyright）表示とブログ名が表示される HTML コードを用意しました。
※ 初心者の方でもテキストリンクの追加や削除がしやすいように、全角の ｜ を使用して仕切りました。
次のコードをコピーして、各 HTML に貼り付けてください。
ボックス内にマウスを置きますとコードが全て選択されます。右ボタン⇒コピー でお持ち帰りください。
「メイン」「ポータル」「アーカイブ」「1記事」「プロフィール」それぞれの HTML にフッタの記述がありますので、全てのページのフッタに表示させたい場合は、これら 5 枚の HTML に上記ソースコードを貼り付ける必要があります。
スタイルシートの調整時にプレビューされるのは「メイン」の HTML になりますので、初めに「メイン」の HTML に コードを貼り付けて、好みのスタイルになるよう記述の追加や削除を行いながら、スタイルシートで調整していきます。表示されるスタイルが決定しましたら、残りの HTML に記述をコピーしていきます。
作業をする前に、スタイルシートと HTML のバックアップをとっておくことを推奨します。
HTML コードを貼り付ける
「メイン」の HTML を開いたら <div id="footer"> という記述を探してください。最後の方に記述されていますので一番下までスクロールすればすぐ見つかります。
持ち帰った「Html コード」を <div id="footer"> と </div><!-- /footer --> の間に貼るのですが、そのまま貼ると記述してある元のソースとコードが繋がってしまう恐れがありますので、コードを貼る前に直下にカーソルを置き、3〜4回改行して行間を広げてください。 改行して間を広げた真中あたりの行頭にカーソルを置いてコードを貼れば上下に空きができますので、貼ったコードと元から記述されていたソースとの区別がつきますから安全に作業が行えます。
</div><!-- /main --> <div id="footer"> <!-- footernavi --> | <a href="{$BlogUrl$}">ブログを見る</a> | <a href="{$BlogUrl$}portal">ポータルを見る</a> <!-- /footernavi --> <!-- copyright --> Copyright © <a href="{$BlogUrl$}">{$BlogName$}</a> <!-- /copyright --> </div><!-- /footer --> </div><!-- /container -->「プレビュー(P)」を押し、フッタの中にナビゲーションとコピーライトが表示されていましたら「保存(S)」を押します。
プレビュー時にテキストリンクがリンク色で表示されフッタの背景色と同化してしまったり、右揃えで表示されたりしますが、これらはスタイルシートで装飾、調整することが出来ますので問題ありません。
スタイルシートで装飾、調整する
フッタのテキストリンクの文字色は、本来はヘッダのブログタイトルと同じ色で表示されるように記述されているはずなのですが、シンプル系スキンのスタイルシートの記述に誤り（タイプミス）があり、通常のリンク色で表示されてしまいますので、以下の記述を修正してください。
「スタイルの編集」を選択して「スタイルシートの編集」画面を開いて、 /* ブログタイトルと説明文 */ という記述を探してください。上の方に記述されていますので、少しスクロールすればすぐ見つかります。
/* ヘッダー / フッター背景 */ #header,#footer { background: #cf5527; } /* ブログタイトルと説明文 */ h1#blogTitle a , #footer , #fotter a { ?? /* タイプミス（誤記述） #footer , #footer a { に修正 */ color: #FFF ; ?? /* フッタの文字色 */ }「プレビュー(P)」を押し、フッタの中のテキストリンクがヘッダのブログタイトルと同じ色になっていましたら成功です。「保存(S)」を押して確定してください。
続きましてテキストを中央揃えにして行間を調整しますので「Ctrl」+「F」を押し、開いた検索画面に 基本 と入力し、 /* 基本レイアウト */ を検索します。中央揃えにするために #footer の text-align: right ; を center に変更し、行間を空けるために line-height: 1.6; を追記し、レイアウトの崩れを防止するために clear: both; を追記します。
ヘッダのブログタイトルと同じようにマウスが上に乗っている状態でアンダーラインを表示させたい場合は、
#footer a:hover { text-decoration:underline; } を追記します。
/* 基本レイアウト */ #header { margin-bottom:10px; padding:10px 5px; } #main { margin:0; } #footer { margin-top: 15px; padding:8px; text-align: center ; line-height: 1.6; clear: both; } #footer a { text-decoration: none; } #footer a:hover { text-decoration:underline; }※ 2012年08月11日：レイアウトの崩れを防止するため、 #footer に clear: both; を追記しました。
「メイン」以外の各 HTML に、HTML コードを貼り付ける
これで「メイン」への基本的は設置作業は完了です。「メイン」に貼り付けた HTML コードを変更しない場合は「ポータル」「アーカイブ」「1記事」「プロフィール」の各 HTML の同じ場所に持ち帰った HTML コードを貼り付けます。
「メイン」に貼り付けた HTML コードに追加や変更をした場合は、編集した「メイン」の HTML コードをコピーして、各 HTML に貼り付けてください。
ワンポイント：コピーライトの西暦を自動で表示させる方法
Copyright ©＋ぷちカスタマイズ日記＋このように、Copyright © と ブログタイトルの間に西暦を自動表示させるには、JavaScript を記述します。
JavaScript につきましては、こちらのサイト様を参考にさせていただきました。
Copyright © <script type="text/javascript">
document.write(new Date().getFullYear());</script> <a href="{$BlogUrl$}">{$BlogName$}</a>
※ 閲覧者のパソコンの日付設定の西暦を取得して表示させるスクリプトです。※ JavaScriptが無効に設定されているブラウザ上では、西暦は表示されません。
All Rights Reserved. を表示させる方法
Copyright ©＋ぷちカスタマイズ日記＋. All Rights Reserved.このように、All Rights Reserved. を表示したい場合はソースコードの最後に以下のように追記してください。
〜 <a href="{$BlogUrl$}">{$BlogName$}</a> . All Rights Reserved. <!-- /copyright -->※ All Rights Reserved. の表示につきましては、 著作権表示 - Wikipedia をご確認ください。
いかがでしたでしょうか？お好みでテキストリンクの追加や削除をしたり、表示されているテキストを「HOME」とか「PROFILE」というように変更することも出来ますので、詳しい方はいろいろと試してみてください。
※ 上記ソースコードはコピー＆ペーストでそのままご利用になれます。
※ ソースコードのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
【カスタマイズ：リンク編の最新記事】
この記事へのコメント