CustomifyをテーマカスタマイザーとCSSでカスタマイズ
Customifyをカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初に取り組むべきは、テーマカスタマイザーを使う、cssの追加をすることでしょう。どちらも手段が複数ありますので、事前に理解して取り組まれるとよいでしょう。
Customify
Customify は、SEO、速度、および使いやすさを念頭に置いて構築され、高速、軽量、応答性、および非常に柔軟なテーマです。 WYSIWYGヘッダー&フッタービルダーで想像力を解き放ちます。Elementor、Beaver Builder、SiteOrigin、Thrive Architect、Divi、Visual Composerなどのお気に入りのページビルダーのいずれかで機能します。ショップ、ビジネスエージェンシーなどのあらゆるタイプのWebサイトが構築可能です。
Customify
- Last updated… 公式ページで確認
- Active installations… 公式ページで確認
- PHP version… 5.6
- Customify Preview
- Ratings… 5つ星中4.7つ星
- support
★テーマの選び方
・利用されているか(インストールやダウンロード数)
・更新されているか
・サポートがあるか
・口コミやレビュー
Customifyをインストールするにはダッシュボードから外観 → テーマ → 新規追加 → Customifyで検索しインストールを開始します。
プラグインを利用すれば高度なカスタマイズが可能になります。プログラムスキルをお持ちの場合は、直接テンプレート(PHP)ファイルを書き換えるカスタマイズになります。コードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。
WordPressは無料で利用できるCMS(Contents Management System)であることから、多くの企業やブロガー、アフェリエイターによって運用されています。利用数が多いといことは、同じようなサイトが存在するといううことになります。そこで、サイトをカスタマイズして他のサイトと差別化しビジネスに役立てませんか。
テーマカスタマイザー
Customifyのテーマカスタマイザーは多岐にわたってカスタマイズすることができるようになっているので、ショップ、ビジネスエージェンシーなどのあらゆるタイプのWebサイトを構築できます。企業、ポートフォリオ、教育、大学ポータル、コンサルティング、教会、レストラン、医療などにも向いています。また、Customifyは、WooCommerce、OrbitFox、Yoast、BuddyPress、bbPressなどの主要なプラグインと互換性があります。
テーマカスタマイザーは、テーマによって内容は異なっていますが、基本的な項目、メニューや、ウィジェット、フォントや色、レイアウトなどを変更することができます。テーマによってはスライダーや動画に関する設定ができるものもあります。スタイルシートは追加CSSに必要なものだけ追加することができます。(全てのページに出力されるのであまり使わないCSSは追加しない方がページを軽くすることができる)
- ヘッダー
ロゴとサイトアイデンティティ
ヘッダー上
ヘッダーメイン
ヘッダー下
メニューサイドバー
メニューアイコン
検索アイコン
検索ボックス
メインメニュー
ボタン
ソーシャルアイコン
HTML1
テンプレート - 配置
全般
サイドバー
ページヘッダー - ブログ
ブログ投稿
1つのブログ投稿
検索結果 - 設定
Global Colors
背景 - タイポグラフィ
基本設定
サイトタイトルとキャッチフレーズ
コンテンツ - フッター
テンプレート
フッターサイドバー1
フッターサイドバー2
フッターサイドバー3
フッターサイドバー4
フッターサイドバー5
フッターサイドバー6
フッターメイン
フッター下
著作権表示
ソーシャルアイコン
テーマカスタマイザーは、テーマによって内容は異なっていますが、基本的な項目、メニューや、ウィジェット、フォントや色、レイアウトなどを変更することができます。テーマによってはスライダーや動画に関する設定ができるものもあります。スタイルシートは追加CSSに必要なものだけ追加することができます。(全てのページに出力されるのであまり使わないCSSは追加しない方がページを軽くすることができる)
css(スタイルシート)でカスタマイズ
部分的に色を変更したり、背景や囲みを装飾、文字の大きさを変更したりしたいのであればcss(スタイルシート)を追加することになります。「スタイルシート・css」記述するには、「テンプレートファイルに直接記述」する、「テーマカスタマイザーで記述」する。「プラグインを使って記述」などの方法があります。
ブロックエディタ対応のテーマではブロックごとにタイポグラフィ(「文字や文章を読みやすく、または美しく見せるための技術」)を指定できるので、文字の大きさや色を指定したい場合は、こちらを利用されたほうが良いでしょう。
注意点)スタイルシート・cssが大きくなりすぎると表示速度に影響を及ぼすこともあるので注意が必要です。
テーマカスタマイザーの「css追加」は複雑なコード編集は、編集エリアが狭く操作しづらいですが、テーマの更新よって上書きされることはありません。逆にテンプレートファイルの「style.css」は上書きされるので、子テーマで対応するか、バックアップをとり対応するかになります。推奨は「css追加」となっています。
css(スタイルシート)を追加するには、ダッシュボードの 外観 → カスタマイズ → 追加css と進みコードを追加します。スタイルシートを適用させるには編集ブロックに 高度な設定で 「追加 css クラス」にクラス名を記述します。スタイルはブロック対して適用されるようになっています。複数のブロックに適応させたいならブロックをグループ化しておきます。
ページごとに css を記述したい場合はプラグインを利用すると良いでしょう。「VK All in one Expansion Unit」の cssカスタマイズ を有効にしておくと、ページごとに スタイルシートを追加することができます。
テーマによってはあらかじめ、ページごとに css を記述できるようにしたものもあります。複雑なデザインを施したいサイトの場合はこちらを選ぶとよいかもしれません。
WordPressのテーマは、WordPressを利用したウェブサイトのデザインを定義・変更するものです。デザインの変更には、表示や外観の調整が含まれますが、ほとんどの場合、機能面での改変も対象になります。そして、デフォルトテーマは、ワードプレスの公式サイト(wordpress.org)が毎年作っているテーマになります
テンプレートファイル(PHP)でカスタマイズ
テンプレートファイル(テーマファイル)のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。
- スタイル(style.css)
- テーマの関数
- 404テンプレート
- コメント
- テーマフッター
- テーマヘッダー
- 検索フォーム
- 単一テンプレート
テンプレートファイルを直接編集してカスタマイズすることもできます。ただ、この方法は高度な知識を必要とされますので、十分な知識をお持ちの方におすすめなります。記述ミスによって画面が表示されなくなったり、管理画面にログインすらできなくなったりすることもあります。
子テーマを作成する
テンプレートファイルを直接編集してサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。
「子テーマ」は、WordPressでウェブサイトやブログのデザイン・レイアウトを構築する際に、「親テーマ」と連動して機能するもうひとつのテーマです。 WordPressのデザインテンプレートは、「テーマ」を有効化させることで構築されます。
WordPressのカスタマイズ手順
WordPressをカスタマイズするには下記の手順で行うとよいでしょう。
- WEBサイトの構成を考える (※注1)
- 不要な機能を削除する
- 必要な拡張機能(プラグイン)を追加する
- グローバルナビゲーションやサイドメニューを作る
- TOPページを作る
- 企業サイトなどは、会社案内や事業内容などを作る
- お知らせや、ブログ(製品やサービスをカテゴリーに構成する)を設置する
※ 注1)固定ページ・投稿ページのコンテンツを書き出す。そしてカテゴリーやタグを振り分ける。などの設計書・制作ガイドラインを作成しておくと作業をスムースに進めることができ、修正が発生しても最小限の工程で完結できるようになります。
-
Customify(WordPressテーマ)のSEO
CustomifyのSEOは良質のコンテンツでベネフィット(利便性)をユーザーに伝えるコンテンツを作り上げるこ…
-
CustomifyをテーマカスタマイザーとCSSでカスタマイズ
Customifyをカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初…
-
Customifyはネットショップやレストラン向きテーマ
CustomifyはSEO、速度、および使いやすさを念頭に置いて構築され、高速、軽量、応答性、および非常に柔軟…