アメブロで記事にメリハリをつけたい【脱アナメルマガ】

見やすい記事、読みやすい記事にする工夫

 


集まる集客テクニカルコーチ

田尻佐和子です。

 

2月の個別相談会は満員御礼にて
終了させていただきました。
15枠に対して31名の方より
お申し込みをいただきました。
ありがとうございました。

 
 
さて、
本日も個別相談会での
ご質問からピックアップいたします。
 
 
アメブロの記事を
見やすくしている人がいますが、

見出しとか、枠で囲んだりとか、
どのようにやるんですか?
 
 
例えば、
こんな感じですね。
 
 
スクリーンショット 2018-02-19 23.25.17.png
このような装飾で、
メリハリをつけることで、
記事が読みやすくなりますね。
 
 
 
これは、
いくつかやり方があるのですが、
アメブロでは、
CSSカスタマイズが
できないデザインの方も
多いと思いますので、
 
 
そのまま記事編集の画面で、
コピペできる方法をオススメしておきます。
 
 
自分でやろうとしたときに、
[アメブロ 見出し]
などで検索した時は、
 
 
たくさんの記事がヒットすると思いますので、
その中から、
気に入ったデザインの解説を
してくださっているものを選んで、
コピペして書き換えたりしてください。
 
 
この時に、
CSSファイルを編集するのではなく、
記事編集でHTML表示にして
貼り付けると書いてあるものを
選んでくださいね。
 
 
上記の見本では、
このようなコードを貼り付けます。
 
 
・見出し
<div style=”border-left:8px solid #FF3F7F; border-bottom:1px solid #FF3F7F; padding:0 0 4px 8px; font-weight:bold;”>見出し</div>
 
 
 
・囲み枠
<div style=”background: #FF3F7F; border: 1px solid #FF3F7F; padding-left: 10px; border-top-left-radius:10px; border-top-right-radius:10px;”><span style=”color: #ffffff; font-weight: bold;”>ここにタイトル</span>
</div>
<div style=”border: 1px solid #FF3F7F; padding: 10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;”>ここに本文
</div>
 
 
どちらも、
#のところは、色のコードになっています。
ご自身のデザインと合う色に変更してお使いくださいね。
 
 
色のコードは、
こちらのサイトなどを参考に、
コードを取得してください。
https://www.color-sample.com/
 
 
 
上記のコードを、コピーして、
記事編集画面でHTML表示にして、
貼り付けます。
 
スクリーンショット 2018-02-20 0.02.22.png
 
 
そして、通常表示に戻して、
見出し、ここにタイトル、ここに本文
と書いてあるところを、
実際に表示したいものに書きかえてくださいね。
 
 
ちなみに、このコードは、
このままWordPressでも使えます。
 
 
是非、チャレンジしてみてください。