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

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

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

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

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

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

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

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

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

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

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

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

/*Gush4用hタグの配色変更*/
.article-inner h2 {
	border-bottom: 2px solid #17a9e6;
}
.article-inner h2:before {
	background: #81daff;
}
.article-inner h2:after {
	background:#00b4ff;
}
.article-inner h3 {
	border-bottom: 4px double #00b4ff;
}
.article-inner h3:before {
	color: #17a9e6;
}
.article-inner h4 {
	border-bottom: 2px dotted #81daff;
}

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

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

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

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

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

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

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

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

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

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

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

• 要素の検証で変更したCSSを開く
  
• CSSのソースが出てくるので配色を変更した部分をコピーする。CSSが固まってるのがメチャクチャ便利！（注意；更新したら、CSSは消えてしまう。）
  
• ダッシュボード『外観』より『テーマの編集』からCSSを編集ペースト後更新
  

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

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

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

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

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

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

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

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

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

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

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

/*ボーダーの枠一括変更*/
.home_area,
.archive-title,
.rel-in-box,
.top-entry {
	border-bottom: 1px solid #ddd;
}
.brandnew-list h2,
.new-list h2 {
	border-bottom: 2px solid #ddd;
}
.thumb_box img,
.latest-thumb img,
.article-inner td,
.article-inner th,
.rel-in-thumb img,
.comment-wrap input,
.comment-wrap textarea,
.comment-list .avatar,
.side-thumb img,
.menu-button,
#main {
	border: 1px solid #ddd;
}
.m-navi,
.pc-navi,
.page-footer,
.page-numbers {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.m-navi li,
.pc-navi li,
.pc-navi li:first-child,
.page-numbers {
	border-left: 1px solid #ddd;
}
.pc-navi li:last-child {
	border-right: 1px solid #ddd;
}
.rel-title {
 border-bottom: 1px double #ddd;
}
.category-article h2 {
	border-bottom: 4px double #ddd;
}

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

/*#eee{#dddより白（左上）よりの色*/
/*.prenex dd {
 border: 1px solid #eee;
}*/
#sub h2 {
	border-bottom: 2px solid #eee;
}
/*h2のコンテンツ前の色は背景と同色にするなら変更*/
#sub h2:before {
 content: "\f0da";
 font-family: FontAwesome;
 color: #eee;
}

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

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

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

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

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

/*#eeeの色変更*/
/*--------------------------------------
 引用背景
--------------------------------------*/
blockquote {
    width: 90%;
    background: #eee url(images/quote.png) 4px 4px no-repeat;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
/*--------------------------------------
 ブログタイトル下ナビ
--------------------------------------*/
.m-navi li a:hover {
    background: #eee;
}
/*--------------------------------------
 記事内テーブル
--------------------------------------*/
.article-inner th {
    background: #eee;
}
/*--------------------------------------
 コメント
 --------------------------------------*/
.comment-wrap {
    background: #eee;
}
.home-middle-ad {
    background: #eee;
}

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

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

.sns-button li {
	background: #fafafa;
}

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

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

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

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

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

/*--------------------------------------
  コメント、返信
--------------------------------------*/
.comment-wrap a.comment-reply-link,
.comment-wrap input[type="submit"] {
	border: 1px solid #777;
	background-color: #999;
	box-shadow: 1px 1px 0 rgba(255,255,255,.2) inset;
	color: #fcfcfc;
	border-radius: 4px;
}
/*コメント、返信hover*/
.comment-wrap a.comment-reply-link:hover,
.comment-wrap input[type="submit"]:hover {
	background-color: #666;
	box-shadow: 1px 1px 0 rgba(255,255,255,.2) inset;
}

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

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

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

コメント欄の送信ボタン

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

/*コメント欄の送信ボタン*/
.comment-wrap a.comment-reply-link,
.comment-wrap input[type="submit"] {
	border: 1px solid #777;
	background-color: #999;
	box-shadow: 1px 1px 0 rgba(255,255,255,.2) inset;
	color: #fcfcfc;
	border-radius: 4px;
}

.comment-wrap a.comment-reply-link:hover,
.comment-wrap input[type="submit"]:hover {
	background-color: #666;
	box-shadow: 1px 1px 0 rgba(255,255,255,.2) inset;
}

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

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

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

/*青い線*/
.article-wrap:before {
	background-color: #1c8abb;
	background-image: -webkit-linear-gradient(left, #1c8abb 25%, #b6eaff 25%);
	background-image: -moz-linear-gradient(left, #1c8abb 25%, #b6eaff 25%);
	background-image: -o-linear-gradient(left, #1c8abb 25%, #b6eaff 25%);
	background-image: -ms-linear-gradient(left, #1c8abb 25%, #b6eaff 25%);
	background-image: linear-gradient(left, #1c8abb 25%, #b6eaff 25%);
}

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

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

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

/*--------------------------------------
  画像枠の色変更
--------------------------------------*/
.rel-in-thumb img,
.side-thumb img {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

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

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

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

/*** 記事内画像に枠を付ける ***/
.article-inner img {
	border: 1px solid #ddd;
	padding: 0.3em;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-bottom: 2px solid #ccc;
	border-top: 2px solid #ccc;
}

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

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

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

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

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

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

変更方法

/*--------------------------------------
  前の記事・次の記事
--------------------------------------*/
.prenex dt {
	color: #fff;
	background: #666;
}
.prenex dd:hover {
	background: #f0f8ff;
}

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

Ｇｕｓｈ4ページャー

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

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

/*--------------------------------------
  ページャー
--------------------------------------*/
.pager a {
	color: #444;
}
.pager a:hover {
	background-color: #f0f8ff;
}
.page-numbers {
	background: #fff;
}
.pager .current {
	background: #444;
	color: #fff;
}

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

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

– サイド –

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

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

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

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

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

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

hover時のcolorの変更例

/*hover背景色一括*/
.side-contents ul a:hover,
.side-sns a:hover,
.side-new:hover,
.latest:hover,
.home_area:hover,
.pc-navi li a:hover,
.rel-in-box:hover,
.prenex dd:hover,
.cat_tag a:hover,
.pager a:hover {
	background: #FFF0FC;
}

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

この記事を書いた人

Gush4のwriter-box

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

/*--------------------------------------
  この記事を書いた人
--------------------------------------*/
.writer-box {
	background: #222;　/*背景*/
	color: #fcfcfc;　/*著者*/
	box-shadow: 0 0 0 1px #222;　/*下のboxシャドー*/
}
.writer-info a {
	color: #ffd700;/*著者下ツイッターフォローの色*/
}
/*上box-SNS-*/
.eyecatch,
.no-eyecatch {
	border: 2px solid #F3E1F9;/*上ボックスのボーダー*/
}

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

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

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

/* スライドメニュー */
.sidr {
	background: #f8f8f8;
	-webkit-box-shadow: inset 0 0 5px 5px #ebebeb;
	-moz-box-shadow: inset 0 0 5px 5px #ebebeb;
	box-shadow: inset 0 0 5px 5px #ebebeb;
}
.sidr ul,
.sidr ul li {
	border-bottom: 1px solid #dfdfdf;
}
.sidr ul li:hover>a,
.sidr ul li:hover>span,
.sidr ul li.active>a,
.sidr ul li.active>span,
.sidr ul li.sidr-class-active>a,
.sidr ul li.sidr-class-active>span,
.sidr ul li ul li:hover>a,
.sidr ul li ul li:hover>span,
.sidr ul li ul li.active>a,
.sidr ul li ul li.active>span,
.sidr ul li ul li.sidr-class-active>a,
.sidr ul li ul li.sidr-class-active>span {
	-webkit-box-shadow: inset 0 0 15px 3px #ebebeb;
	-moz-box-shadow: inset 0 0 15px 3px #ebebeb;
	box-shadow: inset 0 0 15px 3px #ebebeb;
}

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

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

フッターの背景色の変更

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

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

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

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

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

/*--------------------------------------
  TOPへ戻る スマホ固定型
--------------------------------------*/
.top-home li {
	border: 2px solid #fff;　/*白い線*/
}
.top-home a {
	background: #e7f8ff;　/*背景*/
	color: #00b4ff;　/*TOP↑とHOME家マークの色*/
}
.top-home a:hover {
	color: #ffd700;　/*hover：TOP↑とHOME家マークの色*/
}

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

Gush4の#footer

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

/*--------------------------------------
  768px フッター
--------------------------------------*/
#footer {
	background-color : #888;
}
/*背景を明るくした場合fontの色変更*/
.footer-in h2,
.footer-in h3 {
	color: #ddd/*ここに色*/;
	/*text-shadow: 1px 1px 0px rgba(181, 0, 167, 0.3);*/ /*シャドー*/
}
.footer-in h3 {
	border-bottom: 2px ridge #D8D8D8; /*h3ボーダーの色*/
}

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

footer-bottomの配色、Gush4

footer-bottomの配色の一例

/*--------------------------------------
  フッター
--------------------------------------*/
.footer-bottom {
	color: #222;　/*文字*/
	background: #777;　/*背景*/
	text-shadow: -1px 1px 0 rgba(255,255,255,.2);　/*文字シャドー*/
}

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

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

#page-top a {
	color: #fff; /*矢印↑の色*/
	background: #444;　/*矢印の背景灰色*/
	border-radius: 5px;　/*角の丸さ*/
	border: 2px solid #fff;　/*線の色*/
}
#page-top a:hover {
	background: #aaa;　/*オンマウス時の色*/
	color: #fff;　/*オンマウス時の矢印の色*/
}

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

/*戻るボタン消す*/
#page-top{
	background: none;
	bottom: 0px;
}
#page-top a {
	padding: 20px;
	background: none;
	border: none;
}

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

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

～　中略　～

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

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

～　後略　～

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

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

むしろ発行年の方が大事らしいよ( ✧Д✧) ｶｯ!!https://t.co/hD5CYubrqu

— しむ(コトバコ) (@46sym) May 12, 2016

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

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

&copy;<?php echo date('Y'); ?> <?php bloginfo('name'); ?>

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

&copy;2015-<?php echo date('Y'); ?> <?php bloginfo('name'); ?>

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

さいごに

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

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

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

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