スティンガー8

あなたもこれで一人前!STINGER8の使い方からマルっとカスタマイズ集

STINGER8のカスタマイズ集

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

STINGER8(スティンガー8)は、ワードプレステーマで使える無料テンプレートの1つで、非常にシンプルな内容で構成されています。

公式サイトでも「史上最高にシンプルなテーマ」と太鼓判を押しているくらいですから。

 

ブログのデザインを「イチから自分好みにカスタマイズしていきたい!」、という方には特にオススメのテンプレートになっています。

私もこのSTINGER8を使って色々とカスタマイズしてきたですが、とりあえずブログデザインなどがひと段落したので、ここでまとめておきたいと思います。

 

これからSTINGER8を使ってブログを始める方には、参考になるかと思うので活用されてみて下さいね。

STINGER8を導入するまでの流れ

まだSTINGER8を導入されていない方が対象になるので、すでに導入済みだという方は次に進まれて下さい。

STINGER8はワードプレスブログで使用するテーマなので、まずはワードプレスから導入していく必要があります。

参考:ワードプレス導入でブログを始める方法から必要な設定までを完全図解

 

ワードプレスが導入できている方は、次にSTINGER8のテンプレートファイルをダウンロードしてから、ワードプレスに有効化していきます。

ファイルは公式サイトからすぐにダウンロードできます。

参考:STINGER(スティンガー)をダウンロードしてワードプレスに有効化する方法

 

※ダウンロードするファイルは、「親テーマ」と「子テーマ」の2種類があるので、気をつけておきましょう。

ここまでの作業が終わったらカスタマイズの準備は完了です。

 

カスタマイズ前の注意点

STINGER8のカスタマイズにはテーマファイルやCSSコードを使用するので、ちょっとした入力ミスでデザインが反映されなかったり、不都合が発生してしまう場合もあります。

なので、コードを使ったカスタマイズを行う際には不都合が起きてしまった場合でも、すぐに元の内容に戻せるようタブを2つ開いておき、できればバックアップ用のファイルも準備しておきましょう。

 

また、ファイルの編集は親テーマではなく「子テーマ」で行うようにして下さい。

 

親テーマと子テーマの違いについて」でも説明していますが、親テーマはアップデートされるとカスタマイズした内容が消えてしまいますが子テーマは消えません。

 

あとは「functions.php」ファイルが要注意で、恐ろしい「画面が真っ白エラー」が起きるので、とにかくこのファイルを編集するときだけは最大の注意を払って下さい。

万が一エラーが起きてしまった場合の対処法を載せておきますね。

参考:functions.phpのエラーで画面が真っ白に!その原因と対処法について

 

注意点まとめ

タブを2つ開いてバックアップファイルを用意

ファイル編集は子テーマで行うこと

functions.phpファイルは要注意!

 

追記:編集後はマルチデバイスで確認を!

ここでご紹介しているSTINGER8のカスタマイズ集は、基本的にパソコンとスマホで問題なく表示できるように意識しています。

ただ、私も人間なので抜けている部分があったり、タブレットに関しては表示が崩れてしまう場合も考えられます。

 

その為、カスタマイズを行っていく上で特にCSSコードでは、内容によって以下のようにデバイスごとの分岐が必要になってきます。

 

 

パソコンでの表示は問題ありませんが、その他のデバイスで表示が大丈夫かどうか必ず確認して、デザインが崩れていれば上記のコードで分岐しながら、上手くデザインを調整されるようにお願いします。

 

マルっとカスタマイズ集

 

それでは私がSTINGER8でこれまで行ってきた、マルッとカスタマイズ集をご紹介していきます。

 

編集後にカスタマイズした内容が上手く反映されない時は、入力したコードに間違いがないか({}や: ;やなど)、全角スペースになっていないかの確認をしましょう。

またはブラウザキャッシュを削除を試してから更新(Shift+F5キーでも可)してみて下さい。

 

CSSコードなしで超簡単!

>>STINGER8のテンプレート機能だけでデザインをカスタマイズする方法

STINGER8の基本機能だけでも、ブログの外観やヘッダー・背景画像の変更、ファビコンの設定などの編集が簡単に行えます。

 

まずは基本中の基本から

>>STINGER8の基本的だけど重要なCSSカスタマイズを6項目にまとめたよ

記事中やタイトル部分の文字サイズや、ブログ全体の背景やエリア幅、テキストリンクなどに関する基本となる部分になります。

 

ブログのヘッダー部分

>>インパクト大!STINGER8のブログタイトルをロゴ画像に変更する方法

ブログの上部にあるタイトルをロゴ画像を使って、オシャレなものに変更するための方法になります。

 

>>コピペで1発OK!STINGER8のグローバルメニューを色々カスタマイズ

ヘッダー部分に表示できるメニューリストを最適化するために、色々なカスタマイズを行いました。

 

>>STINGER8のヘッダー大改造!メニュー追尾や画像をキレイに表示する技←追記分

ヘッダーのブログタイトルやグローバルメニュー、検索ボタンを画面上部に並列表示で固定してスクロール時に追尾させるのと、ヘッダー画像を横幅一杯に表示させて自由にサイズ変更や余白の調整ができるカスタマイズになります。

 

ブログのフッター部分

>>STINGER8でフッター用ウィジェットを追加して足元をオシャレに演出!

ブログ下部のフッターエリアを3分割にしてから、ワードプレスのウィジェットを使って好きなコンテンツを追加する方法です。

 

ブログのサイドバー部分

>>STINGER8のサイドバーにプロフィール設置と見出し変更で自己アピール

サイドバーエリアにちょっと変わったプロフィールの設置や、見出し部分のデザインを変更する方法になります。

 

>>STINGER8のカテゴリーデザインをアレンジして個性的にカスタマイズ

カテゴリーの文字サイズや色、アイコンの追加やマウスホバー時の変化など、個性的なものにアレンジしてみました。

 

>>STINGER8の新着記事一覧の非表示や表示件数と見出し部分の変更方法

サイドバートップに表示されている新着記事一覧を、非表示またはトップページの時だけ非表示にしたり、見出しがないので追加したりする方法です。

 

記事一覧・関連記事など

>>続きを読むボタンはどこだ?STINGER8で表示させるカスタマイズ方法

記事一覧に「続きを読む」のようなボタンがないので、記事の詳細ページへわかりやすく誘導するためには便利です。

 

>>アイキャッチ画像上にカテゴリー表示!STINGER8でカスタマイズする

トップページの記事一覧や関連記事で表示しているアイキャッチに、カテゴリーを上手く重ねて表示できます。

 

>>STINGER8の記事一覧をおしゃれなカード型にカスタマイズする方法

記事一覧の表示スタイルをカードのようなデザインに変更する方法になります。

 

>>STINGER8の記事一覧をタイル状に並べて2列・3列で表示させる方法

記事一覧の表示スタイルをタイルのように、2列や3列に並べることができるカスタマイズですが、先にカード型タイプに変更しておく必要があります。

 

>>STINGER8の関連記事をCSSでかっこよくタイル形式に表示する方法

関連記事エリアの表示スタイルをタイル形式にして、横に記事を並べる方法でタイトルはアイキャッチ画像に重ねて表示しているバージョンです。

 

記事・投稿ページ内

>>パンくずリストをデザイン!STINGER8でわかりやすく表示させる方法

STINGER8のパンくずリストはデフォルトだと薄くて認識しづらいので、アイコンや配色などを追加・変更してわかりやすく表示できます。

 

>>パンくずリストの「HOME」「TOP」をブログ名にして知名度アップ

記事内のパンくずリストの1つ目にある「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についての理解を深めることができますが、正確な情報ではない可能性もあるのでしっかり勉強されたい方は、専用の本などを試しに購入されてみるといいでしょう。

わからないことがあった場合でもすぐ確認できるので、最低1冊は持っておくと何かと便利ですね。

 

知識が全くない方でもわかりやすく学べるような、初心者向きの本を一応ご紹介しておきますので、参考にされてみて下さい。

 

 

この本はとにかくCSSやHTMLを、「イチから始めるぞ!」という人向きの入門書です。

 

数ある本の中には内容が難しい中上級者向けのものもあるので、そういった本を最初に購入してしまうと、チンプンカンプンで読むのを諦めてしまう方も多いと思います。

そんな人でもこの本なら内容が丁寧かつ非常に優しく説明されていて、読みやすくてスムーズに理解できるのでオススメです。

 

STINGER8まとめ

これまでに私が行ってきたSTINGER8のカスタマイズ集をご紹介したので、あとは自分流に使いやすいようアレンジされてみて下さい。

他にもまだまだCSSなどを使えば細かい変更や調整などができますが、ここまでカスタマイズできれば、あなたも一人前の「STINGERエイター」に認定されるかもしれませんね。

 

とは言ってもまだまだ勉強することは多いので、これからもまた新たなカスタマイズをした時は、ここに追加していこうと思います。

ABOUT ME
フリーマン
フリーマン
1988年生まれの兵庫県在住。気になることをただひたすらに書き続けて、なんとか8ヶ月目で月間6万PV達成。 将来的な資産を作る為に資産運用も実践中。