こんにちは。
Smilefactoryten

代表 加藤敦志 です。

 

 

 

 

 

ブログの書き方

ブログの書き方って正解はないと思うのです。
書く人が自由に書くべきです。

 

しかし、僕も含めて書く人が、自分のブログを読んでくれる人のために、読みやすいブログを書くとしたら...

 

今日はブログの書き方に困っていたり悩んでいる人には絶対便利で簡単にブログが書ける、「雛形」を用意しました。

 

僕なりの、アメブロのブログの正しい「書き方・雛形」についてご紹介させていただきます。

 

 

 

 

ブログの雛形

僕の雛形は、画像で表示している形になります。

 

 

流れはこんな感じです。

 

挨拶文

アイキャッチ写真

見出し1→文章&写真

見出し2→文章&写真

見出し3→文章&写真

囲み枠

挨拶文

 

 

 

 

ブログの雛形HTMLタグ

ブログの雛形のHTMLタグはこちらになります。

これをコピーして貼り付けて自由に使ってくださいませ。

 

ただし、「アイキャッチ写真」「文字」などは、自由に消して書き直して使って下さい。

 

 

HTMLタグのコピペの方法はこちらのブログ記事を読んでみて下さい。

 

 

 

<<ブログの雛形HTMLタグ>>

 

色も何種類か揃えました。

 

【ケンブリッジブルー】

 

<p>こんにちは。<br>
◯◯◯です。</p>
<p>&nbsp;</p>
<p>アイキャッチ写真</p>
<p style="text-align: center;"><img alt="" contenteditable="inherit" height="600" src="https://stat.ameba.jp/user_images/20171204/22/smilefactoryten/9a/0b/p/o0200020014084500165.png" width="600"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #1a1aff;
padding-left:10px;">見出し1</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #1a1aff;
padding-left:10px;">見出し2</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #1a1aff;
padding-left:10px;">見出し3</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="margin:0 auto;border:2px solid #1a1aff;padding:10px 20px 10px;width:auto;">
<p><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"><span style="font-weight:bold;">囲み枠</span><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"></p>
<p>&nbsp;</p>
<p>文章1<br>
文章2<br>
文章3</p>
<p>&nbsp;</p>
<p>詳しくは「こちらから」お問合せください。</p></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ではまた。<br>
◯◯◯でした。<br>
 </p>


 

 

 

【みずいろ】

 

<p>こんにちは。<br>
◯◯◯です。</p>
<p>&nbsp;</p>
<p>アイキャッチ写真</p>
<p style="text-align: center;"><img alt="" contenteditable="inherit" height="600" src="https://stat.ameba.jp/user_images/20171204/22/smilefactoryten/9a/0b/p/o0200020014084500165.png" width="600"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #ccffff;
padding-left:10px;">見出し1</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #ccffff;
padding-left:10px;">見出し2</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #ccffff;
padding-left:10px;">見出し3</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="margin:0 auto;border:2px solid #ccffff;padding:10px 20px 10px;width:auto;">
<p><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"><span style="font-weight:bold;">囲み枠</span><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"></p>
<p>&nbsp;</p>
<p>文章1<br>
文章2<br>
文章3</p>
<p>&nbsp;</p>
<p>詳しくは「こちらから」お問合せください。</p></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ではまた。<br>
◯◯◯でした。<br>
 </p>

 

 

 

 

【むらさき】

 

 

<p>こんにちは。<br>
◯◯◯です。</p>
<p>&nbsp;</p>
<p>アイキャッチ写真</p>
<p style="text-align: center;"><img alt="" contenteditable="inherit" height="600" src="https://stat.ameba.jp/user_images/20171204/22/smilefactoryten/9a/0b/p/o0200020014084500165.png" width="600"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #920D96;
padding-left:10px;">見出し1</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #920D96;
padding-left:10px;">見出し2</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #920D96;
padding-left:10px;">見出し3</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="margin:0 auto;border:2px solid #920D96;padding:10px 20px 10px;width:auto;">
<p><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"><span style="font-weight:bold;">囲み枠</span><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"></p>
<p>&nbsp;</p>
<p>文章1<br>
文章2<br>
文章3</p>
<p>&nbsp;</p>
<p>詳しくは「こちらから」お問合せください。</p></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ではまた。<br>
◯◯◯でした。<br>
 </p>

 

 

 

【薄いむらさき】

 

 

 

<p>こんにちは。<br>
◯◯◯です。</p>
<p>&nbsp;</p>
<p>アイキャッチ写真</p>
<p style="text-align: center;"><img alt="" contenteditable="inherit" height="600" src="https://stat.ameba.jp/user_images/20171204/22/smilefactoryten/9a/0b/p/o0200020014084500165.png" width="600"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #cc66ff;
padding-left:10px;">見出し1</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #cc66ff;
padding-left:10px;">見出し2</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #cc66ff;
padding-left:10px;">見出し3</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="margin:0 auto;border:2px solid #cc66ff;padding:10px 20px 10px;width:auto;">
<p><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"><span style="font-weight:bold;">囲み枠</span><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"></p>
<p>&nbsp;</p>
<p>文章1<br>
文章2<br>
文章3</p>
<p>&nbsp;</p>
<p>詳しくは「こちらから」お問合せください。</p></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ではまた。<br>
◯◯◯でした。<br>
 </p>

 

 

 

 

【ピンク】

 

 

 

<p>こんにちは。<br>
◯◯◯です。</p>
<p>&nbsp;</p>
<p>アイキャッチ写真</p>
<p style="text-align: center;"><img alt="" contenteditable="inherit" height="600" src="https://stat.ameba.jp/user_images/20171204/22/smilefactoryten/9a/0b/p/o0200020014084500165.png" width="600"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #ff66cc;
padding-left:10px;">見出し1</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #ff66cc;
padding-left:10px;">見出し2</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #ff66cc;
padding-left:10px;">見出し3</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="margin:0 auto;border:2px solid #ff66cc;padding:10px 20px 10px;width:auto;">
<p><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"><span style="font-weight:bold;">囲み枠</span><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"></p>
<p>&nbsp;</p>
<p>文章1<br>
文章2<br>
文章3</p>
<p>&nbsp;</p>
<p>詳しくは「こちらから」お問合せください。</p></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ではまた。<br>
◯◯◯でした。<br>
 </p>

 

 

 

 

【薄いオレンジ】

 

 

 

<p>こんにちは。<br>
◯◯◯です。</p>
<p>&nbsp;</p>
<p>アイキャッチ写真</p>
<p style="text-align: center;"><img alt="" contenteditable="inherit" height="600" src="https://stat.ameba.jp/user_images/20171204/22/smilefactoryten/9a/0b/p/o0200020014084500165.png" width="600"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #FDD9CD;
padding-left:10px;">見出し1</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #FDD9CD;
padding-left:10px;">見出し2</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #FDD9CD;
padding-left:10px;">見出し3</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="margin:0 auto;border:2px solid #FDD9CD;padding:10px 20px 10px;width:auto;">
<p><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"><span style="font-weight:bold;">囲み枠</span><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"></p>
<p>&nbsp;</p>
<p>文章1<br>
文章2<br>
文章3</p>
<p>&nbsp;</p>
<p>詳しくは「こちらから」お問合せください。</p></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ではまた。<br>
◯◯◯でした。<br>
 </p>

 

 

 

 

 

【やまぶきいろ:きいろ】

 

 

<p>こんにちは。<br>
◯◯◯です。</p>
<p>&nbsp;</p>
<p>アイキャッチ写真</p>
<p style="text-align: center;"><img alt="" contenteditable="inherit" height="600" src="https://stat.ameba.jp/user_images/20171204/22/smilefactoryten/9a/0b/p/o0200020014084500165.png" width="600"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #F8B500;
padding-left:10px;">見出し1</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #F8B500;
padding-left:10px;">見出し2</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #F8B500;
padding-left:10px;">見出し3</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="margin:0 auto;border:2px solid #F8B500;padding:10px 20px 10px;width:auto;">
<p><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"><span style="font-weight:bold;">囲み枠</span><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"></p>
<p>&nbsp;</p>
<p>文章1<br>
文章2<br>
文章3</p>
<p>&nbsp;</p>
<p>詳しくは「こちらから」お問合せください。</p></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ではまた。<br>
◯◯◯でした。<br>
 </p>

 

 

 

 

【きみどりいろ】

 

 

 

<p>こんにちは。<br>
◯◯◯です。</p>
<p>&nbsp;</p>
<p>アイキャッチ写真</p>
<p style="text-align: center;"><img alt="" contenteditable="inherit" height="600" src="https://stat.ameba.jp/user_images/20171204/22/smilefactoryten/9a/0b/p/o0200020014084500165.png" width="600"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #4DAC26;
padding-left:10px;">見出し1</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #4DAC26;
padding-left:10px;">見出し2</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 style="border-left:3px solid #4DAC26;
padding-left:10px;">見出し3</h3>
<p>ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。ここに文字を入れて下さい。この文字は消して入力してください。</p>
<p>文字のあとに写真を入れてもOK</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="margin:0 auto;border:2px solid #4DAC26;padding:10px 20px 10px;width:auto;">
<p><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"><span style="font-weight:bold;">囲み枠</span><img alt="ベル" draggable="false" height="16" src="https://stat100.ameba.jp/blog/ucs/img/char/char2/182.gif" width="16"></p>
<p>&nbsp;</p>
<p>文章1<br>
文章2<br>
文章3</p>
<p>&nbsp;</p>
<p>詳しくは「こちらから」お問合せください。</p></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ではまた。<br>
◯◯◯でした。<br>
 </p>

 

ベル緊急開催 あっつーの「インスタグラム勉強会」ベル

 

日時:2017年12月7日(木) 10時〜12時30分 2時間半

場所:札幌市中央区(お申込み後ご連絡いたします)

人数:残4名様(限定6名様)

 

インスタグラム勉強会詳しくはこちらからどうぞ。

 

 

 

【加藤敦志のホームページはこちら↓】

 

 

 

ではまた。
Smilefactoryten
代表 加藤敦志 でした。