Twenty Sixteenは細部まで上品でモバイルファーストなテーマ

この記事はプロモーションが含まれています。
Twenty Sixteen

Twenty Sixteenはずっと人気の WordPress レイアウト — ブログとウェブサイト用に完全に動作する、オプションの右サイドバーのある水平の題字 — に対するモダンな試みです。美しいデフォルトカラースキームのカラーオプション、モバイルファーストのアプローチによる調和した柔軟なグリッド、細部にまで非の打ち所がない上品さを備えています。Twenty Sixteen は WordPress の外観をどこであろうとも美しく見せるでしょう。

Twenty Sixteen

Twenty Sixteen は ずっと人気の WordPress レイアウト — ブログとウェブサイト用に完全に動作する、オプションの右サイドバーのある水平の題字 — に対するモダンな試みです。美しいデフォルトカラースキームのカラーオプション、モバイルファーストのアプローチによる調和した柔軟なグリッド、細部にまで非の打ち所がない上品さを備えています。Twenty Sixteen は WordPress の外観をどこであろうとも美しく見せるでしょう。

WordPressは無料で利用できるCMS(Contents Management System)であることから、多くの企業やブロガー、アフェリエイターによって運用されています。利用数が多いといことは、同じようなサイトが存在するといううことになります。そこで、サイトをカスタマイズして他のサイトと差別化しビジネスに役立てませんか。

Twenty Sixteen をインストールするにはダッシュボードから外観 → テーマ → 新規追加 → テーマ名で検索しインストールを開始します。

テーマカスタマイザー

「Twenty Sixteen」のカスタマイズ内容は以下の表のようになっています。

サイト基本情報
  1. サイトのタイトル
  2. キャッチフレーズ
ヘッダー画像画像を指定できる(1200 x 280推奨)
背景画像背景画像を指定できる
メニュー2ケ所の表示位置がある
ウィジェット3ケ所
  • サイドバー
  • コンテンツ下1
  • コンテンツ下2
ホームページ設定トップページを最新の投稿か固定ページにする
Twenty Sixteenのカスタマイザー

Twenty Sixteen(WordPressテーマ)をカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初に取り組むべきは、テーマカスタマイザーを使う、cssの追加をすることでしょう。どちらも手段が複数ありますので、事前に理解して取り組まれるとよいでしょう。プラグインを利用すれば高度なカスタマイズが可能になります。プログラムスキルをお持ちの場合は、直接テンプレート(PHP)ファイルを書き換えるカスタマイズになります。コードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。

WordPressは無料で利用できるCMS(Contents Management System)であることから、多くの企業やブロガー、アフェリエイターによって運用されています。利用数が多いといことは、同じようなサイトが存在するといううことになります。そこで、サイトをカスタマイズして他のサイトと差別化しビジネスに役立てませんか。

css(スタイルシート)でカスタマイズ

部分的に色を変更したり、背景や囲みを装飾、文字の大きさを変更したりしたいのであればcss(スタイルシート)を追加することになります。「スタイルシート・css」記述するには、「テンプレートファイルに直接記述」する、「テーマカスタマイザーで記述」する。「プラグインを使って記述」などの方法があります。

ブロックエディタ対応のテーマではブロックごとにタイポグラフィ(「文字や文章を読みやすく、または美しく見せるための技術」)を指定できるので、文字の大きさや色を指定したい場合は、こちらを利用されたほうが良いでしょう。

注意点)スタイルシート・cssが大きくなりすぎると表示速度に影響を及ぼすこともあるので注意が必要です。

テーマカスタマイザーの「css追加」は複雑なコード編集は、編集エリアが狭く操作しづらいですが、テーマの更新よって上書きされることはありません。逆にテンプレートファイルの「style.css」は上書きされるので、子テーマで対応するか、バックアップをとり対応するかになります。推奨は「css追加」となっています。

css(スタイルシート)を追加するには、ダッシュボードの 外観 → カスタマイズ → 追加css と進みコードを追加します。スタイルシートを適用させるには編集ブロックに 高度な設定で 「追加 css クラス」にクラス名を記述します。スタイルはブロック対して適用されるようになっています。複数のブロックに適応させたいならブロックをグループ化しておきます。

ページごとに css を記述したい場合はプラグインを利用すると良いでしょう。「VK All in one Expansion Unit」の cssカスタマイズ を有効にしておくと、ページごとに スタイルシートを追加することができます。

テーマによってはあらかじめ、ページごとに css を記述できるようにしたものもあります。複雑なデザインを施したいサイトの場合はこちらを選ぶとよいかもしれません。

テンプレートファイル(PHP)でカスタマイズ

テンプレートファイル(テーマファイル)のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。

  • スタイル(style.css)
  • テーマの関数
  • 404テンプレート
  • コメント
  • テーマフッター
  • テーマヘッダー
  • 検索フォーム
  • 単一テンプレート

テンプレートファイルを直接編集してカスタマイズすることもできます。ただ、この方法は高度な知識を必要とされますので、十分な知識をお持ちの方におすすめなります。記述ミスによって画面が表示されなくなったり、管理画面にログインすらできなくなったりすることもあります。

テンプレートファイルを直接編集してサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。

子テーマを作成する

テンプレートファイルを直接編集してサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。

WordPressのカスタマイズ子テーマの作り方

子テーマの作り方

「子テーマ」は、WordPressでウェブサイトやブログのデザイン・レイアウトを構築する際に、「親テーマ」と連動して機能するもうひとつのテーマです。 WordPressのデザインテンプレートは、「テーマ」を有効化させることで構築されます。

子テーマを作る

WordPressのテーマを変更する手順

テーマを変更するには、管理画面からダウンロードし有効化するという流れになるのですが、いきなり有効化するのは少しリスクがあります。ウイジェットなどはテーマによって取り扱いが異なります、そこで以下の手順で変更されることを推奨します。

  1. 変更前にバックアップする
  2. ダッシュボード・外観 よりテーマディレクトリにアクセスする
  3. ライブプレビューを確認し表示の調整を行う
  4. 有効化して公開
  5. 公開後の確認作業を行う

※ライブプレビューで確認して表示の調整をするには、ダッシュボードの 外観 画面でインストールしたテーマの有効化ボタンの右側 ライブプレビューボタンをクリックします。

テーマカスタマイザーによる調整ができるので、修正が終わったら左上部の「有効化して公開」ボタンをクリックします。公開後にはスタイルシートを修正、確認、設定します。以下の点については公開後早期にチェックするようにしましょう。

  • 外部のツールと連携している場合は正しく動作しているか
  • スタイルシートが正しく設定されているか
  • 不要なプラグインは削除する。

テーマを安全に運用する

WordPressのテーマとは、サイト全体のテンプレートのことです。テーマは複数のファイルの集合体で、デザインなどの内容が一式セットになっています。そのため、テーマを変更すれば複雑な処理を行うことなく、デザインや構成、機能などを変えることができます。テーマは、インターネット上で無料ダウンロードできるものから、有料で販売されているものもあります。また、自分で作成したテーマをアップロードして使用することも可能です。

テーマの更新には、機能の追加・変更などのほかに、セキュリティ向上や不具合の修正なども含まれるため、常に最新の状態にアップデートしておくことです。また、テーマを更新すると、カスタマイズは初期化してしまいます。更新する度にカスタマイズし直すのは手間がかかるので、「子テーマ」の利用が推奨されています。子テーマを作る理由はテーマを直接カスタマイズしてしまうと、テーマのバージョンアップによって変更した内容が上書きされてしまうからです。子テーマは、親テーマの機能やスタイルを引き継いでいます。子テーマにカスタマイズしたい部分だけを付け加えておけば、テーマを更新した後もカスタマイズした状態をそのまま引き継げます。

テーマの選び方

WordPressテーマを選ぶ際、ビジネスサイトでは、自社のイメージと近いデザインを選びましょう。中小企業や個人事業主の場合、高度なカスタマイズは負担が大きすぎ、デフォルトのデザインでサイトを作成し運用していくことが多いようです。このため、ビジネスサイトにおすすめな有料WordPressテーマを利用されるとデザインのカスタマイズが容易だったり、必要な機能がプラグインによって提供されているので、サイト運用開始時や運用中の負担を軽減できます。

テーマを選ぶ際にはにはレスポンシブデザインかどうかは着目しましょう。レスポンシブデザインとは、スマートフォンやタブレット・PC別に1つのデザインで表示できるようにしたものです。サイトの内容によってはスマホユーザーが少ないこともあるでしょうが、Googleはモバイル端末での表示を標準と考えていますので、この点からも対応すべきポイトです。

  • レスポンシブデザインなのか
  • デザインをカスタマイズしやすいか
  • ダウンロード数(利用されている数)が多いのか
  • ブロックエディタに対応しているのか
  • 日本語に対応しているのか
  • テーマは安全なのか

有料テーマ

WordPress有料テーマはおしゃれでカスタマイズしやすいのが大きなメリットです。 WEBサイト運用するための機能も標準として装備されているので、プラグインの追加をしなくても十分使用することが可能です。

無料テーマはシンプルなものが多く、他のサイトとデザインが同じようになってしまうこともあります。 しかし、有料テーマであればカスタマイズしやすくなっているため、好みのサイトを作成しやすいのが特徴です。

無料テーマ

wordpress.org からダウンロードできるテーマやWEB制作会社から提供される無料テーマもあります。無料とは思えないほど機能やデザインが充実しているテーマもあります。ただし、無料がゆえに途中で更新がストップしたり、開発が終了されることもあります。無料テーマは開発者の宣伝や有料版へのステップとして提供されていることもあると認識しておきましょう。

wordpress.org のテーマはディレクトリ登録時に事前に審査が行われるので、製作者サイトからの直ダウンロードに比較すれば安全といえるでしょう。ただし、サポートはありませんのでwordpress.orgやネットの情報で自力で解決しなければなりません。

おすすめWordPressテーマ

ザ・トールは、スマートエディターで記事作成、53種類の見出し・498種類のアイコンなど、記事を読みやすく華やかに彩る記事パーツをワンクリックで設置できます。記事パーツのデザイン変更も自由自在。

【THE THOR(ザ・トール)】
THE THOR
ザ・トール

企業サイトやビジネスサイト、オウンドメディアに必要なWeb集客機能と自由度の高いレイアウト機能を搭載しています。見込み客を増やすためにメルマガ登録や資料請求、セミナーに誘導する仕組みがあるWebサイトをWordPressで作りたい企業におすすめです。

個人事業主・中小企業向けWordPress 有料テーマ Emanon
Emanon
Emanon

おすすめの記事