ブロマガで使える装飾見出しソースコード
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

ブロマガで使える装飾見出しソースコード

2015-02-10 20:44

    ブロマガ装飾見出しソースコード

    ブロマガで使えるhtml・css装飾ソースコードです。

    ご自由にお使いください。




    1.ボックス見出し
    見出しとしても区切りとしても分かりやすい見出し。

    見出し1

    以下のソースをコピーして[HTML編集]へ切り替えて貼り付ける。

    <h1><span style="display: block; padding-left: 0.5em; color: rgb(255, 255, 255); background-color: rgb(51, 153, 102);">見出し1</span></h1>

    [見たまま編集]へ戻して

    • 文字の大きさを変更:文字を選択して見出しを変更
    • 文字色を変更:変更したい文字を選択して文字色を変更
    • 背景色を変更:見出し文字全てを選んで背景色を変更
    バリエーションサンプル

    見出し2

    見出し3

    見出し4



    2.枠線見出し
    背景色を指定することでボックスの枠線ありに。

    見出し1

    以下のソースをコピーして[HTML編集]へ切り替えて貼り付ける。

    <h1><span style="display:block;padding-left:0.5em;border:2px solid #339966;">見出し1</span></h1>

    [見たまま編集]へ戻して

    • 文字の大きさを変更:文字を選択して見出しを変更
    • 文字色を変更:変更したい文字を選択して文字色を変更
    • 背景色を変更:見出し文字全てを選んで背景色を変更
    • 枠線の太さ変更:[border:2px solid #339966;]数字を変更
    • 枠線の色を変更:[border:2px solid #339966;]#から後部分を変更
    バリエーションサンプル

    見出し2

    見出し3

    見出し4



    3.上下ライン見出し
    ラインの太さや背景色を変えれば印象変わります。

    見出し1

    以下のソースをコピーして[HTML編集]へ切り替えて貼り付ける。

    <h1><span style="display:block;padding-left:0.5em;border-top:5px double #339966;border-bottom:5px double #339966;">見出し1</span></h1>

    [見たまま編集]へ戻して

    • 文字の大きさを変更:文字を選択して見出しを変更
    • 文字色を変更:変更したい文字を選択して文字色を変更
    • 背景色を変更:見出し文字全てを選んで背景色を変更
    • 上線の太さ変更:[border-top:5px double #000000;]数字を変更
    • 下線の太さ変更:border-bottom:5px double #000000;]数字を変更
    • 上線の色を変更:[border-top:3px double #339966;]#から後部分を変更
    • 下線の色を変更:[border-bottom:3px double #339966;]#から後部分を変更
    バリエーションサンプル

    見出し2

    見出し3

    見出し4



    4.左と下ライン見出し
    定番の見出し

    見出し1

    以下のソースをコピーして[HTML編集]へ切り替えて貼り付ける。

    <h1><span style="display:block;padding-left:0.5em;border-left:5px solid #339966;border-bottom:1px solid #339966;">見出し1</span></h1>

    [見たまま編集]へ戻して

    • 文字の大きさを変更:文字を選択して見出しを変更
    • 文字色を変更:変更したい文字を選択して文字色を変更
    • 背景色を変更:見出し文字全てを選んで背景色を変更
    • 左の線の太さ変更:[border-left:5px solid #339966;]数字を変更
    • 下の線の太さ変更:border-bottom:1px solid #339966;]数字を変更
    • 左の線の色を変更:[border-left:5px solid #339966;]#から後部分を変更
    • 下の線の色を変更:[border-bottom:1px solid #339966;]#から後部分を変更
    バリエーションサンプル

    見出し2

    見出し3

    見出し4



    5.左ライン見出し
    こちらも定番の見出し

    見出し1

    以下のソースをコピーして[HTML編集]へ切り替えて貼り付ける。

    <h1><span style="display:block;padding-left:0.5em;border-left:5px solid #339966;">見出し1</span></h1>

    [見たまま編集]へ戻して

    • 文字の大きさを変更:文字を選択して見出しを変更
    • 文字色を変更:変更したい文字を選択して文字色を変更
    • 背景色を変更:見出し文字全てを選んで背景色を変更
    • 左の線の太さ変更:[border-left:5px solid #339966;]数字を変更
    • 左の線の色を変更:[border-left:5px solid #339966;]#から後部分を変更
    バリエーションサンプル

    見出し2

    見出し3

    見出し4



    基本的なサンプルソースなので、いろいろデザインしてみてください。

    ブロマガは癖のあるエディタなのでイジっているうちにソースがものすごいことになることもあります。
    そんな時は一度リセットして書きなおしてください。

    このようにサブタイトルのようなデザインも出来ます。
    いろいろ工夫してみてください。

    ブロマガタイトル-Blomaga Title-

    <h1><span style="display:block;padding-left:0.5em;border-left:5px solid #000000;background-color:rgb(192,192,192);">ブロマガタイトル<span style="font-size:60%;padding-left:1.5em;">-Blomaga Title-</span></span></h1>


    ブロマガで使用している40色のカラーコード
    #000000#993300#333300#003300#003366#000080#333399#333333
    #800000#ff6600#808000#008000#008080#0000ff#666699#808080
    #ff0000#ff9900#99cc00#339966#33cccc#3366ff#800080#999999
    #ff00ff#ffcc00#ffff00#00ff00#00ffff#00ccff#993366#c0c0c0
    #ff99cc#ffcc99#ffff99#ccffcc#ccffff#99ccff#cc99ff#ffffff

    • 前の記事
      これより過去の記事はありません。
    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。