カテゴリ一覧から記事を探す

【SANGO】フッターにロゴを入れる&デザイン変更カスタマイズ!

【SANGO】フッターにロゴを入れる&デザイン変更カスタマイズ!

今回やること

  • SANGOのフッターをもっとおしゃれにしたい
  • フッターの「HOME」をロゴにしたい!
  • 固定ページへのリンクをボタンにしたい!

今回は、SANGOのフッターを以下の画像のようにデザインを変更します!

SANGOフッター

HOMEへのリンクをロゴに変更し、リンクをボタン表示に変えています。
また、細かいですが、フッターにあるサイト説明文の文字色も少し変えています。

1.HOMEへのリンクをロゴに変更する

HOMEへのリンクをロゴに変更する方法を紹介します。

やり方が、SANGOのみのユーザーと、SANGO+PORIPUでのユーザーとで違います。

SANGO+PORIPUの人

PORIPUがあればめちゃくちゃ簡単。

ということでまずは簡単なほうから説明していきます。

チェックする箇所
外観
カスタマイズ
PORIPUの設定
PORIPU:ページ設定

上記の場所に「フッターにロゴを表示する」の項目があるのでチェックするだけで終わりです。

SANGOのみの人

多少難しいです。

footer.phpをいじるので、以下の記事も参考にしていただければと思います。
参考 WordPressで子テーマを活用して安全にカスタマイズを行う方法SANGOカスタマイズガイド

編集する箇所
外観
テーマエディター
footer.php

ここの少し下の部分に

footer.php
<a class="footer-menu__btn dfont" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php fa_tag("home","home",false) ?> HOME</a>

という部分があります。

ここを、以下のように変更します。

footer.php
<a class="footer-menu__btn dfont footerlogo" href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="画像のURL" alt="画像名"></a>

ここの画像を、ロゴ画像にしておくことでフッターのHOMEがあった場所にロゴが表示されます。

このままだとおそらくロゴ画像が大きすぎるので、以下のCSSを貼り付けて見栄えを整えましょう。

編集する箇所
外観
テーマエディター
style.css

heightの部分などは各自で多少調節してみてください!

CSS
.footerlogo img{
  display: inline-block;
  height: 65px;
  padding: 5px 0;
  vertical-align: middle;
}

2.フッターのリンクをボタン形式に変更

こちらもstyle.cssに貼り付けるだけでOKです。

まずは、フッターのサイト説明文の文章について。

CSS
.site_description{
  color: #4e4449;
}

私の場合は、最初に設定した色だとフッターの文字だけが見にくかったので、ちょっと色を変えています。

次に、ボタン形式にするCSSです。

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部分は変更したほうがいいでしょう。

なんのこっちゃという場合は、以下の記事も参考にしてみてください!

また、ボタンの色や文字の色も適宜変更してください!

3.まとめ

今回は、SANGOのフッターのデザインを変更する方法について説明しました!

普段ほぼ目立たない場所ですが、ここにしか「サイトマップ」や「利用規約」のリンクを設置していない人も多いはず。

そういう人は特に、このカスタマイズで目立たせることができればいいですね!