【STINGER PLUS2】カスタマイズ画面で変更できるCSS要素一覧

更新日:

STINGER PLUS2のカスタマイズには「STINGER PLUS2管理画面」と「カスタマイズ画面」の2つを使います。

カスタマイズ時にはどちらの画面もよく使います。どこにどんな設定項目があるのかざっくりと頭に入れておきましょう。

STINGER PLUS2管理画面

WordPressの管理画面トップ > STINGER PLUS2管理 を選択するとSTINGER PLUS2の管理画面が開きます。

サイト全体の基本的な設定は管理画面で行います。サイト全体のレイアウト、各項目の表示・非表示、サムネイルのサイズや形の選択などができます。

背景色や文字色などの細かな設定は管理画面ではなく、あとで出てくるカスタマイズ画面で設定します。

サイト全体の設定

サイトの基本色やレイアウト、サムネイルの設定を行います。カスタマイズ画面で個別に色の指定をしたい場合は、「オリジナルテーマカスタマイザーを使用する」にチェックを入れておきましょう。

  1. カスタマイザー(基本色)設定
  2. サイト全体のレイアウト一括設定
  3. ヘッダー設定
  4. サムネイル画像設定
  5. 各見出しのGoogleフォントなど

トップページの設定

サイトのトップページの設定ができます。

  1. 挿入コンテンツ PRO
  2. トップページのレイアウト
  3. 新着記事一覧
  4. 固定ページフロントに新着記事一覧
  5. NEWS(お知らせ)の表示
  6. YouTube背景 PRO

投稿・固定記事設定

アイキャッチ画像のサイズや形を選択したり、投稿に表示する項目の表示・非表示を変更したりします。よく使います。

  1. アイキャッチ設定
  2. アイキャッチ画像のクレジット
  3. 記事タイトル上のカテゴリ
  4. 投稿日、更新日の非表示
  5. コメント欄の非表示
  6. 著者情報の非表示
  7. h3タグに一括マーク
  8. 子ページへのリンク表示
  9. 固定ページの広告表示
  10. 関連記事

ヘッダー画像

ヘッダー画像の設定をします。

  1. ヘッダー画像設定
  2. スライドショー

メニュー設定

PC用メニューの表示箇所などを変更できます。

  1. PC用グローバルメニュー
  2. スマホ用アコーディオンメニュー

おすすめ記事一覧の作成

任意のおすすめ記事を設定し、おすすめ記事一覧を作成することができます。

SNS設定

SNSボタンの表示設定や、SNSのアカウント設定を行います。

  1. SNSボタンの表示設定
  2. OGP設定
  3. Twitter設定
  4. Facebook設定

SEO関連設定

  1. タイトル設定
  2. メタキーワード
  3. メタディスクリプション
  4. その他

Google連携に関する設定

Googleアナリティクス、GoogleサーチコンソールのHTMLタグを設定できます。

  1. アナリティクスコード
  2. サーチコンソールHTMLタグ

コードの設置はテーマ内ではなく、プラグインを使うのがおすすめです。テーマ内にコードを設置していると、テーマを変更した際にコードを設置し直さなければならなくなるからです。プラグインを利用した場合はここにコードを設置する必要はありません。

個人的にはAd Inserterがおすすめです。興味がある方はこちらの記事もみてみてください。「GoogleAdsense審査コード」を「アナリティクスコード」に読み替えると同じ手順で設置できます。

Ad Inserterを使ってGoogle Adsense審査コードを設置する【WordPress】

カスタム投稿一覧の設定

プロバージョンのみで使える機能です。

その他の設定

アイコンなどの設定ができます。

  1. アイコン・ファビコン設定
  2. 会話風アイコン
  3. 演出
  4. その他

カスタマイズ画面

WordPressの管理画面トップ > 外観 > カスタマイズ と選択するとカスタマイズメニューが表示されます。

サイト名やキャッチフレーズの設定、画像・アイコンの設定、背景色や文字色などのデザイン、メニューやウィジェットの設定ができます。右画面にはプレビューがリアルタイムで表示されます。

全体カラー設定 - 基本3色 -

テーマの基本カラーを指定します。キーカラー、メインカラー、サブカラー、テキストカラーの4色を設定することができます。
さらに細かい色の設定は、「メニューのカラー設定」「各テキストとhタグ(見出し)」「オプションカラー」で行えます。

ロゴ画像

ロゴ画像を指定します。
プロバージョンではヘッダーとフッターで異なるロゴを設定することができます。無料版ではヘッダーのロゴがフッターにも表示されます。

サイト基本情報

サイトのタイトル、キャッチフレーズ、サイトアイコンを設定できます。

ヘッダー画像

ヘッダー画像をアップロードできます。ヘッダー画像は複数アップロードでき、ランダムで表示できます。
ヘッダー画像の推奨サイズは2200×500ピクセルです。
プロバージョンではヘッダー画像の後ろに背景画像を設定することができます。

背景画像

背景画像を設定できます。

基本エリア設定

サイトの背景色やヘッダーなど基本エリアの設定を変更できます。
参考画像で色のついた箇所の設定を変更できます。赤い箇所が背景色、青い箇所がサイト背景色、黄緑色の箇所がサイト上部のラインです。
そのほか、ヘッダーの背景色やタイトル・キャッチフレーズの文字色もここで変更できます。
詳細

メニュー

メニューの設定ができます。

無料版では4箇所、プロバージョンでは6箇所のメニューをそれぞれ設定できます。

  1. ヘッダー用メニュー
  2. フッター用メニュー
  3. サイド用メニュー
  4. スマートフォン用メニュー
  5. スマートフォン用ミドルメニュー (ST-PRO)
  6. スマートフォンフッター用メニュー (ST-PRO)

[+] メニューのカラー設定

ヘッダーメニュー、サイドバーメニュー、スマホメニューの設定ができます。背景色やボーダー、文字色の設定を変更することができます。
詳細

[+] 各テキストとhタグ(見出し)

投稿のタイトルや見出し、パンくずリストなどの項目のデザインを変更できます。

  1. Googleフォントの適応
  2. 記事タイトル・Hタグ(文字色・フォントサイズ・背景色・デザイン・ボーダー・余白)
  3. サイドバーの見出し色
  4. 記事タイトル上のカテゴリ(背景色・文字色)
  5. 投稿日時・ぱんくずリスト・タグ(テキスト色)
  6. 引用部分の背景色の設定
  7. NEW ENTRYと関連記事(背景色・文字色)
  8. タグクラウド(文字とボーダー色)
  9. 記事内リンク色
  10. 全てのリンクテキスト(マウスオーバー色)

[+] オプションカラー

リストやテーブル、ウィジェットなどの設定ができます。

  1. 記事内のWebアイコン
  2. 数字リストのカラー
  3. チェックリストのカラー
  4. table(表)全体のカラー
  5. RSS(購読する)ボタン*
  6. SNSボタン※一括
  7. お知らせ
  8. おすすめ記事
  9. フリーボックスウィジェット
  10. ウィジェット問合せフォームボタン
  11. オリジナルウィジェットボタンPRO
  12. 会話風ふきだしのカラーPRO
  13. TOC+(目次)のカラー
  14. コンタクトフォーム7送信ボタン

ウィジェット

サイドバー、ヘッダー、フッター、トップページに表示されるウィジェットの編集ができます。

WordPressで用意されているデフォルトのウィジェットのほか、STINGER PLUS2で用意されたウィジェットを使うことができます。

STINGER PLUS2のウィジェットはデザインが綺麗なのでそのまま使うことができて便利です。

STINGER PLUS2で用意されているウィジェット

  • 01_STINGERサイドバーメニュー
  • 02_STINGER問合せボタン
  • 03_STINGERフリーボックス
  • 04_STINGER_RSSボタン
  • 05_STINGER最新の投稿一覧
  • 06_STINGERオリジナルボタンPRO
  • 07_STINGERお知らせエリア
  • 08_STINGERカテゴリ別ボックスPRO
  • 09_STINGERカスタム投稿一覧 PRO
  • 10_STINGER記事別ボックス PRO

WordPressのデフォルトウィジェット

  1. RSS
  2. アーカイブ
  3. カスタム HTML
  4. カテゴリー
  5. カレンダー
  6. ギャラリー
  7. タグクラウド
  8. テキスト
  9. ナビゲーションメニュー
  10. メタ情報
  11. 動画
  12. 固定ページ
  13. 最近のコメント
  14. 最近の投稿
  15. 検索
  16. 画像
  17. 音声

ホームページ設定

サイトのホームに表示するページを指定できます。

追加 CSS

CSSを記述して自由にデザインを変更できます。

カスタマイズ例

投稿ページに表示する情報を減らしてシンプルに

【STINGER PLUS2】投稿ページ内下部のラベルとタグを非表示にするCSS

関連記事・NEW ENTRYをカード風にカスタマイズ

【STINGER PLUS2】記事一覧・関連記事表示のカスタマイズ

カテゴリー一覧のマウスオーバー時にリスト全体の色が変わるようにカスタマイズ

【STINGER PLUS2】サイドメニューのカテゴリー一覧をカスタマイズ

プラグインを使って目次を追尾させる

【STINGER PLUS2】サイドバーウィジェットで目次を追尾させてみた

コメント欄をカスタマイズ

STINGER PLUS2 コメント欄を表示し、ログインユーザー以外もコメントできるようにする
STINGER PLUS2 コメント欄の位置を記事の最下部にする方法

フッターのカスタマイズ

STINGER PLUS2でフッターのロゴ画像を消す方法

このサイトの追加CSSまとめ

【Word Press】導入中プラグインとSTINGER PLUS2の追加CSS 2019/7/20現在
【STINGER PLUS2】追加CSS(2019/08/22現在)
【STINGER PLUS2】追加CSS(2019/10/21現在)

管理画面に対応するstyle.css一覧

管理画面に対応しているstyle.cssの一覧です。追加CSSを使ってカスタマイズする際に参考にしてください。

テーブル

TOC+(目次)

アイコン

サイト主要要素の色

メニュー・見出し・タイトル

投稿

ウィジェット

画面サイズ別設定

タブレットサイズ(959px以下)

タブレットサイズ以下

タブレットサイズ(600px~959px)のみで適応したいCSS -タブレットのみ

PCサイズ

-STINGER PLUS2
-, , , ,

Copyright© LESS , 2020 All Rights Reserved Powered by STINGER.