ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

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

  関連記事

sum1
カエレバのCSSカスタマイズ

今回はカエレバのカスタマイズを行いました。カエレバといえば、商品のアフィリエイト …

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

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

sum1014
【STINGER5カスタマイズ】サイドバーにプロフィール設置

今回はSTINGER5のカスタマイズのお話です。サイドバーにプロフィールを追加し …

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

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

sum
Gush2カスタマイズ~背景色がPCだけ反映されない~

いつもはstingerを使用しているのですが、運営しているサイトが全部「STIN …

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

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

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

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

chatlike-css-tb
レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いて …

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

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

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

Loading Facebook Comments ...

Message

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