囲み枠作成ツール

アメブロ勉強会

●講座内容
●カスタマイズ事例
●お問合せ・ご依頼

上記のような囲み枠が簡単に作れるツールを提供してくれています。
ブログ記事内囲み枠簡単作成ツール

スマホでもパソコンと同様に見えます。
▼パソコンでの見え方

▼スマホでの見え方

記事内に区切り線・水平線をひく

記事内に区切り線・水平線をひく

●表示例
①一般的な水平線<hr>指定のみ

②一般的な水平線<hr>を「HTML表示」または「タグ編集」で色を変えた場合

③css編集でスタイルを変更した場合＜点線バージョン＞

④css編集でスタイルを変更した場合＜グラデーションバージョン＞

▼パソコンでの見え方

▼スマホでの見え方

●やり方
①パソコンなら「HTML表示」スマホなら「タグ編集」画面で水平線を引きたい行に<hr>を貼り付ける。

コピペはこれを↓
<hr>

②貼り方は①同様。<hr color="#ff0000">←色を変えたい場合は赤字の部分に好きな色のコードを。色のコードは下記URLなどを参考に。

Web Safeカラー 216色

コピペはこれを↓
<hr color="#ff0000">

▼参考画像

③※パソコンのみ設定可
「HTML表示」で水平線を引きたい行に<hr>を貼り付ける。「デザインの変更」→「css編集」で以下をコピペ。

hr {
    border: 0;
    border-bottom: 1px dashed #ff0000;
    background: #fff;
}

色を変えたい場合は赤字部分を変更。
hr {
    border: 0;
    border-bottom: 1px dashed #ff0000;
    background: #fff;
}

④※パソコンのみ設定可
「HTML表示」で水平線を引きたい行に<hr>を貼り付ける。「デザインの変更」→「css編集」で以下をコピペ。

hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

ちなみに・・・
③④はcss編集でhrの設定をしていても「通常表示」では設定が反映されませんが、「表示を確認する」や公開後は設定が反映されているはずです。