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

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

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

関連記事

MAMPを移行したらphpMyAdminが起動しなくなった

古いMacからMAMPを個別に移行したら、phpMyAdminが起動しなくなった。 どうやらMySQLのユーザー/パスワードが不一致になってしまったようだ。 関連して他のエラーも発生したため、一連で対 …

SiTest入門 ~サイトへの導入とABテストの実施まで~

サイト分析・改善ツールのSiTestというツールをがすごいという噂を聞きました。サイト自体を改変することなく、各種スプリットテスト(ABテストやリダイレクトテスト、多変量テスト等)を実施できるほか、ヒ …

CSSで背景(background-color)を斜めにする

本サイトの紹介ページのように、CSSだけで背景を斜めにします。 目次 やりたいこと HTMLとCSS ポイント やりたいこと 以下のように右斜め上を支点として回転させ、二つのイメージが同色で重なること …

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

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

GulpでWordPressのCI 〜設計編〜

WordPressのテーマファイルをローカルで開発してgithubにpush、そのままサーバーまでデプロイするCIを実現しようと考えています。自分の環境とか踏まえてまずはどうやって実現するか設計しまし …