Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【WordPressでモバイル対応のページを作る方法】

f:id:wp-lesson:20170508084426j:plain

今日のレッスンでは、
 
ページビルダー系のプラグインの使い方と、
カスタムテンプレートの作り方
 
をお教えしました。
 
WordPressにはモバイル対応済みのテーマが多いので、
レスポンシブ対応のページが簡単に作れそうに思えます。
 
しかし、実際はそんな甘くありません。
 
WordPressの編集画面にはビジュアルモードがあるので、
HTMLやCSSの知識がなくても写真や文章を載せることは
簡単にできます。
 
でも、
 
『写真を左に配置して、右側に文章を載せたい。』
 
とか、
 
『写真を横に3つ等間隔で並べたい。』
 
というように、単純な縦並びではないレイアウトに
しようと思うと、タグの知識がなければできません。
 
少しHTMLのタグをご存知の方なら、
テーブルタグを使えば表のような配置ができるので、
 
「TablePress」など、テーブルタグを簡単に挿入できる
プラグインを使うことを思いつくかもしれません。
 
しかし、それだけではレスポンシブにはなりません。
 
そもそも、レスポンシブにするためには、
ブラウザの横幅に応じてコンテンツを横並びから縦並びに
変更するためのスタイルシートCSS)が不可欠です。
 
そこで、
 
レスポンシブなスタイルシートがセットになった、
ページビルダー系のプラグインが役立ちます。
 
「TablePress」はテーブルタグ限定ですが、
ページビルダーはブロック状のセルの中にコンテンツを
入れ込むという作り方ができるので、
 
・フルスクリーンのスライドショー
・写真
・動画
アコーディオン、タブ
 
など、いろんなパーツ(部品)を自由に選んで
セルの中に当てはめるだけで、
レイアウトが崩れないページを作ることができます。

PR

CODEMYのマンツーマンレッスンでは、WordPress
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
WordPressのツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2nd7Ia5
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
 
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓無料体験はこちら
http://bit.ly/2hw7mIy