STINGER8(スティンガー8)は、WordPressテーマで使える無料テンプレートの１つで、非常にシンプルな内容で構成されています。
公式サイトでも「史上最高にシンプルなテーマ」と太鼓判を押しているくらいですからね。
ブログのデザインを「イチから自分好みにカスタマイズしていきたい！」という方には、STINGER8が特におすすめです。
私もこのSTINGER8を使って色々とカスタマイズしてきましたが、一通りのことはやり終えたのでここでまとめておきたいと思います。
これからSTINGER8を使ってブログを始める方には参考になるかと思うので、ぜひカスタマイズに活用されてみて下さいね。
※現在、当ブログでは有料のWordPressテーマ「JIN」を使用しているため、STINGER8のカスタマイズは以前使用していたものになります。
カスタマイズは個々で調整される場合、スマホ・PCで表示が崩れてしまう可能性があるので、ご自身の判断で活用して頂ければと思います。
STINGER8を導入するまでの流れ
まだSTINGER8を導入されていない方が対象になるので、すでに導入済みだという方は次に進まれて下さい。
STINGER8はWordPressブログで使用するテーマなので、まずはWordPressから導入していく必要があります。
WordPressが導入できている方は、次にSTINGER8のテーマ(テンプレート)ファイルをダウンロードしてから、WordPressに有効化していきます。
ファイルは公式サイトからすぐにダウンロードできます。
ダウンロードするファイルは、「親テーマ」と「子テーマ」の２種類があるので気をつけておきましょう。
ここまでの作業が終わったらカスタマイズの準備は完了です。
STINGER8をカスタマイズする際の注意点
STINGER8のカスタマイズにはテーマファイルやCSSコードを使用するので、ちょっとした入力ミスでデザインが反映されなかったり、不都合が発生してしまう場合もあります。
なので、コードを使ったカスタマイズを行う際には不都合が起きてしまった場合でも、すぐに元の内容に戻せるようタブを２つ開いておくといいですね。
できればバックアップ用のファイルも準備しておきましょう。
また、ファイルの編集は親テーマではなく「子テーマ」で行うようにして下さい。
「親テーマと子テーマの違いについて」でも説明していますが、親テーマはアップデートされるとカスタマイズした内容が消えてしまいますが子テーマは消えません。
あとは「functions.php」ファイルが要注意で、恐ろしい「画面が真っ白エラー」が起きるので、とにかくこのファイルを編集するときだけは最大の注意を払って下さい。
もしエラーが起きてしまった場合の対処法も載せておきますね。
- タブを２つ開いてバックアップファイルを用意
- ファイル編集は必ず子テーマで行うこと
- functions.phpファイルは要注意！
編集後はマルチデバイスで確認を！
ここでご紹介しているSTINGER8のカスタマイズ集は、基本的にパソコンとスマホで問題なく表示できるように意識しています。
ただ、私も人間なので抜けている部分があったり、タブレットなどで表示が崩れてしまう場合も考えられます。
その為、カスタマイズを行っていく上で特にCSSコードでは、内容によって以下のようにデバイスごとの分岐が必要になってきます。
@media only screen and (max-width: 420px) {/*スマホ用*/
}
@media only screen and (max-width: 900px) {/*iPad用*/
}
@media only screen and (max-width: 1050px) {/*iPad Pro用*/
}パソコンでの表示は問題ありませんが、その他のデバイスで表示が崩れていないか必ず確認することをおすすめします。
デザインが崩れていれば上記のコードで分岐しながら、上手くデザインを調整されるようお願いします。
STINGER8のカスタマイズまとめ集
それでは私がSTINGER8でこれまで行ってきた、カスタマイズまとめ集をご紹介していきます。
編集後にカスタマイズした内容が上手く反映されないときは、
- 入力したコードに間違いがないか({}や: ;など)
- 全角スペースになっていないか
- ブラウザキャッシュが残っていないか
などを確認するようにしましょう。
ブラウザキャッシュの削除+ページの更新は、Windowsパソコンなら「Shift+F5キー」でできます。
ここから紹介していくSTINGER8のカスタマイズは、リンク先で詳しく使い方などを解説しているので、気になる項目があればご覧ください。
CSSコードなしで超簡単なカスタマイズ
>>STINGER8のテンプレート機能だけでデザインをカスタマイズする方法
STINGER8の基本機能だけでも、ブログの外観やヘッダー・背景画像の変更、ファビコンの設定などの編集が簡単に行えます。
基本中の基本となるカスタマイズ
>>STINGER8の基本的だけど重要なCSSカスタマイズを６項目にまとめたよ
記事中やタイトル部分の文字サイズや、ブログ全体の背景やエリア幅、テキストリンクなどに関する基本となる部分になります。
ブログのヘッダー部分のカスタマイズ
>>インパクト大！STINGER8のブログタイトルをロゴ画像に変更する方法
ブログの上部にあるタイトルをロゴ画像を使って、オシャレなものに変更するための方法になります。
>>コピペで１発OK！STINGER8のグローバルメニューを色々カスタマイズ
ヘッダー部分に表示できるメニューリストを最適化するために、色々なカスタマイズを行いました。
>>STINGER8のヘッダー大改造！メニュー追尾や画像をキレイに表示する技←追記分
ヘッダーのブログタイトルやグローバルメニュー、検索ボタンを画面上部に並列表示で固定してスクロール時に追尾させるのと、ヘッダー画像を横幅一杯に表示させて自由にサイズ変更や余白の調整ができるカスタマイズになります。
ブログのフッター部分のカスタマイズ
>>STINGER8でフッター用ウィジェットを追加して足元をオシャレに演出！
ブログ下部のフッターエリアを３分割にしてから、ワードプレスのウィジェットを使って好きなコンテンツを追加する方法です。
ブログのサイドバー部分のカスタマイズ
>>STINGER8のサイドバーにプロフィール設置と見出し変更で自己アピール
サイドバーエリアにちょっと変わったプロフィールの設置や、見出し部分のデザインを変更する方法になります。
>>STINGER8のカテゴリーデザインをアレンジして個性的にカスタマイズ
カテゴリーの文字サイズや色、アイコンの追加やマウスホバー時の変化など、個性的なものにアレンジしてみました。
>>STINGER8の新着記事一覧の非表示や表示件数と見出し部分の変更方法
サイドバートップに表示されている新着記事一覧を、非表示またはトップページの時だけ非表示にしたり、見出しがないので追加したりする方法です。
記事一覧・関連記事などのカスタマイズ
>>続きを読むボタンはどこだ？STINGER8で表示させるカスタマイズ方法
記事一覧に「続きを読む」のようなボタンがないので、記事の詳細ページへわかりやすく誘導するためには便利です。
>>アイキャッチ画像上にカテゴリー表示！STINGER8でカスタマイズする
トップページの記事一覧や関連記事で表示しているアイキャッチに、カテゴリーを上手く重ねて表示できます。
>>STINGER8の記事一覧をおしゃれなカード型にカスタマイズする方法
記事一覧の表示スタイルをカードのようなデザインに変更する方法になります。
>>STINGER8の記事一覧をタイル状に並べて２列・３列で表示させる方法
記事一覧の表示スタイルをタイルのように、２列や３列に並べることができるカスタマイズですが、先にカード型タイプに変更しておく必要があります。
>>STINGER8の関連記事をCSSでかっこよくタイル形式に表示する方法
関連記事エリアの表示スタイルをタイル形式にして、横に記事を並べる方法でタイトルはアイキャッチ画像に重ねて表示しているバージョンです。
記事・投稿ページ内のカスタマイズ
>>パンくずリストをデザイン！STINGER8でわかりやすく表示させる方法
STINGER8のパンくずリストはデフォルトだと薄くて認識しづらいので、アイコンや配色などを追加・変更してわかりやすく表示できます。
>>パンくずリストの「HOME」「TOP」をブログ名にして知名度アップ
記事内のパンくずリストの１つ目にある「HOME・TOP」の表示を、ブログ名に変更する方法でこのブログであれば、「きにぶろぐ.com」になっています。
>>STINGER8の記事内の見出しタグ「h2・h3・h4」をおしゃれにデザイン
記事内の見出しをデフォルトのシンプルなものから、個性のあるちょっと変わったデザインにするカスタマイズです。
>>STINGER8「投稿日・更新日」の文字サイズや配色とアイコンの変更方法
記事タイトルの下にある投稿日と更新日の文字や色、フォントアイコンに変えたりする方法になります。
>>STINGER8の記事内にある執筆者やコメント欄などを非表示にする方法
記事内の上部にあるカテゴリーや下部のタグ・執筆者の非表示、コメント欄を非表示または移動をする方法です。
その他のカスタマイズ
>>STINGER8の「トップへ戻る」がない！？極薄だったので装飾してみたよ
ブログ内の右下にスクロールした時に出てくる「トップへ戻る」ボタンが、透明に近かったので見やすく変更しました。
>>STINGER8でRSSとfeedlyを記事下のSNSボタンに追加・設置する方法
SNSボタンの中に「RSS・feedly」のボタンを新たに追加することができる他、不要なボタンを非表示にすることも可能です。
>>STINGER8のSNSボタンをCSSでオリジナルデザインにカスタマイズ
SNSボタンを平面なデザインからボタン風にして、カーソルを合わせるとアクションするように見えるカスタマイズです。
>>「STINGER8」TinyMCE Advancedのフォントサイズをpx表記にする方法
「TinyMCE Advanced」プラグインを導入した場合、フォントサイズが「％表記」になっているので、これを「px表記」に変更できます。
Googleアドセンス関連のカスタマイズ
>>STINGER8のウィジェットを使って記事上にアドセンスを表示する方法
ウィジェットを追加して記事内にある最初の「h2見出し」のすぐ上に、アドセンス広告を表示させる簡単な方法です。
>>アドセンスをSTINGER8の記事一覧に挟み込んで違和感なく表示させる！
トップページやカテゴリーページなどの記事一覧の中に、アドセンス広告を挟み込む形で表示させることができます。
>>STINGER8でサイドバーのアドセンスをPCとスマホで自由に使い分ける
サイドバー上部に大きい広告(ラージスカイスクレイパー)を表示させると、スマホ閲覧時に規約違反になってしまうので、スマホの時はレスポンシブ広告になるように、使い分けができる方法です。
CSSやHTMLをもっと勉強したい方は
ここでご紹介したカスタマイズは基本的に、そのままコピー&ペーストするだけの簡単なものなので、CSSやHTMLの根本的な意味や使い方はマスターできません。
もしもカスタマイズで何かしらの不都合が起きてしまった時には、すべて自己責任になってしまうので、その原因の特定や修正は自分自身の手で行っていくことになります。
ある程度はネット上で検索すれば、CSSやHTMLについての理解を深めることができます。
ですが、正確な情報ではない可能性もあるのでしっかり勉強されたい方は、専用の本などを試しに購入されてみるといいでしょう。
わからないことがあった場合でもすぐ確認できるので、最低１冊は持っておくと何かと便利ですね。
知識が全くない方でも、わかりやすく学べるような初心者向きの本を一応ご紹介しておきますので参考にされてみて下さい。
この本はとにかくCSSやHTMLを「イチから始めるぞ！」という人向きの入門書です。
数ある本の中には内容が難しい中上級者向けのものもあるので、そういった本を最初に購入してしまうと、チンプンカンプンで読むのを諦めてしまう方も多いと思います。
そんな人でもこの本なら内容が丁寧かつ非常に優しく説明されていて、読みやすくてスムーズに理解できるのでおすすめです。
STINGER8の使い方とカスタマイズまとめ
これまでに私が行ってきたSTINGER8のカスタマイズ集をご紹介したので、あとは自分流に使いやすいようアレンジされてみて下さい。
他にもまだまだCSSなどを使えば細かい変更や調整などができますが、ここまでカスタマイズできれば、あなたも一人前の「STINGERエイター」に認定されるかもしれませんね。笑
私はこよなく愛用してきたSTINGER8からテーマを変更してしまいましたが、本当に今まで私のブログを支えてくれた優秀なテーマです。
STINGER8は無料テーマの中でも自由度の高い個性を出せるシンプルなデザインなので、自分だけのカスタマイズに仕上げてみて下さいね。
▼CSSプロパティも覚えておこう▼
