WordPress のテーマを自作してみる

レスポンシブWebデザインを勉強して自作のWordPressテーマを作っています。

1月に『作りながら学ぶHTML/CSSデザインの教科書』を読んで、なんとなくHTML5とCSS3の初歩を理解しました。次に『WordPress レッスンブック』(ソシム)を読みはじめたのが1月末。読み終えたのが2月6日で、それから『WordPress デザインブック』(同)、『WordPress  ステップアップブック』(同)と進んで、WordPress の基礎は大体わかってきたかなぁー、という感じです。

それで『レスポンシブWebデザイン』(菊地崇)で、「なんかレスポンシブWebデザインって、おもしろそう・・・」と思ったので、自分で作ってみることにしました。

数日のあいだ、あれやこれやと試行錯誤して、途中経過は以下の通りです。ブレイクポイントは、ひとまず一般的な768px と1024pxにしました。

【スマホ表示(~767px)】

自作WordPressテーマ01

ご覧のようにメニューの文字が重なっています。まあ、これはカンタンに直せるので、いまのところはこのままにしています。

 

【タブレット表示(767px~1023px)】

自作WordPressテーマ02

2段組にしました。サイドバーが右側に表れています。まだまだこれからです。

 

【PC表示(1024px~)】

自作WordPressテーマ03

タブレットを横向きで表示させたり、PC画面で見るときはこちらです。3段組になっています。海外のサイトでは横幅(width)を1200px 前後に設定しているところも結構あるので、広げるかもしれません。

 

まだまだはじまったばかりの段階です。自分のサイト用なので、気楽に、妥協しながら作っていきます。

勉強した本はこちら。

 

 

 

 

 

 

ではでは、また。

関連記事

Google の「モバイル フレンドリー テスト(Mobile-Friendly Test)」に合格して検索結果に「スマホ対応」ラベルを表示させよう

Google Chrome の検索結果に「スマホ対応」のラベルが付くようになった このところ Google はモバイル向けのツールを多く提供してきています。またモバイル端末で Google 検索をすると、タイトルの下に灰色の文字で小さく「ス…

Google Chrome デベロッパーツール「要素の検証」を利用した HTML と CSS の学び方(素人向き)

素人による学び方 HTMLやCSSを学ぶ方法はいろいろあるとおもいますが、基本的なサイト作成の教科書を読んだあと、わたしは中級レベルの本をじっくり読むようなことはしていません。わたしがやったのは以下の方法です。 興味を持ったサイトのデザイン…

CSS で h タグをちょっとだけカスタマイズしてみました

見出しは超重要! 多くのブロガーさんや大手サイトでは「記事の書き方」を解説してくれています。それを読むと、見出しを効果的に使うことが、読みやすい記事を書く上での必須項目であるとわかります。 見出しの種類 見出しというのはHTMLで書くときの…