こんにちは、カワテです。
初心者のためのWordPressの始め方5回目の今日は、前回 [x_icon type=”link”]インストールしたテーマ「Savona Classic」のデザイン全般を調整したいと思います。
今回は設定する項目が多く長丁場になりますが頑張ってお付き合いください。
今回のコンテンツ
はじめに
現在、トップページはこのような状態です。
これをデモデザインに近づけていきます。
こんな感じですね。
まずはダッシュボードメニュー「外観」→「カスタマイズ」を選択。
(テーマページの「カスタマイズ」からもいけます)
設定できる項目は全部で18あります。
1.About Savona
テーマ「Savona」の解説ページです。
１.GetSavona Pro
テーマの有料バージョン購入ページへのリンク
2.Documentation
savona Classicのチュートリアル(解説)ページへのリンク
3.Demo Content
デモデザインをダウンロードしてブログに適用できます。
今回はデモは利用しません。
すべて英語で書かれてますので読みづらいですね。前回のブログ [x_icon type=”link”] で紹介したGoogle翻訳機能を使って日本語にしましょう。
関連記事 Google翻訳を使って海外のWordPressテーマを日本語で使う方法
About Savonaページを開いた状態で、ツールバーより「Google翻訳」のアイコンをクリック。「このページを翻訳」を選択。
日本語に翻訳されました。
2.Colors
Colorsではブログの色に関する設定を行います。
General
1.Accent
アクセントはカテゴリー名やボタンの色を変更できます。
2.ヘッダーテキスト色
ブログのタイトル色を変更できます。
(ここではわかりやすいよう背景色を青に変更してあります)
3.Header Background Color
ブログタイトルの背景色を変更します。
(一般的にタイトル部分のことをヘッダーと呼びます)
4.Body Background Color
ブログの背景色を変更します。
Body Background
背景に画像を設定します。
色を初期設定に戻す
カラーを初期設定に戻したい場合には「デフォルト」ボタンを選択します。
PCアイコンについて
パソコンなど広い画面で表示した場合にメニュー下部にPC、タブレット、スマホのアイコンが表示されます。アイコンをクリックとそれぞれのデバイスでの見え方が確認できます。
COLORSまとめ
今回は色を変更せず、初期設定のままで利用します。
3.General Layouts
「General Layouts」ではブログの横幅に関する設定を行います。
General
1.Sidebar Width
サイドバーの横幅を設定します。
2.Enable Sticky Sidebar
「Enable Sticky Sidebar」にチェックを入れると画面をスクロールした際にサイドバーが一緒にスクロールします。チェックを外すと上部に固定されたままになります。
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」に設定すると画面上の要素がブラウザ幅いっぱいまで広がります。
BOXED
数値を「BOXED」に設定すると画面上の要素は指定された幅で固定され伸縮しません。
Contained
背景を「FULL」の状態にしたまま、テキストなどの要素は「BOXED」の幅に収めます。
General Layoutsまとめ
今回は初期設定のまま、下記のように設定しておきます。
4.Top Bar
ヘッダー上部にメニューやSNSアイコンを表示可能な「トップバー」の表示・非表示を設定します。今回はチェックを入れてトップバーを表示させます。
5.サイト基本情報
「サイト基本情報」では、ブログタイトル・ファビコンの設定を行います。
Logo Setup
「Logo Setup」ではタイトル・キャッチコピーの変更に加え、ロゴの設定を行います。
ロゴ
ブログのタイトルを「私のブログ」→「 MyBlog」に変更してみました。 しかし、文字サイズが大きくしっくり来ません。そんな時にはタイトルをテキストから画像に変更しましょう。
詳しいロゴの作り方については次回のブログでご紹介したいと思いますが、今回はフリーアイコン[x_icon type=”link”]をダウンロードしてシンプルなロゴを作ってみました。
作ったロゴ。
ロゴ画像が完成したら「ロゴを選択」を選択。
作成したロゴをメディアファイルへアップロードし「選択」をクリック。
切り抜き範囲を調整して「画像切り抜き」を選択。
画像サイズを少し小さくしたいので「Width」を250にします。 キャッチフレーズも変更しておきます。
ブログタイトルが画像に変更されました。
キャッチフレーズも反映されています。
ロゴの作成が難しい方はとりあえずテキストのままにしておいてください。
次回のブログでロゴの作成方法について解説します
Favicon
ファビコンとはブラウザの検索窓やブックマーク時に表示されるタイトル横の小さなアイコンです。
今回は無料のアイコン素材を使用してシンプルなファビコンを作ってみましょう。
まずはここ [x_icon type=”link”] から好きなアイコンを探してサイズを512px、好きなカラーに変更して、PNG形式を選択し保存します。
サイトアイコンから「画像を選択」を選択。
「ファイルをアップロード」を選択し「ファイルを選択」をクリック。
先ほどダウンロードしたアイコンを選択してアップロードしたら「代替えテキスト」に説明文を入れてから「選択」を選択。
ファビコンが設定されました。
最後に「公開」を選択し、設定内容を確定させます。
6.Main Navigation
「Main Navigation」ではメインメニューの設定を行います。
現在はまだメニューが設定されていませんのでメインメニューはこんな状態です。
メニューを設定することでデモ画像のように他のページへのリンクを掲載することができます。 (※メニューの設定は後ほど行います)
Main Navigation
1. Main Navigation
チェックを外すとメインメニューを非表示にできます。今回はチェックを入れておきましょう。
2.Align
「Align」はメニュー項目の横位置を設定します。
3.Show Search Icon
チェックを入れるとメインメニューに検索アイコンを表示します。
4.Show Sidebar Icon
チェックを入れると左端に別窓で「サイドバー」を表示されることができます。
※サイドバーの設定はこのあと行います。
Main Navigationまとめ
今回は「Search Icon」と「Sidebar Icon」のチェックを外しておきます。
7.Featured Slider
「Featured Slider」とは、トップページにブログ記事をスライド形式で表示させることのできる機能です。
Featured Slider
1. Featured Slider
チェックをいれるとトップページに記事スライダーが表示されます。
2.Display Posts
「ALL Posts」を選択すると日付の新しいブログから順に表示されます。
「by Post Category」を選択すると選択したカテゴリーの記事のみを表示させることができます。
3.Number of Slides
記事スライダーに掲載する記事数を選択できます。
4. Show Navigation Arrows
記事スライダーのサイドに矢印リンクを表示します。
5.Show Pagination Dots
記事スライダー下部に丸ボタンリンクを表示します。
今回はFeatured Sliderは使いませんので、チェックを外しておきます。
前半戦はここまで
お疲れ様でした。
これで設定の半分が終了しました。
引き続き設定を行うには下記リンクよりお進みください。
