2022/10/27 (更新日: 2024/04/17)

【プロ仕様】ブログのテンプレート【3000字はいける】

その他テンプレート

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

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

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

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

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

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

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

こちらをコピペして、使ってください。https://t.co/xFshaiCtzn

— ユウキ@ブログ×体の使い方 (@yukitakeblog) March 6, 2023

最初に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="" alt="" class=" img-responsive">
</div>
<div class="col-md-9 col-xs-9 text">
        <p><span class="bold">怠け者ブロガー</span>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>
</div>
</div>

<img src="https://" alt="" class=" img-responsive">

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

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

太字にしたい部分は、

<span class="bold">ここに入れる</span>

このコードで囲むと、下のようにできます。↓

太字にできます

「いらないよ」というときはコードを消すだけです。

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

» イラストや

» テスト投稿のページ

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

この記事を読むメリット

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

移動前のコードです

<ul>
<li><a href="#link1">1.結論</a></li>
<li><a href="#link2">2.理由</a></li>
<li><a href="#link3">3.感想&体験談</a> </li>
</ul>

移動先のコードです

link2のように「移動前」と「移動先」のコードを対応させるのかポイントです。

<p id="link1"><h2>1.結論</h2></p>
<p id="link2"><h2>2.理由</h2></p>
<p id="link3"><h2>3.感想&体験談</h2></p>

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

テーマ

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

まずTwitterをご覧ください。

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

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

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

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

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

対象を限定する

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

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

チェックマークのコードです。

<p class="point"><i class="fa fa-check" aria-hidden="true" > < /i >参考：この記事を読むメリット < /p >

では解説します。

1.○○の方法3選

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

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

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

1.どういうものなのか

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

2.どうやってやるのか

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

手順①
手順②
手順③

とか。

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

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

メリット

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

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

デメリット

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

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

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

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

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

2.～でも問題ない理由

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

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

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

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

理由①：ここに理由です

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

理由②：ここに理由です

理由③：ここに理由です

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

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

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

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

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

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

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

しかし<主張>です。

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

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

3.注意点３つ

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

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

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

どういうものなのか

どうやってやるのか

メリットとデメリット

または、

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

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

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

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

おさらい

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

こちらをコピペして、使ってください。https://t.co/xFshaiCtzn

— ユウキ@ブログ×体の使い方 (@yukitakeblog) March 6, 2023

とか、

何とかの方法○○

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

とか、

○○の方法

○○の方法

△△方法

△△方法

□□方法

□□方法

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

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

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

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

参考記事【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】

とか、

申し込み

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

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

» スポーツケア整体研究所

本記事の根拠

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

参考：マナブ

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% ;
}

クラス名は