WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます
※本サイトはプロモーションが含まれています

【WD講座】スマホ・PC等で出し分けや調整、ヘッダーやフッターを固定など色々なことができます

【WD講座】スマホ・PC等で出し分けや調整、ヘッダーやフッターを固定など色々なことができます

2023年2月1日からスタートしたWordPressサイト制作実践講座の2月25日(土)13:00〜15:00開催に開催した講座のまとめを紹介します。

WordPressサイト制作実践講座」は現在、受講生募集中です!
12周年キャンペーン価格で44,000円でご受講いただけます。

 受講生の方は、ログインして録画講座を視聴できます。

WordPressサイト制作実践講座の受講生の方はこちらからログインして動画を視聴してくださいね。

WordPressサイト制作実践講座の受講生の方はこちらからログインしてください

今回の講座内容

WordPressで、レスポンシブの詳細設定方法。スマホとPCやタブレットで表示の出し分けやスマホ閲覧時のテキストの改行位置などキレイに見せる方法やスマホの時に表示されるスマホアプリのようなページ下のモバイル固定メニューの作成を学びます。

スマホ・タブレット・PCそれぞれの表示の変更

  • スマホ・タブレット・PCそれぞれで文字の大きさを変える
  • 文字のバランス(字間・行間)
  • ボタンの大きさを変える
  • カラムのパーセントを変える
  • スマホのときだけ非表示にする(もしくはPCの時だけ非表示にする等)

スマホ・タブレット・PCそれぞれでヘッダー部分等をまるごと変更する

当サイトのトップページは、PCの時はこのような表示(背景に猫がタイミングしている動画)が入っていますが

 

スマホのときは、画像が表示されます。

この方法を講座内で紹介しました。

 

 

フッターとヘッダーを固定する

スマホにした際に表示されるモバイルフッターメニューを作成しました。

実際のページはこちらと、こちらのページです。

スマホサイズに狭めるとフッターにメニューが現れます。

 

 

 

 

次は、ヘッダーを固定させました。

実際に作成したページはこちらです。

スクロールすると上部に固定されます。

 

次は、アイコンの位置についての注意点を紹介

 

 

色々なパーツを作ろう!の講座内で作成したフロー・流れのデモサイトでも紹介しましたが

実際に作成したデモページはこちら

以前講座内で作成したデモサイトにデモページを追加しました。

作成した内容

この右向きの矢印は、パソコンでは問題ないですが、

スマホで見るとこうなります。

 

それをスマホで見ても矢印が下になるようにしました。

 

 

次は、作ったパーツやページのインポートとエクスポート

以前に作ったデモサイトと当サイトはドメインが異なるので、デモサイトで作ったページを当サイト(異なるドメインの別サイトで利用できるように持ってくる方法を紹介しました)

 

 集客&新規ビジネスに!はっちゃんの新サービス

WordPressで会員動画サイトが作れる!

\動画コンテンツで新しい収益を!/

オンライン講座機能付き
WordPressテンプレート新発売

多言語化によるお悩みを解決します

\導入費用のみ!月額費用は不要/

管理画面からカンタン更新!
AI翻訳+人力翻訳の使い分けも可能

 開催中のWordPress講座・セミナー

 WordPress・サイト運営のお悩みを解決しませんか?

女性講師によるオンラインマンツーマンレッスン開催中!
・オンラインレッスンだから全国どこでも参加可能
・2011年から150回を超える研修実績あり
・受講後も安心!メールサポート付き
・受講中の録画動画をお渡しします

 はっちゃんセミナー公式SNS

 はっちゃんYouTubeチャンネル

無料セミナー・お役立ち情報を配信中!

公式メールマガジンもあります!

新着情報

  新サービス開始しました

WordPressで会員動画サイトが作れる!
オンライン講座機能付きWordPressテンプレート新発売!→詳しくはこちら

多言語化によるお悩みを解決します!
管理画面からカンタン更新!AI翻訳+人力翻訳の使い分けも可能→詳しくはこちら

  ピックアップ講座

最新のAIコンテンツ生成とSEO対策が
6時間しっかり学べるコンテンツマーケティング講座(オンライン開催)→詳しくはこちら

 

WordPressに限らず、Canvaの画像編集やサイト運営に関係する内容と、受講生さんからのご質問等で共通な内容も掲載していきます。

  ピックアップ記事

 カテゴリー
公式Facebook
公式LINEアカウント

友だち追加

こちらのURLからお友だち登録できます。
https://lin.ee/CbqqEEI

公式メールマガジン

こちらのURLからメルマガに登録できます。https://www.8seminar.com/mailmagazine-form

PAGE TOP