やさしいブログの作り方

「見やすい」「読みやすい」「わかりやすい」「親しみやすい」「伝わりやすい」5つの要素を含んだ『やさしいブログ』を作るためにフリースペースやフリープラグイン、CSSを利用したアメブロカスタマイズや画像の加工方法等をご紹介しています。


テーマ:
こんにちは。
『やさしいブログの作り方』の松田です。

以前、以下のような見出しの作り方をご紹介していました。

見出し

<div style="border-left:10px solid #000099; border-bottom:2px solid #000099; padding-left:10px; font-weight:bold;">見出し</div>



記事中にこういった見出しをつけると、何かを説明したりするときなどにわかりやすくなりますね。^^


最近、私が使うようになった新しい見出しパターンを以下に書いておきますので、お好みのものがあればコピペしてご利用下さい。

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#3b5998; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#ff0000; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#ff1493; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#bfa469; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#006600; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#dc143c; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#ff8080; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#4169e1; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#009DBF; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#32cd32; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#ffa500; color:#ffffff;">ここに見出しを書く</div>

ここに見出しを書く
<div style="margin:8px 0; padding: 3px 8px;background:#d2691e; color:#ffffff;">ここに見出しを書く</div>


※見出しの文字数に制限はありませんが、13文字までに収めるとスマホから見た場合も体裁よく表示されます。


最後までお読みいただきありがとうございました。

無料メール講座配信中

これからブログを頑張っていきたい! まずは基本から。
やさしいブログづくりのための、やさしいメール講座(全10回)


やさしいブログ、書籍化!

ブログでビジネスを軌道に乗せるための行動術


「ブログを続けていてよかった」
そんな気持ちを一人でも多くの人と共有したいと思っています。^^


やさしいブログの仕事術


どんなビジネスも突き詰めれば人対人。
その良好な関係を築くのは、相手をおもんばかる気持ちと行動です。


いいね!した人  |  コメント(36)  |  リブログ(0)

やさしいブログの作り方:松田さんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント