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

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

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

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

【WordPress】Google Search Consoleへのサイトマップ登録と確認方法

Google Search Consoleにサイトマップを登録するメモ。これをしないとクローラに記事を拾ってもらえない。 7,8年前に1回やったことあるんですが、昔とやり方がめっちゃ変わってて結構焦り …

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

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

【WordPress】サーバーのテーマファイルをFTPで自動バックアップ

私みたいに趣味でWordPressを使ってる人はレンタルサーバーを借りてサイトを公開していると思います。 最近のレンタルサーバーにはバックアップ機能が標準/オプションで用意されているものがほとんどです …