【パクリOK】ブログアウトラインのテンプレート公開します

f:id:supplementgym:20200129211724p:plain

モナリザの画像

ブログ記事のアウトライン、大体いつも同じなんだよな~すぐコピペできるようにしたいな~~

と、前々から思っていたのでついにテンプレ化しちゃいました。

自分用にと思って書いた記事ですがよければ使って下さい。



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

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

saruwakakun.com

テンプレート

<div class="balloon5">
  <div class="faceicon">
    <img src="https://dl.dropboxusercontent.com/s/6mg6jss7a7p1pql/%E3%83%A2%E3%83%8A%E3%83%AA%E3%82%B6%E3%81%AE%E7%B5%B5%E7%94%BB%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.jpeg?" 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><br/><br/>
<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://dl.dropboxusercontent.com/s/6mg6jss7a7p1pql/%E3%83%A2%E3%83%8A%E3%83%AA%E3%82%B6%E3%81%AE%E7%B5%B5%E7%94%BB%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.jpeg?" alt="モナリザの画像"/>
  </div>
  <div class="chatting">
    <div class="says">
      <p><b>テキスト
</b></p>
    </div>
  </div>
</div>

アイコンはモナリザのフリーイラストになってますが、変えたい場合は、img src="URL"のURLの部分を任意の画像のURLに変えればOKです。直リンクはサーバーを圧迫するので、dropboxに落としてから使います。

アイコン画像は必ずフリー素材の画像を使うようにしましょう。

セリフは太字にしています。



dropboxの画像を表示させるには、URLを少しいじる必要があります。 www.terrax.site


目次

<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><br><br/>
<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のブログテンプレートについてでした。

やはり型があると悩むことが減って書く速さが上がりますね。

このスタイルになってから爆速で記事を書けるようになりました。

この記事が気に入ってくださったなら、ぜひコメントやいいねをお願い致します!モチベーションが上がります