パソコンが苦手な起業女性のブログxSNS戦略

アメブロで使える女性起業家向けお洒落囲み枠

WRITER
 
この記事を書いている人 - WRITER -
パソコンが苦手なアラフォー起業女性に向けて、ブログ構築の事、カスタマイズの事、その周辺の事などをブログに書いています。
詳しいプロフィールはこちら

 

アメブロを使っている皆さんは、記事本文の最後にメニューやお問合せ先、サロンへのアクセス情報等のリンク先を張り付けたり等、よくされてますよね。

NOBUKO

はい!書いてます、いろいろ…でも本文下に書くしかないんですよね。
サイドバーに書いてもスマホには表示されないし、メッセージボードに沢山書きすぎるのもアレなんで

PC苦手女子

そうなりますよね。でもしょうがないですね。というのもアメブロには、ワードプレスの様にウィジェット機能がありませんからね。
いろいろ書くのは悪くないですが、出来るだけ読者さんが見やすい様にすっきりさせたいものです。

NOBUKO

※ウィジェットとは?
固定の場所に特定の機能(記事一覧、プロフィール、ブログカテゴリー、リンク集、カレンダー、アーカイブ、広告、画像、SNSリンク等)を表示するパーツ

 

というわけで、今回はアメブロの本文下の案内表示等に使えるおしゃれな囲み枠とその使い方をお伝えします。

 

 

各種囲み枠とそのHTML

 

外枠細線

ペールトーンピンク

本文

 

以下のコードをコピペで使用して下さい

<div class="articleText">
<div style="background: rgb(250, 220, 233) none repeat scroll 0% 0%; padding: 40px; border: 4px double rgb(255, 255, 255); border-radius: 10px;">
<div style="text-align: left;"><span style="font-size: 1em;">本文</span></div></div></div>

 

ペールトーンブルー

本文

 

以下のコードをコピペで使用して下さい

<div class="articleText">
<div style="background: rgb(211, 222, 241) none repeat scroll 0% 0%; padding: 40px; border: 4px double rgb(255, 255, 255); border-radius: 10px;">
<div style="text-align: left;"><span style="font-size: 1em;">本文</span></div></div></div>

 

ペールトーンオレンジ

本文

 

以下のコードをコピペで使用して下さい

<div class="articleText">
<div style="background: rgb(254, 236, 210) none repeat scroll 0% 0%; padding: 40px; border: 4px double rgb(255, 255, 255); border-radius: 10px;">
<div style="text-align: left;"><span style="font-size: 1em;">本文</span></div></div></div>

 

 

ペールトーンパープル

本文

 

以下のコードをコピペで使用して下さい

<div class="articleText">
<div style="background: rgb(231, 213, 232) none repeat scroll 0% 0%; padding: 40px; border: 4px double rgb(255, 255, 255); border-radius: 10px;">
<div style="text-align: left;"><span style="font-size: 1em;">本文</span></div></div></div>

 

 

点線角丸枠

ピンク

本文
・〇〇○○〇
・〇〇〇〇〇

 

以下のコードをコピペで使用して下さい

<div style="padding:10px;border-radius: 20px; border: 3px dotted #FFC0CB;">本文<br>
・〇〇○○〇<br>
・〇〇〇〇〇</div>

 

ブルー

本文
・〇〇○○〇
・〇〇〇〇〇

 

以下のコードをコピペで使用して下さい

<div style="padding:10px;border-radius: 20px; border: 3px dotted #87ceeb;">本文<br>
・〇〇○○〇<br>
・〇〇〇〇〇</div>

 

パープル

本文
・〇〇○○〇
・〇〇〇〇〇

 

以下のコードをコピペで使用して下さい

<div style="padding:10px;border-radius: 20px; border: 3px dotted #ba55d3;">本文<br>
・〇〇○○〇<br>
・〇〇〇〇〇</div>

 

イエロー

本文
・〇〇○○〇
・〇〇〇〇〇

 

以下のコードをコピペで使用して下さい

<div style="padding:10px;border-radius: 20px; border: 3px dotted #ffd700;">本文<br>
・〇〇○○〇<br>
・〇〇〇〇〇</div>

 

 

 

影付き四角枠

ピンク

本文
・〇〇〇
・〇〇〇

 

以下のコードをコピペで使用して下さい

<div style="border: 2px solid rgb(255, 228, 225); padding: 6px; background-color: rgb(255, 255, 255); margin: 5px; box-shadow: rgb(255, 228, 225) 5px 5px 5px;">本文<br>
・〇〇〇<br>
・〇〇〇</div>

 

ブルー

本文
・〇〇〇
・〇〇〇

 

以下のコードをコピペで使用して下さい

<div style="border: 2px solid rgb(173, 216, 230); padding: 6px; background-color: rgb(255, 255, 255); margin: 5px; box-shadow: rgb(173, 216, 230) 5px 5px 5px;">本文<br>
・〇〇〇<br>
・〇〇〇</div>

 

 

グリーン

本文
・〇〇〇
・〇〇〇

 

以下のコードをコピペで使用して下さい

<div style="border: 2px solid rgb(46, 139, 87); padding: 6px; background-color: rgb(255, 255, 255); margin: 5px; box-shadow: rgb(46, 139, 87) 5px 5px 5px;">本文<br>
・〇〇〇<br>
・〇〇〇</div>

 

イエロー

本文
・〇〇〇
・〇〇〇

 

以下のコードをコピペで使用して下さい

<div style="border: 2px solid rgb(240, 230, 140); padding: 6px; background-color: rgb(255, 255, 255); margin: 5px; box-shadow: rgb(240, 230, 140) 5px 5px 5px;">本文<br>
・〇〇〇<br>
・〇〇〇</div>

 

オレンジ

本文
・〇〇〇
・〇〇〇

 

以下のコードをコピペで使用して下さい

<div style="border: 2px solid rgb(255, 165, 0); padding: 6px; background-color: rgb(255, 255, 255); margin: 5px; box-shadow: rgb(255, 165, 0) 5px 5px 5px;">本文<br>
・〇〇〇<br>
・〇〇〇</div>

 

パープル

本文
・〇〇〇
・〇〇〇

 

以下のコードをコピペで使用して下さい

<div style="border: 2px solid rgb(237, 142, 237); padding: 6px; background-color: rgb(255, 255, 255); margin: 5px; box-shadow: rgb(237, 142, 237) 5px 5px 5px;">本文<br>
・〇〇〇<br>
・〇〇〇</div>

 

 

 

アメブロ内での囲み枠使用方法

 

その1

 

ブログ記事投稿画面を開け、下の方へ行くと「通常表示」と「HTML表示」がありますので、「HTML表示」をクリックします。

 

 

 

その2

 
「HTML表示」の白い枠内に使用したい枠の種類&色のコードをコピペします。
 

 

 

その3

 

もう一度「通常表示」をクリックして元の画面に戻ると、下図の様に枠線が(中の文字入りで)表示されますので、枠内の文字を好きな文言に変更して下さい。

 

 

 

 

最後に

 

記事の上や下に設置する以外にも、お客様の声や募集記事、その他メッセージボード等、いろいろなパターンで使えます。

是非使用してブログを分かりやすく、見やすく、すっきりお洒落な表示にしてみて下さい。

 

 

※注意事項

コードや使用方法に関するご質問や、その他不具合が生じましてもお答え致し兼ねます。

使用は自己責任にてお願いします。

 

 

 

この記事を書いている人 - WRITER -
パソコンが苦手なアラフォー起業女性に向けて、ブログ構築の事、カスタマイズの事、その周辺の事などをブログに書いています。
詳しいプロフィールはこちら







Copyright© YOUR COLORs WEB , 2018 All Rights Reserved.