【パクリOK】私のブログ本文テンプレート公開します

f:id:supplementgym:20200129211724p:plain

考える人の画像

ブログを書く時、記事構成にいつも迷う!記事のテンプレみたいなのが欲しい・・・

本記事では、こういった悩みに答えます。

こんな方にオススメ

・記事構成に悩むことが多い方
・ブログ初心者の方
・自分なりの記事テンプレがない方



はじめに

ブログ記事をいくつか書いていると、自分の記事スタイルというか、”型”が固定されてきます。

例えば私モナリザ.comの場合、
【序文】読者の悩み→【本文】解決策を示す→【締め】コメント&定型文
のパターンが多いです。まず「考える人」がフキダシで読者の悩みを提示し、記事を読むメリットや読んでほしい読者層を出してから目次、本文、最後に一言、という流れ。まあ解決系ブログの王道パターンですね。フキダシや目次、最後の一言など、いつも同じなのに毎回書いてたらめんどくさいなと思い、テンプレを下書き記事に保存してそこからコピペして使っています。

元は自分用の下書き記事だったんですが、もしかしたらこのテンプレが誰かの役に立つんじゃないかな、と思って公開してみることにしました。

ブログを始めたばかりでフキダシや枠線の作り方、記事構成に迷いがちなひとは、参考にしていただければ多少は役に立つと思います。

そして、この記事がまさにテンプレそのままの構成になっています笑

ぜひコピペして使ってみてください。

*1・・・このテンプレはMarkdown記法での使用を前提としています。見たまま記法では使えません。

*2・・・このテンプレはFontAwesomeを使ったアイコン表示を含みます。FontAwesomeを導入していない人は一部コードが反映されないので事前に導入しておきましょう。

saruwakakun.com

テンプレート

<div class="balloon5">
  <div class="faceicon">
    <img src="https://2.bp.blogspot.com/-nMjuko9tXGc/Ut0BV0jJHkI/AAAAAAAAdW0/tRb8t3PEY28/s800/kangaeruhito.png" alt="考える人の画像"/>
  </div>
  <div class="chatting">
    <div class="says">
      <p><b>あああああ</b></p>
    </div>
  </div>
</div>


本記事では、こういった悩みに答えます。

<div class="box">
<span class="box-title"><i class="far fa-lightbulb"></i><b>こんな方にオススメ</b></span>
<p>・あああああ<br/>
・あああああ<br/>
・あああああ</p>

</div>
<hr/>

<div class="table">
<div class="box-title"><i class="fas fa-list"></i><b>目次</b></div>

<p><a href="#t">・あ</a><br/>
<a href="#t1">・あ</a><br/>
<a href="#t2">・あ</a><br/>
<a href="#t3">・あ</a><br/>
<a href="#t4">・あ</a><br/>
<a href="#t5">・あ</a><br/>
<a href="#t6">・あ</a><br/>
<a href="#t7">・あ</a><br/>
<a href="#t8">・あ</a><br/>
<a href="#t9">・あ</a><br/>
<a href="#t10">・あ</a><br/>
<a href="#t11">・あ</a><br/>
<a href="#t12">・最後に</a></p>

</div>
<hr/>
<h2 id="t">見出し</h2>
あ





<h3 id="t1">見出し</h3>
あ

<h3 id="t2">見出し</h3>
あ

<h3 id="t3">見出し</h3>
あ


<h2 id="t4">見出し</h2>
あ


<h3 id="t5">見出し</h3>
あ


<h4 id="t6">見出し</h4>
あ


<h4 id="t7">見出し</h4>
あ


<h4 id="t8">見出し</h4>

あ
<h3 id="t9">見出し</h3>
あ


<h4 id="t10">見出し</h4>
あ

<h4 id="t11">見出し</h4>
あ


<h2 id="t12">最後に</h2>
<p>記事のまとめ<p>
<p>この記事が気に入ってくださったなら、ぜひコメントやいいねをお願い致します!(励みになります。めっちゃ嬉しいです。)</p>
<script>
$('a[href^="#"]').click(function() {
  // スクロールの速度
  var speed = 1000; // ミリ秒で記述
  var href = $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $('body,html').animate({
    scrollTop: position
  }, speed, 'swing');
  return false;
});
</script>

解説

フキダシ

<div class="balloon5">
  <div class="faceicon">
    <img src="https://2.bp.blogspot.com/-nMjuko9tXGc/Ut0BV0jJHkI/AAAAAAAAdW0/tRb8t3PEY28/s800/kangaeruhito.png" alt="考える人の画像"/>
  </div>
  <div class="chatting">
    <div class="says">
      <p><b>あああああ</b></p>
    </div>
  </div>
</div>

アイコンはいらすとやの「考える人」の画像になってますが、変えたい場合は、img src="URL"のURLの部分を任意の画像のURLに変えればOKです。アイコン画像は必ずフリー素材の画像を使うようにしましょう。「あああああ」はセリフです。任意のテキストに変更してください。セリフは太字にしています。


目次

<div class="table">
<div class="box-title"><i class="fas fa-list"></i><b>目次</b></div>

<p><a href="#t">・あ</a><br/>
<a href="#t1">・あ</a><br/>
<a href="#t2">・あ</a><br/>
<a href="#t3">・あ</a><br/>
<a href="#t4">・あ</a><br/>
<a href="#t5">・あ</a><br/>
<a href="#t6">・あ</a><br/>
<a href="#t7">・あ</a><br/>
<a href="#t8">・あ</a><br/>
<a href="#t9">・あ</a><br/>
<a href="#t10">・あ</a><br/>
<a href="#t11">・あ</a><br/>
<a href="#t12">・最後に</a></p>

</div>

目次CSS

以下のコードを「ダッシュボード」→「デザイン」→「デザインCSS」に貼り付けてください。

.table {
    margin: 2em 0;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.table .box-title {
    font-size: 1.2em;
    background: #5fc2f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.table p {
    padding: 15px 20px;
    margin: 0;
}

タイトル塗りつぶしBOX

<div class="box">
<span class="box-title"><i class="far fa-lightbulb"></i><b>こんな方にオススメ</b></span>
<p>・あああああ<br/>
・あああああ<br/>
・あああああ</p>

</div>

BOXCSS

.box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #00bfff;
}
.box .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #00bfff;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box p {
    margin: 0; 
    padding: 0;
}

これも先ほどと同様にデザインCSSに貼り付けてください。色を変えたければ#00bfffの部分を変更してください。

www.colordic.org


締め

<h2 id="t12">最後に</h2>
<p>記事のまとめ<p>
<p>この記事が気に入ってくださったなら、ぜひコメントやいいねをお願い致します!(励みになります。めっちゃ嬉しいです。)</p>

私は記事の最後は必ずこの文章で締めます。「記事のまとめ」には記事のまとめコメントや感想を書くとよいと思います。


スクロール

<script>
$('a[href^="#"]').click(function() {
  // スクロールの速度
  var speed = 1000; // ミリ秒で記述
  var href = $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $('body,html').animate({
    scrollTop: position
  }, speed, 'swing');
  return false;
});
</script>

これは目次の各項目をクリックしたときに対応する見出しまで画面がスクロール移動するようになるコードです。スクロールの速さを調節したい場合はver speedの値を任意の数字に変更してください。

最後に

以上、モナリザ.comのブログテンプレートについてでした。やはり型があると悩むことが減って書く速さが上がりますね。このスタイルになってから爆速で記事を書けるようになりました。このテンプレを基に、あなたのブログに合うあなたなりの型を模索していただければと思います。

この記事が気に入ってくださったなら、ぜひコメントやいいねをお願い致します!(励みになります。めっちゃ嬉しいです。)