初心者のためのWordPressの始め方05 [デザイン後編]です。
今回のコンテンツ
8.Featured Links
トップページに特定記事へのバナーを設置する機能です。
メインメニュー下、または記事スライダーの下(記事スライダーを設置した場合)に↓こんな感じに表示されます。
1. Featured Links
「 Featured Links」にチェックを入れると Featured Linksが表示されます。
2.Title
画像に被せて表示させる文章を入力します。
3.URL
画面のクリック先記事のURL(アドレス)を入力します。
4.画像
画像を選択します。
Featured Linksまとめ
まだ記事数の少ない今回は Featured Linksのチェックを外しておきます。
9.Blog Page
「Blog Page」では、記事一覧ページの設定を行います。
今回使用するテーマ「Savona Classic」ではトップページが記事一覧ページになっていますので、実質トップページの表示設定ということになります。
General
1.Post Description
「Post Description」では一覧ページに表示される記事の紹介文の長さを設定します。
Post Excerpt
記事本文が抜粋されて短く表示されます。
Post Contents
記事全文が表示されます。
今回は「Post Excerpt」を選択します。
2.Post Pagination
記事数が多くなり一覧ページが数ページにまたぐ場合のページ送り表示を設定します。
[x_icon type=”angle-double-right”] Default
[x_icon type=”angle-double-right”] Nameric
今回は「Nameric」を選択します。
Post Elements
カテゴリー名や日付、執筆者などの表示・非表示を設定します。
各パーツの表示位置は以下の通りです。
Related Posts Display
記事一覧ページの下に表示される「関連記事へのリンク」の表示・非表示を設定します。
Blog Pageまとめ
今回は、カテゴリー名、日付、ドロッップキャップにチェックを入れます。 「Related Posts Display」は「None」に設定しておきます。
10.Single Page
「Single Page」ではブログ個別記事ページの表示設定を行います。
先ほどの「Blog Page」の設定内容と似ていますが「Blog Page」は記事一覧ページ、「Single Page」は個別記事ページの設定になります。
Post Elements
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にして表示させます。
11.Social Media
トップバーに表示させるSNSアイコンの設定を行います。
1.Show Social Icons in New Window
チェックを入れるとトップバーにSNSアイコンが表示されます。
2.Select Icon
表示させたいSNSアイコンを選択します。
3.URL
自分のSNSアドレスを入力します。 設定が済むとトップバーにアイコンが表示されます。
12.Page Footer
「Page Footer」ではフッターに表示するコピーライトを編集できます。
設定は以下の内容をコピーして使ってください。
[code]$copy 2017-$year ここに名前or会社名[/code]$copy=自動でコピーライトアイコンが挿入されます。
$year=現在の年が自動更新されます。
会社名でしたら〇〇Inc. や〇〇 Co.,Ltd.を追加してください。
13.Preloader
「Preloader」はページを読み込み中に表示させるアニメーションの表示・非表示を設定できます。
今回はチェックを外しておきます。
14.ヘッダー画像
「ヘッダー画像」ではブログタイトルの背景画像の設定を行います。 タイトルの背景に画像を設定したい場合には「新規画像を追加」を選択し画像をアップロードします。
こんな感じ。
今回は背景画像は設定しません。
15.メニュー
「メニュー」ではMain Navigation(以下メインメニューと呼びます)に表示するリンクを設定します。
デフォルトで「Main Menu」と「Top Menu」2つのメニューが用意されています。メニューとはお問い合わせ・会社概要など他ページへのリンクを一つにまとめたものです。
今回はカテゴリーページへのリンクメニューを新たに作成して、メインメニューに設定してみたいと思います。
ちょっとややこしいですが、イメージとしてはこんな感じです。
まずはダッシュボードへ戻り「投稿」→「カテゴリー」を選択。
新規カテゴリー名とスラッグを追加して「新規カテゴリーを追加」を選択。
名前欄に入力した文字がそのままリンク名として表示されます。日本語/英語どちらでもOKです。
スラッグはカテゴリーページのURLにも利用されますので必ず英語表記にしてください。 この作業を繰り返してカテゴリーを複数用意します。
今回は「遊び」「お仕事」「読んだ本」「ワードプレス」の4つを用意しました。
次にダッシュボードの「外観」→「メニュー」からメニュー編集ページを開きます。 「新規メニューを作成」を選択し「メニュー名」を入力、「メニューを作成」を選択。
3の「メニュー名」は一般には公開されませんので、自分が区別しやすい名前を入力してください。
続いて同じ画面上の「カテゴリー」→「すべて表示」を選択し、メインメニューに表示したいすべてのカテゴリーにチェックを入れ「メニューに追加」を選択します。
すると右側の「メニュー構造」の中に選択したカテゴリーが移動します。（表示順序を変更したい場合は、カテゴリー名をドラッグ&ドロップすると順序を変更できます）
並び順を確認したら「メニューの位置」にある「Main Menu」にチェックを入れ「メニューを保存」を選択。
メインメニューに先ほどのカテゴリーページへのリンクが設定されました。
「外観」→「カスタマイズ」からメニュー項目に戻ると、新しいメニュー「Myblogメニュー」が追加されています。
メニューの位置
「メニューの位置」では作成したメニューをメインメニュー以外の場所にも設置することができます。
「すべての位置を表示」を選択します。
今回使用するテーマ「Savona Classic」ではTopMenuとMainMenuの2つの設置場所が用意されているのがわかります。
例えば「Savona Classic」のデモ画面では「TopMenu」にHOME / ABOUT / CONTACTページへのリンク、「MainMenu」にはFASHION / TRAVEL / TECHなどカテゴリー一覧ページへのリンクが設定されています。
今回はTopMenuには何も設定せずメインメニューのみ表示させます。
16.ウィジェット
WordPressの便利機能の1つウィジェット。
ブロックを詰み重ねるようにマウス操作だけで便利機能を追加できます。
「ウィジェット」では配置場所と表示・非表示を設定します。
1.Sidebar Right
コンテンツ右側部分にウィジェット機能を持ったサイドバーを設定できます。
「Sidebar Right」を選択します。
「検索」「最近の投稿」と並ぶボックス1つ1つが独立した機能を持ったウィジェットです。 「検索」はサイドバーに検索窓を設置し「最近の投稿」は最近書いたブログ記事を画像付きで指定した数だけ自動で表示します。
テーマ「Savona Classic」のデモ画面では「プロフィール」や「SNSアイコン」「インスタグラム」などが表示されています。これもウィジェットですが有料のPROバージョンのみ利用できるウィジェットですので、無料版では利用できません。
ドラッグ&ドロップで簡単に表示順位を入れ替えることができます。
新しいウィジェットを追加してみましょう。
「ウィジェットを追加」を選択し、カレンダーをクリックします。
追加されたカレンダーをドラッグ&ドロップで最上部へ移動し「タイトル」に「calendar」と入力して「完了」を選択。
サイドバー最上部にカレンダーウィジェットが追加されました。
最近の投稿ウィジェット」の名前と表示件数を変更してみます。 メニューから「最近の投稿」をクリック。タイトルを「最近書いた記事」に変更します。
サイドバーの名前が「最近書いた記事」に変更されました。
ウィジェットを削除するにはウィジェット設定画面を開いて「削除」を選択します。
今回は「最近の投稿」「カテゴリー」「アーカイブ」のみを残し他は削除します。
2.Sidebar Left
Sidebar Rightとは反対にコンテンツ左側部分にサイドバーを配置します。ウィジェットの設定方法はSidebar Rightと同様です。
3.Slide Out Sidebar
「Slide Out Sidebar」は普段は隠れていますがメニューボタンから呼び出せる隠れサイドバーです。 「Slide Out Sidebar」にウィジェットを設定するとMain Navigationにボタンが表示されます。
ボタンをクリックするとウィジェットが横からスルッと現れます。
「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回] デザイン後編
