初心者のためのWordPressの始め方06 [デザイン後編]

In wordpress by カワテ タカヒト

初心者のためのWordPressの始め方05 [デザイン後編]です。

デザイン前編はこちら

8.Featured Links

トップページに特定記事へのバナーを設置する機能です。

メインメニュー下、または記事スライダーの下(記事スライダーを設置した場合)に↓こんな感じに表示されます。

「Featured Links」はトップページに特定記事へのバナーを設置する機能です

1. Featured Links

「 Featured Links」にチェックを入れると Featured Linksが表示されます。

Featured Links

2.Title

画像に被せて表示させる文章を入力します。

3.URL

画面のクリック先記事のURL(アドレス)を入力します。

4.画像

画像を選択します。

Featured Linksまとめ

まだ記事数の少ない今回は Featured Linksのチェックを外しておきます。

9.Blog Page

Blog Page」では、記事一覧ページの設定を行います。
今回使用するテーマ「Savona Classic」ではトップページが記事一覧ページになっていますので、実質トップページの表示設定ということになります。

General

General画面

1.Post Description
「Post Description」では一覧ページに表示される記事の紹介文の長さを設定します。

「Post Description」では一覧ページに表示される記事の紹介文の長さを設定します

Post Excerpt
記事本文が抜粋されて短く表示されます。

Post Contents
記事全文が表示されます。

今回は「Post Excerpt」を選択します。

2.Post Pagination
記事数が多くなり一覧ページが数ページにまたぐ場合のページ送り表示を設定します。

Default

Default

Nameric

Nameric

今回は「Nameric」を選択します。

Post Elements

カテゴリー名や日付、執筆者などの表示・非表示を設定します。

Post Elementsではカテゴリー名や日付、執筆者などの表示・非表示を設定します

各パーツの表示位置は以下の通りです。

Post Elements-各パーツの表示位置

Related Posts Display
記事一覧ページの下に表示される「関連記事へのリンク」の表示・非表示を設定します。

記事一覧ページの下に表示される「関連記事へのリンク」の表示・非表示を設定します

Blog Pageまとめ

今回は、カテゴリー名、日付、ドロッップキャップにチェックを入れます。 「Related Posts Display」は「None」に設定しておきます。

「Related Posts Display」は「None」に設定しておきます

10.Single Page

Single Page」ではブログ個別記事ページの表示設定を行います。

先ほどの「Blog Page」の設定内容と似ていますが「Blog Page」は記事一覧ページ、「Single Page」は個別記事ページの設定になります。

「Blog Page」は記事一覧ページ、「Single Page」は個別記事ページの設定になります

Post Elements

Related Posts - Display

1. Show Categories
カテゴリー名の表示・非表示

2.Show Date
日時の表示・非表示

3.Show Comments
コメントの表示・非表示

4. Show Author
執筆者の表示・非表示

5. Show Author Description
執筆者のプロフィールの表示・非表示

6.Related Posts – Display
記事下に表示される「関連記事リンク」の表示・非表示

Single Pageまとめ

今回はカテゴリー名と日時にチェックを入れ「Related Posts」はRelatedにして表示させます。

カテゴリー名と日時にチェックを入れ「Related Posts」はRelatedにして表示させます

11.Social Media

トップバーに表示させるSNSアイコンの設定を行います。

Social Media

1.Show Social Icons in New Window

チェックを入れるとトップバーにSNSアイコンが表示されます。

2.Select Icon

表示させたいSNSアイコンを選択します。

3.URL

自分のSNSアドレスを入力します。 設定が済むとトップバーにアイコンが表示されます。

設定が済むとトップバーにアイコンが表示されます

12.Page Footer

Page Footer」ではフッターに表示するコピーライトを編集できます。

「Page Footer」ではコピーライトを編集できます

設定は以下の内容をコピーして使ってください。

$copy 2017-$year ここに名前or会社名

$copy=自動でコピーライトアイコンが挿入されます。
$year=現在の年が自動更新されます。

会社名でしたら〇〇Inc. や〇〇 Co.,Ltd.を追加してください。

13.Preloader

Preloader」はページを読み込み中に表示させるアニメーションの表示・非表示を設定できます。

「Preloader」はページを読み込み中に表示させるアニメーションの表示・非表示を設定できます

今回はチェックを外しておきます。

14.ヘッダー画像

ヘッダー画像」ではブログタイトルの背景画像の設定を行います。 タイトルの背景に画像を設定したい場合には「新規画像を追加」を選択し画像をアップロードします。

タイトルの背景に画像を設定したい場合には「新規画像を追加」を選択し画像をアップロードします。

こんな感じ。

おめでたい雰囲気の画像

今回は背景画像は設定しません。

15.メニュー

メニュー」ではMain Navigation(以下メインメニューと呼びます)に表示するリンクを設定します。

menuを配置する位置

デフォルトで「Main Menu」と「Top Menu」2つのメニューが用意されています。メニューとはお問い合わせ・会社概要など他ページへのリンクを一つにまとめたものです。

デフォルトで「Main Menu」と「Top Menu」2つのメニューが用意されています

今回はカテゴリーページへのリンクメニューを新たに作成して、メインメニューに設定してみたいと思います。

ちょっとややこしいですが、イメージとしてはこんな感じです。

メインメニューのイメージ

まずはダッシュボードへ戻り「投稿」→「カテゴリー」を選択。
新規カテゴリー名とスラッグを追加して「新規カテゴリーを追加」を選択。

新規カテゴリー名とスラッグを追加して「新規カテゴリーを追加」を選択

名前欄に入力した文字がそのままリンク名として表示されます。日本語/英語どちらでもOKです。

スラッグはカテゴリーページのURLにも利用されますので必ず英語表記にしてください。 この作業を繰り返してカテゴリーを複数用意します。

今回は「遊び」「お仕事」「読んだ本」「ワードプレス」の4つを用意しました。

今回は「遊び」「お仕事」「読んだ本」「ワードプレス」の4つを用意しました

次にダッシュボードの「外観」→「メニュー」からメニュー編集ページを開きます。 「新規メニューを作成」を選択し「メニュー名」を入力、「メニューを作成」を選択。

「新規メニューを作成」を選択し「メニュー名」を入力し「メニューを作成」を選択

3の「メニュー名」は一般には公開されませんので、自分が区別しやすい名前を入力してください。

続いて同じ画面上の「カテゴリー」→「すべて表示」を選択し、メインメニューに表示したいすべてのカテゴリーにチェックを入れ「メニューに追加」を選択します。

「カテゴリー」→「すべて表示」を選択し、Main Navigationに表示したいすべてのカテゴリーにチェックを入れ「メニューに追加」を選択します

すると右側の「メニュー構造」の中に選択したカテゴリーが移動します。(表示順序を変更したい場合は、カテゴリー名をドラッグ&ドロップすると順序を変更できます)

並び順を確認したら「メニューの位置」にある「Main Menu」にチェックを入れ「メニューを保存」を選択。

「メニューの位置」にある「Main Menu」にチェックを入れ「メニューを保存」を選択

メインメニューに先ほどのカテゴリーページへのリンクが設定されました。

Main Navigationに先ほどのカテゴリーページへのリンクが設定されました

外観」→「カスタマイズ」からメニュー項目に戻ると、新しいメニュー「Myblogメニュー」が追加されています。

新しいメニュー「Myblogメニュー」が追加されています

メニューの位置

メニューの位置」では作成したメニューをメインメニュー以外の場所にも設置することができます。

メニューの位置

すべての位置を表示」を選択します。
今回使用するテーマ「Savona Classic」ではTopMenuとMainMenuの2つの設置場所が用意されているのがわかります。

今回使用するテーマ「Savona Classic」ではTopMenuとMainMenuの2つの設置場所が用意されているのがわかります

例えば「Savona Classic」のデモ画面では「TopMenu」にHOME / ABOUT / CONTACTページへのリンク、「MainMenu」にはFASHION / TRAVEL / TECHなどカテゴリー一覧ページへのリンクが設定されています。

「MainMenu」にはFASHION / TRAVEL / TECHなどカテゴリー一覧ページへのリンクが設定されています

今回はTopMenuには何も設定せずメインメニューのみ表示させます。

今回はTopMenuには何も設定せずMainMenuのみ表示させます

16.ウィジェット

WordPressの便利機能の1つウィジェット。
ブロックを詰み重ねるようにマウス操作だけで便利機能を追加できます。
「ウィジェット」では配置場所と表示・非表示を設定します。

「ウィジェット」では配置場所と機能の表示・非表示を設定します

1.Sidebar Right

コンテンツ右側部分にウィジェット機能を持ったサイドバーを設定できます。

Sidebar Right」を選択します。

「検索」「最近の投稿」と並ぶボックス1つ1つが独立した機能を持ったウィジェットです。 「検索」はサイドバーに検索窓を設置し「最近の投稿」は最近書いたブログ記事を画像付きで指定した数だけ自動で表示します。

「検索」はサイドバーに検索窓を設置し「最近の投稿」は最近書いたブログ記事を画像付きで指定した数だけ自動で表示します

テーマ「Savona Classic」のデモ画面では「プロフィール」や「SNSアイコン」「インスタグラム」などが表示されています。これもウィジェットですが有料のPROバージョンのみ利用できるウィジェットですので、無料版では利用できません。

テーマ「Savona Classic」のデモ画面では「プロフィール」や「SNSアイコン」「インスタグラム」などが表示されています。

ドラッグ&ドロップで簡単に表示順位を入れ替えることができます。

ドラッグ&ドロップで簡単に表示順位を入れ替えることができます

新しいウィジェットを追加してみましょう。
ウィジェットを追加」を選択し、カレンダーをクリックします。

「ウィジェットを追加」を選択し、カレンダーをクリックします

追加されたカレンダーをドラッグ&ドロップで最上部へ移動し「タイトル」に「calendar」と入力して「完了」を選択。

追加されたカレンダーをドラッグ&ドロップで最上部へ移動し「タイトル」に「calendar」と入力して「完了」を選択

サイドバー最上部にカレンダーウィジェットが追加されました。

サイドバー最上部にカレンダーウィジェットが追加されました

最近の投稿ウィジェット」の名前と表示件数を変更してみます。 メニューから「最近の投稿」をクリック。タイトルを「最近書いた記事」に変更します。

メニューから「最近の投稿」をクリック。タイトルを「最近書いた記事」に変更します

サイドバーの名前が「最近書いた記事」に変更されました。

サイドバーの名前が「最近書いた記事」に変更されました

ウィジェットを削除するにはウィジェット設定画面を開いて「削除」を選択します。

ウィジェットを削除するにはウィジェット設定画面を開いて「削除」を選択します

今回は「最近の投稿」「カテゴリー」「アーカイブ」のみを残し他は削除します。

今回は「最近の投稿」「カテゴリー」「アーカイブ」のみを残し他は削除します

2.Sidebar Left

Sidebar Rightとは反対にコンテンツ左側部分にサイドバーを配置します。ウィジェットの設定方法はSidebar Rightと同様です。

Sidebar Rightとは反対にコンテンツ左側部分にサイドバーを配置します

3.Slide Out Sidebar

「Slide Out Sidebar」は普段は隠れていますがメニューボタンから呼び出せる隠れサイドバーです。 「Slide Out Sidebar」にウィジェットを設定するとMain Navigationにボタンが表示されます。

「Slide Out Sidebar」にウィジェットを設定するとMain Navigationにボタンが表示されます

ボタンをクリックするとウィジェットが横からスルッと現れます。

ボタンをクリックするとウィジェットが横からスルッと現れます

「Slide Out Sidebar」を表示させるにはMain Navigation設定画面で「Show Sidebar Icon」にチェックを入れておく必要があります。

「Slide Out Sidebar」を表示させるにはMain Navigation設定画面で「Show Sidebar Icon」にチェックを入れておく必要があります

4.Footer Widgets

Footer Widgets」はブログの最下部にウィジェットを設置します。

フッターウィジェット

今回はすっきりとシンンプルにしたいのでFooterウィジェットは何も設定しない状態にしておきます。

ウィジェットがない状態にしておく

17.ホームページ設定

ホームページ」ではトップに使用するページを選択できます。

最新の投稿

最新の投稿

トップページにブログの一覧を表示します。

固定ページ

固定ページ機能を利用して作ったオリジナルページをトップページとして指定します。

今回は「最新の投稿」を選択しておきます。

18.追加 CSS

「追加CSS」にはスタイルシートと呼ばれるデザインなどを制御する文字列を記入できますが、通常は利用しません。

19.まとめ

お疲れ様でした。

今回オプション設定を済ませたことで、SNSに投稿できるくらいのデザインには仕上がったんじゃないかなと思います。

ブログデザインの確認

次回はWordPressのタイトルに使用する「オリジナルロゴ」の制作方法について解説したいと思います。Photoshopなどの画像ソフトがなくても簡単にオリジナルロゴが作成できるようになりますよ。 こんな感じですね。

ブログタイトル-これをデモのデザインに近づけていきます

この記事が皆様のお役に立てれば幸いです。
また次回のブログでお会いしましょう。

初心者のためのWordPressの始め方

[第1回]  エックスサーバー導入編
[第2回] 初期設定編
[第3回] 記事の投稿 編
[第4回] テーマ変更編
[第5回] デザイン前編
[第6回] デザイン後編