Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

2021年:インバウンド業界は復活の目途が立たず失業の危機!現実逃避でブログをSwellでリニューアル。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

[WordPress]SWELL スマホメニューの設定について

人気のWordPressのテーマSWELLは、スマホ用のメニューやサイドバーの設定が細かくできる点も魅力です。
設定カ所が2カ所に分かれている点がちょっと分かりにくいですが、使いこなせば、思った通りのサイト作りが出来ます。公式サイトの補足として情報をシェアします。

INDEX

スマホメニューの概要

公式マニュアル 
1:画面の横からスッと現れる画面(開閉メニュー)と、2:ページをスクロールすると画面の下に表示されるメニューアイコン

PC版のサイドメニューは、スマホで見るとページの下部に表示されます。すると、とても長いページになってしまいます。それを避ける為にも設定した方が良いと思います。

Swellスマホ設定

開閉メニューの設定

1:の一番上はメインメニューがデフォルトで表示されます。表記は「Menue」となっていますが、変更する事が出来ます。

外観 → カスタマイズ → サイト全体設定 → スマホ開閉メニュー → 「表示設定」

メニューの下の部分は、お好みで変える事が出来ます。 好きな物を加えてゆきます。

外観 → ウィジェット → 「スマホ開閉メニュー下」

Swellスマホメニュー

サイドメニューの制御


スマホ開閉メニュー で設定した内容は、PCのサイドメニューの内容と重複している場合があると思います。このままでは重複ページの下に表示されてしまうので、スマホ用に編集します。

外観 → ウィジェット → 「共通サイドバー」

ここに設定した物はPCのサイドに。スマホはコンテンツの下に表示されます。

Swellスマホメニュー

外観 → ウィジェット → 「共通サイドバー(スマホ版)」

「共通サイドバー(スマホ版)」に何か1つでも設定すると、こちらの設定が優先されます。ここに登録した物はコンテンツの下に表示されます。この例では、 「共通サイドバー」の内容は表示されず、 「共通サイドバー(スマホ版)」 に設定した「人気記事」だけが表示される様になります。コンテンツの下にあるコメント欄の下に人気記事が表示されました。

共通サイドバー(スマホ版)

「共通サイドバー(スマホ版)」 に何も登録されていない場合は、共通サイドバーが表示されるので、 「スマホ開閉メニュー下」 と 「共通サイドバー(スマホ版)」 を上手に振り分けて見やすくしてゆきます。

スマホ用固定フッターメニュー

2: ページをスクロールすると画面の下に表示されるメニューアイコン の部分の事で、色やテキスト表記の編集が可能です。

外 観 → カスタマイズ → サイト全体設定 → 下部固定ボタン・メニュー → 「スマホ用固定フッターメニューの設定」

スマホ用固定フッターメニュー

フッター(スマホ)

外観 → ウィジェット → 「フッタ-(スマホ)」

設定した内容は、コピーライトの上の部分に表示されます。

\ ぜひ使って欲しい /

Swell

高機能、驚きの使い心地
プログラミング不要で素敵なサイトが作れます

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる