拡張パーツ > アイコン
ページ上にデザインアクセントとしてアイコンを表示させます。
単独はもちろん、見出しや文章を合わせて表示させることや、リンク先を設定して他のページやWebサイトに誘導することもできます。
ちょっと専門メモ:「Font Awesome「Foundation」「WordPress」のフリーアイコン配信サービスを利用しています。
一般設定
アイコン
「アイコンを選択」を押して、使いたいアイコンを一覧リストから選択できます。一度アイコンを選択すると、「アイコンを選択」が「置換え」になりますので、変更したい場合はそこを押すと再び一覧リストが表示されます。
リンク先
アイコン自体にリンクをつけたい場合、リンク先のURLアドレスを設定します。
自分のWebサイト内であれば、「選択」を押して入力欄にリンクを張りたい記事やページのタイトルを一部入力します(3文字以上必要)。
候補が一覧で表示されますので、その中から目的のものを選択すれば、自動でリンクが張られます。
リンク先の開き方
ボタンを押した際にリンク先ページを同じウインドウで開くか別のウインドウで開くかを選択します。
Text
アイコンを先頭にし、右横に文字内容を添わせて表示させたい場合、この欄に内容を入力します。使い方は「文章編集欄」とほぼ同じですので、文字の色や大きさなどを自由に調整できます。
スタイル
色
色
アイコン自体の色を設定します。
マウスオーバー時の色
マウスポインターを重ねた際にアイコンの色を変化させる場合に設定します。
背景色
ここで色を選ぶとアイコンの後ろに指定色の背景円が表示されます。未指定の場合は背景円は出現しません。
マウスオーバー時の背景色
マウスポインターを重ねた際に背景円の色を変化させる場合に設定します。
簡易グラデーション
「Yes」を選択すると、アイコンに(背景円がある場合は背景円に)軽くグラデーションがかかります(色や大きさによってははっきりしないことがあります)。
構造設定
大きさ
アイコンの表示サイズをピクセル単位で設定します。
表示位置合わせ
このアイコンが配置されているブロック枠内での表示位置を設定します。
モバイル端末表示での設定
表示位置合わせ
モバイル端末で表示の際の配置ブロック枠内での位置を設定します。
- 全体設定値→Webサイトの全体デザイン設定に合わせます
- 個別設定→個別に設定できます。こちらを選ぶと「位置設定の個別調整 」が現れ、左・右・中央の中から選択できます。