アメブロで使える可愛い囲み枠♡そのままコピペで、見やすく可愛いアメブロ記事を作りましょ♡①枠線の貼り方編

こんにちはクローバーmini

ケイト
ケイト

1人でアメブロのカスタマイズと戦っているあなたのお手伝い、
講師の杏純(アンジュ)・ケイトですkateclovermini

手軽に始められて
たくさんの人に知ってもらえるツール。

ハッピーちゃん
ハッピーちゃん

それが「アメブロ」

また、いろんなテンプレートがあったり
きれいなブログが簡単に出来るんだけど

他の人のアメブロみたいに
ちょっと変えてみたいけどどうしたらいいの?

というあなたのお悩みにお答えします。

私も可愛い囲み枠を使ってみたい♡

お客様からのお声です。

毎日がんばって書いてるんですよ。
自宅サロンのコースメニューも載せてます。
でもなんとなく読みにくくて…

他の人みたいに可愛い枠で囲んだらわかりやすくなるのかな?
でもどうやってやったらいいか難しくてわからない

ハッピーちゃん
ハッピーちゃん

そんなあなたにコピペで出来ますよ!

ケイト
ケイト

では行ってみましょ~

アメブロに可愛い枠をコピペする方法

どの枠のコピペも同じ方法で出来ます。

まずは基本を知ってくださいね。

まず、この枠をコピペしてみましょう。

★ここに文章をいれてね
改行する時はshiftを押しながら
enterキーを押して

◆この枠はこれをコピペすると作れますよ◆

<div style="width: 400px; max-width: 100%;">
<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 2px rgba(0,0,0,0.3); background: url('https://stat.ameba.jp/user_images/20200318/14/angekateft1610/50/01/p/o0300030014729881586.png'); border-radius: 10px;">
<div style="background: rgba(255,255,255,0.85); padding: 5px; border-radius: 5px;">
<div style="border: 2px dashed #cbdcf6; border-radius: 5px; padding: 10px;">★ここに文章をいれてね<br />改行する時はshiftを押しながら<br />enterキーを押して</div>
</div>
</div>
</div>
ハッピーちゃん
ハッピーちゃん

すでに難しそうなんですが…

ケイト
ケイト

ゆっくりと順番にすれば大丈夫。

記事を書く画面を開く

まずは記事を書く画面を開けましょう。

記事を書いてからコピペしても大丈夫です。

画面の下をご覧ください。
こんなタブがあるので「HTML表示」をクリック。

HTMLタブを押して、HTML画面を開ける

こんな風になってますよ。
(何も書いてなければ真っ白です。)

ハッピーちゃん
ハッピーちゃん

見た事なくてもビックリしないでね

一気にコピペする

先程の枠を一気にコピペする。

こんな風になりました。

ハッピーちゃん
ハッピーちゃん

さあ、見てみましょう

通常表示に切り替える

ハッピーちゃん
ハッピーちゃん

ちゃんと枠ができた?

さあ、入力してみよう!

中に書いてる文字を消してから書いてね。

ハッピーちゃん
ハッピーちゃん

あれれ?変な線がはいっちゃった!

ケイト
ケイト

大丈夫。次を見て下さいね。

こんな事が起こったら?

よくある「困りごとあるある」の解消法です

改行したら、線ができちゃった

ハッピーちゃん
ハッピーちゃん

改行したらどんどん線が入っちゃった。
どうしたらいいの?

焦ればあせるほど、線が増えていく…

まずはHTML表示を見てみましょう

なんだか、文字の間にたくさんの文字が…
これが線の正体です。

ここを消しましょう。

ハッピーちゃん
ハッピーちゃん

え?ここで消すの怖い!

ケイト
ケイト

大丈夫です。普通の方法でできますよ。

通常表示にして、線を消す

線を消したい場所にカーソルを置く。

そしてbackspaceキーで消してみると消えますよ

こういうところを選んでbackspaceキー

もう一度HTML表示を見ると
間の文字が無くなってます

どんどん消すと

こんな感じに線はなくなりました。
あとは、もう一度好きなところで改行すればいいのですが、

ケイト
ケイト

改行する時は、
shiftlキーを押しながらEnterキーを押してくださいね。

seikou_syukufuku_woman

キターーーーーー!!!

枠の下に新しく記事を書きたいのに書けないよ~

ハッピーちゃん
ハッピーちゃん

枠も出来たし、この枠の下に記事を書いてっと

ハッピーちゃん
ハッピーちゃん

え?カーソルが下に動かないよ!
改行したら線が出るし

shift+enterだと空白が増えるだけだし

ハッピーちゃん
ハッピーちゃん

どうしたらいいの~

まずはHTML表示を見てみましょう

なんだか、文字の間にたくさんの文字が…

それは無視して一番最後に何か文字を入力してみましょう。

「あ」だけでも構いません。

今回は「ここが最後です」と入力しました。

通常表示にして、文字を消す

通常表示にして、先ほど入力した文字の上から書きたい文字を書けばオッケー

これであなたのアメブロ記事に可愛い枠を作ることができましたよ

seikou_syukufuku_woman

キターーーーーー!!!

いいなぁ、あんなのどうしたらできるんだろ~


指をくわえて見てる方、

「よし、私もやってみよう!」

となりましたか?

次回はいよいよ「コピペで出来る可愛い枠編」ですよ。

ハッピーちゃん
ハッピーちゃん

お楽しみに

【おまけ】自分で好きな色の枠を作りたい方へ

現在アメブロのブログスタンプのカラーコードを集める「アメブロブログスタンプコレクション」を作成中。

プロが作る絶妙な色合いのスタンプ枠の色が一目でわかる優れものですよ。

 

 

でもとりあえず、枠の色を自分で変えたい方はこちらがおススメ。

dashed #cbdcf6;やなど、ピンク文字のところにコードを書き替えるだけ!

 

色の識別能力は訓練できます。
普段から、たくさんの色の違いを見るのがおススメ。

 

 

 

 2020/6/12発売の新刊!

 

 

【おまけ】うまくいかない!そんな時は?

もし、途中でアメブロの表示がおかしくなったら?

あわてずにコピペの文字を全部消してください。

そして、再度ゆっくり慌てずに作業をすればOK!

ハッピーちゃん
ハッピーちゃん

コピペをする前には、まず下書きを保存
それ以前に書いたものが消えないようにしてくださいね。

ケイト
ケイト

保存してなくて、書いてた記事が消えた悲しみは本当にもう…
雪のように…

ハッピーちゃん
ハッピーちゃん

ケ、ケイト先生?

反映されない原因あるある①

自分で入力した時に""(ダブルクォーテーション)が
””(日本語表示のダブルクォーテーション)
になっている。

ハッピーちゃん
ハッピーちゃん

Wordなどにコピペした時など、
勝手にWordが変えていることがあります。

反映されない原因あるある②

時々、コピー元のサイトに書かれているコード自体の
""(ダブルクォーテーション)が
””(日本語表示のダブルクォーテーション)になっている場合がある。

WordPressを使っていると、初期設定で勝手に変換されてしまうそうです。
記事を書いてる方も気づかないで書かれている事があります。
 
私も知らずにやってしまいました。

ハッピーちゃん
ハッピーちゃん

そんな時はいったんメモ帳などにコピペし、
置換機能を使って””→"" に置換しましょう。

 

ハッピーちゃん
ハッピーちゃん

その他のサロン支援記事はこちら

 

アメブロのカスタマイズは


アメブロにもメニューバーを作りたい時は?

アメブロに可愛い枠を作りたい時は♡基本の貼り付け編

アメブロテンプレート別メニューバーの色が変更できます。今使ってる素敵なテンプレートにそのままコピペでOK

アメブロのブログスタンプの色コレクション♡お気に入りの色があったら、囲み枠やメニューバーの色に使ってみてね。(日々更新中)


Skypeを使ってオンライン教室をしてみたいなら


Skypeの無料会議室「Meet Now」の使い方を丁寧に解説。オンラインサロンを始めてみたい、Zoomから乗り換えたい方必見。

【windows10】Skypeの無料会議室「Meet Now」で音声が聞こえない時に試してほしい事。最後の手段です。

生徒さん募集や予約の連絡ツールをメールからLINEに変えてみよう


LINE公式アカウントに登録して、オンラインサロンに来てもらおう。登録方法を画面で分かりやすく説明します。

【LINE公式アカウント登録マニュアル②】アカウントを登録したら、個人用LINEを使って応答のテストをしてみましょう。

 

アメブロではその日のラッキーデーのポイントや、ちょっとしたことを更新しています。
よろしければこちらもご覧ください。

 

 

 

ケイト
ケイト

今日も最後までお読みいただきありがとうございました。

サロン経営での困ったをお助けします。
浮いた時間であなたのやりたいことができますように。

あなたの才能をパソコン仕事で削らないで。
あなたしか出来ないことに力を注いでくださいね。

あなたの心に優しく寄り添います。
講師:杏純(アンジュ)・ケイト

 

 

今すぐアフィリエイトをしてみたい初心者におすすめ!
登録無料・審査なし!
セルフバックですぐにブログからの収入が得られるんですよ。
しかも今ブログを持っていなくても登録できるんです。
一度覗いてみる価値ありますよ。
まずはここから始めてみるのがいいですよ。

ここもお勧め。
キャッシュバックも充実。
チリも積もれば山となる。
そして何より「報酬振込手数料」が「もしも」負担。
全額自分の報酬になるのが、何気にうれしい♡

ここは審査結構厳しめです。
でもふるさと納税
ぐるなび、食べログ、一休をいつも使ってる方は必見!

広告を作成しなくても、自己購入で収入が発生。
しかも振込手数料は無料。
1000円から収入をもらえます。
思った以上にちょっとしたお小遣いになりますよ

このサイトを作る時にお世話になりました。
エックスサーバーは質問すると、ホントにすぐ丁寧なお返事がきました。
ビックリ!

 

時々キャンペーンやってます。
そういうキャンペーン中に申し込むのが一番お得!
しかもWordPressクイックスタート実施中!月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

自分だけのドメイン名。早い者勝ちですよ。私は取れて満足です。


 

タイトルとURLをコピーしました