DigiPress

Highly Flexible WordPress Theme

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

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

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

シンプルな表示例

Ms. DigiPress
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]

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

Profile image
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)を指定して2カラム表示

Profile image
Ms. DigiPress
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
Profile image
Mr. DigiPress
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
このショートコード
[flexbox flexchildren=1 alignh="around"]
[flexitem margin=10 flex="initial"]
[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
width="300px"]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
<div><a class="icon-right-bold" href="#">See more info</a></div>
[/profile]
[/flexitem]
[flexitem margin=10 flex="initial"]
[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
width="300px"]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
<div><a class="icon-right-bold" href="#">See more info</a></div>
[/profile]
[/flexitem]
[/flexbox]

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

Profile image
Ms. DigiPress
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。プロフィール画像の形状に合わせてSNSアイコンも変化します。
Profile image
Mr. DigiPress
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。プロフィール画像の形状に合わせてSNSアイコンも変化します。
このショートコード
[flexbox flexchildren=1 alignh="center"]
[flexitem margin=10 flex="initial"]
[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="#"
width="300px"
border=1]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。プロフィール画像の形状に合わせて<span class="blue">SNSアイコンも変化</span>します。
<div><a class="icon-right-bold" href="#">See more info</a></div>
[/profile]
[/flexitem]
[flexitem margin=10 flex="initial"]
[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
width="300px"
border=1]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。プロフィール画像の形状に合わせて<span class="blue">SNSアイコンも変化</span>します。
<div><a class="icon-right-bold" href="#">See more info</a></div>
[/profile]
[/flexitem]
[/flexbox]

3カラム表示例

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”

DigiPress | カスタマイズ型WordPressテーマ