テンプレを利用して簡単にブロマガを編集!
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

テンプレを利用して簡単にブロマガを編集!

2016-11-16 22:57
  • 2
この記事はブロマガの
見たまま編集について書かれたものです。

テンプレを利用して簡単にブロマガを編集!

普段このブロマガでデザインして編集しているものを、誰でも簡単に「見たまま編集」で利用できるように案内します。誰でもできるように案内していますので編集が苦手な人でもできるように書いています。

できるブロマガ記事のデザインは下の画像のように。

ただ文字を書いただけですと寂しい感じですが、テンプレの場合にはシンプルでも少しメリハリがついた印象になります。

手順

まず、下のソース内の文字列をコピーします。
(グレー背景の文字列をマウスでドラッグして「ctrl+c」)

ソース
<div style="width:400px;font-size:12px;margin:30px auto;padding:15px;text-align:center;color:#ffffff;background-color:#4169e1;">この記事は・・・・・・ついて書かれたものです。</div><div style="border-left:15px solid #0760bb;padding:5px;padding-left:10px;height:20px;margin:10px;"><h2 style="font-size:16px;font-weight:bold;display:inline;">ここに見出しを書きます。<br></h2></div><div style="margin:35px;margin-top:20px;">ここに本文を書きます。<br>ここに本文を書きます。<br><br></div>

以下、番号順に進めて編集していきます。

後は自由に編集すればOKです。もし1番上の一言案内のヘッダーの背景色を変えたい場合は、下の赤字の部分を変えます。また、見出しの左側のラインの背景色を変えたい場合は青字の部分を変えます。

ソース
<div style="width:400px;font-size:12px;margin:30px auto;padding:15px;text-align:center;color:#ffffff;background-color:#4169e1;">この記事は・・・・・・ついて書かれたものです。</div><div style="border-left:15px solid #0760bb;padding:5px;padding-left:10px;height:20px;margin:10px;"><h2 style="font-size:16px;font-weight:bold;display:inline;">ここに見出しを書きます。<br></h2></div><div style="margin:35px;margin-top:20px;">ここに本文を書きます。<br>ここに本文を書きます。<br><br></div>

変える場合は「HTML編集」で変えましょう。または事前に変えたものをコピーして貼り付ける方法もありです。色については以下の様なサイトを参考にすると便利です。

WEB色見本 原色大辞典 - HTMLカラーコード

広告
コメントを書く
コメントをするには、
ログインして下さい。