STINGER8で初めての投稿の準備をする

投稿日：2019年1月2日更新日：2019年1月11日

WordPressのテーマ、STINGER8を利用した場合の、初めての投稿の準備をします。

前提

WordPressがインストールされている
Stinger8がインストールされている

アウトプットイメージの確認

完成系のイメージは本投稿になります。
イントロ、目次、投稿内容（ソースコード含む）を基本構成とするブログの雛形を作成します。

投稿の基本形を考える

投稿の基本形を考えます。すなわち、投稿に必要な最低限の要件を考え、その標準的な方法を決めます。
今回は技術ブログなのでシンプルな構成で目次とソースコードを高可読性で表示させることを最低限の要件とします。

ソースコードをブログ上に表示させるための準備

ソースコードを読みやすく、かつ引用（コピペ）しやすく表示するためにソースコード表示用のwordpressプラグインを導入します。
今回はちと古いですが、Crayon Syntax Highlighterプラグインを採用。
ググればいくらでも出てきますが、今回はとりあえず最速で導入したかったので以下のサイトを参考にしました。
参考https://nozziedesign.com/2811.html

目次を作成する

CSSをカスタムするためにSTINGER8の子テーマをインストールする

以下サイトを参照してください。
子テーマとは？インストールするとどんなメリットがあるの？どうやってインストールするの？という疑問は、全て以下のサイトで解決します。
参考https://lifool.com/stinger8-install/

目次用にCSSをカスタムする

STINGER8childのstyle.cssをカスタムして、見やすい目次を作成します。
CSSソースコードは以下。

#mokuji {
width:50%;
padding:10px;
border:solid 1px #ccc;
background-color:#f3f3f3;
margin-bottom:20px;
}

#mokuji h2 {
background: #f3f3f3;
color: #1a1a1a;
font-size: 16px;
line-height: normal;
text-align: center;
margin: 10px 0px 5px 0px;
padding: 0;
border-top: none;
border-bottom: none;
}

#mokuji ol {
margin-bottom:5px;
padding:5px 10px 10px 30px;
}

#mokuji {

width:50%;

padding:10px;

border:solid 1px #ccc;

background-color:#f3f3f3;

margin-bottom:20px;

}

#mokuji h2 {

background: #f3f3f3;

color: #1a1a1a;

font-size: 16px;

line-height: normal;

text-align: center;

margin: 10px 0px 5px 0px;

padding: 0;

border-top: none;

border-bottom: none;

}

#mokuji ol {

margin-bottom:5px;

padding:5px 10px 10px 30px;

}

htmlは以下。

<div id="mokuji">
	<h2>目次</h2>
	<ol>
 		<li>目次１</li>
 		<li>目次2</li>
	</ol>
</div>

<ol>

</ol>

</div>

以上で投稿の準備は完了です。