アメブロカスタマイズ 枠で囲む

| コメント(0) | トラックバック(0)

アメブロカスタマイズ 

■枠で囲む

このように文章を囲みたいとき

アメブロのブログを書く文章を書くボックスの下に

「HTML表示」のタブをクリックして下のタグをコピーする。

amehtml.PNG

<div style="background:#eeeeff; padding:10px; border:2px dotted #0000ff;">枠内の記事本文</div><br>

通常表示に戻して文章を変更する。

059.jpg

■角丸枠

枠内の記事本文

HTML表示のタブをクリックして下のタグをコピーする。

amehtml.PNG

<div style="background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;">枠内の記事本文</div><br>

通常表示に戻して文章を変更する。

059.jpg

■カラーコードを背景を「#ffeeee」、枠線を「#ff0000」に変更

枠内の記事本文

<div style="background:#ffeeee;padding:10px; border:2px dotted #ff0000;">枠内の記事本文</div><br>

059.jpg

■枠の幅を調整したいとき、こんな時は、タグを追加しましょう!

width:500px;

""の間ならどこに入れてもOKですが、タグとタグとの間には「;」で
命令が区切られていますので気を付けて下さい。
下のように初めに入れるなら;」お忘れなく

<div style="width:500px;background:#eeeeff; padding:10px; border:2px dotted #0000ff;">枠内の記事本文</div><br>

s-1g.jpg

幅が500ピクセルに変更されました。

枠内の記事本文

059.jpg

■影付き

枠内の記事本文

こちらのサイトを参考にさせていただいています。

いつも参考にさせていただいています。

よく使う色コードは、こちらのブログに書いてあります。

 リンクボタン作成の記事はこちら

最後までお読みいただき

08.png

 

 

 

トラックバック(0)

トラックバックURL: http://nc-works.jp/mmtt/mt-tb.cgi/122

コメントする

2017年9月

          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

このブログ記事について

このページは、studyが2017年6月 6日 23:51に書いたブログ記事です。

ひとつ前のブログ記事は「DreamWeaverでイメージマップ作成」です。

次のブログ記事は「スマホの便利アプリ紹介」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ

Powered by Movable Type 5.2