ガジェニュー

~iPhone/iPad・レビュー・比較・レザークラフト・ネットフリックスとか~

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の記述

以上。

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

てな感じで。

 - WordPress , ,

  関連記事

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

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

Photo Express for Googleが使えなくなったので変わりのツールを自作してみた

当サイト「ガジェニュー」は、下記の記事にも書いておりますが、サーバー容量の節約の …

【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指し …

【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPre …

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

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

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

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

カエレバをアイコンフォントを使ってカスタマイズ(SVGファイルもあるよ)

以前、カエレバのCSSカスタマイズで、カスタマイズしたカエレバの表示ですがスマホ …

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

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

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

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

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

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

Loading Facebook Comments ...

Message

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