【コピペOK】SANGOのフッターにロゴを入れるカスタマイズ!

ども!SANGERのテクテンだよ!

SANGOは完成された美しいデザインが最大の売り。なんだけど、もうちょっとだけ自分らしさを出したいな〜とか思うことないですか?

そこでおすすめしたいのがSANGOのフッターにロゴを表示させるカスタマイズです。SANGOのデフォルトフッターをこんな感じでオリジナリティを演出することができますよ。

▼デフォルトフッター

▼オリジナルロゴを表示!

ヘッダだけでなく、フッターにもロゴをあしらうことでググッとブログ自体も引き締まるよね。

テクテン

しかもコードをコピペするだけという超お手軽カスタマイズだ!

SANGOを他のブログと少しでも差別化したいなと思ってるブロガーはぜひカスタマイズしてみてください。

カスタマイズの事前準備

テクテン

簡単なカスタマイズとはいえ、誤った編集をしてしまうとブログが真っ白になっちゃったりするので事前準備はしっかりしておこう!

FTPクライアントを用意しておくべし

カスタマイズ対象のファイルをダウンロードしたり、バックアップしたりするためにFTPアプリは必須。まだ導入してない人は入れておこう。

Mac版だけどぼくのおすすめを紹介しておくよ!

FileZilla Pro - FTP and Cloud

(2018.11.26時点)
posted with ポチレバ
Cyberduck

Cyberduck (2,900円)
(2018.11.26時点)
posted with ポチレバ

ぼくはCyberduckちゃんを愛用してるので今回はCyberduckの画面で説明するね。Filezillaも定番のFTPクライアント。Windows版もあって安定してるよ。

FTPクライアントはWordPressをカスタマイズしていくうえではちょくちょく必要になるので一個持っておくと重宝します。

MixhostユーザーはファイルマネージャでもOK

実はFTPクライアントを使わない方法もあるので紹介しておくよ。Mixhostサーバユーザ限定だけど、「ファイルマネージャ」を使ってブラウザ上でファイル操作が可能です。

▼cPanelから「ファイルマネージャー」を選択

▼FTPと同じようにブラウザ上でファイル操作可能

ファイルマネージャーはFTPの設定などは必要ないので簡単だね。どちらの方法でもカスタマイズ可能だからお好きな方で!

【Mixhost】コスパ最強のレンタルサーバでワードプレスブログを始めよう!

SANGOのフッターにロゴを表示させる!

ではいよいよカスタマイズに入るよ!慌てず慎重にやりましょう。早速FTPクライアントか、ファイルマネージャー経由でサーバに入っちゃおう!

「footer.php」をローカルにダウンロード

まずは、カスタマイズ対象となるSANGOの「footer.php」をローカルにダウンロードしよう。自分のPCにダウンロードしておくってことね。

対象の「footer.php」の場所
public_html/自分のドメイン名/wp-content/themes/sango-theme/footer.php

Cyberduckの場合、対象のディレクトリに移動後、右クリックかダブルクリックでダウンロードできるよ。

「footer.php」にロゴ表示コードを書き加える

Caution
必ずダウンロードしたローカルの「footer.php」を編集するようにしてください。誤ってサーバ上のファイルを直接編集してしまうとブログのレイアウトが崩れたり白紙になってしまう可能性があります。

ダウンロードした「footer.php」に自分のロゴをフッターに表示させるためのコードを書き加えます!ここが最重要ポインツ。

「footer.php」をテキストエディタなどで開く。22行目が変更する箇所だぞ!

php
<a class="footer-menu__btn dfont" href="<?php echo esc_url( home_url( '/' ) ); ?>"><i class="fa fa-home fa-lg"></i> HOME</a>

赤字の部分を書き換えます。↓ロゴにしたい画像のURLを記入すればOK!

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

編集は完了。いったん上書き保存しておこう。

「footer.php」を子テーマにアップロード

編集が完了した「footer.php」をSANGOの子テーマにアップロードするよ。親テーマのディレクトリではなく子テーマの方だからね中止しよう。

「footer.php」を貼り付ける場所
public_html/自分のドメイン名/wp-content/themes/sango-theme-child

「sango-theme-child」の上で右クリック、「アップロード」を選択してさっき保存した「footer.php」を選択すればOK。

MEMO
親テーマではなく子テーマにアップロードしておくと、SANGO本体にアップデートが入っても子テーマに施したカスタマイズは引き継がれるというメリットもあります。必ず子テーマでカスタマイズしましょう。

「style.css」にCSSを追記する

さて最後の仕上げ。ロゴの見た目を整えるため「style.css」にCSSを追記してあげよう。

WordPressの編集画面から「外観」→「テーマの編集」を選択。「SANGO Child」になってることを確認して「style.css」に以下のコードをコピペするだけ!

CSS
/*--------------------------------------
フッターロゴの装飾
--------------------------------------*/
#footerlogo img {
    display: inline-block;
    height: 62px;
    padding: 10px 0 10px 0;
    vertical-align: middle;
}

テクテン

カスタマイズ作業はこれで完了!あとはドキドキしながら表示チェックするだけ!

フッターにロゴが表示されているかチェック

最後にきちんとSANGOにフッターロゴが反映されているか確認しておこう。念のためキャッシュは削除してクリアな状態で目視することをおすすめするよ。

  • PC表示で正常に表示されているか?
  • スマホ表示で正常に表示されているか?

少なくともこの2つはほとんどの人が確認できるはず。

▼PC表示

▼スマホ表示

こんな感じで、PCでもスマホでもロゴが崩れず表示されていたら完成だよ!劇的にカッコよくなるなこれ。

なんか表示がおかしくなっちゃった!

テクテン

うわーん!なんかレイアウトが崩れちゃったよぉ〜

AZU

焦らない焦らない。もう一度やり直せば大丈夫♪

レイアウトが崩れる、あるいはロゴが反映されないなど不具合が出る場合はいったん子テーマにコピーした「footer.php」を削除して、この記事の最初からやり直してみましょう。

コピペをミスっていたり、アップロードする場所が間違ってたりするとうまく反映されないからね!焦らず見直してみよう!

MEMO
親テーマにはデフォルトの「footer.php」が残っています。子テーマで編集を万が一ミスってしまっても、子テーマの「footer.php」を削除すれば元に戻るのでご安心を!

フッターロゴ表示でより自分らしさをアピール

「オシャレは足元から」

ファッションではそんな風によく言うじゃん?

ブログも同じ。フッターは読者が視界に入れる最後のパーツなわけだよね。一通り記事に目を通した読者にとって「ブログの印象」は最後のフッターでガッツリ左右されるってこと。

ここがみんなと同じ感じだったら”似たようなブログ”と思われて埋もれてしまう。これでは永遠にその他大勢のブログから抜け出すことができないわけですよ。

しっかり足元をオシャレして読んでくれた人にキッチリ爪痕を残せるブログを構築するべし!

そいぎんた〜

おねがい
見よう見まねで導入したカスタマイズです。もっとこうした方が楽だよ、こうした方が効率的だよというのがあればぜひコメントください\(^o^)/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です