STINGER

【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ

投稿日: 更新日: 2017年11月26日

どうも!でででーさん(@d3_dayo) です!

 
このブログではSTINGER PLUS2をテーマとして使ってはいないのですが、STINGERシリーズは私のお気に入りWordPressテーマでもあるので、サブのテスト環境にテーマをインストールしていろいろ弄ったりしています。
 
そして、これまで弄ってきた中で紹介できそうなカスタマイズ手順は記事で細かく手順を解説するようにしていますが、その記事もだんだん増えてきたので、入り口としてまとめ記事を作成します。
 
新しい記事を書いたら随時追加していきます。
 
 

スポンサーリンク

ヘッダー部分に背景色を設定して画面幅一杯に広げる


ヘッダー部分にはブログのメインエリアとは別の背景色を設定し、左右の余白ができないようにヘッダー部分を画面幅いっぱいに広げるためのカスタマイズ手順です。完成図は上記の記事でサンプルのスクリーンショット付きで掲載していますのでご確認ください。
 
 

ヘッダー下にWordPressプラグインのMetaSliderを設置してカルーセル表示する


このブログではMetaSlider以外のスライダープラグインですが、まさに同じデザインを採用しているので完成図はこのブログを参考にして頂ければと思いますが、ヘッダー下にオススメ記事などのスライドがグルグル回転するスライダーを表示するためのカスタマイズ手順を紹介しています。
 
 

アコーディオンメニュー(ハンバーガーメニュー)を非表示にする


STINGER PLUS2はレスポンシブデザインなので、デフォルトの状態でも幅が960px以下のデバイスから閲覧すれば、メニューがグローバルメニューからハンバーガーメニューへと切り替わるようになっています。ただ、グローバルメニューは管理画面から簡単に非表示設定することができますがハンバーガーメニューはできないので、CSSで非表示にする手順を紹介しています。
 
 

記事一覧をカード型で表示する


このブログのトップページも同じように記事一覧をカード型で表示しているので、完成図はブログトップページをみて頂ければと思いますが、記事一覧をPCでは1行2列、スマホでは1列で表示されるカード型一覧にするためのカスタマイズ手順を紹介しています。
 
 

フッターに背景色を設定して画面幅いっぱいに広げる


ヘッダー部分に施したカスタマイズと同様に、フッター部分もメインエリアとは別の背景色を設定して画面幅一杯に広げるためのカスタマイズを紹介しています。上の項で紹介しているヘッダー部分のカスタマイズと合います。
 
 

Powered by STINGERの表示を消す


STINGERシリーズのカスタマイズでは必ずと言っていいほど出てくるネタですが、STINGER PLUS2ではこれまでのバージョンと比べると簡単には表示を消せなくなっているようなので、STINGER PLUS2に対応した消し方を改めて記事にしてみました。
 
 

ページネーション(ページ送りボタン)のデザインをカスタマイズ


ページネーションとはトップページの記事一覧下などに表示される次のページへと送るボタンのことです。STINGER PLUS2標準のページ送りボタンは非常にシンプルなものなので、サイトのデザインに個性を出すワンポイントとして弄ってみました。この記事の手順ではプラグインを使うことなく、ボタンのデザインをカスタマイズすることができます。
 
 

デフォルトでは表示されていないページトップボタンを表示する


STINGERシリーズには標準で画面右下にページトップボタン(クリックするとページトップに戻してくれるボタン)が実装されていますが、STINGER PLUS2ではデフォルト非表示になっているようなので、footer.phpに一行追加してボタンを表示する方法を紹介しています。
 
 

ページトップボタンをオリジナル画像へと差し替える


上記の「デフォルトでは表示されていないページトップボタンを表示する」で表示したページトップボタンをオリジナルの画像に差し替えて個性を出すことができるカスタマイズ手順の紹介です。このブログでも同様のカスタマイズを施して、ページ右下には画像のボタンが表示されるようになっています。
 
 

STINGER PLUS2のヘッダー部分をオシャレにするカスタマイズ


この記事では、デフォルトで表示されているタイトルテキスト部分を非表示にして、ヘッダー画像を最上部に表示することでSTINGER PLUS2のデザインに個性を出す・オシャレにするためのカスタマイズ手順を紹介しています。手順はCSSの追記と管理画面での設定だけなので簡単です!
 
 

ページ最上部にメニューを表示してスクロール時も固定表示(PC)


PCでサイトを閲覧した際に表示されるグローバルメニューをページの最上部に表示して、スクロール時も追尾させるカスタマイズを紹介しています。このカスタマイズを実施するためには、事前に「STINGER PLUS2のヘッダー部分をオシャレにするカスタマイズ」でヘッダー部分の構成を変更する必要があります。
 
 

STINGER PLUS2のタイトルのフォントを好きなGoogleフォントで表示


この記事ではSTINGER PLUS2のヘッダー・フッターに表示されるブログタイトルをGoogleフォントのサイトから選んできた、自分の好きなGoogleフォントで表示するためのカスタマイズを紹介しています。大量に掲載されている中から好みのフォントを選ぶことができるので、ロゴを作るのが面倒・苦手という方にもオススメです。STINGER PLUS2以外のテーマでも同じ手順でカスタマイズ可能。
 
 

まとめ

ブログのデザインを変えるのが好きな人・とにかくカスタマイズが好きな人にとっては、ブログは記事を書くのが目的なのか?デザインを変えるのが目的なのか?わからないくらい、定期的にいろいろ弄りたくなると思います。
 
カスタマイズをしてもしても、ちょっと時間が経つとまた変えたくなる…。
 
私もそうなので、定期的にカスタマイズの記事は増えていくと思いますし、増えたらまたこの記事に一覧として追加していきますね!

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ