ワードプレスの見出しデザインの変え方CSS・html設定例5選

スポンサーリンク

ワードプレスの見出しデザインの変え方として、CSSとhtml設定例についてご紹介しています。

遠回りしたけどブログ収益い成功したクマ吉です。

さて、ワードプレスの見出しデザインのCSS設定について、おススメのサンプル5つをご紹介していきます。

ワードプレスを立ち上げたばかりの時は、デザインを変えるのが面白くなり、記事作成そっちのけ状態だったこともあります。

見出しのデザインを凝り始めると、別記事でも書いたことがあるのですが、正直キリがありません。

記事作成をメインに考えましょう!

 

 

これからブログを始める方は、まずは下記の記事もご参考にしてくださいね。

⇒ エックスサーバーの契約からドメイン設定・ワードプレスのインストール手順まで

 

関連 ワードプレスおすすめ無料プラグイン・ツール【厳選まとめ】

 

 

ワードプレスの見出しデザインを変えるCSS・html設定例5選

 

見出しのデザインについて、基本的には下記の5つのパターンがあれば、ほぼどんなシーンでも使えるのではないでしょうか。

色や大きさを少し変えるだけで、印象も変わります。

下記の例は、h1タグで設定していますが、h2やh3に変更して使用することもできます。

ご参考になれば幸いです。

 

 

■HTMLコード

<h1 class=”sample1″>見出しのサンプル</h1>
見出し1つで読みやすさが違います。

 

■CSSコード

.sample1 {
background: #c2edff;
padding: 0.5em;
}

 

■HTMLコード

<h1 class=”sample1″>見出しのサンプル</h1>
見出し1つで読みやすさが違います。

 

■CSSコード

.sample2 {
padding: 0.5em;
color: #010101;
background: #eaf3ff;
border-bottom: solid 3px #516ab6;
}

 

 

■HTMLコード

<h1 class=”sample1″>見出しのサンプル</h1>
見出し1つで読みやすさが違います。

 

■CSSコード

.sample3 {
padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #7db4e6;
}

 

■HTMLコード

<h1 class=”sample1″>見出しのサンプル</h1>
見出し1つで読みやすさが違います。

 

■CSSコード

.sample4 {
position: relative;
padding: 5px 5px 5px 42px;
background: #77c3df;
font-size: 25px;
color: white;
margin-left: -15px;
line-height: 1.3;
z-index:-1;
}

.sample4:before {
position: absolute;
content: ”;
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index:-2
}

 

■HTMLコード

<h1 class=”sample1″>見出しのサンプル</h1>
見出し1つで読みやすさが違います。

 

■CSSコード

.sample5 {
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}

.sample5::before {
position: absolute;
content: ”;
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

 

ワードプレスに見出しデザインのCSSを反映させよう

 

ブログ記事に反映させたい見出しデザインのCSSコードが分かったら、次はワードプレスのシステムへ設定するだけです。

CSSを追記する場所やプラグインの設定方法について、下記の記事で解説していきます。

 

簡単!ワードプレスの見出しデザインをプラグインで装飾設定・使い方
ワードプレス(wordpress)で簡単に見出しをデザインできて、作業効率をアップさせる方法を知りたいですか?本記事では、「AddQuicktag」と「Simple Custom CSS」プラグインの導入方法から装飾の実装、効率アップまで解説します。ワードプレスでブログを始めた方には必見です!

 

 

その他おすすめプラグインについて

 

ワードプレスでブログを立ち上げたら、運営するためにはプラグインが必須となりますが、何を選んでいいの?

このような悩みを解決している記事です。

本記事では、プラグインの目的を明確にしていますので、自身のブログ運営で必要なモノをしっかりと選んで、記事作成に重きを置けるように環境設定をしていきましょう!

 

ワードプレスおすすめ無料プラグイン・ツール【厳選まとめ】
ワードプレスでブログを立ち上げたら、運営するためにはプラグインが必須となりますが、何を選んでいいのでしょうか?今回は、すべて無料で使用できるワードプレスのおすすめプラグイン12選!として、初めてブログを立ち上げた初心者の方にとって有益なプラグインを目的別にご紹介していきます

 

 

最後にまとめ

 

以上が、ワードプレスの見出しデザインを変えるCSS・html設定例のサンプル付の記事となりました。

意外とシンプルなデザインの方が、ユーザー目線としては読みやすいです。

ただ、運営しているともっとデザインに凝りたくなる時ってあるんですよね・・・。

あくまで記事作成に支障が出ない程度に、CSSをカスタマイズして試してみてくださいね!

ちなみに、下記の参考書はオールカラーでCSSの設定例がたくさん載っているので分かり易いです。

 

 

関連 【簡単】ブログのアクセス数を10倍に増やす正しい方法!初心者必見!

関連 グーグルアドセンスの厳しい審査に通るには?合格方法や文字数などを解説2019

関連 これが、アドセンス合格後にやること!【WordPressブログで本格的に運用!】

 

日常会話の英語フレーズ一覧【ビジネスでも使える厳選まとめ集】ではカテゴリ別に使えるフレーズをピックアップしています。

まとめて読みたい方は是非ご覧ください。

 

私はこれで英語をマスターしました!
コンサル&無料体験レッスン実施中

専属コンサルタントが、現在のレベル、課題と目標を明確にして短期間で最適な学習方法をアドバイスします。

こんな方へ
・どうやって勉強したらいいかわからない
・なんとなく英会話スクールに迷われている方
・英会話教室に通ったけど、話せるようにならなかった
・自分の英語の弱点を知りたい方
・一度オンライン英会話をやったけれども飽きてしまった方
・海外の方との会議や海外出張で英語が話せず困っている
・今すぐビジネス英会話を覚えたい方
・途中でやめてしまった経験がある




受講開始して、途中で「思っていたのと違う」「自分には無理そう」等感じたら、 開始から30日以内であれば受講費を全額返金するシステムがあるので安心です。

ブログ構築/ワードプレス
スポンサーリンク
スポンサーリンク
シゲキタイムズ

コメント

タイトルとURLをコピーしました