STINGER7:フッターのカスタマイズ【シンプル編】

   

eye_stinger7

久々のSTINGER7カスタマイズ!
まだ手付かずだったフッターをいじってみたいと思います。

フッターと言えばよくカテゴリやタグを表示したり、サイトマップを入れたりしますよね。
皆さんはどんなフッターがお好みでしょうか?

色々と表示したい人もいれば、シンプルな方が好きな方もいると思いますので、まずは極力シンプルなデザインにする方法をご紹介します。

それじゃあいってみよー!

スポンサーリンク

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7:親テーマの任意のファイルを子テーマで編集する方法

powerd by STINGERを消す

まずはコピーライト表示の変更です。
デフォルトでは「powerd by STINGER」っていうのが表示されますが、これ消したいって方は多いんじゃないでしょうか?

STINGERの制作者様も「消しても良いよ!」とおっしゃっているので、お言葉に甘えて消してみましょう。

[公式] STINGERのフッター(著作)リンクは外して良いの?ダメなの? – 格安!レンタルサーバー比較

やり方は色々あって、親テーマのjsファイルを編集したり、CSSで非表示にしたりっていう記事が多いんですけど、子テーマだけで変更出来てスマートな方法をご紹介します。

まずは「footer.php」を編集。親テーマからコピーして子テーマのフォルダに入れましょう。
そして以下のコードを探します↓

見つけたら1行目のクラス名をこのように変更してください↓

「<p class="copy">」を「<p class="custom-copy">」に変更しました。

これで「powerd by STINGER」が消えたと思います。簡単ですね♪
文字の色が変わっちゃったと思いますが、あとで調整するのでとりあえずこのままで。

サイトの説明文を消す

「設定 → 一般」で「キャッチフレーズ」に登録した文章が表示されていますね。
これも消してみましょう。
「footer.php」で以下のコードを探してください↓

見つけたらこの部分を全部消しちゃいます。
これでサイトの説明文も消えました。

タイトルも消す

ブログのタイトルも消しちゃいましょう。
同じく「footer.php」の以下のコードを全て削除します↓

はい!消えましたね!
だいぶスッキリしたんじゃないでしょうか?

メニューも消す

この際フッターメニューも消しちまえ!っていう人は以下のコードも削除してください↓

これでコピーライトの文字だけが残って、かなりシンプルになりました。
こういうのが好みの方もいますよね?

僕は今のところヘッダーに何もメニューを置いてないので、フッターメニューは残しておきました。

フッターをウィンドウ幅いっぱいに広げて背景色を変える

次にフッターを幅いっぱいに広げてみます。
「footer.php」で以下のコードを探してください↓

「</div> と<!-- /#wrapper -->」を「footer.php」の一番上に移動させましょう。
こんな感じですね↓

そしてCSSで背景色を変えてみましょう。

ついでにコピーライトとフッターメニューも背景に合わせて変更しました。
色はサイトに合わせてお好みで調整してくださいね。

ページトップへのスクロールボタンもカスタマイズ

フッターに背景色を付けたら、ページトップへスクロールするボタンが目立たなくなった!ということもあると思います。

なのでついでにスクロールボタンもカスタマイズしましょう。

CSSで見た目を調整

とりあえず僕の場合はこんな感じにしてみました↓

アイコンを変えてみよう

STINGER7のトップへ戻るボタンのアイコンは「Font Awesome」で表示していますので、他の好きなアイコンに簡単に変えることができます。
ここのページにたくさんありますので好きなやつをチョイスしてください↓

Font Awesome Icons

使うアイコンを決めたら、「footer.php」のこの部分を編集します↓

class="fa fa-angle-up"」の部分を好きなアイコンのクラス名に変えてみましょう。
クラス名は先ほどのアイコン一覧のページで任意のアイコンをクリックすると確認できます↓

20160809z

ここまででとりあえず完成です!
こんな感じになりました↓

20160809y

だいぶスッキリ良い感じ(^^)

サイドバーが変な動きになった場合

とここまでカスタマイズして、サイドバーが変な動きになっていることに気付きました。
全体的にスクロールしても追尾しちゃうようになってたんです。

「外観 → ウィジェット」を見てみると、「サイドバーウィジェット」に入れていたはずのウィジェットが全て「スクロール広告用」の中に移動していました。

原因は良く分からないんですけど、「サイドバーウィジェット」の中に入れ直したら元に戻ったので一安心。
もし同じような状況になった場合は「ウィジェット」を確認してみてください。

まとめ

フッターのデザインを変えると一気に"STINGERっぽさ"がなくなる感じがしますよね!
簡単にオリジナル感を出せるのでぜひ挑戦してみてください。

ではまた〜♪

 

スポンサーリンク

この記事をシェアする!

 - WordPress