はてなブログへコピペで使えます。Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。はてなブログへコピペで使えます。はてなブログへコピペで使えます。ブログカスタマイズ-囲み枠ガーリーデザインシリーズです。見出しのデザインに使えるコピペCSSを用意しました。Greenとあわせてお使いいただくと良いかと存じます。以下ははてなブログの大見出し(h3)のclass指定にあわせていますが、セレクタを変更すれば他のブログなどでも使えます。ポイント文字や背景の色・font-sizeはお好みで変えて下さい。コピペで上手くいかないときはリセットCSSを。角丸+ダイヤアイコン参考リセット用CSSテーマのCSSと被ってうまく上書きできないときは、リセット用CSSを先に記述し、その後から各見出しのデザインのCSSを追記してください。*/などを追加してお好きな色を指定して下さい。リボン風見出しステッチ風でレースっぽく?dashedってガーリーデザインに向いてますね。#a8d4ff;}上下ステッチ上のリボン風から折り返しをとったやつ。※↑このスクリーンショット画像では記事幅より狭くなってますが、実際は記事幅に合わせてピッタリの横幅です。}縦ストライプ背景+左ラインストライブ柄の色背景は文字が見やすいように薄い色にして下さい。}吹き出し定番の吹き出し。background-colorとborderの色を揃えて塗りつぶしてもいいですね。#fffを変えればOKです。#fff;}上下ギザギザいろいろアレンジできそう。手書き風でなんとなくオサレーな雰囲気。記事部分の背景もしくはコンテンツ背景に色指定がある場合ずれた背景色が出ないので気をつけて下さい。transparent;を指定してください。-2;}角丸+ダイヤアイコン角丸背景色に疑似要素::beforeでFontawesomeのダイヤモンドアイコンをつけました。Fontawesomeの読み込みを指定していない場合は以下のコードをヘッダかどこかに追記してください。5px;}参考www.nxworld.netこの記事は随時デザイン案を増やし追記していきたいと思います。09:30あわせて読みたい☆引用の範囲内でしたらこのブログの画像・文章・コード転載OKです。引用元をリンク付きでご明記下さい。この記事のURLとタイトルをコピーする最後までお読み下さりありがとうございます。»Recommend本格的なカスタマイズをするならはてなブログProがおすすめです。Green』『stripe』『yumekawa』『Haruni』はてなブログテーマを制作しています。HTML/CSS/WordPressとはてなブログカスタマイズがメインコンテンツ。特定商取引法に基づく表記このブログについてのお問い合わせお見積り・ご相談ブログのカスタマイズご依頼についてのお見積はこちら↑。このブログで紹介しているコードは、ご使用のテーマによっては調整が必要な場合があります。あらゆる場面、状況に対応することは難しいためです。ここで紹介しているコードはあくまでも一例で、各自ご自身の責任の元で調整してください。このブログで紹介しているコードは、一般的なブログであれば問題ないと認識しておりますが、全てのブログに適しているとは保証できません。万一トラブルが発生したとしても、それに対する一切の保証をいたしかねます。ご自身の判断と責任においてご利用いただくことをご了承下さい。☆引用の範囲内でしたらこのブログの画像・文章・コード転載OKです。引用元をリンク付きでご明記下さい。ヘルプマークとは?ヘルプマークは見えない障害、義足や人工関節を使用している方、内部障害や難病の方、妊娠初期の方など、援助や配慮が必要な方が付けるマークです。(1)PopularSozaifreepikAboutこのブログではサイト制作やHTML・CSS、はてなブログカスタマイズ、WordPressについて書いています。最新記事スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。