NANOの初期設定の管理画面の実際
色設定
サイト内の複数箇所で共通で使用される色の設定を行います。
※本テーマは各コンテンツ毎に、主に下層ページのサイドバーやリンクホバー色などに使用するキーカラーの設定が可能です。各コンテンツのテーマオプションにて設定を行ってください。
※ボタンの配色・グローバルメニューの色設定についてはここでの設定とは別に、各テーマオプションにて設定を行ってください。
メインカラー
テキストリンク通常時の文字色、アーカイブページページャーのボタンの色に使用されます。
第2カラー
テキストリンクホバー時の文字色に使用されます。
記事本文内のリンク文字色
記事詳細ページと固定ページ本文内のリンク文字色に使用されます。
ファビコン設定
ブラウザのアドレスバーやタブで表示されるファビコン（サイトアイコン）を設定します。
ファビコン画像推奨サイズ：横幅16px、縦幅16px（正方形の画像をご用意ください）
.ico、.png、.gif形式のファイルが利用できます。.icoファイルを利用されることをお勧めします。
フォントタイプ設定
見出し以外のすべてのテキスト要素で使用するベースフォントを3種類から選択できます。
※フォントがインストールされていない環境では近い書体が自動的に適用されます。
大見出しのフォントタイプ設定
大見出しにあたるテキスト要素で使用するベースフォントを3種類から選択できます。
※主な適用箇所：ロゴテキスト表示時のサイトタイトル、トップページの見出し要素、詳細ページの記事タイトル
※フォントがインストールされていない環境では近い書体が自動的に適用されます。
絵文字設定
記事本文に絵文字を使っていない場合は、「絵文字を使う」からチェックを外すことをお勧めします。
チェックが外された場合、絵文字関連の JavaScript 等を読み込まないため、ページの表示速度が改善されます。
クイックタグ設定
テーマに同梱されているクイックタグを使用しない場合はチェックを外してください。
サイドバー設定
サイドバーがあるページ（下層ページ）のサイドバーの位置を設定します。
ロード画面設定
ページ遷移時にデータ読み込み中の状態が見えないように表示させておくロード画面（白背景に読込中を示すロードアイコンを表示）の設定を行います。
ロードアイコンのタイプ
ロードアイコンのタイプを3種類から選択してください。
最大表示時間
ロード画面の最大表示時間を設定してください。
通常、ロード画面は以下で設定した時間にかかわらず、ページ内の全てのコンテンツが読み込まれると自動的に消えます。
以下で設定する時間は、コンテンツが全て読み込まれていない状態でもロード画面を強制的に消すために使う時間です。
ホバーエフェクト設定
ホバーエフェクトのタイプ
サムネイルのホバーエフェクトを3タイプから選択できます。
なお、アフィリエイトASPなどの規約に抵触する可能性がある為、広告スペースに入力したサムネイルにはホバーエフェクトは付きません。
ズーム：指定した拡大率で、サムネイル画像が拡大します。
スライド：サムネイル画像が「右」「左」の指定した位置に横に移動します。また、指定した透明度の数値で画像が透過します。透過した際に、設定した「背景色」が透けて見える状態になります。
フェード：指定した透過率で画像が透過します。透過した際に、設定した「背景色」が透けて見える状態になります。
Facebook OGP設定
OGPとは、FacebookやtwitterなどのSNSでWebページをシェアする際に、記事タイトル、URL、アイキャッチ画像などのページ情報を正しく伝えるための仕組みです。
OGP設定を行うことで、シェアされたページの情報がよりわかりやすく魅力的に表示されます。
Facebook OGPを利用するにはアプリIDを設定してください。
アプリID
OGP用画像
ここで登録した画像はアイキャッチのない投稿記事やアーカイブページなどでOGP用画像として利用されます。
推奨画像サイズ：横幅1200px、縦幅630px
Twitter Cards設定
Twitterでシェアする際にアイキャッチ画像やタイトルなどのページ情報をカード形式で表示するための設定を行います。※Twitter Cardsを利用する場合は、併せて「Facebook OGP設定」を行ってください。
あなたのtwitterアカウント名（@マークは不要）
ソーシャルボタン設定
記事詳細ページの記事下に表示するソーシャルボタン（シェアボタン）の表示設定を行います。
Facebookいいねボタンは「ボタンタイプ5（公式ボタン）」選択時のみ表示されます。
「ボタンタイプ5（公式ボタン）」を選択時、RSSボタンは表示されません。
PinterestのPin itボタンの仕様上、同一ページ内で「ボタンタイプ5（公式ボタン）」とボタンタイプ1～4を混在することによりデザインが崩れて表示されることがあります。
そのため、Pin itボタンは、記事上か記事下のいずれか一方（1ページにつき1つ）のみの表示を推奨いたします。
記事下に表示するボタンタイプ
表示するボタンタイプを1～5の中から選択します。
記事下に表示するボタン
表示するボタンを個別に設定できます。表示するボタンにチェックを入れて下さい。
Twitterボタン設定
Googleマップ設定
投稿や固定ページでページビルダーコンテンツ「Googleマップ」を使用して地図を表示した際のピンマーカーの表示スタイルを設定します。
マーカータイプを「デフォルトマーカーを使う」or「カスタムマーカーを使う」から選択できます。
APIキー
マーカータイプ
カスタムCSS（<head>タグ内に挿入されます）
デザインやレイアウトを調整したい場合にご使用ください。
こちらに任意のCSSを登録することで、追加CSSとして読み込ませることができ、テーマファイルを直接編集することなく安全にカスタマイズを行って頂けます。
また、こちらに登録してあるCSSはテーマのアップデート時にもリセットされることなく引き継がれます。
記入例：.example { font-size:12px; }
<style>タグは不要です。
カスタムスクリプト（<head>タグ内に挿入されます）
<head>タグの末尾に出力されます。<script>タグを含めてGoogleAnalyticsのスクリプトなどを入力してください。
ヘッダーロゴ設定
ロゴのタイプ
ロゴの文字色
ロゴのフォントサイズ
px
ヘッダーロゴ設定（スマホ用）
ロゴのタイプ
ロゴの文字色
ロゴのフォントサイズ
px
言語リンクの設定
ヘッダー部に表示する言語リンクの設定を行います。別言語の同じ構成のサイトを所有している場合などに、サイトユーザーが対応言語ページに移動できるようにする機能です。
アイテムを追加するボタンをクリックして入力欄を追加してください。
各入力欄の見出しをドラッグする事によって、任意の順番で表示する事ができます。
言語リンク設定1
国の名前
言語コード
言語コードはヘッダーのメニューに表示されます。
国旗の画像
国旗アイコンを選択してください。自分でアイコンをアップロードする場合「使用しない」を選択してください（アップロードしなければアイコンは非表示）。
オリジナルの国旗の画像
推奨画像サイズ：横幅100px、縦幅100px
リンク先のURL
この言語のリンク先URLを入力してください。
言語アノテーションタグ
多言語サイトを運営しており、アノテーションタグをheadタグ内に出力したい場合は、以下のチェックボックスにチェックを入れてください。
言語アノテーションタグの言語コード
正しい言語コードを入力してください。
日本語：ja 英語：en 中国語：zh 韓国語：ko スペイン語：es ポルトガル語：pt-PT フランス語：fr ドイツ語：de ロシア語：ru など
ヘッダーコンテンツ設定
サイトのファーストビューとなるヘッダーコンテンツの設定を行います。
画像スライダー･･･お好みの画像を最大5枚までスライド表示します。また、画像を1枚だけ設定することで静止画ヘッダーとして使用できます。
動画･･･MP4形式の動画を表示します。
Youtube･･･Youtube動画を表示します。
ヘッダーコンテンツのタイプ
画像スライダー設定
画像スライダーの設定を行います。
スライド1設定（PC用）
画像
PC及びタブレットで表示する画像を設定します。
推奨サイズ：横幅1450px、縦幅815px
背景画像のアニメーションタイプ
背景画像のアニメーションを選択してください。
背景画像に重ねる色
背景に色を重ねることにより明るさや色味に変化をつけてキャッチフレーズの可読性を高めます。
画像の上に重ねる色を設定してください。
背景画像に重ねる色の透明度（0 - 1.0）
背景に重ねる色の透明度を設定します。不要な場合は「0」を入力してください。
キャッチフレーズ
ヘッダー中央に表示するキャッチフレーズの設定を行います。キャッチフレーズ文言とフォント色、フォントサイズ、書字方向（縦書き or 横書き）を設定してください。
ボタン
ボタンのラベル
リンク先のURL
スライド設定（スマホ用）
スマホ表示時の画像スライダーの設定を行います。
コンテンツタイプ
スマホ用の画像を設定できます。未指定の場合はPC用画像の中央部分が表示されます。
推奨画像サイズ：横幅750px以上、縦幅1334px以上
スライダーが切り替わるスピード
スライダーが切り替わるスピードを5秒～10秒から選択してください。
ヘッダーコンテンツ下設定
ヘッダーコンテンツ直下に表示するキャッチフレーズ・説明文・3点ボックス・ボタンの設定を行います。
キャッチフレーズ
説明文
３点ボックス
画像 + テキストのリンク付きボックスを3点横並びで表示します。
アイテム1
タイトル
ボックス上部に表示するタイトルを設定します。
サブタイトル
ボックス上部に表示するサブタイトルを設定します。
説明文
ボックスにホバーした時に表示する説明文を設定します。
画像
推奨画像サイズ：横幅800px、縦幅1085px
背景画像に重ねる色
ボックス上部に表示するタイトルを設定します。
背景画像に重ねる色の透明度（0 - 1.0）
背景に重ねる色の透明度を設定します。不要な場合は「0」を入力してください。
リンク先のURL
アイテム2
アイテム3
タイトルのフォントサイズ px
タイトルのフォントサイズ（スマホ用） px
ボタン
最下部に表示するリンクボタンの設定を行います。
ボタンのラベル
リンク先のURL
メインコンテンツ
メインコンテンツの表示設定を行います。各入力欄の見出しをドラッグする事によって、任意の順番で表示する事ができます。
お知らせ
カスタム投稿タイプ「お知らせ」の記事一覧を表示します。タブ形式でカテゴリーごとに分類して表示することができます。
タイトル
コンテンツの見出しタイトルを設定します。
サブタイトル
コンテンツのサブタイトルを設定します。
説明文
コンテンツの説明文を設定します。
タブ設定
タブに表示するカテゴリーを選択してください。1つも選択されていない場合、タブは表示されません。
表示数
表示する記事の数を設定します。
件
ボタン
最下部に表示するアーカイブページボタンの設定を行います。
事業案内
画像 + テキストのリンク付きボックスを3点横並びで表示します。
背景色
コンテンツ全体の背景色を設定します。
タイトル
コンテンツの見出しタイトルを設定します。
サブタイトル
コンテンツのサブタイトルを設定します。
説明文
コンテンツの説明文を設定します。
３点ボックス
アイテム1
アイテム2
アイテム3
タイトルのフォントサイズ px
タイトルのフォントサイズ（スマホ用） px
ボタン
最下部に表示するリンクボタンの設定を行います。
ボタンのラベル
リンク先のURL
バナー
2点横並びのバナー × 3セット（最大6点のバナー）を表示します。
バナー設定
バナー1
タイトル
バナー画像上に表示するタイトルを設定します。
サブタイトル
バナー画像上に表示するサブタイトルを設定します。
説明文
バナーの下に表示する説明文を設定します。
背景画像
推奨サイズ：横幅570px、縦幅150px
グラデーションオーバーレイ
画像にグラデーションカラーを重ねることによりテキストの可読性を高めます。
リンク先のURL
バナー2
バナー3
バナー4
バナー5
バナー6
実績紹介
タイトル
コンテンツの見出しタイトルを設定します。
サブタイトル
コンテンツのサブタイトルを設定します。
説明文
コンテンツの説明文を設定します。
表示数
表示する記事の数を設定します。
件
ボタン
最下部に表示するアーカイブページボタンの設定を行います。
フリースペース2
通常の投稿と同じようにテキストや画像、Youtube動画など任意のコンテンツを表示できます。
ブログ基本設定
キーカラーの設定、サイドバーに表示されるページタイトルエリアの設定を行います。
キーカラー
各コンテンツごとにキーカラーを設定できます。
この色はサイドバーに表示されるページタイトルエリアの背景色、サイドバーカテゴリーリストホバー時の縦ボーダー色、メインカラムの横ボーダー色、リンクホバー色に使用されます。
タイトル
サイドバー最上部のページタイトルエリアに表示するタイトルを設定してください。
フォントサイズ px
フォントサイズ（スマホ用） px
サブタイトル
サイドバー最上部のページタイトルエリアに表示するサブタイトルを設定します。
フォントサイズ px
フォントサイズ（スマホ用） px
アーカイブページ設定
キャッチフレーズ
アーカイブページで記事一覧の上に表示するキャッチフレーズを設定します。
フォントサイズ px
フォントサイズ（スマホ用） px
記事詳細設定
記事タイトルのフォントサイズ
記事詳細ページタイトルのフォントサイズを設定します。
px
記事タイトルのフォントサイズ（スマホ用）
スマホ表示時の記事詳細ページタイトルのフォントサイズを設定します。
px
記事本文のフォントサイズ
記事詳細ページ本文のフォントサイズを設定します。
px
記事本文のフォントサイズ（スマホ用）
スマホ表示時の記事詳細ページ本文のフォントサイズを設定します。
px
ページ分割の表示スタイル
<!--nextpage-->によるページ分割表示のページナビゲーション表示方法を
「ページャー（ページ番号リンク）」か「続きを読むボタン」から選択してください。
表示設定
各項目の表示/非表示を設定します。表示する項目にチェックを入れてください。
アーカイブページ・記事詳細ページ共通の設定
記事詳細ページの設定
記事ページの広告設定1
この広告は記事本文の下に表示されます。
左側のバナー
広告バナーのコードを登録する
HTMLコードをご利用の場合は、そのまま以下に登録してください。
以下の項目を利用する事により、バナー画像とリンク先URLを個別に登録することもできます。
※広告コードが入力されている場合、以下の設定は無効になります。
画像を登録する推奨サイズ：横幅300px、縦幅250px
リンク先URLを登録する
右側のバナー
記事ページの広告設定2
記事ページ内の任意の場所に広告を設置したい時に、簡単に広告を設置するためのショートコードです。
例えば、本文が長い時に、記事の間の適切な箇所に広告を入れると効果的です。
この広告を表示するためには、下のショートコードを記事本文の中で
広告を表示したい箇所に入力してください。
ショートコード :
左側のバナー
広告バナーのコードを登録する
HTMLコードをご利用の場合は、そのまま以下に登録してください。
以下の項目を利用する事により、バナー画像とリンク先URLを個別に登録することもできます。
※広告コードが入力されている場合、以下の設定は無効になります。
画像を登録する推奨サイズ：横幅300px、縦幅250px
リンク先URLを登録する
右側のバナー
スマートフォン専用の広告
この広告はスマートフォンでのみ表示されます。
広告バナーのコードを登録する
HTMLコードをご利用の場合は、そのまま以下に登録してください。
以下の項目を利用する事により、バナー画像とリンク先URLを個別に登録することもできます。
※広告コードが入力されている場合、以下の設定は無効になります。
