レクチャー形式で連載しています。前回のレクチャーまでで、ウェブサイトのレイアウトやプラグインの設定し、コンテンツを投稿する準備ができたので、今回は、具体的にテーマのインストールからカスタマイズまでどのような設定をおこなったか、実際に制作したウェブサイトを一例に解説していきます。リサ細かいカスタマイズの方法を知りたい方必見です!前回のレクチャーWordPressのおすすめプラグイン20選と設定方法Indexテーマのインストールカラーの設定タイトル・ディスクリプションの設定ロゴの設定レイアウトの設定ヘッダーサイドバーコンテンツ(一覧)コンテンツ(投稿)フッタープラグインの設定まとめテーマのインストールサーバーとドメインを用意し、WordPressを構築したらテーマをインストールしましょう。Note」を制作しました。Note「SANGO」は親テーマと子テーマがあります。通常は「SANGO」の子テーマを使用しますが、すでにカスタマイズされた、有料子テーマである「PORIPU」を使用しました。「PORIPU」は「SANGO」公認の子テーマです。インストールすることで「SANGO」のビジュアルや機能のカスタマイズが実装できます。通常版」が3,980円ですが、カスタマイズにかかる手間や時間を短縮できるのはそれ以上の価値があります。通常の手順で「SANGO」と「PORIPU」をインストールし、「PORIPU」を有効化しましょう。リサウェブサイトをつくることが目的ではなく、運営することが目的ですからね!プログラミングの技術や知識がないので、カスタマイズは難しそう・・・それよりも早くウェブサイトを公開して運用していきたい、という方におすすめです。ThemePORIPU-SANGO公認の子テーマカラーの設定テーマのインストールが完了したら、ウェブサイト全体のレイアウトを設定していきましょう。ここからは、WordPressの管理画面のメニューにある「外観」で作業をおこなっていきます。Dr.TD外観から「カスタマイズ」ボタンをクリックすると、ウェブサイトのカスタマイズ画面が表示されます。ここではテーマとしてカスタマイズできる項目を設定できます。親テーマの「SANGO」のカスタマイズ設定に加えて、「PORIPU」のカスタマイズ設定をおこなえまます。こちらのカスタマイズ設定は、初心者にもわかりやすく設定がおこなえるので活用していきましょう。「色」をクリックします。「色」をクリックすると、メインカラーやアクセントカラーなど、ウェブサイトで使用するカラーを設定することができます。「色の選択」をクリックすると、カラーコードを入力するボックスが表示されますので、指定のカラーコードを入力しましょう。ウェブの世界には色々なカラーの指定方法がありますが、ここでは16進数で表記されるコードを使います。カラーコードを入力すると、このようにウェブサイトのトップページのカラーが変更されます。Note」では、以下のカラーコードを設定しました。Note」は、私の好きな黄色をアクセントカラーにして、メインカラーとサブカラーは、黄色の補色となる青系統や紫系統の色にしました。カラーは、あまり使いすぎず、メインカラー、サブカラー、アクセントカラーの3種類くらいにしておくとバランスがいいですよ。ウェブサイトの配色の割合としては、それぞれ70%、20%、10%が目安となります。Dr.TDタイトル・ディスクリプションの設定タイトルとディスクリプションは、カスタマイズ画面の「サイトの基本設定」内にある、「基本情報とロゴの設定」よりおこないます。Note」を入力しました。「キャッチフレーズ」の文章は、ウェブサイトに反映されず、検索結果のタイトルの横に表示されます。Note」が、映画に関するウェブサイトだとユーザーに伝わるように、「映画の再発見。」をキャッチフレーズにしました。続いて、ディスクリプションを「サイトの詳しい説明(100字以内推奨)」で設定します。ディスクリプションは、キャッチフレーズ同様、ウェブサイト内ではなく検索結果に表示されます。Note」では、どのようなコンテンツを発信しているのかわかるような文章を作成しました。「タイトル」と「キャッチフレーズ」、「サイトの詳しい説明(100字以内推奨)」は検索結果にこのように表示されます。実際に検索すると、このように表示されます。ウェブサイトをはじめるために決めておきたい15のポイント:タイトルとディスクリプションリサタイトルだけでなく、ディスクリプションの決定も大切なんですね。ウェブサイトにおいて、タイトルは企業名やブランド名、ディスクリプションは、企業やブランドのキャッチコピーと同等の価値がありますので、慎重に決めましょう。Dr.TDロゴの設定タイトルとディスクリプションの設定が完了したら、ロゴを設定しましょう。ロゴマークには、「シンボルマーク」と「ロゴタイプ」の2種類があります。シンボルマークは、企業やブランドのテーマやコンセプト、名前をイメージしてデザインされたイラストのことをいい、ロゴタイプは、企業名やブランド名をデザインした文字のことをいいます。ロゴタイプとシンボルマークを組み合わせたものを、「ロゴマーク」といいます。今回は、シンボルマークは自作し、ロゴタイプは自作はせずテキストを利用しました。ロゴタイプは、テキストをそのまま利用してシンプルなデザインにするのもいいですし、ゼロからデザインしてオリジナリティのあるデザインにするのもいいでしょう。Note」のタイトルにちなんで、フィルムとノートをモチーフにデザインしました。ロゴマークは、ウェブサイトのテーマやコンセプト、タイトル、ウェブサイトの配色を配慮しながら作成しましょう。一緒に並べることも多いので、お互いに調和性のあるデザインを意識すると、よりユーザーに好印象です。Dr.TDロゴが決まったら、実際にウェブサイトに反映させていきましょう。カスタマイズ画面内の「サイトの基本設定」内にある、「基本情報とロゴの設定」をクリックします。クリックすると、ウェブサイトのタイトルやロゴの設定がおこなえる画面が表示されます。こちらは先ほど、タイトルやディスクリプションを設定したメニューですね。ロゴタイプをウェブサイトに反映させる場合は、「ロゴ画像を登録」をクリックし、アップロードした画像を選択します。アップロードが完了すると、ウェブページの左上にロゴタイプが表示されるようになります。Note」のロゴタイプはテキストなので、アップロードしていません。シンボルマークをウェブサイトに反映させる場合は、「サイトアイコン」をクリックし、アップロードした画像を選択します。ブラウザのタブやブックマークバーにシンボルマークが表示されるようになります。推奨されたサイズでのアップロードをしましょう。ウェブサイトをはじめるために決めておきたい15のポイント:ロゴマーク(アイコン)レイアウトの設定ウェブサイトのレイアウトの重要性と設定方法ロゴ、カラーの設定が完了したら、ウェブサイトのレイアウトを設定しましょう。レイアウトの設定は、ウェブサイト制作の中でも重要なポイントです。適切なレイアウトを設定することで、ウェブサイトを訪れたユーザーに、コンテンツを正しく伝えることができます。コンテンツを正しくユーザーに伝えるレイアウトは、継続的にウェブサイトを訪れてくれるファンを獲得することにもつながりますので、ていねいに設定していきましょう。ヘッダーヘッダーは、メニューを配置するレイアウトが主流です。Note」でも、ヘッダーにはメニューを配置しました。テーマによっては、バナーを表示できたり、ウィジェットエリアになっているものもあります。Dr.TDヘッダーの設定は、管理画面のメニューにある「外観」内の「メニュー」からおこないます。ヘッダーメニューは、プロフィール、映画のジャンル、年代、評価、まとめ記事と、固定ページ、カテゴリー、タグを網羅したメニューを表示させました。編集するメニューは、ヘッダーなら「header-menu」、フッターなら「footer-menu」と、わかりやすい名前にしておくと、管理しやすくなります。Dr.TDウェブサイトのレイアウトの重要性と設定方法:ヘッダーメニューの項目を入れ子にし、副項目することで、メニューのタイトルにカーソルをおくと、プルダウンして詳細が表示されるように設定しました。Dr.TDリサカテゴリーやタグが多い場合、副項目を使用すると、メニューの表示をすっきりさせられます。「SANGO」のトップページのサイドバーは、2カラムで固定されています。(ただし、下層ページは1カラムに設定可能。)サイドバーそのものを左側に移動させたり、非表示にすることはできませんが、サイドバーに表示される項目を変更することはできます。サイドバーはトップページだけでなく、下層ページにも表示されます。下層ページでは、トップページのサイドバーに加えて、「追尾サイドバー」というパーツが表示されます。追尾サイドバーはスクロールしても、常にサイドバー部分に表示されるレイアウトのパーツです。サイドバーと追尾サイドバーに表示される要素は、管理画面のメニューにある「外観」内の「ウィジェット」で設定ができます。Note」のトップページのサイドバーには、検索、プロフィール、メニュー、今日の人気記事一覧を表示させています。サイドバーには目次を表示させています。ウィジェットにはさまざまな種類があります。「検索」や「ナビゲーションメニュー」は基本要素としてWordPressに備わっています。サイドバーのプロフィールですが、「カスタムHTML」というウィジェットを使用することで設定できます。HTMLを表示できるウィジェットになります。プロフィールを表示させるためのHTMLを作成するのは面倒ですが、幸いなことに「SANGO」のカスタマイズガイドに参考コードがありました。SANGOカスタマイズガイドSANGOカスタマイズガイドHTMLコードをコピーして、★の部分を書き換えてペーストするだけで、プロフィールをサイドバーに表示することができます。Posts」というプラグインを使用して表示しています。インストールすると、ウィジェットに表示されるので、設定しましょう。Posts」を設定しました。複数の設定項目があり、あらゆるカスタマイズが可能です。画像と同じように設定していけば、「SANGO」のデザインにマッチして表示されます。マークアップ設定」でHTMLを入力する必要があるので、コピー&ペーストして使ってください。下層ページには、カテゴリー別の人気記事一覧も表示させました。これは、ゼロからカスタマイズすると初心者にはすごく大変なのですが、「PORIPU」をインストールすることによって、ウィジェットにかんたんに表示させることができます。サイドバーはトップページも共通のパーツになりますので、トップページでは表示させないための設定が必要になります。Options」というプラグインをインストールすることで、ウィジェットの表示に関して細かく設定が行えるようになります。今回はブログページのみ表示するように設定しました。Plus」というプラグインをインストールします。Plus」をインストールすると「TOC+」というウィジェットが表示されるので、設定しましょう。ウェブサイトのレイアウトの重要性と設定方法:サイドバーサイドバーのカスタマイズは自由度が高いので、いろいろ試してみましょう。Dr.TDコンテンツ(一覧)コンテンツの表示は、カスタマイズ画面内の「デザイン・レイアウト設定」内の「記事一覧レイアウト」から設定します。デフォルトでは、画像のように、投稿したコンテンツがカード形式に一覧で表示される設定になっています。「SANGO」ではこの他に、表示されるカードを横長にすることができます。「記事一覧レイアウト」をクリックすると、コンテンツの表示方法が設定できます。「【PC】トップページの記事一覧カードを横長にする」にチェックを入れると、画像のように一覧で表示されるカードが横長になります。Note」では、デフォルトの表示で設定しました。スマートフォンでのコンテンツの表示は、PCと同じくカード形式で表示されます。スマートフォンで同様の設定をする場合は、下にある「【モバイル】トップページの記事一覧カードを横長にする」にチェックを入れましょう。カスタマイズ画面の左下にあるデバイスのアイコンをクリックすると、PCのディスプレイでタブレットやスマートフォンでの表示を確認することができます。Dr.TD「PORIPU」の機能として、コンテンツを表示するカードの右下にSNSでのシェア数を表示させることができます。Cache」というプラグインをインストールする必要があります。表示させるには、カスタマイズ画面の「PORIPUの設定」にある、「PORIPU:ページ設定」をクリックし、「SNSカウントを記事一覧に表示する」にチェックを入れます。リサシェア数が確認できると、コンテンツに対してどのくらい反応があったのかわかるので、その後のコンテンツ制作の参考になりますよね!カスタマイズ画面の「ヘッダーお知らせ欄」では、ヘッダーの下の部分にお知らせを表示させることができます。常にトップページに表示されるので、キャンペーンやイベントの開催など、ユーザーに注目してほしい情報を発信しましょう。Note」では、常時開催しているムビチケのプレゼントキャンペーンについて入力しました。ヘッダーお知らせ欄にはURLを貼りつけることもできるので、入力した文章に関連するページがある場合はURLを入力しておきましょう。背景色や文字色も設定ができます。背景色は2色設定することで、グラデーションにすることができます。ヘッダーがアクセントカラーなので、メインカラーとサブカラーを参考にカラーの設定をしました。「ヘッダーお知らせ欄」の下には、「記事一覧タブ」を4つまで表示させることができます。カスタマイズ画面の「記事一覧タプ切替機能(トップページ)」から設定をおこないます。「記事一覧タブ」はタブを作成し、「トップページの記事一覧でタブ切り替えを有効にする」にチェックを入れると、表示されるようになります。1番目のタブには、新着記事一覧が表示される設定になっているので、残りの3つのタブに「私のオススメ映画」、「五つ星映画」、「まとめ」を作成しました。タイトルを作成し、表示させしたいカテゴリー、もしくはタグを指定します。「記事一覧タブ」はタブを作成し、「トップページの記事一覧でタブ切り替えを有効にする」にチェックを入れると、表示されるようになります。1番目のタブには、新着記事一覧が表示される設定になっているので、残りの3つのタブに「私のオススメ映画」、「五つ星映画」、「まとめ」を作成しました。タイトルを作成し、表示させしたいカテゴリー、もしくはタグを指定します。タブは、2つ、もしくは4つの偶数になるように作成しましょう。Dr.TD「記事一覧タブ」は、カラーの設定もできます。タブの背景色が設定できますので、ウェブサイトのカラーを意識して設定しましょう。選択中のタブの背景色は2色設定することで、グラデーションにすることができます。「ヘッダーお知らせ欄」と同様に、メインカラーとサブカラーを参考にグラデーションを設定しました。コンテンツの下部には、「トップに戻るボタン」を表示させました。このボタンをクリックすると、ページのトップへと画面が移動します。スクロールしてページトップに戻る手間が省けるので、レビューや感想、旅行記など、文章量が多いコンテンツを投稿する場合、表示させておくと便利です。ボタンの表示は、カスタマイズ画面の「SANGOオリジナル機能の管理」内の「トップへ戻るボタン」から設定できます。PCとモバイル用の設定があり、それぞれ「トップへ戻るボタンを表示する」をチェックすると、ボタンが表示されるようになります。色の設定もおこなえます。ヘッダーとフッターと同様のカラーにすると、統一感が出るのでおすすめですよ。Note」のように、カテゴリーやタグが多い場合は、「記事一覧タブ」が便利ですね!コンテンツ(投稿)続いて、投稿されたコンテンツページのレイアウトの設定を見ていきましょう。コンテンツページのレイアウトの多くは、カスタマイズ画面の「SANGOオリジナル機能の管理」から設定をおこないます。SNSのシェアボタンや関連記事、おすすめ記事の表示の設定や変更ができます。タイトルの下には、SNSのシェアボタンを表示することができます。通常のシェアボタンは、「Twitter」、「Facebook」、「はてなブックマーク」、「Google+」、「Pocket」、「LINE」の6つのSNSへのシェアボタンが表示されます。シェアアイコンは、「タイトル下にシェアボタンを並べて表示」をチェックすることで表示されます。inc.」では、タイトル下のシェアボタンを非表示にして、アイキャッチと円形シェアボタンを表示させるように設定しています。「記事タイトル下の円形シェアボタンにテキストを含め、横長ボタン化する」のみにチェックを入れると、「SHARE」の文字が入ったボタンが表示されます。「シェアボタンを別デザインにする」にチェックを入れると、画像のように通常のシェアボタンのデザインと異なり、グレーの背景の上に小さいサイズのシェアボタンが表示されるようになります。Note」では、通常のデザインの方がコンテンツページに馴染んでいるため、通常のデザインのままにしました。シェアボタンと円形シェアボタンは、どちらもSNSでの拡散を目的とした機能なので、どちらか片方だけを表示させればOKです。Dr.TDコンテンツ下にあるシェアボタンの下に、「フォローボックス」を表示させることができます。フォローボックスは、アイキャッチ画像の下に自分が持っているSNSのアカウントを表示できるカスタマイズ機能です。表示できるSNSのアカウントは、「Twitter」、「Facebook」、「Feedly」、「Instagram」の4つです。Note」はInstagramのアカウントがないので、それ以外の3つのアカウントを表示させるように設定しました。Me!」と書かれていますが、この文字は変更することができます。空欄でもいいですし、目を引くようなキャッチーなキーワードを入れるのもいいでしょう。コンテンツの下には、「関連記事」を表示することができます。関連記事を表示させることで、他のコンテンツを読んでもらう機会が増え、ウェブサイトの滞在時間や回遊率アップにつなげることができます。関連記事には「タイプA」、「タイプB」、「タイプC」の3種類があります。カスタマイズ画面で反映させながら、自分のウェブサイトのデザインに合うタイプを選びましょう。Note」は関連記事広告と差別化するために、立体感のあるデザインの「タイプB」を選びました。関連記事の下には、「プロフィールボックス」が表示されています。これは、管理画面の「ユーザー」内にある「あなたのプロフィール」で設定することができます。「あなたのプロフィール」でサイト、肩書き、各SNSのURL、プロフィール情報、プロフィール写真を入力すると、自動的にコンテンツページの関連記事の下に表示されるようになります。どんな人がコンテンツを作成しているのか、ユーザーに対してだけでなくGoogleへの信頼性を上げるためにもプロフィールの作成はおすすめです。リサこれで、コンテンツを投稿する準備が整いましたね!広告やHTMLタグなどの説明は、今後詳しくレクチャーしていきます。MAP」を、その上の「フッターウィジェット」エリアに、サイドバーと同じような要素を配置しました。最下部のメニューは、管理画面の「外観」内にある「メニュー」で設定をおこないます。MAP」を追加しました。続いて、管理画面の「外観」内にある「ウィジェット」でサイドバーと同じ要素をフッターにも設定します。「フッターウィジェット左」には人気記事一覧、「フッターウィジェット中」には最近の投稿記事一覧、「フッターウィジェット右」には検索、カテゴリー、タグクラウドを配置しました。Note」はタグが膨大なので、カテゴリーを表示しています。Note」とキャッチコピーの「映画を再発見。」が表示されていますが、これは子テーマの「PORIPU」のカスタマイズで設定することができます。カスタマイズ画面の「PORIPUの設定」内にある「PORIPU:ページ設定」クリックすると、「フッターにロゴを表示する」という項目があるので、チェックを入れます。すると、フッターのメニューの上に、ロゴとキャチフレーズが表示されるようになります。「フッターにロゴを表示する」にチェックを入れない場合、メニューの上に「HOME」と表示されるようになります。ウェブサイトのレイアウトの重要性と設定方法:フッターリサこれで、レイアウトのカスタマイズはほぼ完成ですね!あとはプラグインの設定をおこないましょう!Dr.TDプラグインの設定WordPressのおすすめプラグイン20選と設定方法WordPressに機能を追加したり、拡張するための外部ツールを「プラグイン」と呼びます。WordPressは、多くの人が柔軟に活用するために、WordPressのシステムそのものはシンプルに設計されています。そのため、ウェブサイトに実装したい機能やデザインをWordPressにカスタマイズするには、プラグインをインストールする必要があります。プラグインの追加や設定は、管理画面のメニュー内の「プラグイン」よりおこないます。Note」でインストールしたプラグインは、こちらになります。Modeインストールしたプラグインは、コンテンツ制作で役立つプラグインから、運用面で役立つプラグインまでさまざまあります。リサプラグインはたくさんあるんですね。プラグインはたくさん種類がありますが、インストールしすぎると、ウェブサイトが重くなったり、管理が大変になったりと、かえってマイナスになることもあるので、必要なプラグインを、最小限選ぶようにしましょう。Dr.TDまとめカラーやウィジェットなどのレイアウトからプラグインまで、細かい設定を完了させたウェブサイトがこちらになります。WordPressのテーマを利用すると、初心者でもこれだけ本格的なウェブサイトを制作することができますよ。今回紹介したカスタマイズの他にも、HTMLやCSSを使った細かいカスタマイズをおこなっていますが、基本的にはカスタマイズ画面とプラグインとウィジェットを使うだけでウェブサイトを自分好みにカスタマイズすることができます。ウェブサイトがほとんどできあがったので、次のステップとして、コンテンツを作成し、ウェブサイトをより充実させていきましょう。次回は、WordPressでのコンテンツの投稿の方法をレクチャーしたいと思います。リサようやくウェブサイトが完了しました〜!嬉しいですね!お疲れ様です!しかし、ウェブサイトは制作したら終わりではありませんよ!次はコンテンツの投稿の方法をレクチャーしますね。コメントをキャンセルメールアドレスが公開されることはありません。Literacy.」をスローガンに価値を創造するベンチャー企業です。コンサルティングなどを中心に幅広く活動中。