無趣味で人付き合いが苦手な女医の処方箋

初心者の初心者による初心者のためのstingerカスタマイズの処方箋。

*

(後編)STINGER5のカスタマイズ機能で、主な配色・ヘッダー画像などを設定しよう。

   

medium_8496660700

前回はワードプレスにログインし、おすすめテーマの「STINGER5」をダウンロードしました。

今回は、STINGER5に備わっているカスタマイズ機能を使って、ロゴ画像やサイトタイトルの設定を行います。

初心者の方は、①から読み進めてくださいね(*´∀`*)ノ

スポンサーリンク

基本色(キーカラー)、背景色を決めましょう。

続いて、基本色(キーカラー)、背景色を決めていきます。

カスタマイズメニューの「基本色」と、その下の「色」をクリックすると、それぞれの色を指定する画面になります。

fwqff

「基本色」で以下の4つと、「色」で背景色を決めます。

グループ1(ブログタイトル色など)
グループ2(吹き出し背景など)
吹き出し内の文字(H2)
グループ3(淡い色推奨)

色のコードを直接入力or手動で調整。

すべて、下の画像のように、直接、色のコードを入力するか、2つのリングを調整することで、お好みの色を指定できます。

custom3

色のコードは、初心者さんは下記のサイトで選ぶとカンタンです。

参考:原色大辞典

配色と、文字の可読性を確認できるサービス。

原色大辞典には、多様な色の見本があるので、お好みの色のコード(#と6つの文字列)をコピーして、先ほどの入力スペースにペーストすれば反映されます。

gehg2w

このサイトで「配色」を選択すると、背景色と文字色の確認ができるので、参考にしてください。

geo2q

基本色の「グループ1」

基本色の「グループ1」は、ブログタイトルやキャッチフレーズ、サイドバーのタイトルの文字色です。あまり奇抜な色にせず、黒に近い色がよいと思います。

背景色が暗く濃い色であれば、薄い文字色もありですが、薄い背景色に黒い文字より、配色が難しいので、可読性が悪くならないよう気をつけてください。

ド素人の私のサイトの配色はいまいちなので、下記のサイトを配色の参考にしてください。
(全体の色配分の考え方とか、分かりやすいです)

参考:色彩センスのいらない配色講座
参考:絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎

基本色の「グループ2」

「グループ2」は、大きな見出しの吹き出し背景や、小さな見出しの下の点線の色を指定します。当ブログでは、下の画像の部分です。

gejp

※当ブログの小さな見出しの点線はドットのサイズを大きくしています。

基本色の「吹き出し内の文字」

吹き出しの文字の色は、吹き出しの背景色と合わせて決めましょう。

濃い色が背景なら白い文字もくっきり見えて良いです(・∀・*)

↓STINGER5の公式サイトの配色。

gewrhq2

基本色の「グループ3」

「グループ3」は、画像で囲った、記事タイトル直下のボックスの色や、コメント欄、検索窓などの色です。

efj2w

コメントにあるように、淡い色が適しているでしょう。

ちなみに、当ブログの管理人は対人交流が苦手なので(笑)、コメント欄は開けておりません。
(メールフォームはありますが)

また、検索窓は、グーグルの検索ボックスに置き換えています。
(後日、アドセンスについての記事で書きます)

ブログを印象づける「背景色」

最後は「背景色」です。記事一覧や個別記事の周囲全てを覆う、大きな面積を占める色です。

もちろんお好みでいいのですが、あまり奇抜な色は避けましょう。

背景色の色によっては目が疲れますし、それだけでリピーターさんが減る原因になってしまいます。

ショッキングピンクのブログとかね、ちょっと敬遠しそうなので(っ´ω`c)

スポンサーリンク

ヘッダー画像を設定しましょう。

ヘッダー画像というのは、当ブログで言うと、この部分です。

st6

凝ったことはできない(能力的にムリ)ので、おなじみの「ペイント」機能で、無料画像を拾ってきて貼り付けて、背景を背景色と同じ色で塗りつぶしています。

参考:無料イラスト・春・夏・秋・冬・イラストわんパグ
参考:いらすとや

こんなしょぼいヘッダー画像でもけっこう苦労して作っているのです(。-∀-)あはは

参考:家計簿ブログ断捨離ブログ

980×250のサイズの画像を用意or削除。

デフォルトでは、ヘッダー画像のサイズは980×250となっています。

※私は、高さが大きすぎるので、980×85に縮めていますが、そのためには、文字がバーっと並んだファイルを少しいじらないといけないので、それは後日書きます。

stinger5のヘッダー画像そのままに使う人はいないでしょうから、初心者さんはひとまずデフォルトのサイズ(980×250)で画像を作るか、ヘッダー画像自体要らない場合は、「画像を非表示」にしておきます。

ewgph

「新規追加」にした場合、作った画像をアップロードすると、「切り抜き」の表示が出るので、お好みの位置で切り抜いて設定しましょう。

ヘッダー画像を自作するのが困難な場合。

初心者さんは、画像の加工にも慣れていない方もおられると思います。

「画像 加工 無料」などで検索すると、いろんなサービスが見つかるので、トライしてみるのもいいですし、単に写真を切り取ってヘッダー画像にするのも悪くないですよ。

手間を考えたら、少々お金がかかってもいいという方は、「ココナラ」というサービスで、ロゴもヘッダー画像も気軽に作成依頼してみるのもアリですね。

基本、なんでも500円で請け負ってくれます(*´∀`)

参考:ココナラ

背景画像を設定する。

背景画像は私は用意していません。

単色じゃなく、模様など設定したい場合は、その画像をアップロードしましょう。

ナビゲーションを設定する。

ナビゲーションは、記事の上部の細長い部分です。

dwq222

後ほど、メニューを設定するので、「メニュー1」を選択しておきましょう。
(それなりに記事ができてからの設定となります)

ewgph2

ウィジェットは保留。

「ウィジェット」では、サイドバー(記事が表示される枠の右側の部分)に何を表示するかを決めます。

管理画面の「ウィジェット」からの方が操作しやすいので、後ほどそちらで設定します。

固定フロントページの設定。

「固定フロントページ」は新着記事の一覧を表示するか、特定のページを固定で表示するかを決められます。

当ブログでは「最新の投稿」を選択しています。

dwq2223

コンテンツを作っていく中で、トップに固定で表示したい内容が出てきたときに、設定し直せます。

以上で、STINGER5のカスタマイズメニューの設定は終了です。

右上の「保存して公開」をクリックしたらOKです。

STINGER5、基本カスタマイズまとめ。

途中、ロゴや配色の話が入ったので、冗長になってしまいました(汗)

前編と今回の後編で、デフォルトから、ちょっと見てくれが変わったと思います。

一通り設定した後も、カスタマイズメニューからいつでも変更できるので、あまり時間を取られすぎませんよう。
(私は微妙な色の違いなどに悩んで、無駄に時間が過ぎるタイプ^^;)

ワードプレス、そしてSTINGER初心者さんのお役に立てれば幸いです。

次回は、アドセンスの設定・配置についてです。

ここまで読んでくださって、

(人´∀`o) ありがとうございました (o´∀`人)

 - ワードプレスの始め方 , , , ,

スポンサーリンク
記事が気に入ったらシェアしてくださいませ(*´∪`*) SNSで更新情報をチェックしてくださいね(っ´ω`c)
  •  

  関連記事

xs1
エックスサーバーの申し込み方法をキャプチャ画像で解説。安すぎるのは考えもの。

今回は、レンタルサーバーの申し込みについてです。 初めてワードプレスにトライする …

m1
ムームードメインで独自ドメインを取得しよう。キャプチャ画像で解説します。

繰り返しになりますが、ワードプレスでブログを始めるには、まず、レンタルサーバーと …

blog_access-1024x562
ワードプレスの始め方。なにはともあれ、レンタルサーバーと独自ドメインを取得せよ!

ワードプレス初心者のみなさま、ようこそ(*´台`*) ワードプレスでブログにトラ …

medium_2913018697
ワードプレスにログインする方法。STINGER5をダウンロードしテーマに設定しよう。

前回はドメインとサーバーの紐付け、ワードプレスのインストールをしました。 今回は …

medium_2986187518
(前編)STINGER5のカスタマイズ機能で、ロゴ画像・サイトタイトル等を設定しよう。

前回記事が参考になったと言ってくださる読者さんがおられて、モチベーションアップし …

wordpress
ドメインとサーバーの紐付けから、ワードプレスのインストールまでの手順。

前回はエックスサーバーの申し込みをしました。続いて、ドメインとサーバーの紐付け、 …