その時に、気になったのが「みんなオシャレな文章枠を使っているな～(・∀・)」ということ。
それを見てから自分のブログを見直すと、なんかイマイチ…野暮ったい(´Д｀)
そこで、どうにか他の方のブログのようにおしゃれな感じで大切なところを目立たせるための囲み枠を使うことができないかと調べてみました。
アメブロ内におしゃれな囲み枠を入れたい！その方法は？
「他の方のブログのようにおしゃれな感じで大切なところを目立たせたい」
そう思って、何か方法がないかと調べてみたところ、「『CSSコード』を追加編集してから、本文にショートコードを入れる」と紹介されているサイトを見つけました。
それがこちらのサイトです ↓
CHECK 1 ⇒【アメブロカスタマイズ】ブログ内におしゃれな枠を入れる方法
なるほど！
まずはCSSコードを設定してから、
文中でショートコードを入れたらいいんだね
はる自身は、Wordpressをすでに4年使っていますし、これまでにも「CSSコード設定」というものはしたことがあります。
とは言っても、自分で作るのではなくて他の方のサイトから「コピーペーストOK」のものを取り入れさせていただくだけなので、やり方を見ながらアメブロ内のＣSSコード編集をしてみることにしました。
が…。
実際にアメブロの設定画面を見てみると「CSS編集」という項目がない(；ﾟДﾟ)！
アメブロに「ＣSS編集」がない！おしゃれな囲み枠は使える？
アメブロ内におしゃれな囲み枠を入れるために、調べたサイトに載っている「CSS編集」という設定がなくなっている。
そうなると、プロフィールや文末の誘導文におしゃれな囲み枠を入れてインパクトを出すという目論見が果たせなくなってしまう(´Д｀)
そこで、さらに上のサイトをよくよく読んでみると「もし万が一にＣSSコードが使えなかった場合でも文内に直接コードを入力することで表示することができる」とありました。
そこで、本当に直接ＣSSコードを貼ってみたのですが、表示確認をしたらそのままＣＳＳコードが出てきて(´Д｀)
結構、試行錯誤した結果、ようやくやり方がわかりました(ﾟ∀ﾟ)
そのやり方は以下の通りです。
＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾
1.アメブロの記事投稿画面で文章入力画面の下にある「HTML」を選ぶ
2.囲み枠で「囲みたい文章」を入力する
3.「<div style=” ”>」と「</div>」を入力する
4.以下のCSSコードの赤太文字部分を「<div style=” ”>」の「” ”」の間にコピーペーストします
(以下のCSSコードは「サルワカ」というサイトで紹介されているたくさんの囲み枠デザインから「布風」という種類を引用させていただいています。)
.box15 {
padding: 0.2em 0.5em;
margin: 2em 0;
color: #565656; background: #ffeaea;
box-shadow: 0px 0px 0px 10px #ffeaea;
border: dashed 2px #ffc3c3;
border-radius: 8px;
}
.box15 p { margin: 0; padding: 0; }
5.最終的なコードはこうなります
<div style=”
padding: 0.2em 0.5em;
margin: 2em 0;
color: #565656; background: #ffeaea;
box-shadow: 0px 0px 0px 10px #ffeaea;
border: dashed 2px #ffc3c3;
border-radius: 8px;
”><p>囲みたい文章</p></div>
＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾
これを、記事投稿のHTML表示の画面で入れると、アメブロの記事がかわいくカスタマイズできました(＾＾)
上で紹介した囲み枠は、「サルワカ」というサイトで紹介されているものなのですが、他にもいろんなデザインのCSSコードを紹介していらっしゃるので、自分好みの囲み枠デザインを探してみてくださいね(＾＾)
「サルワカ」サイトの囲み枠デザインはこちらから確認することができます！
CHECK 2 ⇒ブログに貼るおしゃれな枠バリエーション「サルワカブログ」
今回の気付きと反省
アメブロは記事投稿がしやすくて、とても気軽に記事数を伸ばすことができます。
でも、やはり通常の文字と写真だけではインパクトに欠ける。
やはり自分のプロフィールやワードプレスへの誘導文は読者の目につくような、多少のアピールはした方が良い気がします。
もし、自分のアメブロ記事を見て「シンプル過ぎる」「もう少しアピール感を出したい」「ちょっとおしゃれな感じで自己紹介したい」などがあったらやってみてくださいね(＾＾)
「在宅で稼ぐ」を学ぶは楽しい！｜ネットビジネスの教科書一覧
