はてなブログのフッターをカスタマイズして、「お問い合わせ」や審査に必要な「Amazon広告の使用」を記載したいと思ったことはありませんか？
フッターそのものをいじれないなら、作ってしまおうじゃありませんか。
「フッターっぽいもの」を。
できること
このブログの下部に適用されているようなフッターを作れます。
本来のフッターの上に偽フッターを作り、好きな要素を付け足せます。
私はこの連絡先とAmazonの表記のしかたでAmazonアソシエイトの審査に受かりました。(販売ノルマ達成できなくて解約されそうとか言わない)
プライバシーポリシーはGoogleアドセンスに受かった後につけました。
コピペコード
デザイン>カスタマイズ>フッタに貼り付けます。
これでフッタのすぐ上に表示されます。
HTML
<div class="foot">
<p>アフィリエイトの文言など</p>
<p>お問い合わせ: <a href="mailto:〜〜〜.com" target="_blank">〜〜〜.com</a></p>
<p><a href="プライバシーポリシーのリンク">プライバシーポリシー</a></p>
</div>アフィリエイトの文言はお好みで変更してください。
「〜〜〜.com」のところはご自身のメールアドレスを入れてください。
メール作成画面を開かせることができます。
専用のお問い合わせページがある場合は、プライバシーポリシーと同じようなリンクを作ってください。
CSS
「デザインCSS」に貼り付けます。
.foot {
font-size: 12px;
text-align: center;
padding-top: 30px;
background-color: #f0f0f0;
}
.foot p {
margin: 0;
padding-top:3px;
}解説つきCSS
.foot { /*偽フッター全体のデザイン*/
font-size: 12px; /*文字の大きさ*/
text-align: center; /*文字を中央寄せ*/
padding-top: 30px; /*上部に余白*/
background-color: #f0f0f0; /*本物のフッターと同じ背景色*/
}
.foot p { /*文のデザイン*/
margin: 0; /*下の余白をなくす←本物との間に隙間が開かないように*/
padding-top:3px; /*行間に隙間を開ける*/
}やはりポイントは背景色ですよね。
同じ色にすることで、あたかもつながっているかのように見せています。
フッターの色は、F12キーまたは右クリックから開発者ツールの「検証」を開き、フッターを選択して色コードを取得するか、Macなら「Digital Color Meter」という標準アプリで色を取得することができます。
まとめ
今回ご紹介したコードはご自身のブログに使ったりアレンジを加えていただいたりしてOKです。
紹介する際はこの記事のリンクを貼っていただけると大変うれしいです！
以上、フッターを拡張しお問い合わせなどを記載するカスタマイズでした。
