超時短!!ブログのテーマカラー、背景色やボーダーを一気に変更する方法 #gush4

ブログの見た目を簡単に変えたいなら、テーマの色や背景を変更するだけでイメージが変わり自分色になるんですよね。※背景やボーダーなどに画像を使うと見栄えがさらに変わってってきます。

始めて使うテーマなら、どんな構造で出来てるのかを知るまでに時間がかかってしまいますが、少しの下準備だけで、Gush4の配色の変更が時短でできるように、CSS要素をこのページに集めてみました。

要素の検証をつかい一気に配色を変更し、それをテーマの『CSS』に貼り付けるには、要素の検証の使い方を事前に知ってれば早いです。白と灰色、hover時は淡い青はキレイけど、自分好みの色に簡単に変更できますので、チャレンジしてくださいね!

Gush4カスタマイズ

スポンサーリンク

見出しのボーダー、背景、カラーの変更

見出しのデザインを変更したいけど、ハードル高いと思うなら背景やカラー、ボーダー色を変えてみるのも手です。どんな風に色を変更すれば簡単にできるかを、Gush4の見出しを例にあげますね。

Gush4は『article-inner』の『hタグ』の色を変えれば良いのですが、その便利な方法が要素の検証です。例えば元のブルー系から赤系に変更するとこんな感じで要素の検証で1分ほどで簡単に色の変更ができます。

※下準備として新規投稿ページに、h2、h3、h4の見出しのみを下書き保存して、プレビューで見ると手間がかからず一気に変更できますよ。

見出しの色を、青系から赤系に簡単に変えることができる。

見出しの色を、青系から赤系に簡単に変えることができる。

要素の検証を使ってGush4のhタグのカラーを一気に変更

要素の検証で色を変えるのは、カラーピッカーの虹色のつまみ(後述)を好きな色に合わせると、あとはもとの配色の大元を変えるだけなので、かなり効率的に配色をかえることが出来ます。

Gush4なら色の変更をサクリと変更できるようにしてるので、要素の検証のCSSの一番下に下記をコピーして、貼り付けてください。※配色のみの変更の場合、仕上がったとき要素が固まってるので、テーマのCSSに貼り付けやすくしました。

CSSで見出しの色を変更するのは、6つを変更すれば良いのがわかります。

  • .article-inner h2。そのbefore、after
  • .article-inner h3。そのbefore
  • .article-inner h4

beforeとafterって、どれがどの部分にあたるか、、何だかややこしそうに感じますけど、下記の通りになってます。

Ghsh4、hタグの見出しの装飾before、afterの位置

カラーピッカーで色だけを変更すれば時短になる

Chromeの要素を開いたら要素を選択し、色を変更するには#17a9e6など色の左側にある■をクリック

色の左側にある■の画像

そうすれば、カラーピッカーが表示されます。虹色になってる配色のみを動かせば簡単に色の変更できるので便利です。

Color Pickerの虹色

下記のgif画像は、基本の青系から、赤系に変更して、そのあと紫系に配色を変更してます。あっという間に変更ができるからおススメなので、やり方を参考にしてください。

要素の検証で色stylesを簡単に変更Gif

見出しの色を、青系から赤系に簡単に変えることができる。

見出しの色を、青系から赤系に簡単に変えれた。

赤系から紫系の変更も簡単でしたよね。

赤系から紫系の変更も簡単!

要素を色を変更後、テーマに保存する

要素の検証でカラーピッカーを使えば、色の変更に悩まずに済むけど、コレだけでは反映されてませんので、実際にテーマに反映させ保存する方法も記しておきますね。配色が決定した後の工程を書いておきますね。(注意;更新したら、CSSは消えます)

  • 要素の検証で変更したCSSを開く
    変更した色をコピーしたいならElementsのstyle.cssをクリック
  • CSSのソースが出てくるので配色を変更した部分をコピーする。CSSが固まってるのがメチャクチャ便利!(注意;更新したら、CSSは消えてしまう。)
    要素のCSSをコピー
  • ダッシュボード『外観』より『テーマの編集』からCSSを編集ペースト後更新
    WordPress管理画面:使用中のCSSにペースト後更新

以上でテーマに反映されます。要素の検証は配色がすぐ反映するので便利です。最後にコピペしてテーマに反映させてくださいね。後述する配色の変更も同じようにやると時短になります!

LINK初心者が要素の検証でカスタマイズできる方法!HTMLとCSS入門編

ブログ全体の背景を決める

Gush4のブログの背景は、外観よりカスタマイズを選択して決めます。『色』を選択すれば好きな背景色を選択でき、『背景画像」にすれば背景画像をメディアにアップしたものを画像の変更より選択できます。

Gush4でブログの背景を画像にする

  • 背景の繰り返しは、小さな画像の場合は、タイルにすると、直角&水平方向に繰り返し表示してくれます。
  • 背景スクロールは、その名のとおりスクロールしたとき背景が動くのか、固定するのかを選択します。柄がある場合、目がチラチラするので固定が良いかも。
  • 最後に保存して公開

Gush4のボーダー枠の配色の一括変更

ボーダーは、至るところに点在してますけど、Gush4は色が決まってるので枠のボーダーと、ボーダー上下左右#dddを拾い集めました。この集めた#dddを別の色に置き換えることで、あちこちに点在するボーダー枠線をかなり楽に変更することが出来ます。

上述の方法の通り要素のCSSの一番下にでも貼り付けて、一箇所どんな色に変更されるか確認してください。決まれば、#dddを好みの色に変更すれば大半の枠の変更が一気にできるのでおススメです!

枠の#dddはIDmainを選択後、色変更

枠の#dddはIDmainを選択後、色変更

1つ決めたら、以降#dddに新しいカラーを上書きするだけで一括変更できますねっ(^^♪

そしてコピーしてテーマのCSSへ貼り付ける。これの繰り返しになります!

最後の色#eeeは、上の#dddより薄めだったので、上で決めたものより白めを選ぶと違和感が少なくなるかも知れませんね。

  • prenexは『前への記事』『次の記事』の部分はページャーで変更(後述)なので/*コメントアウト*/
  • サイドのSNS(サイドh2)のタイトル下ボーダー
  • サイドのSNS(サイドh2)のコンテンツ『SNS』の左

サイドh2、該当の2箇所

これも1つカラーが決まったら、♯dddに上書きすると早いですね。

引用、テーブルタイトル、コメントの背景色の灰色を変更

これらの背景は、全て#eeeなので、全て同一色を使っても良いかもしれません。#eeeを別の好きな背景色に変更すると、手早くいけそうです。

Gush4引用、テーブルタイトルの背景、グレー

Gush4コメント背景 グレー

モバイルのグローバルナビ、hover時の背景 グレー

この色の変更を変更するには、#eeeを好きな背景色(たとえば#FFEFFE)を選ぶと楽に背景の変更ができます。ついでに、ボーダーなども変えると効率あがります。

記事上のSNSの背景の色を変えたい。

記事上背景色

記事上、記事タイトル下のSNSの背景はほんのり灰色です。それを変更したい場合は、下記を変えればいけますよ。

該当要素を選択、色を変える、最後にCSSをコピー、ペーストして更新

該当要素を選択、色を変える、最後にCSSをコピー、ペーストして更新

コメント欄の背景とhover色の変更

コメント送信ボタンの変更は背景#999にボーダー#777、背景のhover色#666、Fontのカラー#fcfcfcこれを、下記のように変更したり。

※マウスを置くと変更のイメージがわきますよ。

  • コメント送信、返信ピンク紫系など変更も簡単にできる。

Gush4のform-submitボタンの変更

hover色を要素の検証で出したい

要素の検証でhoverした時の色を表示したいけど、どこにある?出したいんだけどって時に、下記画像の:hovをクリックしてください。この状態では、まだマウスを置いてない状態の色が表示されてます。

要素の検証でhover色をだす1

次に、出てきたForce element stateの『hover』をクリックすれば、hoverの状態のカラーが表示されるので、マウスを置いた状態が表示されて色を確認しながら、変更ができますよ。この機能をうまく使ったら状態を確認しやすく便利ですよ!

要素の検証でhover色をだす2、表示される

コメント欄の送信ボタン

コメント欄の送信、返信ボタンのカスタマイズも同様下記、画像の通りになります。hoverボタンは隠れてるけど、幅の関係なので開くと出てきますよ!

Gush4のform-submitボタンの変更

個別、固定記事の先頭、2色の青い配色変更

Gush4で印象的なコンテンツ上の2色のボーダーの色の変更方法は、背景(background-color)#1c8abb左側と(background-image)#b6eaff右側の組み合わせの変更、カラーは下記画像の通りです。

article-wrap:beforeの配色

たくさんbackground-imageがありますけど、ブラウザごとに指定してるだけなので、全て同じ用にカラー色を変更すればOK!

サイドと関連記事の、画像を丸くしたいとき

  1. 記事下の関連記事『コチラも読まれています。』
  2. サイドの新着記事

2か所の画像を丸くしたい場合は、テンプレートの編集のCSSに下記コードを貼り付けるだけでOK!

border-radiusは、ボーダー角の丸みです。ベンダープレフィックスwebkit(Chome,Safari)moz(Firefox)の環境でも反映するようにする記載です。親テーマの通りにつけました。同様コンテンツ内の画像に枠を付けたい時→次

コンテンツ内の画像に、枠を付けたいとき

ボーダーは 線の太さ、種類、色の順番で書いてますので、好きに太さや色を変更してくださいね。※border-radius(ボーダー角の丸み)のベンダープレフィックスに関しては、親テーマの通りにつけてます。

上記CSSの装飾は灰色(記事内の画像枠のイメージ)

上記CSSの装飾は灰色(記事内の画像枠のイメージ)

ページャーの色を変えたい

Gush4のページャーは2種類あります。投稿ページの『前の記事』『次の記事』。もう1つがページ内検索や、カテゴリなど記事一覧の2ページ目3ページ目のページャーです。1つ目が下記のページャー。

ページャー、配色変更前ビフォー

ページャー、配色変更前ビフォー

ピンク系カスタマイズ例、アフター

ピンク系カスタマイズ例、アフター;aタグ変更済み+背景を画像に変更済み

少し変えるだけで、イメージが変わりますよね。ボーダーなど、次に一括で変更するようにしてます。(hoverの色はご自由にどうぞ♪)ページャー背景と色の変更のみでもいけますね。

変更方法

変更方法



2つ目がページ内検索や、カテゴリなど記事一覧の2ページ目など下記の通りです。

Gush4ページャー

Gush4ページャー

Gush4ピンク系、カスタマイズ例

Gush4ピンク系、カスタマイズ例

こちらも、『前の記事』『次の記事』同様、背景と文字カラー、マウスを置いたときの色のみになります。

hoverマウスを置いた時の青色を、一括変更

下にオンマウス時のCSSを並べてますが、指定してる該当箇所は次のとおりです。

– サイド –

  • .side-sns a:hoverは、サイドのSNSのhoverオンマウス。上下コメントアウトしてるのは、入れてるウィジェットによって変わる為です。

-トップページカテゴリー別 -トップページをカテゴリ別にしてる場合

  • 最新記事
  • 新着記事
  • ナビ

– 記事下 - 全てのページに関係する記載。

  • こちらも読まれています
  • 前の記事次の記事の右
  • カテゴリタグ
  • ページャー

オンマウスhoverしたときの色;薄い青#f0f8ffを薄いピンク#FFF0FCに替えた例。

hover-colorの変更例

hover時のcolorの変更例



抜けてたらスミマセン。。1色決めたら、一気に変更できますよ。

この記事を書いた人

writer-box

Gush4のwriter-box

writer-boxの配色を薄紫に変更した例

writer-boxの配色を薄紫に変更した例


ナビゲーションのトグルボタン内の色変更

トグルボタンの四角いメニュー内が、どんな作りになってるのか気になる人は少ないかもしれません。でも背景色を変更を考えるなら、ってことで、どんな作りになってるのか、画像で説明を入れておきますね。

四角いメニュー開いた場所のsrdrとそのリスト内容

コチラの色は、淡いうす紫にしたんですけど、開いた瞬間うわぁ、血色が悪い。。っと感じてしまい、失敗でした。開く人がどれほど居るのかは不明ですけど、開いたとき違和感があると失敗ですね。。かなり淡い色を置くのがポイントかも知れません♪

とりあえず背景が濃過ぎたら良くないので下記のように変更しました。まずは、元の色を参考にしてくださいね。

menuボタンsidr、gush4

上が元の配色で、hoverした感じも入れてます。下がピンク系に変えたイメージです。気にならなければ、スルーするのもアリかも知れません♪

menuボタンsidrの配色変更

フッターの背景色の変更

Gush4のフッターは、PCの場合とスマホの場合で色の変更箇所が全く違ってきます。

スマホのみ表示されるフッターの変更は、下記画像のTOPとHOMEがスマホのみの記載になります。下のグレーは、3番目にCSSを置きますね。

スマホのフッター、Gush4

スマホのフッター、Gush4。黄色はhoverです。

変更後はちょっとコッテリしたピンクですけどw下記のようにしました。

top-home-after

TOP、HOMEに戻るスマホ専用CSSの配色を変更箇所です。

PCとタブレットのみ表示されるフッターのグレーの上の配色変更

Gush4の#footer

Gush4の#footer

#footerスマホとPCビューの色変更

#footerスマホとPCビューの色変更例



スマホ、タブレット、PCの同一箇所の配色グレーの変更場所

footer-bottomの配色、Gush4

footer-bottomの配色、Gush4

footer-bottomの配色例

footer-bottomの配色の一例


戻るボタンの背景色、変更

gush4の戻るボタン

トップに戻るボタンの配色は、下記の通りです。

さらに、戻るボタンを画像に変更するカスタマイズをした際、背景ボーダーを消したい場合は下記の通りになります。※コンテンツの矢印は、『HTMLで削除』して『画像に差し替える』のでカスタマイズ前なら上矢印『↑』のみ残った形です。

おまけ;フッターのコピーライト

2-4.copyrightの文言は付けるべき?©マークやcopyrightの文言は著作権保護の観点だけをいえば、付ける必要はないです。

~ 中略 ~

ただ、©マークやcopyrightを付けるメリットがあるとしたら、下記2つの理由があるでしょう。

  1. 著作権は特許と違って登録を要しない分、著作権者が誰であるかわかりにくいという問題点があります。©マークやcopyrightを付けることで著作権者が誰であるかを明示できます。これにより、第三者の不正利用を一定程度予防する効果が期待できます。また、著作物を利用したいから著作権者の許諾を得たいという人に向けても連絡先として機能します。

~ 後略 ~

引用元:著作権とは|Web担当者、デザイナーが知るべき著作権|ferret

上述が前提ですけど、コピーライトをつけるなら、現在の年数だけよりページを作成した年数を載せたくなりますよね。現在の2016年だけではなく、始めた年から現在の2016年までと書きたいと思いませんか。『コピーライト2015-2016』

  • ©2016 ビバ★りずむ 2016年だけ!?と言う印象
  • ©2015-2016 ビバ★りずむ 2015-2016年と言う印象

なので、フッターにあるphpをちょこっと触ってみたんですね。気になるかたに。

  1. ©を表示『©』
  2. ココに始めた年を入れたくなる『2015-』
  3. 現在の年2016を表示<?php echo date(‘Y’); ?>
  4. ブログ名『ビバ★りずむ』を表示<?php bloginfo(‘name’); ?>

こんな感じに『©2015-2016 ビバ★りずむ』変更してみました。

さいごに

想像以上に長くなってしまったけど、なぜ一般配布テーマを扱わないのか!?今となってはちょっと謎ではありますがw初めてブログやCSSなど触るようになって、やっと自分でやりたいようにカスタマイズができ始めたのは、大きいです。

自分が使ったGush4は、使用者は少ないですけど、誰か一人でも届いてカスタマイズが楽しくなるキッカケ、またユーザーが訪問して、このブログ見たことある!と、リピーターになってくれる人が現れたらな・・と思います。

ここに書いたものは、少しだけイメージを変えるものに過ぎませんけど、初めはこうして少しずつ触っていくところから始まったんです。ブログ書く合間にほんのちょっとスタイルを変更するのも楽しいですよっ(o´∀`)σ)´Д`)

たまにはカスタマイズもしてみましょうよぉ♪では、かうたっくでした。

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー