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ソースコードは以下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
#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は以下。
1 2 3 4 5 6 7 |
<div id="mokuji"> <h2>目次</h2> <ol> <li>目次1</li> <li>目次2</li> </ol> </div> |
以上で投稿の準備は完了です。