WordPressカスタマイズ

凡夫でもできた!Gush2のカスタマイズまとめ

更新日:

Gush2のカスタマイズ

カスタマイズ地獄に落ちた凡夫です。

書き出すまでにどのくらい設定しないといけないんだろう? はてなが若干恋しいです。今回はWordpressの魅力であるらしいカスタマイズです。これで少しはお洒落なブログになっているはずなので読んでください。テーマはGush2です。Gush2のカスタマイズまとめです。

それにしてもカスタマイズって肩こる。なれないことはするものじゃないですね。

初めてのWordPress おすすめの初期設定とプラグイン

2016年1月13日追記

エローラさんの勉強会に参加したのでGush4になりました。サロンとか勉強会とかどうなんだろう?と当初は否定的だったのですが、目玉の妖怪さんにはお世話になっていたので大丈夫だろうと安易に判断しました。

結果は入って大正解! ブログ運営の考え方を学べるのも大きいが、一番はカスタマイズ系の相談ができること! やっぱ専門家に聴くと捗ります。値段以上の価値がありました。

 

Gush2のヘッダー部分カスタマイス

とりあえずこれを読め。以上。WordPress Theme Gush2.本家が一番だと思うんだけどよかれと思って書いていきます。

ヘッダー画像を設定する方法

WordPress管理画面→外観→テーマ編集から、header.phpを開いてください。

<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

この部分をこう変えました。
<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img src="https://bontoku.com/wp-content/uploads/2015/01/bontoku-title.png" alt="凡夫の特記事項" /></a></h1>

画像を透明化してくれる透過サイト

GIF,PNG,JPEG,BMP透過ツール - 画像背景の透明化.これ使うと簡単に透過してくれます。背景画像を邪魔せずにインパクトのあるヘッダー画像をドン!と載せることができます。

ブログのロゴはWordで作った

Wordでつくりました。簡単にインパクトがあると思われるロゴ画像が作れます。おすすめですよ。

凡夫の特記事項

プロフィール画像とヘッダー画像はココナラで依頼しました。依頼したらこうなりました。

凡夫の特記事項

なんだこれ。頑張って作らず依頼すれば良かったよ!これでワンコインとか安いだろ!

スマホやタブレットのヘッダー部分の背景色を変更する方法

style.css のこの部分。

#header {
text-align: center;
background: #666;
padding: 0 0 12px;
border-bottom: 1px solid #fff;
}

この部分のbackground: #666は背景色 グレーという意味なので#666を好きな色に、たとえば白にしたい場合はbackground: #fff に変更すればヘッダー部分の背景色が変わります。

タイトル下のキャプション部分の枠を消す方法

style.cssの「ヘッダ見出し」の下。

#header .caption {
color: #fff;
font-size: 16px;
padding: 0.8em 0.5em;
border: 1px solid #444;
box-shadow:inset -1px -1px 0 rgba(255,255,255,0.4);
margin: 0 12px;
}
上記のソース部分から下記を削除すれば完了。

border: 1px solid #444;
box-shadow:inset -1px -1px 0 rgba(255,255,255,0.4);

キャッチフレーズ部分の文字色変更

#header .caption {
color: #fff;
font-size: 16px;
padding: 0.8em 0.5em;
margin: 0 12px;
}

凡夫のようにヘッダー部分の背景色を白にしてしまうと、初期設定のキャッチフレーズ部分の文字色が白のため見えません。clolarの部分をfffから000の黒に変更しました。

ファビコンの変更方法 RealFaviconGenerator

 プラグインをさくっと導入してしまいました。プラグインなしでもできるんだろうけどいいよね、ラクなんだもの。

Gush2のナビゲーションの色を変更する方法

style.cssのこの部分がナビゲーションです。

.togmenu {
display: none;
color: #fff;
background: #444;
}

スマートフォンでナビゲーションが見えない!

nav#menu ul li a {
display: block;
color : #fff;
padding : 8px 0;
}

このcolor : #fff; fffが白なので見えなくなっています。適当に好きな色に変更してください。

nav#menu ul li a {
display: block;
color : #fff;
padding : 8px 1em;
}

こちらも変更してください。

Gush2 h2見出しの変更

よく使うものを変えるだけで印象は変わるはず。ということで変えていきます。

h2見出し色の変更

style.cssのこの部分です。

#article_body h2 {
font-size: 20px;
text-align: left;
margin: 36px 0 24px 0;
padding: 0.4em;
background: #efefef;
border-bottom: 2px solid #ddd;
text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}
 
border-bottomの色を#318262に変更しました。実は凡夫のテーマカラーです。クトゥルフイメージです。

Gush2 広告カスタマイズ

広告についてのカスタマイズを書いていきます。

AmazonJSのカスタマイズ ずれを修正しました。

この部分が原因で表示がおかしくなります。

#article_body h4 {
 font-size: 18px;	 	 font-size: 18px;
 border-left: 3px solid #ccc;	 	 border-left: 3px solid #ccc;
 margin: 48px 0 24px 0;	 	 margin: 48px 0 24px 0;
 padding: 0.2em 0.2em 0.2em 0.5em;	 	 padding: 0.2em 0.2em 0.2em 0.5em;
}	 	}

見出しの設定が反映されてしまうのでこの表示を変更すれば直ります。

/* ここがコメントアウト部分 */ 

これ、ひょっとすると広告ユニットはレスボンシブにしないとダメなのか? 

こういう作業記録残しておくと後々ラクになるのでおすすめ。

後書き

2015年8月18日までほとんどカスタマイズしていないけどなんとかなってるので、とりあえず記事を書いておけばPVはなんとかなると悟りました。そもそも記事を読んでいる人の大半はスマホから来ているのでカスタマイズしてもわかってもらえないんだよね。カスタマイズよりスマホの利便性追求のほうが効果あるとか切ない。

Gush3になったらさすがにカスタマイズするとは思うけど、それまではこれを使い回します。オシャレなテーマとか無理です。だって凡夫だもの。それよりもプロフィール画像とヘッダー画像をどうにかしたいです。

2016年1月13日追記

Gush4にしました。プロフィール画像とヘッダー画像はココナラで依頼しました。

おすすめ記事

1

この記事では開催中のkindleセール情報をまとめて紹介していきます。 2017年12月12日時点でのセール情報です。  Kindle記事が増えてきたのでKindleセール一覧表にしました。 Amaz ...

2

狂乱の宴!primedayセール開催中!! この記事では2017年9月21日時点で確認した、開催中のAmazonキャンペーン・セール情報をまとめていきます。気づいたときには終わっていたorzなんてこと ...

3

この記事では、2017年12月9日時点で確認したKindleコミックセールをまとめて紹介していきます。Kindleセール一覧表。 漫画オタクと言えるくらい読んでいるはずなのに全くブログに活かせていない ...

4

2017年10月10日時点で確認したKADOKAWA(角川書店)キンドルセール情報をまとめて紹介していきます。 注意事項:Amazon.co.jpは予告なくキャンペーンの終了、価格の変更をする権利を保 ...

5

この記事では2017年12月5日時点で確認した幻冬舎Kindleセール情報をまとめて紹介していきます。 注意事項:Amazon.co.jpは予告なくキャンペーンの終了、価格の変更をする権利を保有してい ...

-WordPressカスタマイズ

Copyright© 凡夫の特記事項 , 2017 All Rights Reserved Powered by AFFINGER4.