WordPress   ※当サイトのコンテンツには広告が含まれる場合があります。

WordPressのスマホ画面設定方法【図解】

2022-11-05 yume-tada

setup-way-of-wordpress-mobile-screen

WordPressでスマートホンの画面設定がわからない

Worried
お悩みさん

WordPressでスマートホン画面を作成するページがどこか知りたい

findout
お調べさん
ゆめただのり
ゆめただ

スマートホンの画面構成要素を、WordPressの管理画面のどこで作成すればいいかまとめました。

ブログサイトはレスポンシフデザイン対応が必須です!あなたも、スマホ画面の設定方法を理解して、ユーザーフレンドリーなページを作りましょう!

本記事でわかるコト

ブログサイトのスマートホン画面構成要素(ヘッダーメニュー、検索、フッターメニュー、フッターロゴ等)をWordPressの管理画面のどこで作成すればいいかがわかります。

基本的なスマーとフォンの画面構成要素を知ることができます。

注意

本記事は、AFFINGER6テーマの使用が前提となります。

Responsive

この記事を書いた人【ゆめただ】

この記事を書いた人
track?id=8172&type=classic&u=f9bc1471 1527 4e9b a748 8c4b2498491e

スマホ画面の構成要素とWordPress管理画面

ゆめただのり
ゆめただ

スマホ画面の構成要素と、作成するためのWordPressの管理画面をまとめました。

知りたい要素をクリックしてください。

スマホ画面画像
スマホ画面の基本構成要素

\スライドメニューボタン/

header1
arrow-down

左からスライドするメニューが設定できます。

header2

外観ーカスタマイズーメニューからスマートホン用スライドメニューで設定します

header3

「項目を追加」をクリックします。

header4

メニューに追加したい項目を画面から選びます。例:お問い合わせ

header5

追加した項目に✔が入り左側のメニュー項目に追加されます。追加したら項目を追加をクリックします。

header6

追加したメニューの「▼」をクリックします。

header7

メニューに表示する文字を入れるます。アイコンも挿入できます。

header8

スマホ画面の基本構成要素に戻る

\検索(ヘッダー)ボタン/

search-hd1
arrow-down

右からスライドする検索窓が設定できます。

src-hd5

AFFINGER管理を選択します。

src-hd1

メニューを選択します。

src-hd2

スマホスライドメニューの検索アイコンで、「スマホヘッダーに検索アイコンを追加する」に✔。スライド選択。

src-hd6

【スライド】虫眼鏡アイコンをクリックすると、右から検索窓がスライドします。

src-hd5

スマホスライドメニューの検索アイコンで、「スマホヘッダーに検索アイコンを追加する」に✔オーバーレイ選択。

src-hd3

【オーバーレイ】虫眼鏡アイコンをクリックすると、上から検索窓が被さり表示します。

src-hd4

スマホ画面の基本構成要素に戻る

\フッターメニュー/

footmenu1

外観ーカスタマイズーメニューからフッター用メニューで設定します

footmenu2

「項目を追加」をクリックします。

footmenu3

メニューに追加したい項目を画面から選びます。例:お問い合わせ

header5

追加した項目に✔が入り左側のメニュー項目に追加されます。追加したら項目を追加をクリックします。

footmenu4

追加したメニューの「▼」をクリックします。

header7

メニューに表示する文字を入れるます。アイコンも挿入できます。

header8

スマホ画面の基本構成要素に戻る

\カテゴリー/

category1

外観ーウィジットで設定します

category2

フッター右用ウィジット(2列目)に、「カテゴリー一覧」をドラッグします。

category3

スマホ画面の基本構成要素に戻る

\検索(フッター)・アーカイブ/

src_arc1

外観ーウィジットで設定します

category2

フッター右用ウィジット(2列目)に、「検索」・「アーカイブ」をドラッグします。

src_arc2

スマホ画面の基本構成要素に戻る

\フッターロゴ/

footlogo1

外観ーカスタマイズーメニューからロゴ画像/サイトのタイトルを選択します。

footlogo2

フッターロゴ画像で画像を指定します。

footlogo3

スマホ画面の基本構成要素に戻る

\スマホ用フッターメニュー/

smart_footmenu1

外観ーカスタマイズーメニューからスマートホン用フッターメニューで設定します

smart_footmenu2

「項目を追加」をクリックします。

smart_footmenu3

メニューに追加したい項目を画面から選びます。例:お問い合わせ

header5

追加した項目に✔が入り左側のメニュー項目に追加されます。追加したら項目を追加をクリックします。

smart_footmenu4

追加したメニューの「▼」をクリックします。

header7

メニューに表示する文字を入れるます。アイコンも挿入できます。

header8

スマホ画面の基本構成要素に戻る

スマホ画面の設定方法を、表にまとめました。

No.スマホ画面 構成要素WordPress管理画面操作
1スライドメニュー【外観】-【カスタマイズ】-【スマートホン用スライドメニュー】
2検索(ヘッダー)【AFFINGER管理】-【メニュー】-【スマホスライドメニュー】
3フッターメニュー【外観】-【カスタマイズ】-【フッター用メニュー】
4カテゴリー【外観】-【ウィジット】-【フッター右用ウィジット(2列目)】
5検索(フッター)・アーカイブ【外観】-【ウィジット】-【フッター右用ウィジット(3列目)】
6フッターロゴ【外観】-【カスタマイズ】-【ロゴ画像/サイトのタイトル】
7スマホ用フッターメニュー【外観】-【カスタマイズ】-【スマホ用フッターメニュー】
スマホ画面の設定方法一覧表
ゆめただのり
ゆめただ

スマホの画面設定方法がわかったら、さっそく自分のブログに反映しましょう!

PCサイトの画面編集については、こちらの記事が参考になります!

関連記事
wordpress-dashboard-and-blog-components
WordPressの管理画面とブログ構成要素ガイド【図解】

続きを見る

-WordPress