IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / genesis / WordPress:Genesis Framework を使ったテーマ制作(3)

WordPress:Genesis Framework を使ったテーマ制作(3)

2022/04/2 genesis, Wordpress

「WordPress:Genesis Framework を使ったテーマ制作」の3回目です。

  • WordPress:Genesis Framework を使ったテーマ制作

  • テストデータの導入
  • Sass とリセットCSSの導入

テストデータの導入

投稿されたデータがありませんとテーマの作りようがありませんので、まずテストデータを入れます。「WordPress Codex 日本語版」の「テーマユニットテスト」に解説があります。

下のリンク先からダウンロードし、ツール -> インポート -> WordPress をインストールしてテストデータを導入します。導入方法の手順は上記リンク先にありますし、ググれば丁寧に解説されているサイトがあります。

  • 日本語テストデータリポジトリ

導入したテストデータを Genesis Sample Theme で見てみますとフロントページはこんな感じです。

これから作っていく Genesis Sample に切り替えますと、CSS を何も指定していませんのでこうなります。

Sass とリセットCSSの導入

これから style.css に一からスタイルを書き込んでいくわけですが、Sass を使いますとかなり楽になりますので、私はプラグインの WP-SCSS を入れています。できれば gulp を使った開発環境を整えたいと思っていますが、なかなか時間が取れずにまずはプラグインでという状態です。この WP-SCSS は、ファイルの保存ではなくその後ページをリロードしたタイミングでコンパイルされます。

  • WP-SCSS – WordPress プラグイン | WordPress.org 日本語

設定をこのようにしていますのでコンパイルすると子テーマ直下に style.css を書き出します。

ファイルの階層構造はこのようにしています。

続いて、リセットCSS を入れます。私は Destyle.css を使っています。実際にすべてのブラウザを確認したわけではありませんが、ブラウザ間の違いをほぼ取り去ってくれるらしいです。

  • Destyle.css – Opinionated reset stylesheet that provides a clean slate for styling your html.

destyle.css を導入しますとこうなります。見事に文字列だけになりました。

これに一から CSS を指定していくわけですが、思うほど大変ではありません。文字サイズや各ブロックのマージンやパディングを指定していけば読みやすいページになります。

WordPress や Genesis の設定もサイトをつくりながらやっていきます。次回です。

群れずに心穏やかに生きる 正しい孤独マインド入門

群れずに心穏やかに生きる 正しい孤独マインド入門

  • 作者:コスメティック田中
  • KADOKAWA

Amazon

WordPress:Genesis Framework を使ったテーマ制作(2)
WordPress:Genesis Framework を使ったテーマ制作(4)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com