IMUZA.com

Xserver<<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で送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com