stinger3 備忘録 5

2017年12月20日stinger3 備忘録stinger 3, カスタマイズ, フッター, ワードプレスstinger3 備忘録, カスタマイズ, フッター, ワードプレス

stinger3

stinger3 備忘録 5

 

1.フッターのカスタマイズ

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ

したやり方等を忘れないために書き留めた備忘録です

記事内にソースコードを表記してる箇所は、ダブルクリックすると

ソースコードが全選択されるので、コピーして使えます。

 

フッターのカスタマイズ

 

ヘッダーをカスタマイズしたら、フッターもカスタマイズしたほう

がバランス的にも、オシャレだと思います。

huttar001

 

これを以下に変更した。

huttar002

 

フッター部の背景を、濃い背景色を使う場合は、フッターに表示さ

れているテキストを白系に変更したほうが良いです。

 

僕の場合、フッター部の記事タイトル(h3 a)の色を#333を#0f0に

変更した。

 

CSSであらかじめ設定されている部分を抜粋しておきます(記述場

所は分散しています)。

 

 

フッターのカスタマイズ手順

フッターでウィジェットを使えるようにする。

 

まず、「フッター左」と「フッターセンター」と「フッター右」の

ウィジェットエリアを作ります。

 

手を加えるのは、『functions.php』。

 

もとの内容は必ずバックアップを。テキストエディタ等にコピペし

て保存しておいてください。

カスタマイズに失敗するとブログが真っ白になる可能性もあります。

 

Stingerでウィジェットを制御しているのは、『functions.php』内

のこの部分です。

 

 

サイドバーやアドセンス・追尾広告用に4つのウィジェットが組み

込まれています。

 

ここに新たにフッター専用のウィジェットを作成します。

最初に二行目の()内の数字を4から7に変更します

 

 

次に上記「//ウイジェット追加」内の

 

 

の下に

 

 

を追記します。

 

全体で以下のようになればいいです。

 

 

これで管理画面からウィジェットを設定できるようになりました。

これだけでは、ブログに表示されません。

 

ウィジェットをどこに表示するか、という設定を行います。

 

今度は『footer.php』を編集します。

 

ウィジェット表示位置を指定する

 

『footer.php』内に、以下のような記述があります。

 

 

フッター部分のコードですが、上記のどこにウィジェットを挿入す

るか決めます。

 

僕は、見出しタグブロック(h3とh4)と著作権リンクの間にした。

下記コードを挿入した。

 

 

フッターのイメージ

 

huttar003

 

ウィジェットのタイトルは、<h5>タグを設定したので、フッターの

見出しタグは<h3>→<h4>→<h5>と並ぶ形です。

挿入後のフッター部分は、以下のようになります。

 

 

あとはCSSで見映えを設定するだけです。

 

フッターデザインCSS設定(PC用)

 

PC用の表示は3段組のため、フロートで左・中央・右に配置します。

最低限のコードを『style.css』の最下部にコピペする。

 

 

この部分にGoogleアドセンスのレクタングル(大)を入れる場合は、

既存のアドセンスをどこか消す事。

規約違反になります。

 

 

フッターデザインCSS設定(スマホ用)

『smart.css』の設定は以下のようにした。

 

 

このコードを『smart.css』の最後に追加した。

 

実証検分

 

ワードプレス→外観→ウィジット→フッター左・中央・右のそれぞ
れにテキストを挿入して表示させたい項目をいれる。

『フッター r』のタイトル表記位置が、ブラウザによって下にず

れる事が確認できた。

 

当初どこを変更または追加したのか、記憶にないが修正できた。

新しいPCを購入後、ブラウザのバージョンアップのせいか、IE

10は正常。グーグルクローム Vr34 およびファイヤーフォ

ックスに、『フッター r』のタイトル表記位置が下にずれる現象

が発生中です。

原因がはっきり判らないので見苦しいが、とりあえずこのままでい

く。

 

ブラウザのバージョンによって異なるのでは、修正の仕方に疑問が

あり。

修正できたら後日修正方法を掲載予定である。

 

追伸 修正できました

 

なんか調査した結果、各ブラウザの表示のちがいが原因みたい

なので、各ブラウザ用に「margin」を変更するコードを追記

した。

 

 

上記コードをcssに追記した最後に

追加した。