ガジェニュー

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

  関連記事

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

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

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

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

sum-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「S …

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

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

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

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

sHIRO93_machinokurasi500
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

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

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

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

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

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

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

images
WordPressのセキュリティ強化!2段階認証を設定しよう!

つい最近の出来事ですが、年金基金から色々と情報の流出が問題となりましたね。担当者 …

Loading Facebook Comments ...

Message

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