profile : 人物や団体、組織などのプロフィールカードを表示

このショートコードを使用するには「Shortcodes for DigiPress」または「DigiPress Ex – Shortcodes」プラグインが必要です

シンプルな表示例

DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。

このショートコード

[profile
name="Ms. DigiPress"
profimgurl="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/girl-flowers1-620x422.jpg"
topbgcolor="#EE816A"
border=1]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
[/profile]

様々なオプションを指定した例

Ms. DigiPress

digistate co., ltd.

Webデザイナー

DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
プロフィール画像サイズ、斜体、名前の大きさ、名前の色、背景色、プロフィール画像の枠線の太さ、SNSアイコン表示などを指定しています。

このショートコード

[profile name="Ms. DigiPress"
namesize=22
namecolor="#36597E"
nameitalic=1
title1="digistate co., ltd."
title1size=13
title1bold=0
title1italic=0
title2="Webデザイナー"
title2size=14
title2bold=1
title2italic=0
authorurl="#"
profimgurl="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/girl-flowers1-620x422.jpg"
profshape="circle"
profsize=200
topbgimgurl="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/unsplash_529f51e60b51c_1.jpg"
profbdwidth=12
twitterurl="#"
facebookurl="#"
youtubeurl="#"
lineurl="#"
pinteresturl="#"
hoverfx=1
bgcolor="#DAEAFE"
desccolor="#36597E"
descfontsize="13px"
border=1
bdcolor="#36597E"]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
プロフィール画像サイズ、斜体、名前の大きさ、名前の色、背景色、プロフィール画像の枠線の太さ、SNSアイコン表示などを指定しています。
[/profile]

幅(300px)を指定して並べて表示した例

Ms. DigiPress

DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。

See more info

Mr. DigiPress

DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。

See more info

このショートコード

<div class="clearfix">
[profile name="Ms. DigiPress"
profimgurl="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/girl-flowers1-620x422.jpg"
profsize=90
topbgimgurl="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/unsplash_529f51e60b51c_1-620x414.jpg"
twitterurl="#"
facebookurl="#"
youtubeurl="#"
lineurl="#"
pinteresturl="#"
hoverfx=1
class="fl-l"
width="300px"]
<p>DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。</p>
<div><a href="#" class="icon-right-bold">See more info</a></div>
[/profile]

[profile
name="Mr. DigiPress"
profimgurl="https://digipress.info/_wp/wp-content/uploads/2014/05/boy.jpg"
topbgimgurl="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/unsplash_52b6b4db7397c_1-620x413.jpg"
twitterurl="#"
facebookurl="#"
lineurl="#"
pinteresturl="#"
hoverfx=2
class="fl-r"
width="300px"]
<p>DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。</p>
<div><a href="#" class="icon-right-bold">See more info</a></div>
[/profile]
</div>

角丸、四角タイプのプロフィール画像の形状

Ms. DigiPress

DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。プロフィール画像の形状に合わせてSNSアイコンも変化します。

See more info

Mr. DigiPress

See more info

このショートコード

<div class="clearfix">
[profile
name="Ms. DigiPress"
profimgurl="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/girl-flowers1-620x422.jpg"
profshape="round"
topbgimgurl="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/unsplash_529f51e60b51c_1-620x414.jpg"
twitterurl="#"
facebookurl="#"
youtubeurl="#"
lineurl="#"
pinteresturl="#"
class="fl-l"
width="300px"
border=1]
<p>DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。プロフィール画像の形状に合わせて<span class="blue">SNSアイコンも変化</span>します。</p>
<div><a href="#" class="icon-right-bold">See more info</a></div>
[/profile]

[profile
name="Mr. DigiPress"
profimgurl="https://digipress.info/_wp/wp-content/uploads/2014/05/boy.jpg"
profshape="square"
topbgimgurl="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/unsplash_52b6b4db7397c_1-620x413.jpg"
twitterurl="#"
facebookurl="#"
instagram="#"
lineurl="#"
pinteresturl="#"
hoverfx=2
class="fl-r"
width="300px"
border=1]
<p>DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。プロフィール画像の形状に合わせて<span class="blue">SNSアイコンも変化</span>します。</p>
<div><a href="#" class="icon-right-bold">See more info</a></div>
[/profile]
</div>

フレックスボックスショートコードを活用して横並びにした例

DigiPress Boy

digistate co., ltd.

Webディレクター

DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。

Ms. DigiPress

digistate co., ltd.

Webデザイナー

DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。

Mr. DigiPress

digistate co., ltd.

アートディレクター

DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。

このショートコード

[flexbox flexchildren=1]

[flexitem margin=10]

[profile
name="DigiPress Boy"
namesize=22
title1="digistate co., ltd."
title1size=13
title2="Webディレクター"
title2bold=1
authorurl="#"
profimgurl="https://demo.dptheme.net/dp9/wp-content/uploads/sites/7/boy.jpg"
profsize=160
topbgcolor=#fff
twitterurl="#"
facebookurl="#"
youtubeurl="#"
lineurl="#"
pinteresturl="#"]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
[/profile]

[/flexitem]

[flexitem margin=10]

[profile
name="Ms. DigiPress"
namesize=22
title1="digistate co., ltd."
title1size=13
title2="Webデザイナー"
title2bold=1
authorurl="#"
profimgurl="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/girl-flowers1-620x422.jpg"
profshape="circle"
profsize=160
topbgcolor=#fff
twitterurl="#"
facebookurl="https://www.facebook.com/digipressthemes"
youtubeurl="#"
lineurl="#"
pinteresturl="#"
hoverfx=1]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
[/profile]

[/flexitem]

[flexitem margin=10]

[profile
name="Mr. DigiPress"
namesize=22
title1="digistate co., ltd."
title1size=13
title2="アートディレクター"
title2bold=1
authorurl="#"
profimgurl="https://digipress.info/_wp/wp-content/uploads/2014/05/boy.jpg"
profsize=160
topbgcolor=#fff
twitterurl="#"
facebookurl="#"
lineurl="#"
pinteresturl="#"
hoverfx=2]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
[/profile]

[/flexitem]

[/flexbox]

指定可能なパラメータ

name (※必須)

このプロフィールに使用する名前(運営者、寄稿者など)を指定します。
この項目は必須です。

例 : name=”Kotaro Yamada”

namesize

このプロフィールに表示する名前のフォントサイズをピクセル(px)で指定します。
未指定の場合は 18ピクセルが自動的に設定されます。

このパラメータは数値のみ、またはCSSのピクセル単位(px)付きのどちらでも指定可能です。

例 : namesize=”20px”, namesize=24

namecolor

このプロフィールに表示する名前のフォントカラーをカラーコード(HEX値)やカラー名で指定します。
未指定の場合は “#333333” が設定されます。

例 : namecolor=”#666666″

namebold

このプロフィールに表示する名前を太字で表示しない場合に、「0」を指定します。

例 : namebold=0

nameitalic

このプロフィールに表示する名前をイタリック体で表示する場合に「1」または「true」を指定します。

例 : nameitalic=1

title1, title2

プロフィールの名前の下に任意のテキスト(肩書き等)を表示したい場合に、その文字列を指定します。
任意のテキストは、title1, title2 を指定して2つ(2行)まで表示できます。

例 :
title1=”株式会社デジステイト”
title2=”Webデザイナー”

title1size, title2size

プロフィールの名前の下に表示される任意のテキスト(肩書き等)のフォントサイズをピクセル(px)で指定します。
未指定の場合は 14ピクセルが自動的に設定されます。

このパラメータは数値のみ、またはCSSのピクセル単位(px)付きのどちらでも指定可能です。

例 : title1size=”13px”, title1size=13

title1bold, title2bold

プロフィールの名前の下に表示される任意のテキスト(肩書き等)を太字で表示する場合に「1」を指定します。
未指定の場合は、太字になりません。

例 : title1bold=1

title1italic, title2italic

プロフィールの名前の下に表示される任意のテキスト(肩書き等)をイタリック体で表示する場合に「1」または「true」を指定します。

例 : title1italic=1

authorurl

プロフィールの名前の下に表示される任意のテキスト(肩書き等)やプロフィール画像のリンク先を指定します。
未指定の場合はショートコードを表示しているサイトのホームURLがセットされます。

例 : authorurl=”http://hogehoge.com/more-profile/”

authortargetblank

プロフィールの名前の下に表示される任意のテキスト(肩書き等)やプロフィール画像のリンクを別ウィンドウで開く場合に true または 1 を指定します。

例 : authortargetblank=1

profimgurl

このプロフィールの人物のプロフィール画像のURLを指定します。

例 : profimgurl=”http://hogehoge.com/wp-content/uploads/my-prof.jpg”

profsize

プロフィール画像の表示サイズ(幅 = 高さ)をピクセル単位で指定します。
未指定の場合は 100ピクセル(100 x 100) が設定されます。

このパラメータは数値のみ、またはCSSのピクセル単位(px)付きのどちらでも指定可能です。

例 : profsize=150, profsize=”120px”

profshape

プロフィール画像の形状を「円(circle)」、「角丸(round)」、「四角(square)」から指定します。
未指定の場合は円形(circle) が設定されます。

指定可能な値

circle : 円形
round : 角丸
square : 四角

例 : profshape=”round”

profbdwidth

プロフィール画像を縁取るボーダーの太さをピクセル単位で指定します。
未指定の場合は 5ピクセルが設定されます。

このパラメータは数値のみ、またはCSSのピクセル単位(px)付きのどちらでも指定可能です。

例 : profbdwidth=”8px”, profbdwidth=10

topbgimgurl

プロフィールボックスの上部に表示できる背景画像のURLを指定します。

例 : topbgimgurl=”http://hogehoge.com/wp-content/uploads/prof-bg.jpg”

hoverfx

プロフィール画像のマウスオーバー時のホバーエフェクトを指定します。
未指定の場合は、マウスオーバー時のエフェクトはありません。

指定可能な値

rotate15 または 1 : 時計回りに15度回転
zoom または 2 : ズームアップ

例 : hoverfx=2, hoverfx=rotate15 など

topbgcolor

プロフィールボックスの上部の背景カラーを指定します。
未指定の場合は “#dddddd” が設定されます。

例 : topbgcolor=”#f0f0f0″

bgcolor

プロフィールボックス全体の背景カラーを指定します。
未指定の場合は “#ffffff” が設定されます。

例 : bgcolor=”#eeeeee”

desccolor

ショートコード内に記述して表示できるプロフィール文章のフォントカラーをカラーコードまたはカラー名で指定します。
未指定の場合は “#888888” が設定されます。

例 : desccolor=”#444444″

descfontsize

ショートコード内に記述して表示できるプロフィール文章のフォントサイズをピクセル単位で指定します。
未指定の場合は 12ピクセルが設定されます。

このパラメータは数値のみ、またはCSSのピクセル単位(px)付きのどちらでも指定可能です。

例 : descfontsize=13, descfontsize=”13px”

border

プロフィールボックス全体にボーダーを表示する場合に「1」または「true」を指定します。

例 : border=1, border=”true”

bdcolor

プロフィールボックス全体にボーダーを表示する場合のボーダーカラーをカラーコードまたはカラー名で指定します。
未指定の場合は “#dddddd” が設定されます。

例 : bdcolor=”#444444″

twitterurl

このプロフィールの人物に関係するTwitterのURLを指定し、プロフィール下部にアイコンでリンクを表示します。

例 : twitterurl=”https://twitter.com/”

facebookurl

このプロフィールの人物に関係するFacebookアカウントのURLを指定し、プロフィール下部にアイコンでリンクを表示します。

例 : facebookurl=”https://www.facebook.com/”

youtubeurl

このプロフィールの人物に関係するYouTubeアカウントのURLを指定し、プロフィール下部にアイコンでリンクを表示します。

例 : youtubeurl=”https://www.youtube.com/”

lineurl

このプロフィールの人物に関係するLINEアカウントのURLを指定し、プロフィール下部にアイコンでリンクを表示します。

例 : lineurl=”https://line.me/ja/”

pinteresturl

このプロフィールの人物に関係するPinterestアカウントのURLを指定し、プロフィール下部にアイコンでリンクを表示します。

例 : pinteresturl=”https://jp.pinterest.com/”

instagramurl

このプロフィールの人物に関係するInstagramアカウントのURLを指定し、プロフィール下部にアイコンでリンクを表示します。

例 : instagramurl=”https://instagram.com/”

width

プロフィールボックスの表示幅をピクセル単位で指定します。
未指定の場合は、幅100%(width=”100%”) の状態で表示されます。

例 : width=”300px”

class

プロフィールボックス全体のブロック(div)に指定する任意の CSSクラスを指定できます。

例 : class=”fl-l mg30px-btm”