フッターカスタマイズ方法まとめ
シリウスニュービジネステンプレートのフッターは、従来仕様とやや異なりはしますが、
カスタマイズはさほど面倒でもございません...
ですので、詳細までを記載はしませんが、自己努力で弄り回せば理解しやすい..
そんな説明にします..
ただ、当ページでは収まり切れない項目に関しては、下層ページに追加します。
フッターは、どこのソースが表しているのか？
HTMLソースはここ...
<!-- ★フッターここから★ -->
<footer id="footer">
<div class="inner">
<% footerMenu | str_replace(<div id="footermenu">,) | str_replace(</div>,) %>
<% PRLink | tag_insert(span) %>
<% sitemapPageLink | tag_insert(span) %>
<% pageDescription2 | str_replace(id="headertext",class="desc") %>
<small>Copyright © <% thisYear %> <% siteTitle %>All Rights Reserved.<% accessAnalyzer %></small>
</div>
</footer>
<!-- ★フッターここまで★ -->
そして、スタイルシートで動きやカラー付け、サイス等々を指示しているのです...
ここから下ですね
（上はパソコン用）
==================================================
フッター
==================================================
*/
#footer {
background-color: #ea84ad;
overflow: hidden;
position: relative;
}
#footer .inner {
letter-spacing: -.4em;
padding: 16px 20px 0;
}
#footer span::before {
border-left: 1px solid #fff;
content: '';
display: inline-block;
height: 12px;
margin: 0 0.7em;
vertical-align: middle;
}
#footer span:first-of-type::before {
display: none;
}
#footer span a {
color: #ffffff;
display: inline-block;
font-size: 12px;
letter-spacing: normal;
line-height: 1.6;
margin: 0;
padding: 0;
text-decoration: none;
}
#footer .desc {
color: fff;
font-size: 10px;
letter-spacing: 0.05em;
line-height: 2;
margin: 0 0 16px;
text-align: left;
}
#footer span + .desc {
margin-top: 16px;
}
#footer small {
color: #fff;
display: block;
font-size: 10px;
letter-spacing: 0.05em;
margin: -16px 0 0;
padding: 10px 0;
text-align: center;
}
#footer span + small,
#footer .desc + small {
margin-top: 16px;
}
（ここから下はスマートフォンで反応）
@media screen and (min-width: 768px) {
#footer .desc {
text-align: center;
}
#footer small {
padding: 16px 0;
}
}
@media screen and (min-width: 1000px) {
#footer .inner {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
padding: 24px 0 0;
width: 1000px;
}
#footer span::before {
height: 18px;
margin: 0 1.2em;
}
#footer span a {
font-size: 13px;
}
#footer span a:hover {
opacity: 0.8;
text-decoration: underline;
}
#footer .desc {
font-size: 12px;
margin: 0 0 24px;
}
#footer span + .desc {
margin-top: 24px;
}
#footer small {
font-size: 11px;
margin: 0;
padding: 0 0 24px;
}
#footer span + small,
#footer .desc + small {
margin-top: 24px;
}
}
ここまで.....
一般的なカスタマイズ
backgroundの行は、背景を指しますね
カラーコード書き換えで変更できます
background-color: #ea84ad;
カラーコードは、背景以外でも使われるので、意味合いが理解できない場合は。
書き換えてどこが変化したのかを確認してください...
間違ったら戻す..
font-size: 13px;...などはサイズ指定と理解ください
上例はフォントサイズです
その他項目詳細は、後ほど追記します