ガジェニュー

~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 , ,

  関連記事

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

最近ずいぶん涼しくなって来たのに、今日は蒸し暑いですね。今年は残暑が続くのだろう …

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

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

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

sum-sns
【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズも …

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

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

wpop
WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

こちらのブログなのですがWordPressを使用して運用しています。今回は上の画 …

ana-sum
【アクセス数報告】2014年9月のPVと収益を公開します

今回は初めて、「ガジェニュー」のPVを公開してみようと思います。実際にこうやって …

simages_011615_064354_PM
【STINGER5カスタマイズ】AdSenseをiPhone6/6s Plus対応のレスポンシブにカスタマイズ。

久々のSTINGER5のカスタマイズ記事です。まぁ、厳密に言うとGoogle A …

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

Loading Facebook Comments ...

Message

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