WordPressでスマートホンの画面設定がわからない
![Worried](https://biz-sel.com/wp-content/uploads/2021/07/ebb39065570ef9d7785a7bc9b9239bf1-100x100.png)
WordPressでスマートホン画面を作成するページがどこか知りたい
![findout](https://biz-sel.com/wp-content/uploads/2021/07/d434afbeb03cf338d118cb26cf220c65-100x100.png)
![ゆめただのり](https://biz-sel.com/wp-content/uploads/2020/08/yumeada_avatar_sqr-100x100.png)
スマートホンの画面構成要素を、WordPressの管理画面のどこで作成すればいいかまとめました。
ブログサイトはレスポンシフデザイン対応が必須です!あなたも、スマホ画面の設定方法を理解して、ユーザーフレンドリーなページを作りましょう!
![Responsive](https://biz-sel.com/wp-content/uploads/2021/11/Responsive-amico.png)
スマホ画面の構成要素とWordPress管理画面
![ゆめただのり](https://biz-sel.com/wp-content/uploads/2020/08/yumeada_avatar_sqr-100x100.png)
スマホ画面の構成要素と、作成するためのWordPressの管理画面をまとめました。
知りたい要素をクリックしてください。
![スマホ画面画像](http://docker-bizsel-u2004/wp-content/uploads/2022/11/0c282e242e149e50d701072dece75242.png)
1.スライドメニュー
\スライドメニューボタン/
![header1](https://biz-sel.com/wp-content/uploads/2022/11/header1.png)
![arrow-down](https://biz-sel.com/wp-content/uploads/2022/05/42c03447e32464640837913e9f831a91.png)
左からスライドするメニューが設定できます。
![header2](https://biz-sel.com/wp-content/uploads/2022/11/header2.png)
外観ーカスタマイズーメニューからスマートホン用スライドメニューで設定します
![header3](https://biz-sel.com/wp-content/uploads/2022/11/header3.png)
「項目を追加」をクリックします。
![header4](https://biz-sel.com/wp-content/uploads/2022/11/header4.png)
メニューに追加したい項目を画面から選びます。例:お問い合わせ
![header5](https://biz-sel.com/wp-content/uploads/2022/11/header5.png)
追加した項目に✔が入り左側のメニュー項目に追加されます。追加したら項目を追加をクリックします。
![header6](https://biz-sel.com/wp-content/uploads/2022/11/header6.png)
追加したメニューの「▼」をクリックします。
![header7](https://biz-sel.com/wp-content/uploads/2022/11/header7.png)
メニューに表示する文字を入れるます。アイコンも挿入できます。
![header8](https://biz-sel.com/wp-content/uploads/2022/11/header8.png)
2.検索(ヘッダー)
\検索(ヘッダー)ボタン/
![search-hd1](https://biz-sel.com/wp-content/uploads/2022/11/search-hd1.png)
![arrow-down](https://biz-sel.com/wp-content/uploads/2022/05/42c03447e32464640837913e9f831a91.png)
右からスライドする検索窓が設定できます。
![src-hd5](https://biz-sel.com/wp-content/uploads/2022/11/src-hd5.png)
AFFINGER管理を選択します。
![src-hd1](https://biz-sel.com/wp-content/uploads/2022/11/src-hd1.png)
メニューを選択します。
![src-hd2](https://biz-sel.com/wp-content/uploads/2022/11/src-hd2.png)
スマホスライドメニューの検索アイコンで、「スマホヘッダーに検索アイコンを追加する」に✔。スライド選択。
![src-hd6](https://biz-sel.com/wp-content/uploads/2022/11/src-hd6.png)
【スライド】虫眼鏡アイコンをクリックすると、右から検索窓がスライドします。
![src-hd5](https://biz-sel.com/wp-content/uploads/2022/11/src-hd5.png)
スマホスライドメニューの検索アイコンで、「スマホヘッダーに検索アイコンを追加する」に✔オーバーレイ選択。
![src-hd3](https://biz-sel.com/wp-content/uploads/2022/11/src-hd3-1.png)
【オーバーレイ】虫眼鏡アイコンをクリックすると、上から検索窓が被さり表示します。
![src-hd4](https://biz-sel.com/wp-content/uploads/2022/11/src-hd4.png)
3.フッターメニュー
\フッターメニュー/
![footmenu1](https://biz-sel.com/wp-content/uploads/2022/11/footmenu1.png)
外観ーカスタマイズーメニューからフッター用メニューで設定します
![footmenu2](https://biz-sel.com/wp-content/uploads/2022/11/footmenu2.png)
「項目を追加」をクリックします。
![footmenu3](https://biz-sel.com/wp-content/uploads/2022/11/footmenu3.png)
メニューに追加したい項目を画面から選びます。例:お問い合わせ
![header5](https://biz-sel.com/wp-content/uploads/2022/11/header5.png)
追加した項目に✔が入り左側のメニュー項目に追加されます。追加したら項目を追加をクリックします。
![footmenu4](https://biz-sel.com/wp-content/uploads/2022/11/footmenu4.png)
追加したメニューの「▼」をクリックします。
![header7](https://biz-sel.com/wp-content/uploads/2022/11/header7.png)
メニューに表示する文字を入れるます。アイコンも挿入できます。
![header8](https://biz-sel.com/wp-content/uploads/2022/11/header8.png)
4.カテゴリー
\カテゴリー/
![category1](https://biz-sel.com/wp-content/uploads/2022/11/category1.png)
外観ーウィジットで設定します
![category2](https://biz-sel.com/wp-content/uploads/2022/11/category2.png)
フッター右用ウィジット(2列目)に、「カテゴリー一覧」をドラッグします。
![category3](https://biz-sel.com/wp-content/uploads/2022/11/category3.png)
5.検索(フッター)・アーカイブ
\検索(フッター)・アーカイブ/
![src_arc1](https://biz-sel.com/wp-content/uploads/2022/11/src_arc1.png)
外観ーウィジットで設定します
![category2](https://biz-sel.com/wp-content/uploads/2022/11/category2.png)
フッター右用ウィジット(2列目)に、「検索」・「アーカイブ」をドラッグします。
![src_arc2](https://biz-sel.com/wp-content/uploads/2022/11/src_arc2.png)
6.フッターロゴ
\フッターロゴ/
![footlogo1](https://biz-sel.com/wp-content/uploads/2022/11/footlogo1.png)
外観ーカスタマイズーメニューからロゴ画像/サイトのタイトルを選択します。
![footlogo2](https://biz-sel.com/wp-content/uploads/2022/11/footlogo2.png)
フッターロゴ画像で画像を指定します。
![footlogo3](https://biz-sel.com/wp-content/uploads/2022/11/footlogo3-378x576.png)
7.スマホ用フッターメニュー
\スマホ用フッターメニュー/
![smart_footmenu1](https://biz-sel.com/wp-content/uploads/2022/11/smart_footmenu1.png)
外観ーカスタマイズーメニューからスマートホン用フッターメニューで設定します
![smart_footmenu2](https://biz-sel.com/wp-content/uploads/2022/11/smart_footmenu2-1.png)
「項目を追加」をクリックします。
![smart_footmenu3](https://biz-sel.com/wp-content/uploads/2022/11/smart_footmenu3-284x576.png)
メニューに追加したい項目を画面から選びます。例:お問い合わせ
![header5](https://biz-sel.com/wp-content/uploads/2022/11/header5.png)
追加した項目に✔が入り左側のメニュー項目に追加されます。追加したら項目を追加をクリックします。
![smart_footmenu4](https://biz-sel.com/wp-content/uploads/2022/11/smart_footmenu4.png)
追加したメニューの「▼」をクリックします。
![header7](https://biz-sel.com/wp-content/uploads/2022/11/header7.png)
メニューに表示する文字を入れるます。アイコンも挿入できます。
![header8](https://biz-sel.com/wp-content/uploads/2022/11/header8.png)
スマホ画面の設定方法を、表にまとめました。
No. | スマホ画面 構成要素 | WordPress管理画面操作 |
---|---|---|
1 | スライドメニュー | 【外観】-【カスタマイズ】-【スマートホン用スライドメニュー】 |
2 | 検索(ヘッダー) | 【AFFINGER管理】-【メニュー】-【スマホスライドメニュー】 |
3 | フッターメニュー | 【外観】-【カスタマイズ】-【フッター用メニュー】 |
4 | カテゴリー | 【外観】-【ウィジット】-【フッター右用ウィジット(2列目)】 |
5 | 検索(フッター)・アーカイブ | 【外観】-【ウィジット】-【フッター右用ウィジット(3列目)】 |
6 | フッターロゴ | 【外観】-【カスタマイズ】-【ロゴ画像/サイトのタイトル】 |
7 | スマホ用フッターメニュー | 【外観】-【カスタマイズ】-【スマホ用フッターメニュー】 |
![ゆめただのり](https://biz-sel.com/wp-content/uploads/2020/08/yumeada_avatar_sqr-100x100.png)
スマホの画面設定方法がわかったら、さっそく自分のブログに反映しましょう!
PCサイトの画面編集については、こちらの記事が参考になります!
-
-
初心者向けWordPress管理画面の使い方【編集箇所から逆引き可】
続きを見る