株式会社シスアナコム

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

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

STINGER5のヘッダーとフッターをカスタマイズ

      2015/01/08

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

引き続きSTINGER5のカスタマイズを行います。

今回はページの上(ヘッダー)と下(フッター)をカスタマイズします。

カスタマイズ中のサイトはこちら

ヘッダー(header.php)のカスタマイズ

まずは画面上部のヘッダー部分から。

STINGER3の記事はこちら

さくらインターネットの管理メニューからファイルマネージャーを起動して、STINGER5のフォルダから子テーマのフォルダに「header.php」をコピー。

ワードプレスの管理メニューから外観→テーマ編集で「header.php」を編集します。

ファビコンの変更

ウェブサイト用のアイコン画像であるファビコンを変更します。

<link rel=”shortcut icon”…の行を修正。

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="shortcut icon" href="ファビコンのURL" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

これで、ブラウザのタブにファビコン画像が表示されます。

ウェブクリップの変更

iPhoneなどでウェブサイトのショートカットアイコンを作る時に表示されるアイコン画像であるウェブクリップを変更します。

<link rel=”apple-touch-icon-precomposed”…の行を修正。

<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="ウェブクリップのURL" />
<?php } else { ?>
<?php } ?>

これで、iPhoneなどでショートカットアイコンを作った時に指定した画像が表示されます。

STINGER5からは、スマホの場合だけこのタグを出力するようになったようです。

ヘッダー画像をタイトル文字代わりに表示

STINGER3では「header.php」を修正して対応していましたが、STINGER5ではその必要がありません。

ワードプレスの管理メニューから外観→ヘッダーでカスタムヘッダー画面を表示。

「ヘッダー画像を削除」ボタンを押してヘッダー画像を表示しないようにします。

次に外観→カスタマイズで「ロゴ画像」のドロップダウンを開いて、ヘッダー画像を登録します。

これでサイト名の代わりに画像が表示されるようになります。

ただし、デフォルトだと画像の幅が300px固定なので、外観→テーマ編集で「style.css」に表示幅を最大にするように下記の設定を加えます。

/* ロゴ画像の最大サイズ */
.sitename img {
  max-width: 100%;
}

STINGER3では「smart.css」というファイルも修正する必要がありましたが、レスポンシブデザインになったので、「style.css」の修正だけでOK。

STINGER5の素晴らしい改良点ですね!

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

フッターに関しては元々そんなにカスタマイズしてません。

STINGER3の記事はこちら

サイトの開始年を追加

さくらインターネットの管理メニューからファイルマネージャーを起動して、STINGER5のフォルダから子テーマのフォルダに「footer.php」をコピー。

ワードプレスの管理メニューから外観→テーマ編集で「header.php」を編集します。

  <p class="copy">Copyright&copy;
    <?php bloginfo('name');?>
    ,
    2001-<?php echo date('Y');?>
    All Rights Reserved.</p>

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

フッターの色を変更

「style.css」を編集して、フッターの背景と文字色を変更します。

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

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

 

これで終わり。

あとはサイドバーと細かいスタイルの設定が残っています。

 

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

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


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

Message

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