『Stinger5-Cheetahカスタマイズ速習』と題しまして、当ブログで行っているカスタマイズをもとにStinger5-Cheetahでブログを始めるまでの準備を全て公開しようという企画を始めました。

この記事を読んでもらうことで、一人で調べながらカスタマイズするより、3倍くらいお手軽で早くなったら良いなぁ~

(当ブログのキーカラーは赤では無く青ですけどね)

 

目次はこちら:

基礎編 第01回 まずはStinger5-Cheetahをインストール

基礎編 第02回 最初に絶対子テーマを導入すべし!

基礎編 第03回 管理画面でデザインを変更しよう ←今ここ

基礎編 第04回 ナビゲーションやフッターを設定しよう

基礎編 第05回 テーマファイルでSNSの設定をしよう

基礎編 第06回 タップ ターゲットのサイズを適切に調整する

基礎編 第07回 コンテンツのサイズを表示域に合わせる

 

before

design-customize-01

 

after

design-customize-02

 

 

今回は、WordPressのテーマカスタマイズ画面(カスタマイザー)でできる色の変更や画像の登録など、デザイン的な部分を中心に見てみましょう。

オススメのカスタマイズ場所には[◎]をつけておきますので参考にどうぞ!

 

 

テーマカスタマイズ画面(カスタマイザー)でできること

Stinger5-Cheetahは、癖のないシンプルな構造になっています。

テーマとしてわざわざ別の設定ページが準備されていたりするわけではないので、管理画面の左ナビで『外観』ってとこをクリックした時に出てくる項目が、変更できる項目、ということになります。

 

以下の3つが主な変更部分になります。

  • カスタマイズ
  • ウィジェット
  • メニュー

design-customize-03

 

このうち、『カスタマイズ』をクリックすると表示されるのが、リアルタイムに結果を見ながらテーマのカスタマイズをすることができる画面(カスタマイザー)となります。

カスタマイザーは、テーマによって変更できる項目が様々なので、これから説明する内容は『Stinger5-Cheetah』専用のものですのでご注意ください。

design-customize-04

 

Q.なんか画像の管理画面の色がおかしくない?

計7つほどのWordPressテーマについて、テスト環境を構築してるんで、いまどのテーマのWordPressを触ってるか分かるように色分け中。

やり方が知りたい人は過去記事へ↓

 

Q.他のテーマの管理画面は違うの?

管理機能を比較した記事があるから参考にどうぞ↓

 

 

Q.『ヘッダー』『背景』は変更しなくて良いの?

『カスタマイズ』ってとこに含まれます。

 

Q.『ウィジェット』『メニュー』も『カスタマイズ』の中に有るよね?

『カスタマイズ』をクリックしたときに表示されるウィジェットは、全体の一部しか表示されません。

なので、『外観』→『ウィジェット』と選んだところでカスタマイズすべし!

『メニュー』は項目数が変わったりすることはありませんが、カスタマイザーで設定するより、ナビゲーションの『メニュー』をクリックした時の画面の方が分かりやすいので、そちらを使って説明します。(詳しい説明記事は次回)

 

まず今回は、デザイン要素の変更を中心にお届け致します。

 

 

Sponsored link

カスタマイズ:ロゴ画像

design-customize-05

 

[◎]ロゴ画像

画像を選択していない場合は、ブログタイトルのテキストが表示されます。

『画像を選択』とクリックすると、ファイルをアップロードするか、すでにアップロードした画像を選択する画面に移ります。

当ブログは、ちょっとでも印象に残ってもらえるようにロゴ画像を採用しています。

 

 

Sponsored link

カスタマイズ:サイト基本情報

design-customize-06

 

[◎]サイトタイトル

その名の通り、サイトのタイトルを設定する場所です。

これはWordPressの管理画面の左ナビで、『設定』→『一般』とクリックした時に表示される画面でも変更可能です。

上記のロゴ画像を設定していない場合は、ブログの一番上にテキストとして表示される文言でもあります。

 

[◎]キャッチフレーズ

サブタイトルのようなものです。こちらも『設定』→『一般』とクリックした時に表示される画面で変更可能です。

Stinger5-Cheetahでは、ロゴのすぐ下にテキストとして表示されます。

当ブログでは『自分が困って調べたことを分かりやすくまとめれば、きっと誰かのためになる』という運営理念を入れてあります。

 

サイトアイコン

カスタマイザー上でも記載があるように、ブラウザーとアプリのアイコンとして使われる画像を設定する事ができます。

何も画像を登録しない場合、自動的に『チーター』のアイコン(若干わかりにくいですが)が表示されるようになっています。

design-customize-07

 

 

基本色(キーカラー)

カスタマイザーの中で一番大事なのはここではないでしょうか?

ブログの主だったパーツやテキストの色を変更することが可能です。

design-customize-08

 

グループ1(ブログタイトル色など)

ブログタイトル、キャッチフレーズ、『シェアお願いします!(下段のSNSのすぐ上のテキスト)』、『スポンサーリンク(これも下段)』あたりのテキストの色が変わります。

 

[◎]グループ2(吹き出し背景など)

h2(見出し)の背景色や、右ナビの項目のタイトルの背景色を変更できます。

ここを変えるだけで、ぐっとブログ全体の雰囲気が変わります。

ぜひ、ご自身の好きな色に設定してみてください。

 

吹き出し内の文字(H2)

グループ2で背景色を設定したパーツのテキストの色です。

グループ2を濃い色にした場合は白系の色を、淡い色にした場合は黒系の色を選ぶことで読みやすい見出しになります。

 

[◎]グループ3(淡い色推奨)

ブログ記事のタイトルのすぐ下の公開が表示される部分やh4(見出し)、下の方のコメント欄などの背景色です。

グループ2と違ってグループ3はテキストの色を変えるところが有りません。

なので、あまり濃い色にし過ぎると、文字が読めなくなるので、確かに淡い色を推奨です。

 

[◎]グループ4(フッター背景色)

フッターの背景色です。

ここもあまり派手な色にすると、全体の雰囲気が壊れてしまうので、注意が必要です。

フッターにたくさんの要素を置くつもりがなければ、背景色と同じにするのも一つの手では有りますね。

(Stinger5-Cheetahの良さが発揮されなくなりますが…)

 

グループ5(フッターの文字色)

フッターの文字色が変更できます。

吹き出し内の文字、同様、読みやすい配色になるように気をつけましょう。

 

↓極端な色を設定してみた例

design-customize-09

design-customize-10

 

 

design-customize-11

 

背景色

背景色を選ぶことができます。

この『背景』というのは、ヘッダーとナビゲーションの背景、ということです。

記事本文の背景は固定なのでご注意ください。

 

ヘッダー画像

design-customize-12

 

[◎]現在のヘッダー

現在アクティブにしている画像を確認できます。

『画像を非表示』を選択すると、ヘッダー画像無しのシンプルなデザインになります。

『新規画像を追加』をクリックすると、画像のアップロードと切り抜きで、新規の画像を追加できます。

design-customize-13

さらに、『アップロード済みヘッダーをランダム表示』とすると、登録している複数の画像が、アクセスのたびに切り替わります。

あくまで変更されるのはアクセスの『たび』で、スライダーのように次々切り替わるものでは有りません

 

おすすめ

デフォルトの『Stinger5-Cheetah』の文字が綺麗に配置された画像です。

『おすすめをランダム表示』をクリックすると、何故か『画像を非表示』と同様、シンプルなデザインになります。

 

 

背景画像

↓の画像は、背景画像を設定した場合のナビゲーションです。

design-customize-14

[◎]背景の繰り返し

仮に、当ブログのような方眼紙っぽいデザインにしたい場合は、小さい死角の画像を準備して、この繰り返しの設定で『タイル』と選ぶことで、縦方向&横方向に画像が繰り返され、方眼紙のように表示されます。

『ブログ 背景 画像』とかで検索して好みのデザインを見つけて、『タイル』として設定すると、ぐっと自分ごのみのデザインに変わりますよ。

ただし、『色』の項目でも触れたとおり、ヘッダーとナビも含めてデザインがかわるので、あんまり濃い色のデザイン要素をつかってしまうと、逆に読みにくくなってしまうのでご注意ください。

design-customize-15

 

背景の位置

背景に設定した画像を『左寄せ』『真ん中に配置』『右寄せ』に設定できます。

よく使うのは、大きな画像を背景に設置して、真ん中寄せにすることで、写真の上にブログコンテンツが乗っかっているように見せる、といった場合です。

ただし、十分な大きさの背景画像を準備しないと、↓みたいになってしまいます。

design-customize-16

 

背景スクロール

特に、繰り返し無しで大きな画像を配置した場合に、『スクロール』を選択すると、最上段に配置された画像はスクロールとともに消えていきます。

design-customize-17

逆に『固定』とすると、画面上に画像が固定されるので、いくらスクロールしても画像は表示されたままになります。

design-customize-18

 

TSUNJI(@tsunji1983)的まとめ

今回は、ロゴや背景に画像を追加したり、見出しの色を変えたりといった、管理画面で変更できるデザイン要素を中心に見てきました。

次回は、『ウィジェット』と『メニュー』で変更できる項目について、設定方法を見てみましょう。

 

『もっとココを詳しく!』とか『こんなときどうしたら良いの?』といった疑問・質問・ご意見などあれば、問い合わせか各種SNSとかのメッセージ等でご連絡ください。

 

Stinger5-Cheetah使って、みんなで楽しいブログ生活を送りましょう~

Stinger5-Cheetahカスタマイズ速習 目次

基礎編 第01回 まずはStinger5-Cheetahをインストール

基礎編 第02回 最初に絶対子テーマを導入すべし!

基礎編 第03回 管理画面でデザインを変更しよう ←今ここ

基礎編 第04回 ナビゲーションやフッターを設定しよう

基礎編 第05回 テーマファイルでSNSの設定をしよう

基礎編 第06回 タップ ターゲットのサイズを適切に調整する

基礎編 第07回 コンテンツのサイズを表示域に合わせる

Sponsored link