Web制作061B!132611ブログをお持ちの方必見!スタイルシートをコピペするだけでOKな、シンプル可愛い見出しを作成しました。※アイキャッチ画像では10個になってますが、徐々に増えて現在18個あります。スタイルシートは、子テーマにコピペすることをおすすめします。使い方ですが、下記にあるそれぞれのHTMLとスタイルシート(CSS)を、指定の場所にコピペします。style.cssです。HTMLは全て<h2>見出し</h2>であることを仮定したコードになってます。見出し3(h3)に適用させたい場合は、HTML:<h3>見出し</h3>CSS:h3{(中略)}と、なります。【重要】CSSをテーマに合わせるWordPressをお使いの場合、CSSをコピペしただけでは反映されない場合があります。}というように、記事を囲っている要素のクラスに合わせてクラス名を追記してください。h2の前にクラス名を付けないと、サイドバーなど色々な箇所全てにスタイルが反映されてしまいます。色は全てスタイルシートにて指定していますので自由に変更可能です。背景色を指定しています。色の検索はこちらがおすすめ。colorshttps://www.color-sample.com/見出しデザインとCSSソースコード太さが異なる二重線の見出しborderの指定時にdoubleと記載することで二重線にできますが、幅が同じものになってしまいます。ひと手間加えて太さが違う二重線に。-1;}左2本線の見出しシンプルですが、2つの線を異なる色にすることでちょっとオシャレな見出しに。100%;}ボーダー+白いグラデーションの見出し白いグラデーションがかかった透明感あふれる見出しです。文字に縁取りを施して読みやすく。-1;}ボーダー+左線の見出しボーダーだけだと味気ないのでアクセントに左だけ枠線を。-1;}付箋(ポストイット)風な見出し何回も使うには向かないデザインなので、記事内の見出し2よりは人気記事や関連記事のみ...等、限定的なタイトル向きです。-1;}背景に大きな円がある見出し大きな円が1つある見出しです。h2:beforeのopacityの数値を変更することで、円の色の不透明度が簡単に変えられます。*/}背景に大きな円が2つある見出し円が2つあるバージョン。2つの円は別々の色を指定することも可能です。*/}色が途中で切り替わる見出し途中で色が切り替わるスタイリッシュな見出しです。200px;}先頭に白抜き円グラデがある見出しスマートなデザインと綺麗なグラデーションで印象付ける見出し。グラデーションと文字色と下線は、同系色でまとめると統一性が出るのでおすすめです。*/}ドットの見出しタイトルの後ろにドットが12個くっつきます。コンテンツ幅からはみ出た場合は非表示になる設定です。*/}花の見出しほんわかした花の見出しです。100%;}花の見出し(背景色あり)花の見出しの背景色があるバージョンです。文字に白い影をつけて、よりふんわりした雰囲気に。3px;}和風な見出し丸を3つ+中央に白抜き円で、デフォルメされた椿のようなイメージです。和風なサイトにおすすめの見出し。*/}線も文字もグラデーションな見出し線と文字とは別々の色を指定することもできます。文字のグラデーションとは逆のグラデーションを線にかけてみてもいいですね。100%;}上枠ストライプの見出し上枠のみストライプの見出し。囲み枠として使うのもアリです。1;}下枠ストライプの見出し下枠のみストライプのバージョンです。上枠のみとはまた違った印象になりますね。1;}水玉模様の見出しガーリーな見出し。水玉の色は濃いめにすると毒々しくなるので、薄めがおすすめです。*/}セロテープ風の見出し一風変わったセロテープ風の見出しは、DIY系のサイトに合いそうです。背景色を変えてマスキングテープ風にするとより可愛くなりますよ。*/}コピペ後に元々の見出しのデザインが残っている場合コピペしたけど、元々テーマで設定されているデザインが残ってしまうことがあります。そんな場合の対処法を書きました。関連記事Simplicityで見出し2のスタイルに線が入る原因とその解決方法タイトルはSimplicityですが、他のテーマでも同様に解決できますよ。あとがき見出しだけではなくカエレバ・ヨメレバのカスタマイズ記事や囲み枠のサンプルデザインも併せてどうぞ。ブログを自分好みにカスタマイズしちゃいましょう。【CSSコピペ】カエレバ・ヨメレバのデザインサンプル【カスタマイズ】ブロガーにとって外せないツールとなっているカエレバ、ヨメレバ。見出しと強調部分だけの流し読みで、話を大まかにわかるようにするのがブログの基本です。便利なんだけどイマイチ見た目がよくない、Jetpackの人気記事。...Simplicity2グローバルナビメニューのカスタマイズサンプル4個+αこんにちは、とみーです。Pop」を作ってみた【WordPress】こんにちは、とみーです。...WordPressテーマ「ADELLE」をカスタマイズしてみたこんにちは、とみーです。18:13初めまして。こっこ先生と申します。自分好みのサイト作りを頑張っているところです。「まだまだ理想とは程遠い」し「何度やってもうまくいかない」ところがあったんです。23:52初めまして、コメントありがとうございます!この記事は競合サイトに負けじと色々盛り込んだので、そうおっしゃっていただけて本当に嬉しいです!他の記事をお読みいただいて、初心者目線で「ここが分からないな~」と思うところがありましたら是非またコメントいただければ。22:00初心者です。11:27VRねこさん、コメントありがとうございます。スタイルシートをコピペするだけでOKな、シンプル可愛い見出しを作成しました。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。CSSのみでデザインする囲み枠(ボックスデザイン)窓枠を塗装してみた。使い心地も抜群でコスパ最強!【AviUtl】一瞬強く光る文字(発光の使い方サンプル)【結婚式のムービーで使えるテクニック】サーバーお借りしています。