記事では、WordPressのインストールまでを紹介しました。ブログとして使用できる状態になっていますが、そこからいろいろカスタマイズできるのがWordPressの長所です。今回は、WordPressの特徴であるテーマ(テンプレート)を活用して、外観を作り変えてみます。目次WordPressのテーマ(テンプレート)についてLightningテーマについてテーマと、関連プラグインのインストールLightningテーマのインストール関連プラグインのインストールテーマの設定テーマのカスタマイズ著作権表示の削除ウィジェットの設定メニューの設定XREAの広告タグ設定まとめWordPressのテーマ(テンプレート)についてWordPressには「テーマ」という仕組みがあります。昔のWordPressでは、デザインの設定をするにはphpの編集など専門知識が必要だったそうですが、このテーマという機能を使うことで、ブラウザの管理画面上からサイトのデザインを簡単に変えることができます。テーマは「テンプレート」とも呼ばれます。Seventeen」が有効になっています。(2017年現在)WordPress公式サイトのテーマページには、有志が作成した様々なテーマが公開されていて、自由に使用することができます。Lightningテーマについて当サイトでは、Lightningというテーマを利用しています。画面右上に固定メニューがあるスマホ表示に対応トップページにスライドショーを配置でき、企業サイトのような構成にできる見た目がオシャレなど、自分が作ってみたかったデザインがほぼ実現できるからです。無料で使用でき、日本語の公式設定ガイドもあるので、この記事ではLightningの導入方法を紹介します。前提この記事は、以下の前提で解説します。Seventeen」が表示されています。こんなデザインになっています。これの見た目を変えていきましょう。(1)Lightningテーマのインストール管理画面メニューの「外観」⇒「テーマ」を選択。「新しいテーマを追加」を選択。右上の検索欄に「Lightning」と入力すると、候補の中にLightningが表示されます。カーソルを合わせると「インストール」ボタンが現れるので、クリックしてインストール。完了すると「インストール済み」と表示されるので、「有効化」をクリック。これで、Lightningテーマが適用された状態になります。Unit」をインストールすることが推奨されています。必須ではないですが、これを有効にしているといろいろ便利な機能が利用できるので、インストールしておきましょう。Unit」リンクをクリック。プラグインの詳細画面が表示されるので、「今すぐインストール」をクリック。Unit」もインストール。プラグイン一覧画面を更新すると、2つのプラグインがインストール済になっています。それぞれ「有効化」をクリック。有効化されれば準備完了です。次に、Lightningテーマ特有の設定をしていきます。(1)テーマのカスタマイズ管理画面左の「外観」⇒「テーマ」を選択して、Lightningテーマの「カスタマイズ」ボタンを押すと、テーマ設定画面に遷移します。左側には設定項目が、右側にはプレビューが表示されます。サイト基本情報サイト名、キャッチフレーズを設定できます。ちなみに当サイトではサイト名のみ設定し、キャッチフレーズは空にしてます。Navigationを設定できます。事前に、WordPress管理画面の「外観」⇒「メニュー」設定画面でメニューの中身を編集しておくのがおすすめです。Navigationのみ設定しています。ウィジェット画面内の各所に、様々なパーツを配置できます。デフォルトでサイドバーに表示されている「最近の投稿」「最近のコメント」などもウィジェットです。管理画面の「外観」⇒「ウィジェット」でも設定可能なので、ここで編集する必要はないと思います。固定フロントページトップページに表示する項目を設定します。当サイトのようにトップページに直近の投稿を表示する場合は「最新の投稿」のままでよいです。追加CSS独自のCSSを設定したい場合に使用します。当サイトでは未設定です。Lightningデザイン設定サイトの色、ロゴ画像、メニューの配置、表示項目の設定などができます。「サイドバーに表示されるページリストを全て表示せずにアクティブでない階層を非表示にする」はチェック有がおすすめです。固定ページなどを表示した際に、サイドバーに関連ページへのリンクが全部展開されるのを防げます。Lightningトップページスライドショートップページに表示するスライドショーを設定できます。画像にリンクも設定可です。1枚だけだとスライドしないようです。当サイトでは、自作ソフト紹介ページへのリンクなどを設定しています。Blockトップページに表示する、アイコン付きの文章を追加できます。当サイトでは未設定です。画面左下の「パソコン」「タブレット」「スマホ」アイコンをクリックすると、それぞれの画面サイズに合わせてプレビューが変化します。(2)著作権表示の削除Lightningテーマでは、画面の一番下にこんな感じの著作権(コピーライト)表示があります。削除できればサイトがシンプルになります。ライセンス上、この部分の改変は可能とのことなので、消しちゃいましょう。ファイルの一番下、196~199行目に該当の設定があります。追加(コメントアウト)して保存すれば完了です。画面右側のサイドバーなどに表示する項目は、「ウィジェット」と呼ばれます。管理画面の「外観」⇒「ウィジェット」で設定できます。画面左側に、様々な種類のウィジェットがあらかじめ用意されています。画面右側には、サイドバーやトップページ、フッターなどが位置別に分かれています。ここにウィジェットをドラッグ&ドロップで、設定可能です。Navigation)に表示する項目などは、管理画面の「外観」⇒「メニュー」から設定します。左側には、これまでに投稿した記事の一覧などが表示されています。カスタムリンクで自由に設定することも可能です。「メニューに追加」を押すと、対象のページがメニューに追加されます。追加後は、ドラッグ&ドロップで順番の変更や、階層関係の設定ができます。初期状態では何もメニューが存在しないので、最初にメニューを新規作成してから、項目を追加していきましょう。XREAの広告タグ設定XREAの無料プランを使用している場合、運営会社が指定する広告を表示する必要があります。通常であれば、画面上部に広告が自動挿入されるため、気にする必要はありません。Lightningテーマを使用している場合は、画面上部の固定メニュー部分の裏に広告が隠れてしまいます。最初は広告が見えなくなる原因がわからず、これに気づくまで相当苦労しましたね・・・。このままでは規約違反になってしまうため、広告自動挿入を停止した上で、広告バナーを手動で別の場所に追加します。規約上、サイトを開いた直後に目に入る場所に広告バナーを追加する必要があります。バナーが横長なので、必然的に追加場所は記事の直上になりますね。XREAの仕様で<!–nobanner–>をHTML内に追加しておくと、広告自動挿入が止まります。新コントロールパネルを開くと、手動追加用の広告タグを入手できます。</head>タグの直後に、<!–nobanner–>を追加して保存します。(2)広告タグの手動追加wp-content/themes/lightning/配下の、下記ファイルを開きます。role=”main”>の直後(つまり11行目)に、所定の広告タグを追加して保存します。これで、各記事の上部に広告が表示されます。トップページに限り、ウィジェットで記事上部へタグの追加が可能なので、「トップページコンテンツエリア上部」にカスタムHTMLウィジェットを追加して対応します。これで、全ページの記事直上に広告が表示されます。場所的にも、規約を満たしています。まとめ以上の方法で、WordPressインストール直後の初期状態からデザインを変更して、現在の当サイトの見た目にすることができました。今後は、サイトを運営する上で必要となるプラグインの設定や、実際に記事を投稿するまでの流れを、別記事で紹介します。コメントをキャンセルメールアドレスが公開されることはありません。