とあるエンジニアの作業ブログ

Web製作

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

投稿日:2019年1月2日 更新日:

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ソースコードは以下。

htmlは以下。

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

-Web製作
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

【Stinger8】固定ページを自由にデザインしてみた

HTML/CSSがかける人は、テーマ標準の固定ページだとデザイン変更しづらいのではないでしょうか?? Wordpressにループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブロ …

【Stinger8】ページング(page-numbersクラス),サイドバーリストのレイアウト修正

Stinger8の細かなレイアウト修正をします。 目次 トップ下部の投稿一覧をページングする部分(page-numbersクラス)のレイアウト崩れの修正 サイドバーに表示される最近の投稿やアーカイブな …

MacでのAdobeクラウドストレージ活用と作業用ディレクトリ

最近Macを買い換えた。新しいMacはStorageを256にしたのでローカルにバンバンファイルを保存するのには不安が残る。 そこで、これを機に本格的にローカルへのファイル保存をやめて、全てクラウドス …

【WordPress】アフィリエイト広告の自動出し分け

ブログに表示するアフィリエイト広告を自動で出し分けるショートコードを作りました。CSVで表示したいアフィリエイト広告を複数登録しておけば、ランダムに出し分けてくれます。 目次 処理概要 ソースコード …

【Stinger8】gulp-phtml-simple-compでheader.phpをうまく圧縮する

Stinger8のテーマファイルをgulpのgulp-phtml-simple-compを使ってphp圧縮にかけたら、バージョンベクタの圧縮がうまくいかなかったので自分用のメモ。 参考gulp-pht …