アメブロカスタマイズの最近のブログ記事

 
★おしゃれな見出し

こんなおしゃれな「見出し」はいかがでしょう!?

アメブロでは、テキストボックスの下にある「HTML表示」タブをクリックして
入れたい箇所に下記のタグを入れていきます。

amehtml.PNG

<div style="margin-left:10px;">
<div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffdddd;">
<div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)">&nbsp;</div>★おしゃれな見出し</div></div>

もちろんここにだってタグを入れれば、ちゃんと表示されているでしょう!

アメブロカスタマイズ 

■枠で囲む

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

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

「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

 

 

 

これは見出しです

このような見出しを入れたいときは

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

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

amehtml.PNG

<div style="border-left:#ff0000 8px solid; border-bottom:#ff0000 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>



画面いっぱいに広がってしまいました。

こんな時は、タグを追加しましょう!

width:500px;

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

<div style="width:500px;border-left:#ff0000 8px solid; border-bottom:#ff0000 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>



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

これは見出しです

 

これは見出しです


各色コードを変えるとこんなことも
前の色を紺に太さを8pxから20PXに
巾が520ピクセルに少し長くなりました。



これは見出しです

 

色コードをピンクに変更「#ff1493」



こちらのブログをいつも参考にさせていただいています。

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

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

 

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

 

 

 

アメブロカスタマイズ 申し込み先へのボタン

下のピンクのボタン、きれいですよね。

お申込はこちらをクリック

このような見出しを入れたいときは

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

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

amehtml.PNG

変更する場所は、赤色で表示しています。

■お申込みはこちら

■詳細はこちらなど文字も変更してね。

<a href="リンク先のアドレス" target="_blank" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;"><span style="margin:3px; padding:15px 30px; background:#ff1493;border-radius:25px; box-shadow:3px 3px 3px #999999;">お申込はこちらをクリック</span></a><br /><br />

お申込はこちらをクリック

「background:#ff1493」の色コード変更(#3b5998)するとボタンのカラーが変更できます。

カラーコードこちら

こちらのBlog

を参考にさせていただきました。

 

2017年7月

            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 31          

このアーカイブについて

このページには、過去に書かれたブログ記事のうちアメブロカスタマイズカテゴリに属しているものが含まれています。

次のカテゴリはホームページ作成です。

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

ウェブページ

Powered by Movable Type 5.2