ネットニュースストリート

様々な話題を取り扱うネット情報総合サイト

stinger plus stinger8

STINGER PLUS+及び8のカスタマイズ画面の使用方法<後編>

投稿日:2016年11月18日 更新日:

※2016年11月15日にSTINGERの新テーマ「STINGER8」が配布されたのに伴い、「STINGER PLUS+」の配布は終了してしまいました。それに合わせて当サイトでも既存記事内容のSTINGER8(スティンガーエイト)への対応を進めております。本ページは対応済みですのでSTINGER8をお使いの方も参考にされてください。

STINGER8対応箇所(※2016/11/21追記)

STINGER8ではカスタマイズ画面で設定できる項目が減り、かなりシンプル化しました。
本記事に関しましては下記の項目がなくなっています。
・[+]テキスト及び各見出し色
・[+]オプションカラー

その他の項目は変更がありませんので、STINGER8を使用されてる方もご参考にされてみてください。

STINGER PLUS+カスタマイザー解説<後編>

今回はSTINGER PLUS+(スティンガープラス)のカスタマイズ画面の使い方解説の<後編>です。
(前編はこちら>STINGER PLUS+のカスタマイズ画面の使用方法<前編>)

それでは前回の続きです。

[+]テキスト及び各見出し色

「GoogleWebフォントの追加反映」

説明GoogleWebフォントは「STINGER管理」で設定できます。ここでは反映箇所の追加ができます。
※GoogleWebフォントは半角英数字にのみ反映されます。

「記事タイトル見出し」「メニュー(PCグローバル・サイド固定メニュー・スマートフォン)」「電話番号」にチェックを入れると下記の部分が変更されます。
説明

「任意記事のナンバー」にチェックを入れると下記の部分が変更されます。この任意(おすすめ)記事は「STINGER管理」で設定して表示させることができます。
説明

「問合せウィジェットボタン」に関しては変更が確認出来ませんでした。申し訳ありません。

「サイトタイトル色」

説明サイトタイトルとその下のキャチフレーズの色を設定できます。

↓橙色に設定してみました。
説明

「記事タイトル」

説明記事のタイトル色を変更できます。

「文字色」を赤にしてみました。
説明

「投稿日時・パンくず・タグ」

説明

「背景色」を紫にしてみました。
説明

↓タグは記事下にあります。
説明

「H2タグ」

説明H2タグの色設定です。

「文字色」を白に、「背景色」を青に、「ボーダー色」を赤に、「吹き出しデザインに変更」にチェックを入れました。ボーダー色は背景色が白じゃないと目立ちません。
説明

「H3タグ」

説明H3タグの色設定です。

「文字と下線色」を青に、「背景色」を橙色にしてみました。下線は背景色が白じゃないと目立ちません。
説明

「下線を左ボーダーに変える」にチェックを入れるとこうなります。
説明

「H4タグ」

説明H4タグの色設定です。

「文字色」を白に、「背景色」を緑にしてみました。
説明

「サイドバー見出し色」

説明

↓赤色にしてみました。サイドバーの「NEW ENTRY」の文字色が変わりました。
説明

「記事タイトル上のカテゴリ」

説明

「背景色」を青に、「文字色」を白にしてみました。
説明

「引用部分の背景色」

説明記事本文で引用を使用した時の背景色を設定できます。

↓橙色にしてみました。
説明

「NEW ENTRY&関連記事」

説明関連記事部分の色設定です。

「背景色」を緑に、文字色を白にしてみました。関連記事は記事下に表示されます。
説明

「タグクラウド」

説明ウィジェットで追加できる「タグクラウド」の色を設定できます。

「文字とボーダー色」を紫にしてみました。
説明

「一括テキスト色強制変更」

説明各所のテキスト色を変更できます。

「記事内テキストなど」を緑にしてみました。見出しの色は変わりません記事タイトル色は特に設定していないと、同じ色に変わります
説明

「サイドの文字色」を緑にしてみました。所々変わってます。
説明

「フッター文字色」を緑にしてみました。
説明

「記事内リンク色」

説明記事内に貼ったリンクのテキスト色を設定できます。デフォルトでは青色文字で、マウスオーバー時は赤に設定されています

文字色を紫、「マウスオーバー色」を緑にしてみました。
説明

[+]オプションカラー

「RSS(購読する)ボタン」

説明ウィジェットにて「04_STINGER_RSSボタン」を追加した場合の色設定ができます。

↓緑にしてみました。
説明

「SNSボタン一括」

説明ページ下部にあるSNSボタンの色を設定出来ます。一括でしか変更できませんので、使う機会はないかもしれません。

「ボタン背景色」を橙に、「アイコンと文字色」を青にしてみました。
説明

「お知らせ」

説明「STINGER管理」で「お知らせ」の表示をONにした場合の色設定ができます。

「見出し背景色上部」を青に、「見出し背景色下部」を緑に(上下ともに設定しないと反映されません)、「見出しボーダー色」を赤に、「見出し文字色」を白に、「日付の文字色」を橙色に、「お知らせ文字と下線色」を紫にしてみました。
説明

「おすすめ記事」

説明「STINGER管理」で「おすすめ記事」を表示させた場合の色設定ができます。

「見出し文字」を青に、「見出し背景色」を黄色に、「コンテンツ背景色」を緑に、「文字色」を白に、「ナンバー色」を赤に、「ナンバー背景色」を紫にしてみました。「ナンバーを非表示」にチェックを入れるとナンバーが消えます。
説明

「フリーボックスウィジェット」

説明ウィジェットにて「03_STINGERフリーボックス」を追加した場合の色設定ができます。

「見出し文字色」を青に、「見出し背景色」を黄色に、「コンテンツ背景色」を緑に、「文字色」を白にしてみました。
説明

「ウィジェット問合せフォームボタン」

説明ウィジェットにて「02_STINGER問合せボタン」を追加した場合の色設定ができます。

「文字色」を青に、「背景色」を橙色にしてみました。
説明

「オリジナルウィジェットボタン」

説明ウィジェットにて「06_STINGERオリジナルボタン」を追加した場合の色設定ができます。

「文字色」を黒に、「背景色」を緑にしてみました。
説明

「コンタクトフォーム7送信ボタン」

説明WordPressプラグインの「コンタクトフォーム7」で作成したコンタクトフォーム画面の「送信ボタン」の色設定ができます。

「文字色」を赤に、「背景色」を緑にしてみました。
説明

ヘッダー画像

説明サイトのヘッダー部分の画像設定ができます。ヘッダー画像は設定しなくても大丈夫ですが、サイトの顔の部分ですので、しっかり作り上げましょう。
※ヘッダー画像はデフォルトではトップページにしか表示されませんが、「STINGER管理」で下層ページにも表示させることができます。

「新規画像を追加」をクリックして画像を選んでいきます。サイズは「1060×400」ピクセルが推奨となっています。
↓「1060×400」サイズの画像がなくても、切り抜くことができます。
説明

↓設定すると、このような感じになります。
説明

↓今度は画像を切り抜かずに設定してみました。ちょっと大きすぎますかね。
説明

↓アップロードした画像はランダム表示することが出来ます。「アップロード済みヘッダーをランダム表示」をクリックすれば、サイトにアクセスする度に、ヘッダー画像がランダムで変わります。
※元に戻したい場合は希望の画像をクリックしてください。
説明

↓ヘッダー画像を表示させたくない場合は「画像を非表示」をクリックしてください。
説明

おすすめヘッダーに関しては確認できていません。申し訳ございません。

背景画像

説明サイトの背景に画像を設定できます。

「画像選択」で画像を指定すれば背景画像になります。
説明

↓さらに細い設定が可能です。
説明

・背景の繰り返し
「繰り返しなし」にすると画像一枚だけが表示されます。
「タイル」にすると横方向と縦方向全てに画像が表示されます。※おすすめ
「水平方向に繰り返し」にすると横方向のみに画像が繰り返し表示されます。
「垂直方向に繰り返し」にすると縦方向のみで画像が繰り返し表示されます。

・背景の位置
背景の基準位置を「左」「中央」「右」から選択できます。

・背景スクロール
「スクロール」にするとスクロール時に背景画像も一緒に移動します。
「固定」にするとスクロールを無視して背景画像が表示されます。

メニュー

各メニューの内容や位置を設定できます。こちらのページを参考にされてください。
>STINGER8のメニューの作り方

ウィジェット

ウィジェットの設定に関してはこちらのページを参考にされてください。
>STINGER8のウィジェット設定の使用方法

固定フロントページ

説明フロント(トップ)ページの設定です。
「最新の投稿」に設定すれば、新しい記事がトップページに表示されます。通常のブログサイトであればこちらでよいでしょう。

「固定ページ」を選択した場合は任意のページをトップページにすることができます。「フロントページ」でトップページに指定したいページを選択してください。
説明

終了

以上でSTINGER PLUS+(スティンガープラス)のカスタマイズ画面の解説は終了です。
かなり設定項目が多いですが、自分の必要な所だけカスタマイズすればよろしいかと思います。
この記事がカスタマイズの参考になれば幸いです。
お疲れ様でした。


<STINGER関連の記事をまとめました。↓>

STINGER8使い方まとめ
当ブログでのSTINGER8(スティンガーエイト)の使い方の記事をまとめてみました。(途中まではSTINGER PLUS+ですが、STINGER8にも対応させています。)基本的に初心者向けの使い方にな

この記事が気に入ったら
いいね!しよう

-stinger plus, stinger8

Copyright© ネットニュースストリート , 2018 All Rights Reserved.