株式会社シスアナコム

情報システムに関することなら、どんなことでも適切に助言いたします!

この投稿は1年以上前に公開されました。
現在では状況や内容が変わっている可能性があります。
ご注意下さい。m(_ _)m

STINGER3のフッター(footer.php)をカスタマイズ

      2015/01/08

シスアナコム社長の杉山です。

今週末は色々と忙しくて更新できないと思いますので金曜日に更新しました。

前回は画面上部のヘッダー部分でしたが、今回は画面下部のフッター部分をカスタマイズしてみます。

さっそく、STINGER3の「footer.php」を見てみると、ざっとこんな事をやってます。

  • タイトルとリンクの表示
  • サイト説明とリンクの表示
  • STINGER3の著作権リンクの表示
  • サイト名と著作権表示
  • ページトップボタンの表示
  • SNSボタンの表示(PCのみ)

フッター部分はシンプルですね。

あまり人目に付く部分ではないので、ブログ名と著作権表示の部分を少しだけ修正して、あとは見た目を少し修正するだけにします。

色々なサイトを見ていると、フッター部分を2段組や3段組に修正したりしているようですが、あまり必要性を感じないのでやりません。

「footer.php」は他のファイルと同様に、STINGER3のフォルダから子テーマのフォルダにコピーします。

サイト開始年を追加

「footer.php」の修正は1カ所のみ。

      ,
      <?php the_date('Y');?>
      All Rights Reserved.</p>

サイトの開始年を加えて、文書の投稿/更新年ではなく現在の年を表示するように修正。
(2015年1月8日:三太郎さんからのご指摘で修正。感謝です!)

      ,
      2001-<?php echo date('Y');?>
      All Rights Reserved.</p>

フッターデザインを変更

あとは見た目を変更しています。

参考にしたサイトはこちら(リンク集に追加します)

初心者ブロガー指南:Naifixおしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!

この方のデザインはシンプルなのに美しい。見習いたい。

パソコン用のデザインを修正

修正するファイルは「style.css」

「フッター部分だけ濃いめの色を使うとぐっと引き締まる」とのことなので変更。

以下のcssを追加。

/* フッターの色を変更 */
#footer {
  background: royalblue;
}

メニューと同じ色にしました。

タイトルとサイト説明の文字が見にくくなってしまうので、明るい色に変更。

/* フッターのh3とh4リンクの文字色を変更 */
#footer #footer-in h3 a,
#footer #footer-in h4 a {
  color: white;
}

スマホ用のデザインを修正

同様にスマホの表示も修正します。

修正するファイルは「smart.css」

「style.css」と全く同じcssを追加しました。

/* フッターの色を変更 */
#footer {
  background: royalblue;
}

/* フッターのh3とh4リンクの文字色を変更 */
#footer #footer-in h3 a,
#footer #footer-in h4 a {
  color: white;
}

これで完成です!

 - ひとこと, ひとこと(ワードプレス)

↓ブログランキングに参加しています!


ネット・PC(全般) ブログランキングへ
にほんブログ村 IT技術ブログ ITコンサルティングへ
にほんブログ村

Comment

  1. 三太郎 より:

    はじめまして♪ サイトのコピーライトの年表示ですが、 だとこのテーマの開始年を表示してしまうと思います。 *こちらの表示も、2015年に記事を書かれているのに2014年のままです。 の方が便利だと思いますが、いかがでしょうか?

    • 三太郎 より:

      すみません、タグは使用できないのを忘れてました。 <?php the_date(‘Y’);?> だと開始年を表示してしまうと思います。 今年を表示するには、 :<?php echo date(‘Y’); ?> の方が便利かと思いますが…

      • sysana より:

        三太郎さん、コメントありがとうございます。 ご指摘の通りです。感謝です! すぐに直します! それに、本サイトの開始年も間違ったままでした。 他のサイトで使っていたのをコピーしたからです。 本当にありがとうございました。

Message

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