アメーバブログ

【コピペOK】アメブロの囲み枠○種類!記事内をおしゃれに装飾しよう

アメブロ囲み枠

無料ブログサイトのアメブロでは、囲み枠を使えるって知っていましたか?

無料だから、囲み枠を作るのが大変そう。

どうやって囲み枠を記事内に入れていくの?

おしゃれな囲み枠を使いたい。

手軽に囲み枠を作り、記事内に入れていくことができます。

これを読んで、素敵なアメブロを作っていきましょう。

今回は、全てiPhoneのアメブロアプリから行う設定となっています。

コピペでOK!アメブロの囲み枠のやり方を解説

この記事を読んで、できるようになること。

    アメブロの記事をおしゃれにする方法
    アメブロで囲み枠を使った記事の書き方
    アメブロアプリで手軽に囲み枠を手軽にできる方法

囲み枠をデザインすることはアメブロでもできる!

アメブロの囲み枠を使うことで、おしゃれで読んでみたいと思えるブログを作ることができます。

うまこ
うまこ
囲み枠を使っておしゃれなブログにしよう!

アメブロで囲み枠をつくるときの幅は?

囲い枠のHTMLソースの中に

width:200px;

を追加する方法です。

このように表記すると…

<div style=”background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:200px;“>記事本文</div>

記事本文

幅が200pxのものができあがります。

数字は自分の好きなように変更できます。

うまこ
うまこ
でも、もっと簡単にできたら楽ですよね。

それは、文字数に合わせて自動調整をしてくれる方法があります。

display:inline-block;

を追加する方法です。

これを追加し、このように表記すると…

<fieldset style=”display:inline-block;background:#ffcccc; padding:10px; border:none;”> 本文 </fieldset>

 本文

これで、文字数に合わせて自動表記されるものになりました。

アメブロのメッセージボードにも囲み枠が使える

メッセージボードにも、囲み枠が使えます。

設定方法は、

マイページブログ管理設定・管理メッセージボード

アメブロアプリ 設定・管理 アメブロアプリ メッセージボード

 

ここに囲み枠でコピーしたコードを貼り付けます。

アメブロアプリ メッセージボード 囲み枠挿入

 

 

打ち込んだ後は、自分のブログ情報を確認のところで確認します。

アメブロアプリ メッセージボード 確認

 

ここで、このような形でコードが反映されていれば完了になります。

アメブロアプリ メッセージボード完成形

アメブロの囲み枠はhtmlで入力!

囲み枠を使う時、記事入力でそのまま使うと、上手く反映されません。

囲み枠のコードをコピーしましたら、記事の下にあるHTML編集をタップしていただき、そこに貼り付けていきます。

アメブロアプリ HTML入力
うまこ
うまこ
HTML編集を押さないで直接貼り付けると、コードがそのまま反映されちゃうから注意しよう!

アメブロの囲み枠にリンクを入れる方法

囲み枠にリンクを入れる前に、入れるリンクを作成します。

下の囲んだリンク挿入マークをタップ

アメブロアプリ リンク貼り方

入れたいリンクと、リンク名を入れます。

アメブロアプリ リンク挿入

このような形で入力します。

アメブロアプリ リンク挿入②

画面の下にあるHTML編集をタップ

アメブロアプリ HTML編集

先程、入力したものがこのような表記になります。

アメブロアプリ HTML編集画面

ここに、使いたい囲み枠のコードを貼り付けます。

アメブロアプリ HTML編集画面 囲み枠貼り付け

リンクで作ったものをカットして、本文と表記されているところに貼り付けます。

このような状態になったら、あとは実際に確認。

アメブロアプリ HTML編集画面 囲み枠挿入

HTML編集を終了すると、トップ画面はこのような表示になります。

アメブロアプリ 記事を書くの画面

最後は、記事に反映されているかブログにて確認して下さい。

アメブロアプリ 囲み枠反映
うまこ
うまこ
リンクもしっかり飛べるか確認が大切だよ!

 

アメブロの囲み枠を中央寄せにする方法

アメブロの囲み枠は複数行したほうがうまく反映される

複数行を指定することで、より見やすくなります。

そして、たった一つのコードを入力するだけで作ることができます。

<br> と入力するだけです。

実際にやってみるとこうなります。

アメブロアプリからHTML編集をタップ

アメブロアプリ HTML編集

使いたい囲み枠を貼り付ける

アメブロアプリ HTML編集 コードを貼り付け

ここで、文章を入力。

そして、改行したい文章の後ろに<br>を入力。

アメブロアプリ HTML編集 入力

入力後の様子がこうなります。

アメブロアプリ HTML編集後の内容

プレビューで確認。

アメブロアプリ プレビュー
うまこ
うまこ
プレビューでどうなっているか確認することがオススメだよ!

アメブロの囲み枠はiphoneでかわいい仕上り!

今紹介したものたちは、全てiPhoneのアメブロアプリで行えます。

スマホ一つあれば、素敵なブログを作ることができます。

アメブロの囲み枠のデザイン【見出し・タイトル調】

■タイトル
本文
<div style="background:#4169e1; border:1px solid #4169e1; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトル</font></div>
<div style="border:1px solid #4169e1; padding:10px; font-size:1em;">本文</div>

タイトル
<div style="border-left: 10px solid #66ccff; border-bottom: 2px solid #66ccff; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;">タイトル</div>

タイトル

本文

<fieldset style="border:5px double #66ccff;"><legend>タイトル</legend> 本文</fieldset>


ここに本文を入力する。
改行はShift+Enter

<fieldset style=”border:3px double #ff6699;”><legend><span style=”font-weight:bold;”>■ここにタイトルを入力する</span> </legend>ここに本文を入力する。<br />改行はShift+Enter</fieldset>

アメブロの囲み枠【シンプル系】

角丸

本文
<fieldset style="background:#add6ff; padding:10px; border:4px double #ffffff; border-radius:10px;">本文</fieldset>

点線

本文
<fieldset style="background:#eaf4ff;padding:10px;border:2px dotted #0000ff;">本文</fieldset>

本文
<fieldset style="background:#efffff; padding:10px; border-radius:10px; border:2px dashed #33ccff;">本文</fieldset>

吹き出し

ここに吹き出し文が入る
ここに吹き出し文が入る
ここに吹き出し文が入る

<div style=”background:#ffa566; color:#ffffff; border:1px solid #ffa566; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;”>ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style=”margin-left:8%; border-top: 12px solid #ffa566; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;”></div>

ここに文章

<div style=”margin:0;background: #ffffff;color: #000000;border:2px solid #ffd1e8;text-align: left;padding: 8px;border-radius: 10px;”>ここに文章</div>
<div style=”margin-left:20%;width: 0;height: 0;border-top: 10px solid #ffd1e8;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;”></div>
<div style=”margin-left:20%;margin-top:-21px;width: 0;height: 0;border-top: 10px solid #ffd1e8;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;”></div>

付箋

<div style=”margin-left:10px;”><div class=”l-border l-p-t l-p-r l-p-b l-p-l” style=”margin: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:#ddeeff;”>★</div></div>

<div style=”margin-left:10px;”><div class=”l-border l-p-t l-p-r l-p-b l-p-l” 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:#ffffcc;”><div style=”width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)”></div>★</div></div>

アメブロの囲み枠【かわいい系】

<div style=”width:400px;”><div class=”l-border l-p-t l-p-r l-p-b l-p-l” style=”margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2pxrgba(0,0,0,0.3);background:url(https://stat.ameba.jp/user_images/20141029/18/wazameba/37/f1/p/o0300030013113018948.png);border-radius:10px;”><div style=”background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;”><div style=”border:2px dashed #f9d6e8;border-radius:5px;padding:10px”>★</div></div></div></div>

<div class=”l-border l-p-t l-p-r l-p-b l-p-l” style=”background-size:24px 24px;background-color:#f90;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);”><div style=”color:#333;background:#fff;padding:10px;border-radius:5px;”>★</div></div>

アメブロの囲み枠【ぼかし系】

<div style=”padding: 10px 20px; margin: 10px; background: #ffe4e1; box-shadow: #ffe4e1 0 0 10px 10px; -webkit-box-shadow: #ffe4e1 0 0 10px 10px; -moz-box-shadow: #ffe4e1 0 0 10px 10px; font-size: 90%;”>

アメブロの囲み枠【グラデーション系】

ピンク囲み枠 角丸 影あり
★★★好きな言葉を入れてくださいね★★★

<div style=”padding: 25px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 50px #FFB0D8inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #FFB0D8 inset, 5px 5px 0 #cecece; -webkit-box-shadow: 0 0 50px #FFB0D8 inset, 5px 5px 0 #cecece;”>★★★好きな言葉を入れてくださいね★★★</div>

グリーン囲み枠 角丸 影なし

★★★好きな言葉を入れてくださいね★★★

<div style=”padding: 25px;-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 50px #A1D784inset; -moz-box-shadow: 0 0 50px #A1D784 inset; -webkit-box-shadow: 0 0 50px #A1D784 inset;”>★★★好きな言葉を入れてくださいね★★★</div>

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です