外観

2018/03/26

WordPressWordPress管理画面「外観」では、サイトの外観(テーマ)を簡単に設定することができます。WordPressをインストール・設定した直後に、サイトページを表示してみると、ヘッダ画像が効果を発揮して、ある程度の見た目のサイトが出来上がっています。これはWordPressが提供するデフォルトテーマ「Twenty Seventeen」が設定されているためです。

本ページでは、テーマ・カスタマイズ・ウィジェット・メニュー・テーマの編集について紹介します。

それでは以下、ご参照ください。

スポンサーリンク

テーマ

テーマとは、サイトの外観です。WordPressインストール時には、以下に示すようなデフォルトテーマが設定されています。画像が目を引くせいか、これだけでも立派なサイトの様に見えます。実際には、中身はまだ何もないですが。

WordPress_外観_テーマ_00

 

WordPressにはデザイン性・機能性に優れたテーマが数多く用意されており、簡単に外観を変更することができます。ただ、提供されているテーマは非常に多いので、どれにするのが良いか結構迷います。これから作るサイトをイメージしながら、色々なテーマを試してみるのが良いと思います。サイトを作っている途中でも、やはりイメージに合わないと思ったら、別テーマに変更することも可能です。

本サイトは以下のテンプレートを採用しました。テンプレート名や詳細は後述します。

WordPress_外観_テーマ_01

現在、ご覧になっている、本サイトと比較してみてください。大枠は同じにしても、まだまだ見た目が違います。これはテンプレート適用により外観のベースを作った後に、更にカスタマイズすることにより、細かい見た目を変更することができるためです。カスタマイズについては、下方で紹介しています。

それでは、WordPress管理画面「外観」の[テーマ]機能について、詳細を紹介していきます。

テーマの変更には二つの方法があります。①つ目はWordPress管理画面「外観」のテーマを追加画面で提供されているテーマをインストールして設定する方法、②つめは外部サイトからテーマファイルを取得しインストールして設定する方法です。本サイトは後者を採用しています。

①テーマを追加画面で提供されているテーマを、インストールして設定する方法

WordPress管理画面「外観」の[テーマ]を押すと、テーマ画面が表示されます。

WordPress_外観_テーマ適用1_00

一覧には既にインストールされているテーマが表示されます。

[新しいテーマを追加]を押すと、テーマを追加画面が表示されます。

WordPress_外観_テーマ適用1_01

一覧にインストール済みのテーマ、および、未インストールのテーマが表示されます。テーマは注目テーマ、人気テーマ、最新テーマや、お気に入りに追加したテーマから選択することができます。また、特徴フィルターによる題名・機能・レイアウトタイプでの絞り込みや、キーワードによる絞り込みもできます。

良さそうなテーマを見つけたら、対象テーマに対してマウスオーバーします。

WordPress_外観_テーマ適用1_02

[プレビュー]ボタンが表示されるので押してみると、プレビュー画面が表示されます。

WordPress_外観_テーマ適用1_03

プレビュー画面が表示され、大まかにどのような見た目なのかを確認することができます。

良さそうであれば、[インストール]ボタンを押します。

しばらくするとインストールが完了し、[インストール]ボタンが[有効化]ボタンに変わります。

WordPress_外観_テーマ適用1_04

[有効化]ボタンを押します。

テーマ一覧が表示され、インストール、および、有効化が完了していることがわかります。

WordPress_外観_テーマ適用1_05

実際のサイトにアクセスすると、テーマが適用されていることがわかります。

WordPress_外観_テーマ適用1_06

 

プレビュー画面ではなく、テーマ一覧に表示されている各テーマの[インストール]ボタンからもインストールすることができます。

WordPress_外観_テーマ適用1_07

各テーマの[インストール]ボタンを押すと、[有効化]ボタン、[ライブレビュー]ボタンが表示されます。

WordPress_外観_テーマ適用1_08

[有効化]ボタンにより、対象テーマを有効化することができます。

[ライブレビュー]ボタンを押すと、実際に作っているサイトでプレビュー表示されます。同プレビュー画面で[有効化して公開]ボタンを押すことにより、テーマ適用することができます。


WordPress_外観_テーマ適用1_09

 

②外部サイトから取得したテーマをインストールして設定

本サイトは『Luxeritas Theme』を採用しています。

特徴は同テーマホームページのサブタイトルに示されています。

SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ

SEO(Search Engine Optimization)は検索エンジン最適化のことで、Google等の検索エンジンで、検索結果がより上位表示されるようにサイトソースが最適化されていることを示します。

レスポンシブ(デザイン)はPCブラウザ、スマホブラウザ両方に対応しているデザインの事を示します。本サイトをPCでご覧の場合、ブラウザの幅を縮めてみると、幅に応じたデザインになることがわかります。これがレスポンシブデザインです。PCブラウザ用・スマホ用に、個別にサイトが用意されているわけではなく、サイトの実体は一つです。

シンプルデザイン、かつ、SEO対策をしているテンプレートを探していたら、『Luxeritas Theme』を見つけることができました。デザインで一番素晴らしいと感じたのが、スマホデザインにした時のメニューです。PCでご覧の場合、ブラウザをスマホサイズの幅にしてみるとわかります。また、ホームページを参照してみると、『Luxeritas Theme』ホームページのサブタイトルに示されている特徴にとても力を入れていることがよくわかります。

他テンプレートもいくつか検討してみたのですが、デザイン・機能共に一番優れていると感じたのと、これだけの機能を備えているにも関わらず無料で提供しているということに魅力を感じたので、このテーマを採用しました。

ということで、外部サイトから取得したテーマのインストールについて、『Luxeritas Theme』を例に紹介していきます。

『Luxeritas Theme』の場合、テーマが親と子に分かれていて、親テーマ→子テーマの順番にインストールしていきます。通常テーマをアップデートするとカスタマイズ内容まで消えてしまうそうです。しかし、テーマを親と子に分け、基本的な更新は親テーマに対して行うことにより、カスタマイズ内容が消えずに済むようです。

それでは、以下テーマ適用手順の紹介になります。

まずはじめに、『Luxeritas Theme』ホームページのメニュー『ダウンロード』から、テンプレートファイル(ZIP形式)である本体(親テーマ)、および、子テーマをダウンロードします。

画像は2017年12月時点のものですが、バージョンはたびたびアップデートされています。

WordPress_外観_テーマ適用2_00

WordPress管理画面「外観」の[テーマ]を押すと、テーマ画面が表示されます。

WordPress_外観_テーマ適用2_01

[新しいテーマを追加]を押すと、テーマを追加画面が表示されます。

[テーマのアップロード]ボタンを押すと、[ファイルを選択]ボタンが表示されます。

WordPress_外観_テーマ適用2_02

[ファイルを選択]ボタンを押すと、ファイル選択ダイアログが表示されます。

WordPress_外観_テーマ適用2_03

テンプレートファイルの本体を選択すると、[ファイルを選択]ボタンの隣に選択したファイル名が設定されると共に、[今すぐインストール]ボタンが押せるようになります。

ポイントは本体(親テーマ)を先にしンストールすることです。子テーマは先にインストールできません。

WordPress_外観_テーマ適用2_04

[今すぐインストール]ボタンを押すとインストールが始まります。

WordPress_外観_テーマ適用2_05

しばらくするとテンプレートファイル本体のインストールが完了します。

同様にテンプレートファイル子テーマもインストールします。

WordPress_外観_テーマ適用2_06

テンプレートファイル本体・子テーマの両方をインストール後、WordPress管理画面「外観」のテーマ画面に戻ると、インストールしたテーマが表示されていることがわかります。

WordPress_外観_テーマ適用2_07

子テーマであるLuxeritas Child Themeの[有効化]ボタンを押すと、Luxeritas Themeが有効になります。

WordPress_外観_テーマ適用2_08

 実際のサイトページを確認すると、インストールしたテーマが反映されていることがわかります。
WordPress_外観_テーマ適用2_09
まだ、この段階では、現在ご覧いただいているページの外観とは、少し異なります。カスタマイズにより、現在の外観にしました。カスタマイズについては、次節[カスタマイズ]で紹介します。
テーマについては以上です

 

カスタマイズ

本サイトでは『Luxeritas Theme』を適用して、見た目を以下のようにカスタマイズしました。

WordPress_外観_カスタマイズ_00

シンプルなベースはそのままで、以下のような変更を加えています。

本サイトカスタマイズ

本サイトカスタマイズ

  • タイトルをロゴ画像に変更
  • メニュー背景色を変更
  • Twitter,RSS,Feedlyを色付きに変更
  • ウィジェットの各部品を個別に表示、かつ、角を丸く変更
  • 記事の領域の角を丸く変更
  • TOP PAGEボタンの見た目を変更

WordPress管理画面「外観」の[カスタマイズ]を押すと、以下のようなカスタマイズ画面が表示されます。

WordPress_外観_カスタマイズ_01

カスタマイズ画面では、実際にどのように外観が変更されるかを確認しながら、カスタマイズを行うことができます。各カスタマイズについては、『Luxeritas Theme』のホームページ、『多機能・高カスタマイズ性に関する取り組み』>[ブログの見た目に関するカスタマイズ]で紹介されています。

『Luxeritas Theme』をインストールすると、WordPress管理画面に「Luxeritas」のメニューが追加されていることがわかります。

WordPress_外観_カスタマイズ_02

同メニューには[カスタマイズ][カスタマイズ(外観)][SNSカウンター][子テーマの編集]が用意されています。[カスタマイズ(外観)]はWordPress管理画面「外観」>[カスタマイズ]と同一です。外観カスタマイズの他に、内部動作に関するカスタマイズもできます。各カスタマイズについては、『Luxeritas Theme』のホームページ、『多機能・高カスタマイズ性に関する取り組み』で紹介されています。

カスタマイズについては以上です

ウィジェット

ウィジェットとは、ブログなどの特定領域に自由に配置できる部品の事を指します。

下記画像のように本サイトではウィジェットとして、検索・最近のコメント一覧・カスタムHTML(プロフィール)・カテゴリリンク・タグリンクを配置しました。

2018/03/08時点で変更しています。今後も変更する予定です。

WordPress_外観_ウィジェット_00

 

WordPress管理画面「外観」の[ウィジェット]を押すと、以下のようなウィジェット画面が表示されます。

WordPress_外観_ウィジェット_01

[利用できるウィジェット]から実際に利用するウィジェットをドラックし、右側にあるウィジェット配置領域に配置します。本サイトの場合、ページ右列にウィジェットが配置してありますが、これが[汎用サイドバー(タイトルH3タイプ)]です。他に記事近辺、ヘッダー、フッターなどに配置することもできます。

配置したウィジェットをクリックするとウィジェット設定領域が開きます。ここでタイトル等の編集をし、[完了]リンクを押すことにより、編集内容が反映されます。また、[削除]リンクを押すことにより、配置したウィジェットを削除することができます。

WordPress_外観_ウィジェット_02

 

なお、上のウィジェット画面の画像に示す[利用できるウィジェット]には、『Luxeritas Theme』オリジナルのウィジェットが含まれます。また、[ウィジェット配置領域]は、同テーマオリジナル配置領域になります。

ウィジェットについては以上です

メニュー

メニューについて、現時点ではデフォルト設定のまま利用しています。今後、設定を行ったら紹介していく予定です。

 

テーマの編集

テーマ編集については、PHP・JavaScript・CSSファイルを直接編集することにより、テーマ編集ができるようです。少々専門知識が必要だと思われますので、本サイトでは紹介はしません。

と思いましたが、一部だけ紹介します。ただ、ご参考程度で、詳しくは紹介しません。

現在ご覧のページの見出し部分に薄い青色がついています。これは『Luxeritas Theme』のstyle.cssを直接編集して行っています。

WordPress_外観_テーマの編集00

上記CSSクラスを追加することにより、以下の様に見出しに色を付けることができました。

WordPress_外観_テーマの編集01

 

一応注意点として。上の画像に示す追加クラスは、他に影響があるかは、全く調べていません。よって、何か悪影響を及ぼす可能性がありえます。ソースを直接カスタマイズしているときに、何か不具合があった時には、まずは自分のカスタマイズを疑いましょう。

 

まとめ

本ページでは、WordPress管理画面「外観」のテーマ・カスタマイズ・ウィジェット・メニュー・テーマの編集について紹介しました。

本サイトが採用した、『Luxeritas Theme』はSEO対策もばっちり、かつ、無料なので個人的にはお勧めです。ただ、テーマは本当にたくさんあります。自分がこれだと思ったテーマを採用するのが一番だと思います。

 

スポンサーリンク