今回やること
- SANGOのフッターをもっとおしゃれにしたい
- フッターの「HOME」をロゴにしたい!
- 固定ページへのリンクをボタンにしたい!
今回は、SANGOのフッターを以下の画像のようにデザインを変更します!
HOMEへのリンクをロゴに変更し、リンクをボタン表示に変えています。
また、細かいですが、フッターにあるサイト説明文の文字色も少し変えています。
この記事の目次
HOMEへのリンクをロゴに変更する
HOMEへのリンクをロゴに変更する方法を紹介します。
やり方が、SANGOのみのユーザーと、SANGO+PORIPUでのユーザーとで違います。
SANGO+PORIPUの人
PORIPUがあればめちゃくちゃ簡単。
ということでまずは簡単なほうから説明していきます。
上記の場所に「フッターにロゴを表示する」の項目があるのでチェックするだけで終わりです。
SANGOのみの人
多少難しいです。
footer.php
をいじるので、以下の記事も参考にしていただければと思います。
参考
WordPressで子テーマを活用して安全にカスタマイズを行う方法SANGOカスタマイズガイド
ここの少し下の部分に
<a class="footer-menu__btn dfont" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php fa_tag("home","home",false) ?> HOME</a>
という部分があります。
ここを、以下のように変更します。
<a class="footer-menu__btn dfont footerlogo" href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="画像のURL" alt="画像名"></a>
ここの画像を、ロゴ画像にしておくことでフッターのHOMEがあった場所にロゴが表示されます。
このままだとおそらくロゴ画像が大きすぎるので、以下のCSSを貼り付けて見栄えを整えましょう。
height
の部分などは各自で多少調節してみてください!
.footerlogo img{ display: inline-block; height: 65px; padding: 5px 0; vertical-align: middle; }
フッターのリンクをボタン形式に変更
こちらもstyle.cssに貼り付けるだけでOKです。
まずは、フッターのサイト説明文の文章について。
.site_description{ color: #4e4449; }
私の場合は、最初に設定した色だとフッターの文字だけが見にくかったので、ちょっと色を変えています。
次に、ボタン形式にするCSSです。
#footer-menu .footer-links a { font-size: 0.9em; background: #F48FB1;/*ボタンの色*/ padding: 4px 8px;/*ボタンの余白*/ border-radius: 3px; text-decoration: none; color: #fff;/*ボタンの文字色*/ box-shadow: 0 2px 3px rgba(0, 0, 0, .2), 0 2px 3px -2px rgba(0, 0, 0, .15); margin: -2px; font-weight: bold; text-decoration: none!important; }
私の場合は3つリンクがあるのですが、2つリンクがある人だと、padding
部分は変更したほうがいいでしょう。
maipyon
SANGOのフッターをカスタマイズする方法まとめ
今回は、SANGOのフッターのデザインを変更する方法について説明しました!
普段ほぼ目立たない場所ですが、ここにしか「サイトマップ」や「利用規約」のリンクを設置していない人も多いはず。
そういう人は特に、このカスタマイズで目立たせることができればいいですね!
当サイト『ぴょんなことから』では他にも様々なカスタマイズ記事を書いています!
是非以下の記事から他にも気になるカスタマイズがあるか探してみてください!
