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

In wordpress by カワテ タカヒト

こんにちは、カワテです。

初心者のためのWordPressの始め方5回目の今日は、前回 インストールしたテーマ「Savona Classic」のデザイン全般を調整したいと思います。

今回は設定する項目が多く長丁場になりますが頑張ってお付き合いください。

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

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

はじめに

現在、トップページはこのような状態です。

ブログデザインの確認

これをデモデザインに近づけていきます。
こんな感じですね。

Savona classic

まずはダッシュボードメニュー「外観」→「カスタマイズ」を選択。
(テーマページの「カスタマイズ」からもいけます)

ダッシュボードメニュー「外観」→「カスタマイズ」を選択

設定できる項目は全部で18あります。

設定できる項目は全部で18あります

1.About Savona

テーマ「Savona」の解説ページです。

テーマ「Savona」の解説ページ

1.GetSavona Pro

テーマの有料バージョン購入ページへのリンク

2.Documentation

savona Classicのチュートリアル(解説)ページへのリンク

3.Demo Content

デモデザインをダウンロードしてブログに適用できます。
今回はデモは利用しません。

すべて英語で書かれてますので読みづらいですね。前回のブログ  で紹介したGoogle翻訳機能を使って日本語にしましょう。

関連記事  Google翻訳を使って海外のWordPressテーマを日本語で使う方法

About Savonaページを開いた状態で、ツールバーより「Google翻訳」のアイコンをクリック。「このページを翻訳」を選択。

Google翻訳機能を使って日本語にしましょう

日本語に翻訳されました。

日本語に翻訳されました

2.Colors

Colorsではブログの色に関する設定を行います。

General

Colorsではブログの色に関する設定を行います

1.Accent
アクセントはカテゴリー名やボタンの色を変更できます。

アクセントはカテゴリー名やボタンの色を変更できます

2.ヘッダーテキスト色
ブログのタイトル色を変更できます。
(ここではわかりやすいよう背景色を青に変更してあります)

ブログのタイトル色を変更できます

3.Header Background Color
ブログタイトルの背景色を変更します。
(一般的にタイトル部分のことをヘッダーと呼びます)

ブログタイトルの背景色を変更します

4.Body Background Color
ブログの背景色を変更します。

ブログの背景色を変更します

Body Background

背景に画像を設定します。

背景に画像を設定します

色を初期設定に戻す

カラーを初期設定に戻したい場合には「デフォルト」ボタンを選択します。

カラーを初期設定に戻したい場合には「デフォルト」ボタンを選択します

PCアイコンについて

パソコンなど広い画面で表示した場合にメニュー下部にPC、タブレット、スマホのアイコンが表示されます。アイコンをクリックとそれぞれのデバイスでの見え方が確認できます。

パソコンなど広い画面で表示した場合にメニュー下部にPC、タブレット、スマホのアイコンが表示されます。アイコンをクリックとそれぞれのデバイスでの見え方が確認できます

COLORSまとめ

今回は色を変更せず、初期設定のままで利用します。

今回は色を変更せず初期設定のままで利用します

3.General Layouts

General Layouts」ではブログの横幅に関する設定を行います。

General

サイドバーの横幅を設定します

1.Sidebar Width
サイドバーの横幅を設定します。

サイドバーの横幅を設定します

2.Enable Sticky Sidebar
「Enable Sticky Sidebar」にチェックを入れると画面をスクロールした際にサイドバーが一緒にスクロールします。チェックを外すと上部に固定されたままになります。

Boxed Controls

Boxed Controls」ではパーツごとに横幅を設定できます。

「Boxed Controls」ではパーツごとに横幅を設定できます

1.Header Width
タイトル周りの横幅。

2.Featured Slider Width
次の項目で出てくるトップページ用スライダー画像の横幅。

3.Featured Links Width
ブログ記事下に表示される「最近の投稿」や「おすすめの投稿」などの横幅。

4.Content Width
トップページや固定ページでの本文・サイドバーを含むコンテンツ部分の横幅。

5.Single Content Width
ブログ記事ページでの本文・サイドバーを含むコンテンツ部分の横幅。

6.Footer Width
ページ最下部の「フッター」の横幅。

FULLとBOXEDの違いについて

FULL
数値を「FULL」に設定すると画面上の要素がブラウザ幅いっぱいまで広がります。

数値を「FULL」に設定すると画面上の要素がブラウザ幅いっぱいまで広がります。

BOXED
数値を「BOXED」に設定すると画面上の要素は指定された幅で固定され伸縮しません。

数値を「BOXED」に設定すると画面上の要素は指定された幅で固定され伸縮しません

Contained
背景を「FULL」の状態にしたまま、テキストなどの要素は「BOXED」の幅に収めます。

General Layoutsまとめ

今回は初期設定のまま、下記のように設定しておきます。

ここでは初期設定のまま設定しておきます。

4.Top Bar

ヘッダー上部にメニューやSNSアイコンを表示可能な「トップバー」の表示・非表示を設定します。今回はチェックを入れてトップバーを表示させます。

ヘッダー上部にメニューやSNSアイコンを表示可能な「トップバー」の表示・非表示を設定します

5.サイト基本情報

「サイト基本情報」では、ブログタイトル・ファビコンの設定を行います。

Logo Setup

「Logo Setup」ではタイトル・キャッチコピーの変更に加え、ロゴの設定を行います。

「Logo Setup」ではタイトル・キャッチコピーの変更に加え、ロゴの設定を行います。

ロゴ
ブログのタイトルを「私のブログ」→「 MyBlog」に変更してみました。 しかし、文字サイズが大きくしっくり来ません。そんな時にはタイトルをテキストから画像に変更しましょう。

「サイトのタイトル」を画像に変更しましょう。タイトル画像を作成して「Width」でサイズを変更できます。

詳しいロゴの作り方については次回のブログでご紹介したいと思いますが、今回はフリーアイコンをダウンロードしてシンプルなロゴを作ってみました。

フリーアイコンをダウンロードしてシンプルなログを作ってみました。

作ったロゴ。

ブログタイトル

ロゴ画像が完成したら「ロゴを選択」を選択。

ロゴ画像が完成したら「ロゴを選択」を選択。

作成したロゴをメディアファイルへアップロードし「選択」をクリック。

作成したロゴをメディアファイルへアップロードし「選択」をクリック。

切り抜き範囲を調整して「画像切り抜き」を選択。

切り抜き範囲を調整して「画像切り抜き」を選択。

画像サイズを少し小さくしたいので「Width」を250にします。 キャッチフレーズも変更しておきます。

画像サイズを少し小さくしたいので「Width」を250にします。

ブログタイトルが画像に変更されました。
キャッチフレーズも反映されています。

ブログタイトルが画像に変更されました。

ロゴの作成が難しい方はとりあえずテキストのままにしておいてください。
次回のブログでロゴの作成方法について解説します

Favicon

ファビコンとはブラウザの検索窓やブックマーク時に表示される小さなアイコンです。

ファビコンとはブラウザの検索窓やブックマーク時に表示されるタイトル横の小さなアイコンです。

ファビコンが表示された様子

今回は無料のアイコン素材を使用してシンプルなファビコンを作ってみましょう。

まずはここ  から好きなアイコンを探してサイズを512px、好きなカラーに変更して、PNG形式を選択し保存します。

好きなカラーに変更して、PNG形式を選択し保存します。

サイトアイコンから「画像を選択」を選択。

サイトアイコンから「画像を選択」を選択

ファイルをアップロード」を選択し「ファイルを選択」をクリック。

「ファイルをアップロード」を選択し「ファイルを選択」をクリック

先ほどダウンロードしたアイコンを選択してアップロードしたら「代替えテキスト」に説明文を入れてから「選択」を選択。

先ほどダウンロードしたアイコンを選択してアップロードしたら「代替えテキスト」に説明文を入れてから「選択」を選択

ファビコンが設定されました。

ファビコンが設定されました

最後に「公開」を選択し、設定内容を確定させます。

公開を選択し、設定内容を確定させます

6.Main Navigation

Main Navigation」ではメインメニューの設定を行います。
現在はまだメニューが設定されていませんのでメインメニューはこんな状態です。

現在はまだメニューが設定されていませんのでメインメニューはこんな状態

メニューを設定することでデモ画像のように他のページへのリンクを掲載することができます。 (※メニューの設定は後ほど行います)

デモ画像のように他のページへのリンクを掲載することができます

Main Navigation

「Main Navigation」ではメインメニューの設定を行います

1. Main Navigation
チェックを外すとメインメニューを非表示にできます。今回はチェックを入れておきましょう。

2.Align
「Align」はメニュー項目の横位置を設定します。

「Align」はメニュー項目の横位置を設定します。

3.Show Search Icon
チェックを入れるとメインメニューに検索アイコンを表示します。

チェックを入れるとメインメニューに検索アイコンを表示します。

4.Show Sidebar Icon
チェックを入れると左端に別窓で「サイドバー」を表示されることができます。

サイドバーの表示画像

※サイドバーの設定はこのあと行います。

Main Navigationまとめ

今回は「Search Icon」と「Sidebar Icon」のチェックを外しておきます。

今回は「Search Icon」と「Sidebar Icon」のチェックを外しておきます

7.Featured Slider

Featured Slider」とは、トップページにブログ記事をスライド形式で表示させることのできる機能です。

「Featured Slider」とは、トップページにブログ記事をスライド形式で表示させることができる機能です

Featured Slider

Featured Slider

1. Featured Slider
チェックをいれるとトップページに記事スライダーが表示されます。

2.Display Posts
「ALL Posts」を選択すると日付の新しいブログから順に表示されます。
「by Post Category」を選択すると選択したカテゴリーの記事のみを表示させることができます。

「by Post Category」を選択すると選択したカテゴリーの記事のみを表示させることができます

3.Number of Slides
記事スライダーに掲載する記事数を選択できます。

4. Show Navigation Arrows
記事スライダーのサイドに矢印リンクを表示します。

5.Show Pagination Dots
記事スライダー下部に丸ボタンリンクを表示します。

今回はFeatured Sliderは使いませんので、チェックを外しておきます。

前半戦はここまで

お疲れ様でした。
これで設定の半分が終了しました。

引き続き設定を行うには下記リンクよりお進みください。

[デザイン 後編]へつづく

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

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