拡張パーツ > アイコングループ

クラフトマスターイメージイラスト

複数のアイコンをグループ化して表示するためのパーツです
たとえば利用可能なクレジットカード会社のアイコンを並べる。オススメの★マークを評価得点に合わせて表示させる。といった使い方があります。
それぞれのアイコンに対してやリンク設定ができ、グループ全体一括で色や大きさを設定できます。

ちょっと専門メモ:「Font Awesome「Foundation」「WordPress」のフリーアイコン配信サービスを利用しています。

使用例

アイコン

パーツを配置して最初に設定が開いた状態で「アイコン1」のみが項目として表示されています。「アイコン追加」ボタンを押すことで、「アイコン2」「アイコン3」と設定が追加されて現れますので、必要なだけアイコンをグループ内に追加表示できます。

設定が終わったアイコンは、右にあるファイルマークを押して複製することができます。さらに複数のアイコンがある場合に現れる十字マークをドラッグアンドドロップして順序の入れ替えもできます。不要なものは「X」マークをクリックすれば削除されます。

アイコン1〜

中央の「アイコン編集」クリックすることで各アイコン内容を設定します。

アイコングループの追加画面

各アイコンごとに「アイコン編集」内で個別設定が行えます。

下のアイコングループ全体の「スタイル」設定より、個別の「スタイル」設定が優先されます。

たとえば、4つのうち1つだけ色を変えたいような場合に個別での設定を使用しますが、グループ全体で設定した色と同じものに個別設定は必要ありません。

また、先に個別でスタイル設定を行ったものは、あとでグループ全体のスタイル設定を行っても反映されません。

一般設定(アイコン編集内)

アイコン

「アイコンを選択」を押して、使いたいアイコンを一覧リストから選択できます。一度アイコンを選択すると、「アイコンを選択」が「置換え」になりますので、変更したい場合はそこを押すと再び一覧リストが表示されます。

リンク先

アイコン自体にリンクをつけたい場合、リンク先のURLアドレスを設定します。
自分のWebサイト内であれば、「選択」を押して入力欄にリンクを張りたい記事やページのタイトルを一部入力します(3文字以上必要)。
候補が一覧で表示されますので、その中から目的のものを選択すれば、自動でリンクが張られます。

リンク先の開き方

ボタンを押した際にリンク先ページを同じウインドウで開くか別のウインドウで開くかを選択します。

スタイル(アイコン編集内)

アイコングループ全体の「スタイル」での色設定より、こちらで設定したものが優先されます。すべてのアイコンが同じ色であれば、ここで設定する必要はありません。

注:こちらで先に色を設定してしまうと、あとで行ったグループ全体での色変更は反映されません。

アイコン自体の色を設定します。

マウスオーバー時の色

マウスポインターを重ねた際にアイコンの色を変化させる場合に設定します。

背景色

ここで色を選ぶとアイコンの後ろに指定色の背景円が表示されます。未指定の場合は背景円は出現しません。

マウスオーバー時の背景色

マウスポインターを重ねた際に背景円の色を変化させる場合に設定します。

スタイル(グループ全体)

アイコングループ全体での設定です。グループ内のアイコンは同じ色で設定、表示されます。

アイコン自体の色を設定します。

マウスオーバー時の色

マウスポインターを重ねた際にアイコンの色を変化させる場合に設定します。

背景色

ここで色を選ぶとアイコンの後ろに指定色の背景円が表示されます。未指定の場合は背景円は出現しません。

マウスオーバー時の背景色

マウスポインターを重ねた際に背景円の色を変化させる場合に設定します。

簡易グラデーション

「Yes」を選択すると、アイコンに(背景円がある場合は背景円に)軽くグラデーションがかかります(色や大きさによってははっきりしないことがあります)。

構造設定

大きさ

アイコンの表示サイズをピクセル単位で設定します。

余白

アイコンどうしの間隔を設定します。

表示位置合わせ

このアイコンが配置されているブロック枠内での表示位置を設定します。

詳細

こちらの共通ページで説明しています

©2015-2018 eufonia inc.