プラグイン「Emanon Blocks」を有効化すると、人物の顔写真や紹介、SNSアカウント表示するプロフィールブロックが利用できます。

設定

プロフィールブロックは、Webサイトやブログの管理人などのプロフィール欄を表示するのに適したブロックになります。人物画像と各種SNSのアイコンを表示することができるため、Webサイトのブランディング効果にも期待できます。それではプロフィールブロックの設定方法について紹介します。

ブロックエディタからプロフィールブロックを配置します。詳細な設定は編集画面右側のサイドバーで行います。

ブロック配置時の表示

スタイル設定

プロフィールブロックは、2カラム(顔写真の左配置)1カラムからデザインを指定できます。

  • カラム[1]:画像:上・コンテンツ:下:こちらを指定すると画像からテキスト、各種SNSアイコンを1カラム内で上から下へと表示します。
  • カラム[2]:画像左・コンテンツ:右:こちらを指定すると2カラムでの表示となり、左のカラムに写真、右のカラムにテキストやSNSアイコンが表示されます。
  • カラム[1]:SP適用:有効化する事でスマホからWebサイトを表示した場合、1カラムのスタイルが適用されます。2カラム指定時のみカラム[1]:SP適用の指定が可能です。
  • ボーダースタイル:プロフィールブロックのボーダー[枠線]のスタイルを指定します、線・破線・二重線・なしから選択します。デフォルト設定はなしになります。

画像設定

画像の枠線の有無や画像サイズ、画像スタイルの指定が可能です。

  • 画像選択:クリックすることで画像の選択ができます、既に画像を配置してる場合は画像削除に変化します。
  • loading属性:画像遅延読み込みの設定:画像の読み込み速度を指定します、lazy・eager・autoから選択します。
  • Alt:画像にAlt属性(代替えテキスト)を指定します。
  • 画像サイズ:80・100・120・140・160・180・200から選択します。
  • 画像枠線:画像にボーダー[枠線]の表示を指定します、デフォルト設定は非表示になります。
  • 画像スタイル:画像のスタイルを変更できます、円形・角丸・なしから選択します。デフォルト設定はなしになります。

SNS設定

TwitterやFacebook、Instagramなどの各種SNSアイコンとリンクURLを設定できます。SNSアイコンを表示しない場合、無効に切り替えてください。

表示例

下記はプロフィールブロックの表示例になります。

カラム[2]のスタイル例です。カラム[1]:SP適用を有効に指定しています。

名前
役職

段落ブロック配置でプロフィール文章を入力できます。

カラムブロック内にプロフィールカードを1カラムスタイルで配置した例です。

名前
役職

見出しブロック

段落ブロック配置でプロフィール文章を入力できます。

名前
役職

見出し

段落ブロック配置でプロフィール文章を入力できます。