アメブロ カスタマイズレッスン

アメブロカスタマイズ/これだけで大丈夫!アメブロでよく使う枠5選

40代からのパソコンが苦手な
お一人様起業の方のための
アメブロヘッダー・カスタマイズデザイン
野口陽子です。

 

 

 

アメブロの中で、「枠」を使うことは大事です。

お様に大事なポイントを伝えたり、

メニューやフォームへの導線を目立たせたり。

 

「枠」は記事内や

サイドバー・メッセージボードにも使えます。

 

「アメブロ 枠」で検索すると

多くの「枠」の種類がありますが

実のところ、そんなに多くいろいろな種類を

使う必要がない気がしております。

 

もちろん、こだわりたい方は

可愛い枠とか使われたらいいのですが、

ブログのカスタマイズを

している、していないに関わらず

お客様にわかりやすく、

デザインに響かないのは

シンプルな「枠」ですね。

 

そういう「シンプル派」の方のための

使いやすい「枠」をご紹介致します。

 

枠の設定の仕方

 

それぞれの枠のコードをコピーして
「HTML表示」に切り替えてから貼り付けます。
「通常表示」に戻すと「枠」が出来ていますので
その中に文章やリンクを入れていきます。

改行はキーボードの「Shift+Enter」。
間違った時は「Shift+Backspace」で戻れます。

カラーは各コードの「#●●●」の

カラーコードの部分を変更します。

右矢印 WEB色見本 HTLMLコード
右矢印 「記事内に枠を設置する方法」はこちら

 

①細線の囲み枠

枠内の記事本文

 

<div style="padding:10px;border-radius: 0px;border: 1px solid #ff0000;">枠内の記事本文</div>

 

 

②タイトル付き枠

■タイトルはこちら■
枠内の記事本文

 

<div style="background:#ff69b4; border:1px solid #ff69b4; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ff69b4; padding:10px; font-size:1em;">枠内の記事本文</div>

 

③見出し

ここに文字

 

<div style="border-left:8px solid #ffa500; border-bottom:1px solid #ffa500; padding:0 0 4px 8px; font-weight:bold;">ここに文字</div>

 

④付箋

ここに文字

 

<div style="border: #ff69b4 solid 1px; border-left: #ff69b4 solid 10px; padding: 10px;">ここに文字</div>

 

⑤点線の囲み枠(丸角)

ここに文字

 

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border:2px dotted #ff69b4;">ここに文字</div><br>

 

 

これだけで、

あとはカラーを変更すると

バリエーションが増えます。

 

シンプルなほうが、かえって

美しい場合もありますよね。

 

使う枠を決めておいて
統一すると、ブログが整ってる感が出ます。

 

また、コピペがいちいち面倒という方も
いらっしゃると思います。

アメブロには「複製機能」がありまして
記事を複製することができます。

 

あらかじめ、枠をコピペして
下書き保存しておき、それを複製して

新しく記事を書く、という手順を踏んでいる方も

いらっしゃいますが、

 

ご自分のスキルを高めるためにも

これからは「ツール」を使っていきましょう。

 

アメブロの枠を作るのに

便利なツールがあります。

 

右矢印 ブログ記事に超簡単に囲み枠を作れるツール

「アメケア」を活用してみる

 

「アメケア」は、一度使うと手放せません。

枠を設定しておけば1クリックで設置できます。

ぜひ、使ってみてくださいね。

 

 

-アメブロ, カスタマイズレッスン

Copyright© Design-feel.net , 2020 All Rights Reserved Powered by AFFINGER5.