アメブロやWordPressでの見出しに使えるCSSコードのサンプルを作ってみました。コピペして活用してみてください。

シンプルな付箋風ライン見出し

アクセントカラーがポイントの見出し。どんなサイトにも馴染むシンプルイズベストなデザインです。

見出し２の表示

アメブロでの記事内やメルマガで使用する場合＜インラインCSS＞

<h2 class="yellow" style="line-height: 28px;padding: 15px 0px 15px 20px;border-left: 7px solid #F8D11B;box-shadow: 1px 1px 1px rgba(0,0,0,0.22);-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.22);-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.22);">見出し２の表示</h2>

 

アメブロカスタマイズ等で使用する場合＜CSSファイル用＞

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen heading border by Yukari Kimura (@FITP) on CodePen.

スタイリッシュな印象になるストライプ見出し

斜めボーダーでおしゃれなサイトにも馴染むデザインです。

見出し２の表示

アメブロでの記事内やメルマガで使用する場合＜インラインCSS＞

<h2 style="line-height: 28px;padding: 15px 0px 15px 20px;background: repeating-linear-gradient( 125deg, rgba(251, 255, 44, 0.47), rgba(231, 234, 25, 0.44) 4px, rgb(255, 255, 255) 4px, rgb(255, 255, 255) 8px);">見出し２の表示</h2>

 

アメブロカスタマイズ等で使用する場合＜CSSファイル用＞

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen heading stripe by Yukari Kimura (@FITP) on CodePen.

グラデーション見出し

サイドのカラーがアクセントの背景がグラデーションしている見出しデザインです。

見出し２の表示

アメブロでの記事内やメルマガで使用する場合＜インラインCSS＞

<h2 style="color: #333;line-height: 28px;padding: 15px 0px 15px 20px;background: linear-gradient( 90deg, rgba(251, 255, 44, 0.6) , rgba(255, 255, 255, 0.6));border-left: 10px #7dc5c1 solid;">見出し２の表示</h2>

アメブロカスタマイズ等で使用する場合＜CSSファイル用＞

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen heading gradation by Yukari Kimura (@FITP) on CodePen.

しゃぼん玉風見出し

しゃぼん玉風のやわらかなデザインの見出しです。疑似要素(before,after)を使用しているので、インラインCSSでは利用できません。

アメブロカスタマイズ等で使用する場合＜CSSファイル用＞

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen Ameblo Border Heading Sample by Yukari Kimura (@FITP) on CodePen.

ハートや星などのアイコンがアクセントのポップな見出し

Webフォントを活用したマークがにぎやかなデザインの見出しです。疑似要素(before,after)を使用しているので、インラインCSSでは利用できません。

アメブロカスタマイズ等で使用する場合＜CSSファイル用＞

CSS・HTMLボタンをクリックすると、コードが表示されるので、必要な部分をコピーしてご利用ください。

See the Pen heading mark by Yukari Kimura (@FITP) on CodePen.

コピペで使えるシンプルでおしゃれな囲み枠CSSサンプルが人気記事なので、見出しのスタイルシートサンプルも作ってみました。

なるべく他のサイトでは見つけられないようなデザインを作成しました。お好みに合うようにコードをいじってみると、CSSの勉強にもなりますよ。

これからも、アメブロカスタマイズやWordPressのテーマカスタマイズ時に活用できるスタイルシートのサンプルコードを少しずつUPしていきます。