初心者おばちゃんもできた!WordPress(ワードプレス)講座

ワードプレスでブログを始めませんか?テーマSTINGERなど。おばちゃんのカスタマイズ保存版

STINER5インストールとカスタマイザーで色のカスタマイズ

   

STINGER5

とうとう、STINGER3からSTINGER5にバージョンアップを行いました。

STINGER3がとても使いやすくて気に入っていたので、バージョンアップしようかどうしようかと迷ったのですが、やはり時代の波には逆らえず…重い腰を上げて頑張ってみました。

また1から設定しなくちゃいけないのか~と始めから気が遠くなっています(;´Д`)(…でも、思っていたより楽でした!)

しばらくは私の備忘録中心です。

今回は、STINGER5のインストール~カスタマイザーで色の設定までを行います。

スポンサーリンク

STINER5をインストールする

ダウンロードページでSTINGER5をダウンロードさせて頂きました。

STINGER5ダウンロード

いつもありがとうございます!

 

インストールの方法はSTINGER3の時と同じなのでこちらを参考にして下さいね。

[初心者]ワードプレスのテーマSTINGER3をインストールする

インストール完了。

 

STINGER3とSTINGER5の主な相違点は?

STINGER3とSTINGER5の主な相違点は、公式サイトによると以下の通りです。

  • 基本的なレイアウトの考え方はSTINGER3を引き継いだHTML5でレスポンシブです。
  • サイドバー300px固定の「固定幅+フルードグリッドレイアウト」です。
  • デザインは基本的なキーカラー3色をWordPressのテーマカスタマイザーを利用して変更できるようになっています。

おばちゃん的に嬉しいところは、細かい配色の変更をWordPressテーマのカスタマイザーを使ってできるようになったところです。

STINGER3の時はCSSでやっていたところが、カスタマイザーで雰囲気をすぐに確認しながら設定できるんですよね。これってすごく便利!

では、早速カスタマイザーでできる設定を行ってみましょう。

 

 

WordPressのテーマカスタマイザーで色の設定

「ダッシュボード」-「外観」-「カスタマイズ」をクリックします。

stinger5カスタマイズ

カスタマイザー

カスタマイザーが開きました。

設定できる項目は、ロゴ画像、サイトタイトルとキャッチフレーズ、基本色(キーカラー)、色、ヘッダー画像、背景画像、ナビゲーション、ウィジェット、固定フロントページがあります。

STINGER3より細かく設定ができるようになっていますね。

まずは基本色(キーカラー)で色の設定から行ってみましょう。

 

キーカラーの詳細

キーカラーの部分では、ブログの雰囲気に合わせて6つの色を設定できます。

基本色(キーカラー)をクリックします。

s59

各場所を見てみましょう。

基本色(キーカラー)の設定

1.グループ1(ブログタイトル色など)
サイトタイトル部分の色です。
(私は、画像を画像を貼り付けたので、タイトルはデフォルトの色のままにしました)

テーマカラー

好きな色をパレットから選んでも良いですし、カラーコードを直接入れて設定もできます。

 

ふきだし、背景色など 2.グループ2(噴き出し・背景など)
H2の見出しの吹き出しの背景などの色です。
その他には、ブログの日付の点線部分、コメント欄のコメント送信ボタンの色にもなります。

3.吹き出し内の文字(H2)
H2の吹き出し見出しの文字部分の色です。
 
 
s55

4.グループ3(淡い色推奨)
ブログの日付が入る部分の背景の色とコメント欄の背景の色になります。

 

 

検索バーとRESSの色
5.グループ4(RSS)
サイドバーのRSSの色になります。

6グループ5(検索バー)
サイドバーの検索バーの色になります。

 

ブログタイトルをロゴ画像に変更する

サイト(ブログ)のタイトル部分を文字から画像に変更します。

「ダッシュボード」-「外観」-「カスタマイズ」-「ロゴ画像」をクリックします。

カスタアイザー 画像を選択

「画像の選択」ボタンをクリックし、ファイルをアップロードして選択します。

ブログタイトルロゴ画像

ロゴ画像の部分にサイトタイトルに入れる画像が表示されます。

ブログタイトルロゴ画像を保存

「保存して公開」ボタンをクリックします。

プレビューでも確認してみましょう。

ブログタイトルロゴの画像は300pxを超えると、自動的に300pxにサイズが変更されますので、原寸大で表示したい場合は、スタイルシートを変更します。

 

ブログタイトル画像を原寸大表示する

ブログタイトルのサイズを原寸大に表示したい場合は、スタイルシートに1文追加します。

「ダッシュボード」-「外観」-「テーマの編集」-「スタイルシート (style.css)」を開きます。

スタイルシート

「スタイルシート (style.css)」の一番下に、下記を追記します。

「スタイルシート (style.css)」の「ファイルの更新」ボタンをクリックします。
 

s511

画像が原寸大に表示されたことを確認します。

 

 

おわりに

今回は、STINGER5インストール~カスタマイザーで色の設定までを行ってみました。

STINGER3の時はCSSを書き直して行っていた設定も、STINGER5カスタマイザーで簡単にできてしまうところが嬉しかったです。

次回は、ファビコンや文字の大きさの設定など、細かいところを修正していきます。

 - STINGER , , ,

  • このエントリーをはてなブックマークに追加
  • Pocket

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

[初心者]ワードプレスのテーマSTINGER3をインストールする
[初心者]ワードプレスのテーマSTINGER3をインストールする

今回は、ワードプレスにテーマを設定してみましょう。 スポンサーリンク このページ …

[STINGER3]トップページ・サイドバーのカスタマイズ
[STINGER3]トップページ・サイドバーのカスタマイズ

STINGER3の基本的なカスタマイズ第2弾です。 改めて新しいサイトを作るとき …

[stinger3]ワードプレスヘッダー画像と背景色の変更
[STINGER3]ワードプレスのヘッダー画像と背景色の変更方法

今回は、いよいよワードプレスのテーマSTINGER3のカスタマイズです。 ◆今回 …

STINGER3 基本的なカスタマイズ
[初心者]STINGER3の基本的なカスタマイズ

スポンサーリンク このページの目次1 STINGER3 テキスト色や装飾の変更1 …

snsボックス
【Stinger3】SNSボックスを縦に トップページ以外は非表示にする

お世話になっているStinger3で、少し気になるところと言えば、追尾してくるS …

STINGER3 ウィジェット広告の設置方法と配置は?
STINGER3 ウィジェット広告の設置方法とサイトの配置は?

前回のウィジェットの設定方法の続きで第2回目となります。 今回はワードプレスのテ …

FeedlyボタンとRSSボタンを並べて設置する方法は?
FeedlyボタンとRSSボタンを並べて設置する方法は?

今回は、以前から付けたいと思っていたFeedlyとRSSのボタンの設置方法です。 …