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

今回やること

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

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

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

この記事の目次

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;
}

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

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

maipyon