アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css javascript php SEO コンテンツ ブラウザ 新着情報

STINGER8でwordpess構築しpagespeed insightで満点を取る方法 ⇒ カスタマイズの手順と方法を順番に解説

投稿日:2019年5月10日 更新日:

STINGER8とは

STINGER8は国産wordpressテーマであり、SEOに強いことで知られる。

現在STINGER8の系統のテーマは4つあり、そのうち2つが無料テーマだ。

STINGER8はその無料テーマの一つで、機能が少なく自分で構築したい人向きのテーマになっている。

2016年のテーマで少し古いが、今でも十分使える。

ダウンロード及び規約 - 無料WordPressテーマ「STINGER」STINGER8は無駄なものを一切排除した骨組みのみのシンプルなテーマです。自身で一からカスタマイズされたい方に向いています。

ダウンロード及び規約 – 無料WordPressテーマ「STINGER」から引用

この連載では、STINGER8を使ってこのブログのデザインをカスタマイズしていく過程を公開する。

順番になぞることで、簡単に好きなデザインにすることができる。

注意点

STINGER8はダウンロードすると2つのテーマがある。

カスタマイズするときは、必ず「child」の方を編集すること。

これは「子テーマ」と呼ばれるもので、親のテーマがアップデートされても影響を受けない。

また誤ってテーマを壊してしまうことを防ぐこともできる。

また当然だが、編集する際は編集前の状態をバックアップしておき、いつでも元の状態に戻せるようにしておくこと。

言うまでもないが、このブログを見て行ったことで生じるいかなる事態にも、一切責任は持たない。

あくまでも自己責任で行うこと。

結果

このブログでは、STINGER8にテーマを変更した結果、google pagespeed insightのスコアが、

  • モバイル85
  • パソコン100

になった。

モバイルのpagespeed insightスコア

パソコンのpagespeed insightスコア

100のスコアが出たのには、我ながら正直驚いた。

もちろんまだトップページを作り込む前の、スカスカの状態であることも理由だろう。

それにしても、STINGER8は素晴らしい結果を出してくれた。

導入を試してみる価値は、十分にあるだろう。

連載一覧

  1. wordpessテーマのSTINGER8にしてみた ⇒ 設定その1 – アミアンインターナショナル
  2. google code-prettifyでコード表示をハイライト(動作しないので焦るが解決済み) ⇒ STINGER8設定その2 – アミアンインターナショナル
  3. サイドバーメニューの成形(1) ⇒ STINGER8設定その3 – アミアンインターナショナル
  4. ソーシャルアイコン追加-サイドバーメニューの成形(2) ⇒ STINGER8設定その4 – アミアンインターナショナル
  5. カテゴリーのデザイン-サイドバーメニューの成形(3) ⇒ STINGER8設定その5 – アミアンインターナショナル
  6. アイキャッチ画像を表示させる ⇒ STINGER8設定その6 – アミアンインターナショナル
  7. 引用を効率化するため拡張機能Format Linkをgoogle Chromeに入れる ⇒ STINGER8設定その7 – アミアンインターナショナル
  8. コード表示の最適化 ⇒ STINGER8設定その8 – アミアンインターナショナル
  9. H2タグを修飾 ⇒ STINGER8設定その9 – アミアンインターナショナル
  10. jetpack関連記事の数を増やす  ⇒ STINGER8設定その10 – アミアンインターナショナル
  11. レスポンシブ対応のロゴを表示する ⇒ STINGER8設定その11 – アミアンインターナショナル
  12. メニューとフッターのレスポンシブ対応css装飾 ⇒ STINGER8設定その12 – アミアンインターナショナル
  13. jetpack関連記事とwordpress関連記事タイトルの修飾 ⇒ STINGER8設定その13 – アミアンインターナショナル
  14. ページで 100%幅表示を可能にする ⇒ STINGER8設定その14 – アミアンインターナショナル
  15. おまけ:wordpress設定手順を公開してみて ⇒ STINGER8設定その15 – アミアンインターナショナル

-CMS, css, javascript, php, SEO, コンテンツ, ブラウザ, 新着情報
-, ,

執筆者:

関連記事

parallax

パララックス効果で画像を動かす ⇒ トップページの作り込み2

パララックス効果とは パララックス効果は、2つの要素を別々に動かすことで視覚的な効果を与えることだ。 iPhoneを動かすと、iPhoneのホーム画面上でアプリのアイコンが微妙にずれる、あの効果だ。 …

Mavericksにアップデートすると空き容量が増える?

Mavericksにアップデートした Mac OS X の新しいバージョン「Mavericks」が出てからというもの、アップデートするべきか悩むことが多かった。 本来であればコンサルタントという立場も …

バッジ

バッジの表示 ⇒ トップページの作り込み10

fontawsomeでお手軽バッジ バッジを使うことは意外と多い。 特にネットショップの場合はランキングを表示することがほとんどで、その順位を表すのにバッジがよく使われる。 今までは画像でバッジを作っ …

ブログの書き方

ブログを書く時の適切な文字数は何文字か

「ブログを書く時の適切な文字数は何文字ですか?」 勉強会で質問され、思わず詰まってしまった。   一般的には400字詰め原稿用紙で何枚、と言う言い方をするので、それからすると800文字とか1 …

中小機構セミナー

高松でセミナー講師として8月7日登壇します

下記要領で開催されるセミナーの講師として、登壇することとなりました。 GMOメイクショップ株式会社代表取締役社長の向畑憲良様と一緒にお話しさせていただきます。 今回はまだネットショップをオープンしてい …