記事の内容は動作や機能を100%保障するものではございません。悪しからずご了承下さいませ。※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

AFFINGER4管理の完全マニュアル

AFFINGER4管理の説明

2016-11-22_14h55_38

AFFINGER4は「AFFINGER管理」「カスタマイザー」「ウィジェット」「投稿・固定ページ」「カテゴリ」に主な機能があります。

ここではテーマの全体的な設定をする「AFFINGER管理」の説明になります。

目次

各パーツの名前

マニュアルの説明に出てくる「エリア」の名称です。

サイト全体の設定

2016-11-23_094000

オリジナルテーマカスタマイザーを使用する

2016-11-22_14h56_23

カスタマイザーを使用する場合にチェックを入れます。こちらを有効化することでカスタマイザーにてカラーやレイアウト、背景画像など様々な変更がプレビューを確認しながら直感的に変更できます。

カスタマイザー:「外観」>「カスタマイズ」

※カスタマイザーを有効化すると通常のCSS(style.css)が上書きされます。ご自身でcssを変更したい方は有効化しないでください※箇所により「!important」なども使用しています。

デフォルトカラーの設定

col

カスタマイザーを使用しない場合のデフォルトのカラーを選択できます。使用する場合も基本カラーとして最初に設定できます。

基本カラーは赤(エレガント)・ 青(ビジネス)・ 緑(ナチュラル)・ オレンジ(元気)・ ピンク(可愛い)・ グレー(ダーク)の6色を用意しています。

カスタマイザー用CSSを<style>で出力

カスタマイザーで作成したCSSソースをheadに出力するのを別ファイルで読み込みます。

これがSEOにどう影響するかは不明ですが大量のCSSがコンテンツの前に出力されるのを防ぎます。AFFINGER4独自の仕様です。必須ではありませんが僕は常に使用(チェックを入れない状態)しています。

SAVE

AFFINGER管理で設定した内容を保存します。「SAVE」は各箇所に配置していますがどれを使用しても保存されます

サイト全体のレイアウト一括設定

hengenzizai1

2016-11-23_103238

サイドバーを左にする

サイドバーの位置を左右反対にします。

※このCSSは「st-kanricss.php」で管理されています。

サイト全体のカラム数を変更する

サイト全体のカラム数を一括で「1カラム」「LP化」します。

※各投稿ページにて個別に変更も可能です。個別に指定する場合はこちらの設定はしないでください(リセットの状態)

ヘッダー設定

2016-11-23_171549

2016-11-23_105009

ヘッダーを分割しない

2016-11-23_105819

通常は上図のようにキャッチフレーズが長い場合に一定のサイズ(300px)で改行されます。

「ヘッダーを分割しない」を使用するとこの制限がなくなります。

2016-11-23_105849

※電話番号、ウィジェット等が非表示になります

ヘッダーエリアをセンタリング

2016-11-23_105920

※「ヘッダーを分割しない」にチェックがある場合のみ

サイト名とキャッチフレーズを上下反対に

2016-11-23_110005

ヘッダーに表示されるサイト名(ロゴ)とキャッチフレーズの位置を上下反対にします。

ヘッダーにサイト名(またはロゴ)を表示しない

2016-11-23_110033

ヘッダーのサイト名(ロゴ)を非表示にします。

ヘッダーにキャッチフレーズを表示しない

2016-11-23_110103

ヘッダー上部にフッター用リンクと同じリンクを追加する

2016-11-23_12h58_21

ヘッダーにメニューで「フッター」に指定したものと同じメニューを表示します。

サムネイル画像設定

2016-11-23_173442

一覧のサムネイル画像の表示に関する設定を行います。トップページの記事一覧、サイドバーの一覧、関連記事、おすすめ記事、アーカイブ一覧などに一括で反映されます。

2016-11-23_16h19_47

一覧のサムネイルを丸くする

2016-11-23_16h20_39

サムネイル写真を丸くします

一覧のサムネイルを大きくする

2016-11-23_16h22_08

タブレットサイズ以上の場合のサムネイル画像を1.5倍にします。(スマホ表示時はそのまま)

※st-kanricss.phpで管理

一覧のサムネイルを表示しない

2016-11-23_162451

サムネイル画像を非表示にします。

サムネイル画像

アイキャッチが無い時のサムネイル画像をアップロードして設定します。画像は「SAVE」を押した時点でアップロードされます。

トップページの設定

2016-11-23_164245

トップページに固定記事を挿入

トップページに任意の「固定ページ」のコンテンツを挿入します。固定記事のID(半角数字)を記入してください。

参考記事IDの確認方法

重複コンテンツを防ぐために挿入された元の固定ページは自動的に「noindex」となりトップページにcanonical処理されます。

※指定できるのは固定ページのみです。投稿ページなどは指定できません。

挿入コンテンツ

トップページに挿入したいコンテンツを直接作成できます。

※エディタ画像は一部プラグイン「TinyMCE Advanced」が反映された状態です。

トップページのレイアウト

2016-11-23_170345

トップページのみのカラム数を変更します。

記事一覧

2016-11-23_165551

トップページに一覧で表示される記事の設定を行います。

2016-11-23_170358

トップページ新着記事一覧に表示するカテゴリ(ID)を指定

記事ID(半角英数)を指定することでトップページに表示される記事のカテゴリを指定できます。

一部のカテゴリのみを指定したい場合は「-(マイナス)」を指定してください。

※複数指定はできません

抜粋の文字数

一覧の抜粋の文字数を変更します。

※デフォルトは100

新着記事:新着記事一覧に表示する見出し

新着記事一覧の上に表示される「NEW ENTRY」の文字を変更します(文字はコンテンツが挿入された場合のみ表示されます)

新着記事に表示する件数(サイドバー)

サイドバーに表示される新着記事の件数を指定します。コンテンツ内の件数はWordPressの「表示設定」で変更して下さい。

各新着記事一覧の表示・非表示設定
  • トップページのコンテンツ内の新着記事一覧を非表示にする
  • 下層ページのサイドバーの新着記事一覧を非表示にする
  • トップページのサイドバーの新着記事一覧を非表示にする
固定ページ指定のフロントにも新着記事一覧の表示

通常は固定ページをフロントにした場合、新着記事一覧が表示されませんが、それを表示するようにします。

  • 新着一覧を表示する
  • 新着一覧を表示する件数

※ページャーは表示されません

NEWS(お知らせ)の表示

2016-11-23_170941

トップページ(及びウィジェット)で表示させるNEWSの設定を行います。

2016-11-23_164337

お知らせをTOPページの一番上に表示する

これにチェックを入れることでNEWSが表示されます

お知らせタイトルバーに表示する文字

「NEWS」の文字を変更できます

お知らせに表示するカテゴリ

カテゴリIDを指定することで表示する記事のカテゴリを指定できます。※デフォルトは0(全て)

複数指定する場合は半角カンマ「,」で区切ってください

お知らせに表示する件数

表示件数を変更します。

YouTube背景

2016-11-23_185143

DEMOhttp://affinger.com/monster-g2/

2016-11-23_184855

背景に流すYouTube動画ID

PC閲覧時に流したいYouTube背景を指定します。

2016-11-26_16h46_00

任意のYouTube動画の①「共有」②「埋め込みコード」より③の「https://youtu.be/」以降の英数字を記入します。

※YouTube動画によって正常に表示されない場合もございます。

トップページ(PC)の背景でYouTubeを流す

ここにチェックをいれることでPC閲覧時にYouTube動画の背景を流します。

オプション

YouTube動画の表示方法のオプションを指定します

  • YouTubeの音を出す
  • YouTubeの関連動画を非表示
  • YouTubeをループ再生
トップ背景にアミ点を追加

YouTube動画背景の上にアミ点の背景を敷き、画質の悪い動画を緩和したりサイトを見やすくします。

※YouTube設定がオフの場合も反映されます

下層ページでもYouTubeを流す(アミ点も反映)

通常はYouTube動画はトップページのみですが下層でも表示します。

YouTubeのNOW PLAYリンクを表示する

使用しているYouTube動画へのリンクを表示します。

※カスタマイザーにて「ヘッダー以下の背景色」を指定するとYouTube動画が隠れてしまいます。

投稿・固定記事設定

2016-11-23_185618

2016-11-23_184909

全ての投稿ページをAMP対応にする(β)

AMPは各投稿ページにて記事毎に有効化できますがここで一括で設定する事も出来ます。

AMPに関する注意事項はコチラをお読みください。

アイキャッチ画像を記事上部に表示する

アイキャッチ画像に設定した画像を全ての投稿及び固定記事最上部に表示します。(各投稿ページにて記事毎に指定することも可能です)

アイキャッチのキャプションをクレジットとして写真上に表示する

2016-11-24_174522b

アイキャッチ画像のキャプション部分に記載された内容を記事上部に表示された画像に重ねて表示します。

記事タイトル上のカテゴリを非表示にする

2016-11-24_174522c

記事一覧・関連記事一覧などにカテゴリを表示する

2016-11-24_175133

記事一覧にもカテゴリを表示します。

投稿に「投稿日」「更新日」を表示しない

2016-11-24_174522d

投稿ページの「投稿日」「更新日」を非表示にします。

固定ページに「投稿日」「更新日」を表示しない

固定ページの「投稿日」「更新日」を非表示にします。

コメント欄を非表示にする

コメント欄を全て非表示にします。

著者情報を表示する

2016-11-24_175220

表示しない場合は「author」名でdisplay:none;となってます。

※ログインIDと同じではないか注意して下さい。

h3タグにチェックマークを一括適応する

2016-11-24_175616

記事内のh3タグの見出し頭に「チェックマーク」を自動で付加します。

固定ページに子ページへのリンクを表示

固定ページに「子ページ」がある場合、一覧のリンクを表示します。

固定ページにも広告を表示

ウィジェットで設定した広告を固定ページでも表示します。

表示を変えるカテゴリ

指定されたカテゴリID又はスラッグ(半角英数)の投稿には「single-type2.php」が反映されます。通常とは異なる投稿デザインを追加したい場合に。(中級以上)

参考http://the-money.net/custom-m/toukoucustom/

関連記事一覧

2016-11-23_185700

2016-11-23_184920

関連記事一覧に表示する見出し

投稿記事下に表示される「関連記事」を任意の文字に変更します。(15文字以内)

関連記事に表示する件数

関連記事を表示する件数を指定します。

投稿の関連記事を非表示にする

関連記事を非表示にします

ヘッダー画像(スライドショー)

2016-11-23_184548

2016-11-23_180304

ヘッダー画像トリミングの幅とヘッダー画像トリミングの高さ

2016-11-26_16h37_47

ヘッダー画像を選択した際にデフォルトで画像の切り抜きエリアに指定されるサイズです。切り抜き時に可変に変更できますが、指定しておくと複数の画像を指定する際に任意の統一したサイズに変更できます。

※デフォルトの横幅サイズは1060pxです。縦横比に応じて表示されます

ヘッダー画像のリンク先URL

1URLだけヘッダー画像にリンクを貼ることが出来ます。複数のヘッダー画像にそれぞれのリンクを設定したい場合はプラグイン「MetaSlider」とヘッダー画像エリアのウィジェットの併用がお勧めです。

表示設定

以下のようにヘッダー画像の表示を指定できます

  • 下層ページにもヘッダー画像を表示する
  • スマホ・タブレット閲覧時は非表示にする
  • ヘッダー画像を全て非表示にする
スライドショー設定
ヘッダー画像をスライドショーで表示する

これにチェックが無いとアニメーションされません

スライドショーの表方法

アニメーションの動きは「フェードイン・アウト」「  右から左  左から右 」の3パターンから選べます。

スライドショーの表示速度: ミリ秒

スライドショーが切り替わるスピードを変更します。

メニュー作成 - PC用グローバルメニュー

2016-11-23_18h10_10

2016-11-23_180609

PC用メインメニューの表示位置を指定します
  • PC用メインメニューを上に表示する
  • PC用メインメニューを下に表示する(デフォルト)
  • PC用メインメニューを表示しない

※メニューのテキストの長さは最大全角で12文字程度、ボタン数は6つまで(階層は3階層まで)を理想としています

参考メニューの設定

旧式のナビを使用する

表示は第一層のみとなりますが表示できる文字数制限がなくなります

 メニュー作成 - スマホ用アコーディオンメニュー

2016-11-23_18h09_09

2016-11-23_180623

スマートフォンメニューを表示しない

スマートフォン、タブレット用のアコーディオンメニューを非表示にします

アコーディオンメニューに検索フォーム追加

アコーディオンメニュー内に検索フォーム追加します

追加メニュー

アコーディオンメニューの開閉ボタンの横に追加ボタンを作成します。

  • 追加メニュー1のWebフォント
  • 追加メニュー1に表示する文字
  • リンク先URL

※リンク先をtel:(任意の電話番号)に設定するとスマートフォン閲覧時にタップで電話がかけれるようになります
※リンク先を#wrapperに設定するとページTOPへのリンクになります
2項目を追加した場合は40%、1項目のみは80%の幅内容まで表示されます

ページTOPへのボタンを表示しない

下部に表示される「ページTOPへのボタン」を非表示にします。位置を上に上げることはカスタマイザーにて可能です。

※スマートフォンのフッターに固定の広告を貼る場合などに使用します。

PC時はアコーディオンメニューを出力しない

PC閲覧時にサイトの幅を狭めた時に表示されるアコーディオンメニューを非表示にします。

おすすめ記事一覧の作成

2016-11-23_181735

2016-11-23_181638

おすすめ記事一覧に表示する文字

おすすめ一覧に表示される文字を指定します。

※15文字以内

任意の人気記事を指定(投稿又は固定記事ID)

表示したい記事のIDを指定します。(半角数字)

複数指定する場合は表示したい順に「,(半角カンマ)」で区切ります。

表示位置の指定
  • サイドのスクロールに表示にする(抜粋非表示)
  • 投稿の記事下に表示にする
  • 固定記事の下に表示にする
  • トップの最上部表示にする
  • トップの挿入固定記事下に表示にする
  • カテゴリーに表示にする

SNS設定

2016-11-23_184447

2016-11-23_182424

表示設定
  • トップページのSNSボタンを非表示にする
  • 投稿ページのSNSボタンを非表示にする
  • SNSボタンを固定ページでも表示する
OGP設定
fb:admins

OGPを使用する場合は記入して下さい。

FacebookページのURL

お持ちの場合は記載して下さい

Twitter設定
Twitterアカウント

記入することで@アカウント名が入ります。

ハッシュタグ

記入することで任意のハッシュタグ(#hoge)が入ります。

Facebook App ID(AMP用)

AMPでFacebookのシェアボタンを機能させるのに必要です(次回verUPでfb:adminsの代わりとしても機能する予定です)

SEO関連設定

2016-11-26_19h33_21

トップタイトルを書き替え

トップページのtitleタグを書き換えます※ここに記述したタイトルが優先されます

トップ用のメタキーワード

トップページにメタキーワードを挿入します(複数ある場合は半角カンマ「,」で区切る)

トップ用のメタディスクリプション

トップページにメタディスクリプションを挿入します

投稿及び固定記事タイトルの末尾にサイト名を追加しない

テーマ仕様でもある記事タイトル末尾に付与するサイト名を削除します。

※下記の「WPデフォルトのタイトル出力を使用」にチェックが入っていると反映されません

WPデフォルトのタイトル出力を使用する

テーマ独自のtitleタグの出力を停止してWordPress独自のデフォルトに戻します

ヘッダーソースを自動で綺麗にしない

テーマにてヘッダーに出力される内容の削除を停止します。(Head Cleaner使用の場合などに)

カテゴリーをindexしない

カテゴリーアーカイブをnoindexにします

日本語パーマリンクを自動変換する

パーマリンクが日本語の場合に英数字に自動で変更します

※更新時にURLが変更されますので途中で変更する場合は注意して下さい。

固定記事パーマリンクにhtmlを付与する

固定記事のパーマリンクにhtmlを付与します。パーマリンク設定で変更を保存して更新して下さい。

※更新時にURLが変更されます

テキスト選択不可にする

テキストの右クリックなどを禁止します。

※100%コピーを禁止できるわけではありません(コンタクトフォームやコメントの入力ができなくなります。個々の設定で解除できます。)

Google連携に関する設定

2016-11-26_19h33_56

アナリティクスコード(トラッキング ID)

Googleアナリティクスを使用する場合に記入します。

参照Googleアナリティクス(アクセス解析)の設定

アナリティクスコード(トラッキング ID)※AMP用:UA-

AMP用のアナリティクスコードを記入します

サーチコンソールHTMLタグ:

参照サーチコンソール設定

data-ad-client(ca-pub-以降の数字)とdata-ad-slot

AMP用にアドセンスを表示する場合に使用します

参照AFFINGER4の「AMP」について

その他のアクセス解析

こちらはβ版機能です。記載内容がheadに直接出力されます。

カスタム投稿一覧の設定

2016-11-26_19h34_37

カスタム投稿一覧を表示する固定ページテンプレートの設定

一覧に表示するカスタム投稿のスラッグ:

カスタム投稿一覧に表示する記事数:

※カスタム投稿を使用する場合、デフォルトで「single-custom.php(β)」を用意していますが適宜変更及び作成して下さい。

アイコン・ファビコン設定

2016-11-26_19h34_50

ファビコン画像

ブックマークなどに表示されるファビコンを設定します。

16×16px、32×32pxのマルチアイコンが推奨されます

apple-touch-icon画像

iPhoneなどでhome画面にブックマークした際に表示されるアイコンを設定します。

152px以上推奨のpng画像推奨

演出

2016-11-26_19h35_04

 

 

【記事タイトル】

記事タイトルをふわっと現れるようにフェードインします

【画像】

画像の表示方法を演出します

  • 記事エリアの画像表示をスクロールでフェードインする(推奨)
  • サイト全体の画像表示をスクロールでフェードインする
  • 画像の演出をリセットする
外部リンク

記事内の外部リンクを別ウィンドウで開きます。(target="_blank"を付与)

その他

2016-11-26_19h35_12

RSSフィードを配信しない

RSSフィードの配信を停止します。

ウィジェットにショートコードを使用する

ウィジェットでもショートコードを使用できるようにします。

ページ内スムーススクロールを使用する

ページ内リンクにスムーススクロールを適応します。(プラグインによっては干渉の可能性あり)

PC閲覧時にサイドバーの最下部広告エリアをスクロール追尾しない

PC閲覧時のサイドバー下部に表示される追尾式広告の追尾を停止します。

TOC+にオリジナルCSSを適応する

プラグイン「Table of Contents Plus」使用時にオリジナルのCSSを適応します(カスタマイザーでカラー変更が可能です)

※別途プラグインが必要です
※上級者向け設定にて「プラグインのCSSを読み込まない」にチェックを入れて下さい
※「ページ内スムーススクロールを使用する」にチェックがあるとTOC+が上手く動かない場合があります。

ダッシュボードの内容を非表示にして2カラムに

管理画面のダッシュボードの不要なモノを消して2カラムにスッキリとさせます。

WordPressの自動更新を停止する

※非推奨(100%更新停止を保証するものではありません)

 

ad

ad

情報配信中

NEWS

amp2 1

AMPがGoogleモバイルの通常検索結果にまで拡大したことを受けて通常の検索結果のAMPに対応した「AFFINGER4ver20161107」をUP致しました。 AMP(アクセラレイティッド・モバイ ...

affinlion 2

新しく有料配布とさせていただいた「AFFINGER4」。 今までのサイト作成を通して必要な機能や便利な仕組みを思いつく限り詰め込んだ万能テーマに仕上がっています。 micataやSTINGER PLU ...

2016-09-28_163821 3

AFFINGER4はSTINGERとmicataの両方を兼ね備えた、STINGER系の中でもっとも最新かつ最高位のテンプレートです。 試験的にAFFINGER4の管理画面の中をのぞいて頂ける管理画面用 ...

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

Copyright© アフィリエイトのAFFINGER , 2016 AllRights Reserved Powered by AFFINGER4.