クラシックエディタでは、ショートコードを利用してナビゲーションを利用します。

ショートコードの利用方法

ショートコードのプルダウン

ショートコードはエディタのヘッダーにあるプルダウン「[u]ナビゲーション」より選択可能です。
選択するとエディタ上にショートコードが挿入されます。


※利用しているテーマやプラグインによっては表示されないケースがございます。その場合は当ページよりコピーしてご利用ください。

テキストナビゲーション

テキストナビゲーションのサンプル

テキストナビゲーションは、 「uy_navigation」と「uy_navigation_inner」を利用すると利用可能です。
「uy_navigation_inner」は任意の個数設定可能です。

[uy_navigation position_type="1" fixed_type="1"]
[uy_navigation_inner text="サンプル1" anchor="#sample1" url="" class_icon="uyfas uyfa-comments"]
[uy_navigation_inner text="サンプル2" anchor="#sample2" url="" class_icon="uyfas uyfa-cubes"] 
[uy_navigation_inner text="外部リンク" anchor="#sample3" url="http://xn--u8j2cyjqe728tv2ya.com/" class_icon="uyfas uyfa-external-link-alt"]
[/uy_navigation]

uy_navigationの基本パラメータ

position_typeナビゲーションの表示位置の指定
fixed_typeスクロールの追従開始場所の指定

uy_navigation_innerの基本パラメータ

textナビゲーションに表示したいテキストを記載
anchor記事内の移動先を記載
urlリンク先のURLを記載[*]
class_iconナビゲーションに表示したいアイコンを記載
(アイコン一覧はこちら
[*]anchorかurlはどちらかは入力してください。urlを入力する場合でもanchorは入力推奨です。

画像ナビゲーション

画像ナビゲーションのサンプル

テキストナビゲーションは、 「uy_navigation_img」と「uy_navigation_img_inner」を利用すると利用可能です。
「uy_navigation_img_inner」は任意の個数設定可能です。

[uy_navigation_img position_type="1" fixed_type="1"]
[uy_navigation_img_inner alt="サンプル1" anchor="#sample1" url="" url_img="https://xxxx/sample1.png"]
[uy_navigation_img_inner alt="サンプル2" anchor="#sample2" url="" url_img="https://xxxx/sample2.png"]
[uy_navigation_img_inner alt="外部リンク" anchor="#sample3" url="http://xn--u8j2cyjqe728tv2ya.com/" url_img="https://xxxx/sample3.png"]
[/uy_navigation_img]

uy_navigation_imgの基本パラメータ

img position_typeナビゲーションの表示位置の指定
fixed_typeスクロールの追従開始場所の指定

uy_navigation_img_innerの基本パラメータ

alt代替テキストを記載
anchor記事内の移動先を記載
urlリンク先のURLを記載[*]
url_img画像URLを記載
[*]anchorかurlはどちらかは入力してください。urlを入力する場合でもanchorは入力推奨です。

ショートコードの全パラメータ一覧

ショートコードは基本パラメータのみでも使用可能ですが、パラメータを追加するとデザインや動作をお好みで拡張可能です。
※パラメータを設定しない場合、カスタマイザーの設定が利用されます。

uy_navigation

position_type【ナビゲーション表示位置】1:記事内に表示/2:ヘッダーに表示/3:非表示(追従ヘッダーのみ表示)
例:uy_navigation position_type=”1″

動作の違いはこちらを参照してください。
active_type【アクティブ】1:アンカー位置まで1つ目がアクティブ/2:アンカー位置まで全て非アクティブ/3:常に非アクティブ
例:active_type=”1″
fixed_type【スクロール追従】1:する(通過直後から追従)/2:する(アンカーから追従)/3:しない
例:fixed_type=”1″
hide_selector【スクロール非表示セレクター】「#xxxx」形式で指定 超えると固定ヘッダーを非表示
例:hide_selector=”#xxxx(アンカーリンクのidを記載する)”
header_selector【ヘッダーナビゲーションCSSセレクタ】「#breadcrumb」「.header_content」など/未入力:デフォルト値
例:header_selector=”#breadcrumb”
content_selector【メインエリアのCSSセレクタ】「main」「#maincontent」など/未入力:デフォルト値
例:content_selector=”main”
font_size_pc【フォントサイズ(px) ※PC】8~24で指定/未入力:デフォルト値
例:font_size_pc=”16″
font_size_sp【フォントサイズ(px) ※SP】8~24で指定/未入力:デフォルト値
例:font_size_sp=”16″
margin_pc【ナビゲーション上部マージン(px) ※PC】0~999で指定/未入力:デフォルト値
例:margin_pc=”50″
margin_sp【ナビゲーション上部マージン(px) ※SP】0~999で指定/未入力:デフォルト値
例:margin_sp=”50″
consideration_selector_pc【上部マージン用CSSセレクタ ※PC】※「,」区切り/未入力:デフォルト値
例:consideration_selector_pc=””
consideration_selector_sp【上部マージン用CSSセレクタ ※SP】※「,」区切り/未入力:デフォルト値
例:consideration_selector_sp
design_type【レイアウト】1:ノーマル/2:タブ/3:ボタン/未入力:デフォルト値
例:design_type=”2″
bg_color【ナビゲーション背景色】#ffffff形式/未入力:デフォルト値
例:bg_color=”#ff7f50″
btn_color【ボタン色】#ffffff形式/未入力:デフォルト値
例:btn_color=”#ffffe0″
text_color【テキスト色】#ffffff形式/未入力:デフォルト値
例:text_color=”#006400″
select_color【選択色】#ffffff形式/未入力:デフォルト値
例:select_color=”#e6e6fa”
select_text_color【選択テキスト色】#ffffff形式/未入力:デフォルト値
例:select_text_color=”#deb887″
padding_width余白の大きさ(px)】0~10で指定/未入力:デフォルト値
例:padding_width=”5″
select_width【選択色の太さ(px)】1~3で指定/未入力:デフォルト値
例:select_width=”2″
scroll_cnt_pc【ナビゲーション最大個数 ※PC】超えるとスクロール 2~8で指定/未入力:デフォルト値
例:scroll_cnt_pc=”5″
scroll_cnt_sp【ナビゲーション最大個数 ※SP】超えるとスクロール 2~4で指定/未入力:デフォルト値
例:scroll_cnt_sp=”5″
bold【太字】1:する/0:太字にしない/未入力:デフォルト値
例:bold=”1″
shadow【影】1:付ける/0:付けない/未入力:デフォルト値
例:shadow=”1″
separator【区切る】1:区切る/0:区切らない/未入力:デフォルト値
例:separator=”1″
chapter_design_type【チャプターボタンのレイアウト】1:透過/2:透過グラデーション/3:透過なし/未入力:デフォルト値
例:chapter_design_type=”1″
chapter_btn_color【チャプターボタン色】#ffffff形式/未入力:デフォルト値
例:chapter_btn_color=”#ffff00″
chapter_color【チャプターボタンの矢印・ボーダー色】#ffffff形式/未入力:デフォルト値
例:=”#ffdead”
chapter_text_transparency【ナビゲーション矢印・ボーダー透過度 ※SP】0~100で指定/未入力:デフォルト値
例:chapter_text_transparency=”50″
chapter_marginチャプターボタン上下マージン(px)】0~5で指定/未入力:デフォルト値
例:chapter_margin=”5″
chapter_inner_border【チャプターボタンの内側にボーダー】1:表示/0:非表示/未入力:デフォルト値
例:chapter_inner_border=”1″

uy_navigation_inner

text【テキスト】必須
例:text=”サンプル”
anchor【アンカー】 「#xxxx」形式
例:anchor=”#sample”
url【リンク先URL】 「http(s)://xxxx」形式
例:url=”https://xxxxx/”
class_icon【fontawsome6のクラス】「fab fa-xxxx」「fas fa-xxxx」「far fa-xxxx」形式
例:class_icon=”fa-star”
※アイコン一覧はこちら
icon_position【icon位置】1:左/2:右”
例:icon_position=”1″
target_blank【別タブで開く】1:別タブで開く/0:同タブで開く
例:target_blank=”1″
nofollow【nofollow】1:nofollow/0:follow
例:nofollow=”1″

uy_navigation_img

position_type【ナビゲーション表示位置】1:記事内に表示/2:ヘッダーに表示/3:非表示(追従ヘッダーのみ表示)
例:uy_navigation position_type=”1″
active_type【アクティブ】1:アンカー位置まで1つ目がアクティブ/2:アンカー位置まで全て非アクティブ/3:常に非アクティブ
例:active_type=”1″
fixed_type【スクロール追従】1:する(通過直後から追従)/2:する(アンカーから追従)/3:しない
例:fixed_type=”1″
label_type【altをテキストとして表示】1非表示/2:表示/3:表示(追従時は非表示)
例:label_type=”2″
hide_selector【スクロール非表示セレクター】「#xxxx」形式で指定 超えると固定ヘッダーを非表示
例:hide_selector=”#xxxx(アンカーリンクのidを記載する)”
header_selector【ヘッダーナビゲーションCSSセレクタ】「#breadcrumb」「.header_content」など/未入力:デフォルト値
例:header_selector=”#breadcrumb”
content_selector【メインエリアのCSSセレクタ】「main」「#maincontent」など/未入力:デフォルト値
例:content_selector=”main”
font_size_pc【フォントサイズ(px) ※PC】8~24で指定/未入力:デフォルト値
例:font_size_pc=”16″
font_size_sp【フォントサイズ(px) ※SP】8~24で指定/未入力:デフォルト値
例:font_size_sp=”16″
margin_pc【ナビゲーション上部マージン(px) ※PC】0~999で指定/未入力:デフォルト値
例:margin_pc=”50″
margin_sp【ナビゲーション上部マージン(px) ※SP】0~999で指定/未入力:デフォルト値
例:margin_sp=”50″
consideration_selector_pc【上部マージン用CSSセレクタ ※PC】※「,」区切り/未入力:デフォルト値
例:consideration_selector_pc=””
consideration_selector_sp【上部マージン用CSSセレクタ ※SP】※「,」区切り/未入力:デフォルト値
例:consideration_selector_sp
bg_color【ナビゲーション背景色】#ffffff形式/未入力:デフォルト値
例:bg_color=”#ff7f50″
btn_color【ボタン色】#ffffff形式/未入力:デフォルト値
例:btn_color=”#ffffe0″
text_color【テキスト色】#ffffff形式/未入力:デフォルト値
例:text_color=”#006400″
select_color【選択色】#ffffff形式/未入力:デフォルト値
例:select_color=”#e6e6fa”
select_text_color【選択テキスト色】#ffffff形式/未入力:デフォルト値
例:select_text_color=”#deb887″
select_width【選択色の太さ(px)】1~3で指定/未入力:デフォルト値
例:select_width=”2″
size【画像のサイズ(px)】30~100で指定/未入力:デフォルト値
例:size=”50″
radius【画像の丸み(%)】0~50で指定/未入力:デフォルト値=”2″
例:radius=”30″
shadow【影】1:付ける/0:付けない/未入力:デフォルト値
例:shadow=”1″
chapter_design_type【チャプターボタンのレイアウト】1:透過/2:透過グラデーション/3:透過なし/未入力:デフォルト値
例:chapter_design_type=”1″
chapter_btn_color【チャプターボタン色】#ffffff形式/未入力:デフォルト値
例:chapter_btn_color=”#ffff00″
chapter_color【チャプターボタンの矢印・ボーダー色】#ffffff形式/未入力:デフォルト値
例:=”#ffdead”
chapter_text_transparency【ナビゲーション矢印・ボーダー透過度 ※SP】0~100で指定/未入力:デフォルト値
例:chapter_text_transparency=”50″
chapter_margin【チャプターボタン上下マージン(px)】0~5で指定/未入力:デフォルト値
例:chapter_margin=”5″
chapter_inner_border【チャプターボタンの内側にボーダー】1:表示/0:非表示/未入力:デフォルト値
例:chapter_inner_border=”1″

uy_navigation_img_inner

alt【代替テキスト】
例:alt=”サンプル”
anchor【アンカー】「#xxxx」形式
例:anchor=”#sample”
url【リンク先URL】「http(s)://xxxx」形式
例:url=”https://xxxxx/”
url_img【画像URL】必須
例:url_img=”https://xxxxx.png”
target_blan【別タブで開く】1:別タブで開く/0:同タブで開く
例:target_blan=”1″
nofollow【nofollow】1:nofollow/0:follow
例:nofollow=”1″

利用可能なアイコン一覧

テキストナビゲーションのアイコンは、こちらの入力値をご利用ください。

アイコン 入力値