スポンサーリンク

アフィンガーのスマホ・タブレット用メニューをカスタマイズ

アフィンガーアフィンガー, カスタマイズ, スマホ, タブレット, メニュー

アフィンガーのスマホ・タブレット用のメニューであるアコーディオン
をクリックしやすいようにカスタマイズした備忘録です。

 
アフィンガーのスマホ・タブレット用のメニューであるアコーディオン
は、とってもシンプルです。

そしてアフィンガーには、フッターにもメニューあります。
なのでスマホ・タブレット表示の時は、アコーディオンにしました。

スポンサーリンク

ヘッダーのアコーディオンメニューをカスタマイズ

現状のスマホ・タブレット表示では、「三 MENU」となっています。

これじゃ~。メニューはわかるけどボタンとは、気づかない人もいると
思います。

 
そこで私は、「三 MENU」の後ろに「表示」という言葉を追加した。

 

アフィンガー2の子テーマにヘッダー(header.php)を作成

stinger5のように、親テーマ内にあるヘッダー(header.php)ファイルの
中身をすべてコピーして、新たに作成して置いたヘッダー(header.php)
ファイルに貼り付けし、アフィンガー2の子テーマ内にアップロードし
た。

 

するとブログトップページ上部に横文字でエラー表示がでた。

 
AF ナビ004
おかし~い ・・・・・・

 

悩む事1週間。

 

ある文献のページ内に「アフィンガーのヘッダー(heade
r.php)を子テーマに作成する時は、同時に(analyticstracking.php)
ファイルを子テーマ内に作成するとエラーはでない。」ような事が書い
ていたのを発見。

早速実行してみたら、オミゴト!!! ビンゴーでした。

無事にエラーも出なく子テーマ内に、ヘッダー(header.php)ファイルを
作成できました。

 

 
と言う事で、子テーマ内のヘッダー(header.php)ファイルを開きます。

スクロールして、「<!– アコーディオン –>」を探します。

 

 

上記コード内にある

 

「MENU」の後ろに「表示」という言葉を付け足しました。

「表示」を入れることによって、クリックしたらメニューが表示してく
れると判ると思います。

 

 

ヘッダーにあるスマホ・タブレット用メニューのカスタマイズ

アフィンガーのスマホ・タブレット用メニューであるアコーディオンを
カスタマイズするには、スタイルシートに下記コードを追記する。
私の場合子テーマ内のスタイルシート(style.css)に追記した。
/*レイアウト スマートフォン
—————————————————-*/
より下に

下記コードを追記

 

 

 

 

カスタマイズ後のスマホ・タブレットヘッダーメニューアコーディオン画像

 
スマホヘッダーメニュー001
カスタマイズ後のスマホ・タブレットヘッダーメニューアコーディオン
が開いた状態の画像
スマホヘッダーメニュー002

 

 

アフィンガー2 フッターのメニューをアコーディオンに

アフィンガー2には、フッターにもメニューがあります。
たしかデフォルトでは、スマホ・タブレットではフッターメニューは表
示されないはずです。

それではなんかモッタイナイ気がします。

 

スマホ・タブレット表示の時はフッターメニューをアコーディオンに変更

 

 

スマホ・タブレットで購読して最後にメニューがあれば、いちいちトッ
プページに戻らなくても、その場で次の興味のあるページに移行できる
ので便利だと思う。

 
それではアフィンガー2 フッターのメニューをアコーディオン形式に
カスタマイズしてみましょう。

 

フッター(footer.php)にコードを追記する。

 

デフォルトでは以下のようになっていると思います。

 

 

 

 

フッター(footer.php)内に、スマホ表示・タブレット表示とPC表示へ
の切り替えコードを追記する。

 
上記コードの「<footer id=”footer”>」~「</footer>」まで削除する。
次に下記コードをコピペして追記する。

 

 

 

 

ここで問題が発生しました。

stinger5では、スマホ分岐のコードは「is_mobile()」でよかったです
が、アフィンガー2では使えませんでした。
ここでも1週間悩みました。
いろいろ調査した結果、アフィンガー2では「is_mobile()」では無く
「st_is_mobile()」のコードを使っているようです。

 

 

悩み その2
タブレットで横画面でブログを表示させた時、PC表示のようにフッ
ターが表示されます。(私が持ってるタブレットがそうでした。)

タブレットで観た時フッターの内容が必要なのか?考えました。

結論は、フッターにメニューがあれば必要ない。

なのでPC以外はフッターのコンテンツは表示させていません。

 

スタイルシートに追記

フッターメニュウーに対する各メディアに対応したコードをスタイル
シート(style.css)追記します。

スマホの場合

 

/*レイアウト スマートフォン
—————————————————-*/

より下に下記コードを記述する。

 

 

 

 

タブレットの場合

 
アフィンガー2のタブレットサイズの各領域にしたのコードを追記する。

最初フッターの背景色をグラデーションにしていたが、フッターメニ
ュー周辺の色合いが合わなかったので、単色に変更した。

 

 

タブレットサイズ (max-width: 780px) に追記

 
/*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (max-width: 780px) {
より下に下記コードを追記する。

 

 

 

 

タブレットサイズ (max-width: 414px)に 追記

 
/*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (min-width: 414px) {

より下に下記コードを追記する。

 

 

カスタマイズ後のスマホ・タブレットフッターメニューアコーディオン画像
スマホフッターメニュー002
カスタマイズ後のスマホ・タブレットフッターメニューアコーディオン
が開いた状態の画像
スマホフッターメニュー003

 

 

まとめ

アフィンガーのカスタマイズは、stingerとは違って各所で悩みました。
その分達成感がありました。

もしタブレットで横画面でブログを表示させた時、PC表示のようにフ
ッター内のコンテンツ(追加ウィジェット)を表示させたい場合は、フ
ッター(footer.php)以下のコードの直ぐ下に追記すると表示されます。
フッター(footer.php)を開いて以下コードを探す。

 

 

 

 

「</h3>」の直ぐ下に追加コンテンツのコードを追記すれば良いと思います。

 

 

 

スポンサーリンク