[e]STINGER7にテーマ変更して行った最初のカスタマイズ記録

stinger7カスタマイズその1

Appleを愛する鍼灸あん摩マッサージ指圧師、ナシタカ(@ehicalog)です。

今までSTINGER5をカスタマイズして使っていましたが、今回STINGER7にテーマを変更しました。

その際に行ったカスタマイズの記録を備忘録としてまとめていきます。

これからSTINGER7を使おうと考えている方やカスタマイズをお考えの方の参考になれば嬉しい限りです。

現在は以下の記事を公開中です!

スポンサーリンク

STINGER7導入の理由

今回STINGER7を導入した理由は大それたものではありませんが、主な理由は以下の2つです。

STINGER7を使ってみたかった

STINGER5の使いやすさは身をもって感じていたので、その最新作を是非とも使いたいなと感じていました。

サイトの見た目を少し変えてみたかった

長い間STINGER5を使っていたので、このあたりでデザインを変えてみたいなと感じていました。

途中でSIMPLESTERというSTINGERをさらに格好良くカスタマイズしたテーマに移行して満足いたのですが、やはり勉強の意味でもコードに触れる機会を作ることが大切です。

加えてSTINGER7はサムネイルを丸くできるので、簡単にデザインの変化が伝えられそうなところが良かったです。

カスタマイズの記録

では実際のカスタマイズの記録を紹介していきます。

今回のカスタマイズでお世話になったのがこちらのブログ記事です。

すべてコードのコピペをさせて頂き、ちょこっと修正して使わせて頂きました。
素敵なデザインをありがとうございます。

ロゴ画像の変更

ロゴ画像を変更

以前のテーマと同じロゴ画像を導入しました。

テーマが変わったので表示もだいぶ大きくなりましたが、はっきりとロゴが目立つので満足です。

メインカラーの変更

メインカラーは私の好きな緑にしました。

緑と言ってもかなり青みがかっていますが、この色がとても好きなのでかなり気に入ってます。

見出しの変更

見出しデザインを変更

見出しはメインに合う色として次に好きな黄色を選びました。

メインカラーの緑とトーンを合わせているので、私は統一感があって大満足の配色だなと感じています。

サイドバーにプロフィール

サイドバーのプロフィール

以前のテーマと同様にサイドバーには簡単なプロフィール欄を設けました。

ここのデザインはこちらのブログ記事を参考にさせてもらい、ボタン周りの色だけ変えてみました。

ウィジェットを使うことで簡単に設置できるのでオススメです。

サイドバーに人気記事

サイドバーに人気記事を設置

サイドバーには人気記事を置いています。

プラグインのWordPress Popular Posts を使うことで簡単に設置できるところも初心者の方にはオススメです。

スクロール固定エリアにAmazonリンク

前テーマではここにカテゴリ別の人気記事を置いていたのですが、これが作れずに今はAmazonのバナーを設置しています。

ただここの部分は人気記事の設置もできますし、今後一番に変更したい部分です。

新着記事と人気記事のデザインを統一

これは今回のカスタマイズでも特にやりたかった部分です。

STINGER7の新着記事のデザインが非常に好きなのですが、WordPress Popular Posts を利用して設置した人気記事とデザインが合っていないのです。

この人気記事を新着記事のデザインと統一させるのは以前からやりたかったことなのですが、ここを紹介してくれたのがこちらのブログ記事です。

こちらもコードをそのまま使わせて頂きました。

抜粋文字の削除と記事下の関連記事の見出し下に横線

抜粋文字を削除

この部分もこちらのブログ記事から使わせて頂きました。

関連記事のデザインはこちらです。
↓↓↓
関連記事の見出し下に横線

ワンポイントでラインが入るとまた違った雰囲気になるので、プチカスタマイズとして非常にオススメです。

Googleアナリティクスの導入

STINGER7ではWordPress管理画面のSTINGER管理という項目から様々な設定が出来るようになっています。

今回のGoogleアナリティクスも管理画面から設定でき、UAから始まるコードを入力するだけでオッケーのありがたい仕様となっています。

サーチコンソールの導入

こちらもGoogleアナリティクスと同様にWordPress管理画面から設定が可能です。

STINGER管理画面からHTMLタグという、サーチコンソールでの所有者の確認で使われるHTMLファイルがあるのですが、そちらをここに入力します。

ファビコンの設置

ファビコンを設置した画像

これはブラウザのタブの左端に出るちょっとしたアイコンですね。

ブックマーク時のアイコンとしても使われる地味にサイトをアピールする重要なやつです。

ファビコンという形式のファイルで素材があれば簡単に作れるWebブラウザツールがあるので、ぜひ試してみてください。

このファビコンの作成についてはこちらの記事にも書いています。

Appleタッチアイコンの設置

これはiPhoneのSafariなどでお気に入りに表示される時に出てくるファビコンよりも大きめのアイコン画像になります。今回は180×180のファイルを用意しました。

CSSの一部を前テーマから引き継ぎ

これは文章の装飾として利用しているラインマーカー風の装飾や赤太字、リストタグのデザインを前テーマのCSSから移行してきました。

まとめ

以上が今までに行ったカスタマイズの記録になりますが、STINGER7のオススメポイントは以下の2つになります。

カスタマイズ記事が豊富

STINGER7のカスタマイズで検索すると、色々な方がご自身のブログでもSTINGER7を使われており、そのカスタマイズの方法をブログ記事にされています。

お陰でカスタマイズのアイディアや「こんなことができるんだ!」などの気付きにもなったり、本当に助かっています。

今回の私のブログのカスタマイズも皆さんの記事のお陰でできましたからね。本当にありがたいです。

初心者でも分かりやすい

これもSTINGERシリーズの特徴ですが、テンプレート解説の公式マニュアルがあったり、コード自体が分かりやすくなっているので、とてもカスタマイズがしやすくなっています。

ウィジェットを使うだけで簡単にアドセンスが挿入できたり、テーマカスタマイザーで簡単にブログのテーマカラーやロゴ画像を変更できるなど初心者には嬉しいポイントが満載です。

PHPテンプレートもある程度コードをいじり続けてきた私でも構成が分かりやすく、「ここにこれを入れれば表示されるはず!」などの予想も立てられます。

まさに初心者の方にオススメしたいWordPressテーマなのです。

以上がSTINGER7、というかSTINGERシリーズの特徴になりますので、これからWordPressでブログを始めようと思っている方やブログを書いていてテーマを変えてみたいなと考えている方にオススメのテーマになります。

ぜひSTINGER7に変更してそのまま使うも良し、自分流にカスタマイズするも良しの使い勝手の良さを体感してみてください。

終わりに…

こうやってみるとたった半日の作業でここまでカスタマイズできたので、やっぱりSTINGERはすごいなと改めて感じました。

それではまた次回お会いしましょう!

Posted from するぷろ for iOS.

ABOUTこの記事をかいた人

GoProが大好きでHEOR5 Blackから子どもの撮影に活用しています。撮影した動画の編集も大好きで家族の思い出ムービーをたくさん作っているので動画編集についても紹介していきます。