ガジェニュー

~iPhone・格安スマホとか~

Gush2カスタマイズ~h2タグをカスタマイズします~

       後で読む

今回は「Gush2」のカスタマイズ第2弾です。

自由度が高いサービスだけに結構苦戦しています。とくにレスポンシブデザインということで少しでもいじる場所を間違えると簡単にPCかスマホの表示がおかしくなります。手元のiPhoneでの確認が欠かせないですね。

今回はh2のデザインを変更してみたのでそちらのMemoになります。

SPONSORED LINKS


GUSH2」の元々のh2タグはこのような形になっています。
motoで、今回はこちらをサイトのメインカラーに合わせた形にカスタマイズをかけていきます。

対象のソースは下記です。

Gush2の「h2」をカスタマイズする方法

#archive_body h2,
#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);
}

この、サイト全体の「h2」を定義している部分を下記のように変更しました。

#archive_body h2,
#article_body h2 {
	font-size: 20px;
	text-align: left;
	color: #FFFFFF;
	margin: 36px 0 24px 0;
	padding: 0.4em;
	background: #FF922B;
	border-bottom: 2px solid #ddd;
}

変更部分は「背景色の変更」・「文字色の変更」・テキストシャドウの削除のみです。背景に色を載せたので文字を白くした所、ドロップシャドウもかかり文字がかなり見難くなったので、テキストシャドウは外してしまいました。

これでOK。

かとおもいきや、

PC表示の際に左側に邪魔なものが。。。
before
ということでこちらも合わせて変更しなくてはなりません。

レスポンシブで自由にカスタマイズ可能なのですが、初心者にとってはどこに何のコードがあるかよくわからず混乱しますね。ということでPC用の表記を探して

#article_body h2{
	font-size: 24px;
	text-align: left;
	border-left: 5px solid #444;
	margin: 48px -31px 36px -62px;
	padding: 10px 0 10px 20px;
}

border-left: 5px solid #444;」個々の部分を好きな色にカスタマイズ!。
するとこうなります。左側に5ピクセルの実践をこの色で描画と書いてあります。(多分)

完成形はこちらです。
after
はい、これでOKですね。

ただのカラー変更なんですけどちょっとだけ悩んでしまいました。

まとめます。

h2タグをカスタマイズするのまとめ

変更しなくてはならないCSSは下記の部分です。

  • 全体定義にあるh2の記述
  • 1024px PC用にあるh2の記述

以上。

ちょっとずつですが慣れてきたのでこれからも頑張っていきますか。

てな感じで。

 - Gush2, WordPress , ,

  関連記事

icon_1r_192
【アクセス数報告】2015年6月のPVとアフィリエイトの収益とか

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

images_110914_024007_AM
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

sum
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かな …

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

images_112014_115155_AM
【STINGER5カスタマイズ】このブログにしたカスタマイズまとめ

STINGER3からSTINGER5に乗り換えたのが、2014年10月1日。もと …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

access201503
【アクセス数報告】2015年3月のPVとアフィリエイトの収益とか

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

sicon_1r_192_120214_095619_AM
【アクセス数報告】2014年11月のPVとアフィリエイトの収益を公開します

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

Loading Facebook Comments ...

Message

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