フッターメニューをカスタマイズ

f:id:tsukisai:20200510102049g:plain

先日フッターにあるコピーライトまわりを調整しましたが（フッターのコピーライトとか - Someday Somewhere）、ついでにフッターメニューのようなものも設置してみました。

参考にしたサイト

フッターHTML

ダッシュボード→デザイン→カスタマイズ→フッタと進み、以下のコードを書き込む。

<div id="footer_menu">
<div class="footer_box01">
<h3>Title</h3>
<ul>
<li>
<img src="https://〇〇〇"/><a href="https://www.△△△">リンク先名</a></li> </ul> </div>
<div class="footer_box02">
<h3>Title</h3>
<ul>
<li>
<img src="https://〇〇〇"/><a href="https://www.△△△">リンク先名</a></li>
</ul>
</div>
<div class="footer_box03">
<h3>Title</h3>
<ul>
<li>
<img src="https://〇〇〇"/><a href="https://www.△△△">リンク先名</a></li>
</ul>
</div>
<div class="footer_clear">
</div></div>

ピンクマーカー部分に該当する項目を書き込む：
Title：各ボックスのタイトル
〇〇〇：ボタン画像のURL
△△△：リンク先ページのURL
リンク先名：リンク先ページ名

リンクを複数貼る場合は
<li>～</li> を並べていきます。

ボタンが必要ない場合は<img src="https://〇〇〇"/>は削除。

フッターのHTML内に、前回記述したコピーライトのコードがある場合は、その上に今回のコードを挿入します。

参考にしたコードは三つのボックスに分けたフッターメニューになっています。
当サイトでは、ボックス三つともサイトマップ内のページに飛ぶリンクを貼りましたが、例えば、一つ目（box01）はプロフィール、二つ目（box02）はリンク集といった使い方もできます。

CSS

フッターにコードを記入したら、次にCSSにも書き込みます。

ダッシュボード→デザイン→カスタマイズ→デザインCSSと進み、以下のコードを書き込む。

/*------------------------------
フッターカスタマイズ
------------------------------*/
/* bottom-editarea */#bottom-editarea {
background-color: #f7ece8;
margin: 0;
padding: 0;
}
#footer_menu {
width: 1000px; /contentの幅と合わせる/
margin: 0 auto;
padding: 40px 0 0 0;
font-size: 90%;
}
#footer_menu h3 {
color: #737373;
font-size: 1.1em;
margin: 0 0 20px 0;
}
#footer_menu p {
color: #737373;
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: #737373;
margin: 0 0 15px 0;
padding: 0;
}
#footer_menu ul li img{
margin-right: 5px;
}
#footer_menu ul li a {
color: #996655;
}
#footer_menu .footer_box01 {
width: 300px;
float: left;
margin: 0;
margin-bottom:40px;
padding: 0;
overflow: hidden;
}
#footer_menu .footer_box01 img {
max-width: 300px;
margin: 0 0 20px 0;
padding: 0;
}
#footer_menu .footer_box02 {
width: 300px;
float: left;
margin: 0 0 40px 30px;
padding: 0;
overflow: hidden;
}
#footer_menu .footer_box03 {
width: 300px;
float: left;
margin: 0 0 40px 30px;
padding: 0;
overflow: hidden;
}
#footer_menu .footer_clear {
clear: both;
}
/* Media Queries - Small Tablet & Smartphone */@media (max-width: 919px) {#footer_menu { display: none; }}

ピンクマーカー部分はスマホ画面に表示させないというコードなので、表示する場合はnone→inlineに書き換えると、各ボックスが縦に並んで表示されます。