テーマ管理の説明
ここではテーマの全体的な設定をする「AFFINGER(STINGER PRO)管理」の説明になります。
[toc]
各パーツの名前
マニュアルの説明に出てくる「エリア」の名称です。
サイト全体の設定
オリジナルテーマカスタマイザーを使用する
カスタマイザーを使用する場合にチェックを入れます。こちらを有効化することでカスタマイザーにてカラーやレイアウト、背景画像など様々な変更がプレビューを確認しながら直感的に変更できます。
カスタマイザー:「外観」>「カスタマイズ」
※カスタマイザーを有効化すると通常のCSS(style.css)が上書きされます。ご自身でcssを変更したい方は有効化しないでください※箇所により「!important」なども使用しています。
デフォルトカラーの設定
カスタマイザーを使用しない場合のデフォルトのカラーを選択できます。使用する場合も基本カラーとして最初に設定できます。
基本カラーは赤(エレガント)・ 青(ビジネス)・ 緑(ナチュラル)・ オレンジ(元気)・ ピンク(可愛い)・ グレー(ダーク)の6色を用意しています。
カスタマイザー用CSSを<style>で出力
カスタマイザーで作成したCSSソースをheadに出力するのを別ファイルで読み込みます。
これがSEOにどう影響するかは不明ですが大量のCSSがコンテンツの前に出力されるのを防ぎます。AFFINGER4独自の仕様です。必須ではありませんが僕は常に使用(チェックを入れない状態)しています。
SAVE
AFFINGER管理で設定した内容を保存します。「SAVE」は各箇所に配置していますがどれを使用しても保存されます。
サイト全体のレイアウト一括設定
サイドバーを左にする
サイドバーの位置を左右反対にします。
※このCSSは「st-kanricss.php」で管理されています。
サイト全体のカラム数を変更する
サイト全体のカラム数を一括で「1カラム」「LP化」します。
※各投稿ページにて個別に変更も可能です。個別に指定する場合はこちらの設定はしないでください(リセットの状態)
ヘッダー設定
ヘッダーを分割しない
通常は上図のようにキャッチフレーズが長い場合に一定のサイズ(300px)で改行されます。
「ヘッダーを分割しない」を使用するとこの制限がなくなります。
※電話番号、ウィジェット等が非表示になります
ヘッダーエリアをセンタリング
※「ヘッダーを分割しない」にチェックがある場合のみ
サイト名とキャッチフレーズを上下反対に
ヘッダーに表示されるサイト名(ロゴ)とキャッチフレーズの位置を上下反対にします。
ヘッダーにサイト名(またはロゴ)を表示しない
ヘッダーのサイト名(ロゴ)を非表示にします。
ヘッダーにキャッチフレーズを表示しない
ヘッダー上部にフッター用リンクと同じリンクを追加する
ヘッダーにメニューで「フッター」に指定したものと同じメニューを表示します。
サムネイル画像設定
一覧のサムネイル画像の表示に関する設定を行います。トップページの記事一覧、サイドバーの一覧、関連記事、おすすめ記事、アーカイブ一覧などに一括で反映されます。
一覧のサムネイルを丸くする
サムネイル写真を丸くします
一覧のサムネイルを大きくする
タブレットサイズ以上の場合のサムネイル画像を1.5倍にします。(スマホ表示時はそのまま)
※st-kanricss.phpで管理
一覧のサムネイルを表示しない
サムネイル画像を非表示にします。
サムネイル画像
アイキャッチが無い時のサムネイル画像をアップロードして設定します。画像は「SAVE」を押した時点でアップロードされます。
トップページの設定
トップページに固定記事を挿入
トップページに任意の「固定ページ」のコンテンツを挿入します。固定記事のID(半角数字)を記入してください。
重複コンテンツを防ぐために挿入された元の固定ページは自動的に「noindex」となりトップページにcanonical処理されます。
※指定できるのは固定ページのみです。投稿ページなどは指定できません。
挿入コンテンツ
トップページに挿入したいコンテンツを直接作成できます。
※エディタ画像は一部プラグイン「TinyMCE Advanced」が反映された状態です。
トップページのレイアウト
トップページのみのカラム数を変更します。
記事一覧
トップページに一覧で表示される記事の設定を行います。
トップページ新着記事一覧に表示するカテゴリ(ID)を指定
記事ID(半角英数)を指定することでトップページに表示される記事のカテゴリを指定できます。
一部のカテゴリのみを指定したい場合は「-(マイナス)」を指定してください。
※複数指定はできません
抜粋の文字数
一覧の抜粋の文字数を変更します。
※デフォルトは100
新着記事:新着記事一覧に表示する見出し
新着記事一覧の上に表示される「NEW ENTRY」の文字を変更します(文字はコンテンツが挿入された場合のみ表示されます)
新着記事に表示する件数(サイドバー)
サイドバーに表示される新着記事の件数を指定します。コンテンツ内の件数はWordPressの「表示設定」で変更して下さい。
各新着記事一覧の表示・非表示設定
- トップページのコンテンツ内の新着記事一覧を非表示にする
- 下層ページのサイドバーの新着記事一覧を非表示にする
- トップページのサイドバーの新着記事一覧を非表示にする
固定ページ指定のフロントにも新着記事一覧の表示
通常は固定ページをフロントにした場合、新着記事一覧が表示されませんが、それを表示するようにします。
- 新着一覧を表示する
- 新着一覧を表示する件数
※ページャーは表示されません
NEWS(お知らせ)の表示
トップページ(及びウィジェット)で表示させるNEWSの設定を行います。
お知らせをTOPページの一番上に表示する
これにチェックを入れることでNEWSが表示されます
お知らせタイトルバーに表示する文字
「NEWS」の文字を変更できます
お知らせに表示するカテゴリ
カテゴリIDを指定することで表示する記事のカテゴリを指定できます。※デフォルトは0(全て)
複数指定する場合は半角カンマ「,」で区切ってください
お知らせに表示する件数
表示件数を変更します。
YouTube背景
DEMOhttp://affinger.com/monster-g2/
背景に流すYouTube動画ID
PC閲覧時に流したいYouTube背景を指定します。
任意のYouTube動画の①「共有」②「埋め込みコード」より③の「https://youtu.be/」以降の英数字を記入します。
※YouTube動画によって正常に表示されない場合もございます。
トップページ(PC)の背景でYouTubeを流す
ここにチェックをいれることでPC閲覧時にYouTube動画の背景を流します。
オプション
YouTube動画の表示方法のオプションを指定します
- YouTubeの音を出す
- YouTubeの関連動画を非表示
- YouTubeをループ再生
トップ背景にアミ点を追加
YouTube動画背景の上にアミ点の背景を敷き、画質の悪い動画を緩和したりサイトを見やすくします。
※YouTube設定がオフの場合も反映されます
下層ページでもYouTubeを流す(アミ点も反映)
通常はYouTube動画はトップページのみですが下層でも表示します。
YouTubeのNOW PLAYリンクを表示する
使用しているYouTube動画へのリンクを表示します。
※カスタマイザーにて「ヘッダー以下の背景色」を指定するとYouTube動画が隠れてしまいます。
投稿・固定記事設定
全ての投稿ページをAMP対応にする(β)
AMPは各投稿ページにて記事毎に有効化できますがここで一括で設定する事も出来ます。
AMPに関する注意事項はコチラをお読みください。
アイキャッチ画像を記事上部に表示する
アイキャッチ画像に設定した画像を全ての投稿及び固定記事最上部に表示します。(各投稿ページにて記事毎に指定することも可能です)
アイキャッチのキャプションをクレジットとして写真上に表示する
アイキャッチ画像のキャプション部分に記載された内容を記事上部に表示された画像に重ねて表示します。
記事タイトル上のカテゴリを非表示にする
記事一覧・関連記事一覧などにカテゴリを表示する
記事一覧にもカテゴリを表示します。
投稿に「投稿日」「更新日」を表示しない
投稿ページの「投稿日」「更新日」を非表示にします。
固定ページに「投稿日」「更新日」を表示しない
固定ページの「投稿日」「更新日」を非表示にします。
コメント欄を非表示にする
コメント欄を全て非表示にします。
著者情報を表示する
表示しない場合は「author」名でdisplay:none;となってます。
※ログインIDと同じではないか注意して下さい。
h3タグにチェックマークを一括適応する
記事内のh3タグの見出し頭に「チェックマーク」を自動で付加します。
固定ページに子ページへのリンクを表示
固定ページに「子ページ」がある場合、一覧のリンクを表示します。
固定ページにも広告を表示
ウィジェットで設定した広告を固定ページでも表示します。
表示を変えるカテゴリ
指定されたカテゴリID又はスラッグ(半角英数)の投稿には「single-type2.php」が反映されます。通常とは異なる投稿デザインを追加したい場合に。(中級以上)
関連記事一覧
関連記事一覧に表示する見出し
投稿記事下に表示される「関連記事」を任意の文字に変更します。(15文字以内)
関連記事に表示する件数
関連記事を表示する件数を指定します。
投稿の関連記事を非表示にする
関連記事を非表示にします
ヘッダー画像(スライドショー)
ヘッダー画像トリミングの幅とヘッダー画像トリミングの高さ
ヘッダー画像を選択した際にデフォルトで画像の切り抜きエリアに指定されるサイズです。切り抜き時に可変に変更できますが、指定しておくと複数の画像を指定する際に任意の統一したサイズに変更できます。
※デフォルトの横幅サイズは1060pxです。縦横比に応じて表示されます
ヘッダー画像のリンク先URL
1URLだけヘッダー画像にリンクを貼ることが出来ます。複数のヘッダー画像にそれぞれのリンクを設定したい場合はプラグイン「MetaSlider」とヘッダー画像エリアのウィジェットの併用がお勧めです。
表示設定
以下のようにヘッダー画像の表示を指定できます
- 下層ページにもヘッダー画像を表示する
- スマホ・タブレット閲覧時は非表示にする
- ヘッダー画像を全て非表示にする
スライドショー設定
ヘッダー画像をスライドショーで表示する
これにチェックが無いとアニメーションされません
スライドショーの表方法
アニメーションの動きは「フェードイン・アウト」「 右から左 左から右 」の3パターンから選べます。
スライドショーの表示速度: ミリ秒
スライドショーが切り替わるスピードを変更します。
メニュー作成 - PC用グローバルメニュー
PC用メインメニューの表示位置を指定します
- PC用メインメニューを上に表示する
- PC用メインメニューを下に表示する(デフォルト)
- PC用メインメニューを表示しない
※メニューのテキストの長さは最大全角で12文字程度、ボタン数は6つまで(階層は3階層まで)を理想としています
参考メニューの設定
旧式のナビを使用する
表示は第一層のみとなりますが表示できる文字数制限がなくなります
メニュー作成 - スマホ用アコーディオンメニュー
スマートフォンメニューを表示しない
スマートフォン、タブレット用のアコーディオンメニューを非表示にします
アコーディオンメニューに検索フォーム追加
アコーディオンメニュー内に検索フォーム追加します
追加メニュー
アコーディオンメニューの開閉ボタンの横に追加ボタンを作成します。
- 追加メニュー1のWebフォント
- 追加メニュー1に表示する文字
- リンク先URL
※リンク先をtel:(任意の電話番号)に設定するとスマートフォン閲覧時にタップで電話がかけれるようになります
※リンク先を#wrapperに設定するとページTOPへのリンクになります
※2項目を追加した場合は40%、1項目のみは80%の幅内容まで表示されます
ページTOPへのボタンを表示しない
下部に表示される「ページTOPへのボタン」を非表示にします。位置を上に上げることはカスタマイザーにて可能です。
※スマートフォンのフッターに固定の広告を貼る場合などに使用します。
PC時はアコーディオンメニューを出力しない
PC閲覧時にサイトの幅を狭めた時に表示されるアコーディオンメニューを非表示にします。
おすすめ記事一覧の作成
おすすめ記事一覧に表示する文字
おすすめ一覧に表示される文字を指定します。
※15文字以内
任意の人気記事を指定(投稿又は固定記事ID)
表示したい記事のIDを指定します。(半角数字)
複数指定する場合は表示したい順に「,(半角カンマ)」で区切ります。
表示位置の指定
- サイドのスクロールに表示にする(抜粋非表示)
- 投稿の記事下に表示にする
- 固定記事の下に表示にする
- トップの最上部表示にする
- トップの挿入固定記事下に表示にする
- カテゴリーに表示にする
SNS設定
表示設定
- トップページのSNSボタンを非表示にする
- 投稿ページのSNSボタンを非表示にする
- SNSボタンを固定ページでも表示する
OGP設定
fb:admins
OGPを使用する場合は記入して下さい。
FacebookページのURL
お持ちの場合は記載して下さい
Twitter設定
Twitterアカウント
記入することで@アカウント名が入ります。
ハッシュタグ
記入することで任意のハッシュタグ(#hoge)が入ります。
Facebook App ID(AMP用)
AMPでFacebookのシェアボタンを機能させるのに必要です(次回verUPでfb:adminsの代わりとしても機能する予定です)
SEO関連設定
トップタイトルを書き替え
トップページのtitleタグを書き換えます※ここに記述したタイトルが優先されます
トップ用のメタキーワード
トップページにメタキーワードを挿入します(複数ある場合は半角カンマ「,」で区切る)
トップ用のメタディスクリプション
トップページにメタディスクリプションを挿入します
投稿及び固定記事タイトルの末尾にサイト名を追加しない
テーマ仕様でもある記事タイトル末尾に付与するサイト名を削除します。
※下記の「WPデフォルトのタイトル出力を使用」にチェックが入っていると反映されません
WPデフォルトのタイトル出力を使用する
テーマ独自のtitleタグの出力を停止してWordPress独自のデフォルトに戻します
ヘッダーソースを自動で綺麗にしない
テーマにてヘッダーに出力される内容の削除を停止します。(Head Cleaner使用の場合などに)
カテゴリーをindexしない
カテゴリーアーカイブをnoindexにします
日本語パーマリンクを自動変換する
パーマリンクが日本語の場合に英数字に自動で変更します
※更新時にURLが変更されますので途中で変更する場合は注意して下さい。
固定記事パーマリンクにhtmlを付与する
固定記事のパーマリンクにhtmlを付与します。パーマリンク設定で変更を保存して更新して下さい。
※更新時にURLが変更されます
テキスト選択不可にする
テキストの右クリックなどを禁止します。
※100%コピーを禁止できるわけではありません(コンタクトフォームやコメントの入力ができなくなります。個々の設定で解除できます。)
Google連携に関する設定
アナリティクスコード(トラッキング ID)
Googleアナリティクスを使用する場合に記入します。
アナリティクスコード(トラッキング ID)※AMP用:UA-
AMP用のアナリティクスコードを記入します
サーチコンソールHTMLタグ:
data-ad-client(ca-pub-以降の数字)とdata-ad-slot
AMP用にアドセンスを表示する場合に使用します
その他のアクセス解析
こちらはβ版機能です。記載内容がheadに直接出力されます。
カスタム投稿一覧の設定
カスタム投稿一覧を表示する固定ページテンプレートの設定
一覧に表示するカスタム投稿のスラッグ:
カスタム投稿一覧に表示する記事数:
※カスタム投稿を使用する場合、デフォルトで「single-custom.php(β)」を用意していますが適宜変更及び作成して下さい。
アイコン・ファビコン設定
ファビコン画像
ブックマークなどに表示されるファビコンを設定します。
16×16px、32×32pxのマルチアイコンが推奨されます
apple-touch-icon画像
iPhoneなどでhome画面にブックマークした際に表示されるアイコンを設定します。
152px以上推奨のpng画像推奨
演出
【記事タイトル】
記事タイトルをふわっと現れるようにフェードインします
【画像】
画像の表示方法を演出します
- 記事エリアの画像表示をスクロールでフェードインする(推奨)
- サイト全体の画像表示をスクロールでフェードインする
- 画像の演出をリセットする
外部リンク
記事内の外部リンクを別ウィンドウで開きます。(target="_blank"を付与)
その他
RSSフィードを配信しない
RSSフィードの配信を停止します。
ウィジェットにショートコードを使用する
ウィジェットでもショートコードを使用できるようにします。
ページ内スムーススクロールを使用する
ページ内リンクにスムーススクロールを適応します。(プラグインによっては干渉の可能性あり)
PC閲覧時にサイドバーの最下部広告エリアをスクロール追尾しない
PC閲覧時のサイドバー下部に表示される追尾式広告の追尾を停止します。
TOC+にオリジナルCSSを適応する
プラグイン「Table of Contents Plus」使用時にオリジナルのCSSを適応します(カスタマイザーでカラー変更が可能です)
※別途プラグインが必要です
※上級者向け設定にて「プラグインのCSSを読み込まない」にチェックを入れて下さい
※「ページ内スムーススクロールを使用する」にチェックがあるとTOC+が上手く動かない場合があります。
ダッシュボードの内容を非表示にして2カラムに
管理画面のダッシュボードの不要なモノを消して2カラムにスッキリとさせます。
WordPressの自動更新を停止する
※非推奨(100%更新停止を保証するものではありません)