earn-pocket-money の h1 h2 h3 のCSS変更(サンプルコード載せてます)

Pocket

earn-pocket-money の h1 h2 h3 のCSS変更(サンプルコード載せてます)
earn-pocket-money の h1 h2 h3 のCSS変更(サンプルコード載せてます)

earn pocket moneyテーマの改造を行っています。

少しずつですが、キタジマタカシさんのテーマearn pocket moneyの子テーマを作成し、改造を行っています。

今日は、サイトのh1、h2、h3タグのCSSをデフォルトの設定を上書きして見た目を変更してみました。

このサイトのh1、h2、h3のCSSコード

/*h2.p-entries__title*/

div.l-contents__main div:not(.c-entry-summary__body) h2:not(.c-entry-summary__title), div.l-contents__main div:not(.c-entry-summary__body) h1:not(.c-entry-summary__title) {
	clear: both;
	position: relative !important;
	border: none !important;
	font-size: 1.25em !important;
	padding: 1em 1.1em !important;
	margin-top: 2.1em !important;
	margin-bottom: 1em !important;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #999;
	color: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .03);
}

/*.c-entry__content>h2,*/

div.l-contents__main div:not(.c-entry-summary__body) h1:not(.c-entry-summary__title):after, div.l-contents__main div:not(.c-entry-summary__body) h2:not(.c-entry-summary__title):after {
	content: '';
	position: absolute !important;
	border-top: 13px solid #999 !important;
	border-right: 9px solid transparent !important;
	border-left: 9px solid transparent !important;
	bottom: -11px !important;
	left: 5% !important;
}

/* articke .post h3 */

article.post h3 {
	background: #f3f3f3;
	color: #1a1a1a;
	font-size: 20px;
	line-height: 27px;
	margin-bottom: 25px;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-top: 2px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/* p-site-branding h1 */
.p-site-branding h1 a{
	/*text-decoration: underline;*/
}
.p-site-branding h1 a:hover{
	text-decoration: underline;
	color: #888;
}

はい。

「earn-pocket-money」の子テーマのstyle.cssに上記コードを追加しました。

特に、h2、h3は、「:not(.c-entry-summary__body)」、「:not(.c-entry-summary__title)」を入れておかないと、トップページのページサマリーのh2、h3までCSSが変更されてしまうので、注意が必要です。

それ以外は、特段に変わったことはしていません。

とりあえずの、たたき台のCSSで、CSSセレクタを指定できてh1、h2、h3のCSSの変更をしやすくなった、という段階ですね。

それではー またー (^_^)/

===追記===

!important」が残ってますが、これは子テーマのstyle.cssを親テーマのstyle。cssに依存させて無かった時のコードです。

今は依存させていますので、「!important」は不要です。

=======

あなたもアフィリエイト✕アドセンスで稼げる! はじめてのWordPress本格ブログ運営法 ★★★★

はい。このサイトのテーマもこの本に付属している「earn pocket money」というアフィリエイト向けテーマについての解説本です。

この本では、「earn pocket money」を中心に、アフィリエイトサイトの選び方、テーマのアフィリエイト用の設定の仕方、SNSとの連携の仕方など、基本的な話題をかなりの図入りで丁寧に解説しています。

そのため、初心者の方、特にWordPressを初めて導入する方にも大変優しい解説本となっています。

ただ、WordPressの設定の仕方、GoogleAbalytics、SearchConsoleなどの設定に慣れている方には、前半の丁寧な解説は、少し面倒くさく感じられるかもしれません。

しかし、後半のブログ開始後3ヶ月経っても成果がでないときの取り組み方、軌道修正の仕方、ユーザーの検索意図(ユーザーニーズ)の捉え方、どうやってユーザーニーズを満たす記事を書くのか、といったノウハウ的な解説は役に立つと思います。

実際自分もブログを始めて3ヶ月経ったのですが、この本で指摘されているブログの細やかな点についての再点検をしてみると、3ヶ月間ブログ記事を書くだけで精一杯だった自分に抜けている視点が分かりました。

やってみないと分からないことがあり、やってから軌道修正していくことが必要なのだと痛感しました。

初心者には図入りで読みやすく、実務を行っている人には実務上のポイントを指摘してくれる本で、アフィリエイトを行う行わないに限らず、ブログ記事を書く人、Webライティングを目指している人には、参考になる本だと思います。

https://amzn.to/2I3Y3OR
The following two tabs change content below.
KaBA@フリーランス修行中

KaBA@フリーランス修行中

こんにちは!IT業界で勤めて17年くらい務めています。プログラミング大好きやろーです。 自分も独学でC言語を覚えIT会社に就職しました。その後紆余曲折を経て、VB6.0、VBA、Perl、C#、HTML、CSS、JavaScript、PHPなどを覚えていきました。全部C言語の独学時の経験がベースとなって、学習曲線が良いカーブを描いていました。 情報工学科を出ていなくても、独学でエンジニアは育つことができると思います! このブログで皆さんがプログラミングに興味を持たれるのを心待ちにしています! 頑張って覚えられてください!よろしくお願いします。 趣味は読書で、小宮一慶さんや松下幸之助さんなど著名人の本を読んでいる他、赤川次郎さんの三毛猫ホームズシリーズ司馬遼太郎吉川英治さんの三国志などが好きです。