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

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にループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブロ …

【超初心者向け】githubでテーマファイルをバージョン管理する

恥ずかしながらgitでリモートリポジトリ管理するのが初めてなので自分用のメモ。 目次 やりたいこと 動作環境・前提 テーマファイルをmasterブランチで管理するまで 開発用のfeatureブランチ作 …

【備忘】gitのglobal userとlocal user使い分け

Macで初めてgit commitした時に、「お前は誰だ?」的な感じで怒られた。

でユーザー名とメールアドレスを指定する必要があるらし …

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

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

ドローンが飛ぶGIFアニメーションを作ってみた

  上のようなドローンが飛ぶGIFアニメーションを作ったときの要点メモ。Photoshopのどのような機能を使ったかや注意すべきポイントに絞って記載。 (ドローン画像の作り方や飛んでいるよう …