IMUZA.com

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

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

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

2022/04/24 genesis, Wordpress

「WordPress:Genesis Framework を使ったテーマ制作」の4回目ですが、WordPress に移行したサイト「そんなに褒めないよ。映画評」の状態があまり芳しくなく、その改善に時間をとられていました。

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

  • LCPの問題:2.5秒超
  • BlankSlate
  • Genesis Framework Child テーマの基本構造

LCPの問題:2.5秒超

理由は、なぜか Search Console のウェブに関する指標で「LCPの問題:2.5秒超」が改善が必要になっています。それも突然 2月28日からです。その時点で特に何かを変更した記憶がないにもかかわらずです。

改善できる項目にもとづいてあれこれやっているの現状ということですが、かなり改善しているもののグリーン(90点以上)に到達しません。

こういう数値は気にしだすととまりませんので未だ進行中ということです。

BlankSlate

で、あれこれやっているうちに、Genesis Framework を使わずに一からテーマを作ってみたらどうなるかと思い始め、WordPress 公式のブランクテーマ BlankSlate を使って自作してみようと思った次第です。

  • BlankSlate – WordPress テーマ | WordPress.org 日本語

BlankSlate を入れますと、

このページが

こうなります。

これで一からテーマを作ってみようと思います。

Genesis Framework Child テーマの基本構造

このサイト「IMUZA.com」は Genesis Framework でほぼ出来上がっていますので、「WordPress:Genesis Framework を使ったテーマ制作」も引き続き書いていこうとは思っています。

前回はリセットCSSを入れましたのですべてスタイルが削除されて文字列だけになっています。そこに基本構造のCSSを設定しますと、次のようになります。

1カラムでは、

2カラムでは、

となります。考え方は、

  • モバイルファーストのレスポンシブレイアウト
  • コンテンツの両サイドには左右それぞれ最低4%のマージン
  • コンテンツの最大幅は 650px
  • サイドバーの幅は 300px、コンテンツとのギャップは 50px
  • したがって、コンテンツ+サイドバーが 1000px かつ 92%となる 1087pxがブレイクポイント

というレイアウトです。

基本構造のCSSはこうなります。

/* Structure and Layout
---------------------------------------------------------------------------- */


.site-header,
.site-inner,
.site-footer{
    width: 92vw;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px; // media-query 707px
}
/* サイトインナー 1087px でコンテンツ2カラム */
@media (min-width: 1087px){
    .site-header,
    .site-inner,
    .site-footer{
        max-width: 1000px;  //media-query 1087px
    }
    .content-sidebar-wrap {
    display: grid;
    grid-template-columns: 650px 300px;
    column-gap: 50px;
    }
}

  • LCP:2.5秒超の解消
  • Genesis Framework を使ったテーマ制作
  • Blankslate を使ったテーマ制作

ますますやらなくてはいけないことが増えました。

KUCHIRAKU MASK (クチラクマスク) ホワイト 30枚入 ダイヤモンド型 くちばし型 メイクが付きにくい

KUCHIRAKU MASK (クチラクマスク) ホワイト 30枚入 ダイヤモンド型 くちばし型 メイクが付きにくい

  • ISDG 医食同源ドットコム

Amazon

WordPress:Genesis Framework を使ったテーマ制作(3)
WordPress:メニューにアイコンを使う(Walker_Nav_Menu)
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