2022/10/27 (更新日: 2026/02/24)

【あるとラク】ブログのテンプレート【3000字はいける】

テンプレート

この記事にはプロモーションが含まれています

こんにちはユウキです。
テンプレートを公開します。

読まれる文章には「型」があります。「結論」→「感想or経験」→「結論」の組み合わせです。からの「まとめ形式」と「主張形式」。です。SNSでも同じです。伸び悩んでいる人にどうぞ。

ブログやライターの仕事で、

どうしても文章が書けない

というときにぜひ使ってください。

~~» こちらをコピペしてください~~

最初にYouTube高速化のためのJSコードを貼ります。

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

記事の原液(これがそのまま目次になります)

✅読者の悩み
1.悩み
2.悩み
3.悩み

✅本記事の内容
1.○○の方法3選
2.～でも問題ない理由
3.注意点〇つ

✅おさらい

✅この記事を書いている僕の経験

✅提案：そこで○○～するからオススメします
追記参照『合わせて読みたい』

✅申し込み

✅本記事の根拠
1.第４回　ブログの執筆シーンを、大公開します【ブログの書き方講座】
2.【保存版】わかりやすい文章の書き方講座【SNSを伸ばす為の文章術】
3.【超入門】Twitterでフォロワーを伸ばす方法【徹底解説セミナー】
4.ブログで5億円稼いだ方法
5.億を稼ぐ積み上げ力
6.人生は、運よりも実力よりも「勘違いさせる力」で決まっている

✅チェックマークは

<h2>見出し２ </h2>

タグになります。

✅読者の悩み＝メタディスクリプション

リード文になるメタディスクリプションを入力してください。メタディスクリプションを入力してください。悩みメタディスクリプションを入力してください。

「吹き出し」で特徴を出してもいいですね。

怠け者ブロガー「検索で上位表示されないなぁ。なんでだろうなぁ。」

コード

<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
	<img src="https://manablog.org/wp-content/uploads/2016/11/animal.jpg" alt="" class=" img-circle">
</div>
<div class="col-md-9 col-xs-9 text">
	<p><span class="bold">怠け者ブロガー</span>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>
</div>
</div>

img-circle

を

img-responsive

に変更するとレスポンシブ対応にできます。

変更後のコード

<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
	<img src="https://manablog.org/wp-content/uploads/2016/11/animal.jpg" alt="" class=" img-responsive">
</div>
<div class="col-md-9 col-xs-9 text">
	<p><span class="bold">怠け者ブロガー</span>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>
</div>
</div>

ちなみに、spanのタグが付いている太字を画像の下の行に入れることで名前を入れることも可能です。

怠け者ブロガー

「検索で上位表示されないなぁ。なんでだろうなぁ。」

こちらに変更すればヨイ

<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
	<img src="https://manablog.org/wp-content/uploads/2016/11/animal.jpg" alt="" class=" img-responsive">
<span class="bold">怠け者ブロガー</span>
</div>
<div class="col-md-9 col-xs-9 text">
	<p>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>
</div>
</div>

のimg src="https://~の部分は「イラストや」さんなどでダウンロードしたフリー素材を自分が運命するWorpressの「メディアを追加」にアップロードしてから、そのファイルのURLをコピペして、入れ替えることも可能です。

手順

1.「投稿」で「新規投稿」か「新規一覧」で吹き出しを追加したい記事
2.左上の「メディアを追加」の「ファイルをアップロード」をクリック
3.ドラック&ドロップまたはファイルを選択してアップロード
4.その画像をクリック
5.右側の「添付ファイルの詳細」をスクロール
6.URLをコピペ

してください。

※利用するときはサイトの規約に従ってください

» イラストや

読者の悩みと解決を120字ぐらいで書きます。
これがメタディスクリプションになります。
こういった疑問に答えます。

この記事を読むメリット

1.○○の方法3選
2.～でも問題ない理由
3.注意点〇つ
おさらい
この記事を書いている僕の経験
そこで○○から始めましょう
申し込み
根拠

こんにちはユウキです。
今回のテーマです。(なくてもいいです)

テーマ

あなたはラッキーです。
(これはお好みで書いてください)

まずTwitterをご覧ください。

ここで「読むか、読まないか」ではなく、「ツイート読むか、本文読むか」に判断軸を切り替えさせます。

ブログのテンプレートを紹介します。

1️⃣読者の悩み
2️⃣本記事の内容
3️⃣おさらい
4️⃣この記事を書いている僕の経験
5️⃣提案
6️⃣申し込み
7️⃣本記事の根拠

~~こちらをコピペして、使ってください。~~

骨から体を動かすテクニックを発信しています。
参考になったら「いいね」よろです。

対象を限定する

3,000円損します。
あなたの5分を分けてください。
自分の体を観察しない人は読まないでください。

ここで絞り込むと、関心を引き付けて、もっと読んでくれます。

では解説します。

1.○○の方法3選

その①：○○の方法の名前
その②：○○の方法の名前
その③：○○の方法の名前

その①：○○の方法の名前

1.どういうものなのか
2.どうやってやるのか
3.メリットとデメリット

1.どういうものなのか

ここにどういうものか書いてください。ここにどういうものか書いてください。ここにどういうものか書いてください。ここにどういうものか書いてください。ここにどういうものか書いてください。ここにどういうものか書いてください。

2.どうやってやるのか

ここにどうやってやるのか書いてください。

手順①
手順②
手順③

とか。

3.メリットとデメリット

メリット　：ここに入力
デメリット：ここに入力

メリット

太字は「b」のタグを使ってください。ただ強調したいだけならなおさらです。「strong」が「緊急、本当に重要」なとき、台風、地震とかに使います。「GoogleのSEOを騙す」ことに、会社では「上司を騙す」ことにつながるので、「b」タグをおススメします。

メリットを入力してください。メリットを入力してください。メリットを入力してください。メリットを入力してください。メリットを入力してください。

デメリット

デメリットを入力してください。デメリットを入力してください。デメリットを入力してください。デメリットを入力してください。

上記のとおりにそれぞれ解説します。

その②：○○の方法の名前

その③：○○の方法の名前

ここから深掘りしていきます。

2.～でも問題ない理由

・主張
・理由
・具体例
・反論理解
・主張

ここで主張の骨格をまとめておきます。

結論としては<主張>です。

理由①：ここに理由です
理由②：ここに理由です
理由③：ここに理由です

理由①：ここに理由です

ここに理由を入力してください。ここに理由を入力してください。ここに理由を入力してください。ここに理由を入力してください。ここに理由を入力してください。

理由②：ここに理由です

理由③：ここに理由です

具体例①：ここに具体例を書く
具体例②：ここに具体例を書く
具体例③：ここに具体例を書く

具体例①：ここに具体例を書く

ここに具体例を入力してください。ここに具体例を入力してください。ここに具体例を入力してください。ここに具体例を入力してください。ここに具体例を入力してください。

具体例②：ここに具体例を書く

具体例③：ここに具体例を書く

ここに具体例を入力してください。ここに具体例を入力してください。ここに具体例を入力してください。ここに具体例を入力してください。

ここまで読んだ方は～「もしや、できないかも」と思うかもです。

しかし<主張>です。

僕も練習して徐々に上達します。

繰り返しですが<主張>です。

3.注意点３つ

その①：ここに注意点を書く
その②：ここに注意点を書く
その③：ここに注意点を書く

その①：ここに注意点を書く

1.どういうものなのか
2.どうやってやるのか
3.メリットとデメリット

どういうものなのか

どうやってやるのか

メリットとデメリット

または、

その②：ここに注意点を書く

ここにテキストを入力してください。

その③：ここに注意点を書く

ここにテキストを入力してください。

おさらい

とか、

何とかの方法○○

何とかの手順
何とかの手順
何とかの手順

とか、

○○の方法

○○の方法

△△方法

△△方法

□□方法

□□方法

この記事を書いている僕の経験

ここに僕の経験を入力してください。ここに僕の経験を入力してください。ここに僕の経験を入力してください。ここに僕の経験を入力してください。ここに僕の経験を入力してください。ここに僕の経験を入力してください。ここに僕の経験を入力してください。

そこで○○から始めましょう

追記参照か『合わせて読みたい』の内部リンクを貼ります。
テーマ次第なので、要相談。

参考記事セールスに引っかかる理由は緊張への依存と回避する習慣にあった(転載です)

コード

<p style="margin-bottom: 10px;"><span style="font-size: 14px;color: #fff;margin-right: 10px;background-color: #00CC00;border-radius: 2px;padding: 8px 8px 7px;">参考記事</span><a href="#" rel="noopener" target="_blank">タイトル</a></p>

申し込み

申し込みはこちらからどうぞ

アフィリエイトのテキストリンクとかセミナーのリンクを貼る。

例えば、

» ユウキ×身体の使い方工作室

みたく。

本記事の根拠

さらに学習を深めたい方はこちらの参考文献からどうぞ。

Youtubeの埋め込みの方法

さて、これ何がそんなに何がいいのかというと、

プラグインが要らない

という衝撃。

ソースコード

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

これをページの一番上に張り付けた上で、

<div class="youtubeWrapper"><iframe  width="420" height="315" src="" data-src="//www.youtube.com/embed/yd8jh9QYfEs" frameborder="0" allowfullscreen></iframe></div>

まずこれをそのままコピペします。そして、

/watch？v=Dlc9Rd＿Z4UY

v=の後が動画のID、識別の名札なのでembed/の後にコピペします、というかこれだけです。
自分の動画であれば確実に大丈夫です。

以上で完了\^o^/
なんて簡単\^o^/\^o^/\^o^/

念のためにYoutubeの横幅を100%にするCSSのテンプレートです。

.youtubeWrapper{
	position: relative ;
	margin-top: 1.2em ;
	margin-bottom: 1.2em ;
	padding-top: 69px ;
	padding-bottom: 50% ;
	overflow: hidden ;
}

.youtubeWrapper iframe {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ;
}

クラス名は