拡張パーツ > セット表示

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

短い文章と画像(またはアイコン)がまとまったブロックをつくるためのパーツです。概略を分かりやすく伝えることができますので、誘導したい場所が複数あるときなどに、訪問者に対し明確な選択肢の提示を与え、行動を促せます。
数々のオプションがありますので、設定により多様なデザインで惹きつけることができます。

一般設定

見出し

このセット表示ブロックの見出しを入れます。見出しパーツと同じく、「スタイル」で重要度も指定できます。

文字

表示させたい説明文やサブタイトルなどを入力します。文章編集欄パーツと同じ仕様ですので、サイズや文字色などの細かな調整が行えます。

スタイル

構造設定

全体的な位置合わせ

パーツ内での文字と画像の表示の合わせ方を設定します。左・右・中央の中から選択できます。

見出しの構造設定

見出しの重要度指定

ページやブロックでのその見出しの重要度を設定します。HTMLでのh1〜h6指定と同じです。

  • h1→ページ自体の見出し
  • h2→記事ブロックごとの大見出し
  • h3→記事内の中見出し
  • h4→各項目上の小見出し
  • h5→さらに項目が詳細に分かれている場合
  • h6→任意

見出しの大きさ

「全体設定値」では、Webサイトの全体デザインで指定された大きさとなります。
「個別設定」を選択すると数値を入力でき、大きさを自由に変更できます。

アイキャッチ

使用するもの

このパーツのアイキャッチ部分をどのようにするかを指定します。以下の3パターンが設定できます。

使用しない → アイキャッチは使用せず、文字のみでの構成となります。

アイキャッチを使用しない場合

見出しと、文章だけで構成するなら、このように扱いやすい文章ブロックとして表示を行えます。

画像 → アイキャッチに画像を使用します。「位置」の設定で画像をどう置くかを変更できます。

画像を使用した場合

画像を使うと、見出しや文章だけより直感に訴えかけることができます。

アイコン → アイキャッチにアイコンを使用します。アイコンパーツと同じように細かなデザイン指定ができます。また、「位置」の設定でどこに置くかを変更できます。

アイコンを使用した場合

アイコンを使うと、どういう種類の情報なのかを分かりやすく伝えることができます。

画像(画像使用を選択すると、この設定が表示されます)

画像

WordPressのメディアライブラリ一覧から表示させたい画像を選択、あるいは新たにアップローダーでアップロードしたものを選択します。
選択が完了すると、表示に使う画像サイズをプルダウンメニューで選択できるようになります。ページに表示される状態に合わせて最適なサイズを選択してください。
併せて、画像データ自体の編集や附帯テキストデータ変更のための「編集」と、使用画像をほかのものと入れ替えるための「置換え」が表示されます。

画像の表示調整

元のデータ自体に手を加えずに使用する画像の表示形状を調整します。デザイン調整に重宝します。またいくつかの画像を並べて表示する際の形状の不揃いを防ぐのに役立ちます。以下の選択肢があります。

  • 指定なし(無調整)
  • 横縦比率 10:7
  • 横縦比率 2:1
  • 左右カットで証明写真風
  • 真四角
  • 円形

位置

このパーツ内での画像位置を指定します。

  • 見出しの上
  • 見出しの下
  • 全体の左側
  • 全体の右側

アイコン(アイコン使用を選択すると、この設定が表示されます)

アイコン

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

位置

このパーツ内でのアイコン表示位置を指定します。

  • 見出しの上
  • 見出しの下
  • 見出しの左
  • 見出しの右
  • 全体の左側
  • 全体の右側

アイコンの色

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

マウスオーバー時の色

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

背景色

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

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

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

簡易グラデーション

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

アイコンの構造設定

大きさ

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

誘引スタイル

リンク先

セット表示の目的が別の場所へ移動させることである場合、リンクに関する設定を行います。

リンク先

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

リンク先の開き方

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

リンク先を検索エンジンに知らせない

検索エンジンのページ情報収集ロボットに対し、リンクの先をたどってほしくないという意思表示(nofollow指示)します。ただし、収集ロボットが必ず言うことを聞くとは限りません。主にSEO対策として使用します。通常はNoを選択して知らせておいて問題ありませんが、有料サイト、ログインが必要なページへのリンクの場合はYesにしてください。
> GoogleのnoFollowに対する考え方

誘引リンク

リンクの張り方や表示形態を設定できます。

いずれかを選択

  • なし → 見出し部分がリンクとなります。
  • 文字 → リンク用の文字列を設定できるようになります。
  • ボタン → ボタンパーツと同じようなリンク用ボタンを配置します。

文字(文字・ボタンを選択した場合に設定可)

リンク文字かボタン内の文字の内容を入力します。

ボタン内アイコン(ボタンを選択した場合のみ)

ボタン上にアイコンを加えたい場合に、リストから選択できます。

ボタン内アイコンの位置(ボタンを選択した場合のみ)

文字内容に対してのアイコン表示位置を選択します。

アイコン表示状態(ボタンを選択した場合のみ)

  • 常に表示 → ボタン上にアイコンをずっと表示します。
  • マウスオーバー時にフェードイン → マウスポインターを重ねるとアイコンが表示されます。

ボタンの色(ボタンを選択すると設定表示)

背景色

ボタン自体の色を指定します。指定しなければ、ホームページの全体設定に準じた色になります。

また、ここで色を設定することで、下に「ボタンのスタイル」の設定欄が出現します。

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

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

文字色

文字の色を設定します。

マウスオーバー時の文字色

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

ボタンのスタイル(上で背景色を指定すると表示)

スタイル

以上の中からボタンの形状を選択できます。

簡易グラデーション

表示入れ替わり効果

ボタンにマウスポインターを重ねた際の変化のさせ方を設定します。

  • 無効 → 段階なく切り替わります
  • 有効 → 切り替わりに視覚効果が加わります。

ボタンの構造設定(ボタンを選択すると設定表示)

表示幅の設定

ボタンの表示幅を選択します。

  • 自動設定 → 文字数に合わせたサイズで表示されます。
  • 全幅表示 → 表示可能な幅いっぱいのサイズになります。

文字サイズ

ボタン上の文字サイズを調整します。

余白設定

文字の周りにどのぐらいの余白をつくるかを調整します。

角丸

ボタンの角の形状を調整します。(0にすると角は直角になります)

詳細

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

©2015-2018 eufonia inc.