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

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

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, コンテンツ, ブラウザ, 新着情報
-, ,

執筆者:

関連記事

stinger8

おまけ:wordpress設定手順を公開してみて ⇒ STINGER8設定その15

おまけ ここまでやって気づいたのだが、画面右下にページトップに戻るリンクがある。 これが色が薄すぎて、白背景だと全く気がつかない。 すこし色を濃くしておこう。 #page-top a{ backgro …

ビール券をプレゼント

ビール券が当たる!QUOカードも当たる!応募はフォロー&ツイートするだけ。簡単応募の365日懸賞、好評開催中。

ビール券をプレゼント ビール券を2枚組にして2名様にプレゼント★グイッと飲んじゃってくださいねw★応募はフォロー&ツイートするだけ。twitterで簡単に応募できます #365kD9YX #3 …

parallax

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

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

css適応前

サイドバーメニューの成形(1) ⇒ STINGER8設定その3

人気の投稿のバランスが悪い テーマをSTINGER8にしたら、jetpackサイドバーウィジットの「人気の投稿とページ」ウィジットがバランスが悪くなった。 cssで調整する まず「人気の投稿」のタイト …

中小機構セミナー

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

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