KEITAYOSHIDA.com

個人の時代で価値組を目指す

ワードプレス

DigiPressショートコードでフラットタイプのボタンを作成する方法

DigiPressショートコードでフラットタイプのボタンを作成する方法
スポンサードリンク

ワードプレスのテーマ「DigiPress」のショートコードでフラットタイプのボタンを作成する方法を解説していきます。DigiPressのショートコードは有料になるので予め購入する必要があることをご了承ください。ショートコードの値段は、1サイト5,480円になります。下記サイトからご購入できます。

ワードプレスは新エディターを使用して解説しています。

今回は、下記の小さいサイズのボタン作成方法を解説します。
小さいサイズのボタン

ショートコード取得方法

ショートコードは、DigiPressの公式サイトから取得します。DigiPressの商品を購入すると閲覧できます。

DigiPressの公式サイトにログイン

DigiPressの公式サイトにログインしたら、トップナビゲーション→マニュアル→コンテンツ制作関連→ショートコード一覧をクリックします。

上記画像のオレンジ色で囲っているオリジナルカラーボタンを表示のリンクをクリックします。

ショートコードのサンプルがあるので、一番上の小さいサイズのボタンのショートコードを使用します。ショートコードは下記に掲載したのでコピペして使用してください。

小さいサイズのボタンのショートコード

下記のHTMLタブが選択されている状態で表示されているショートコードをコピーします。このショートコードは公式サイトに掲載されていたものです。

スポンサードリンク

See the Pen ショートコード by 吉田 啓太 (@keitayoshida) on CodePen.

コピーしたショートコード貼り付け

ワードプレスの記事作成の管理画面で、エディターのショートコードを選択し、コピーしたショートコードを貼り付けます。下記の画像でオレンジ色の枠で囲ったショートコードのアイコンをクリックします。

ショートコードの入力ボックスが表示されるので、先ほどコピーしたショートコードを貼り付けます。

記事を更新して、ページを確認すると、下記のボタンが表示されます。

小さいサイズのボタン

ボタンの指定可能なパラメーター

ショートコードのボタンは下記のパラメーターを使用してカスタマイズできます。

url ボタンをクリックしたときに移動するリンク先URLを指定します。
例: url=”http://hogehoge.com/contact”
title
ボタンに表示するタイトルを指定します。
例 : title=”お問い合わせ”
colorボタンカラーのカラーコード(#0000ff など)、またはカラー名(blue など)を指定します。
例 : color=”#4797E0″
iconボタンの大きさや種類を指定します。
未指定の場合は 標準サイズ にて表示されます。
指定可能な値
small : 小さいサイズ
big : 大きいサイズ
classボタンをクリックしたときに別ウィンドウを開いてリンク先のページに移動する場合に newwindow=1 または newwindow=true を指定します。
relボタンのアンカーテキスト(a)タグに挿入するrel属性を指定できます。
例えば、内部リンクの場合は検索エンジンにリンク先を辿らないよう、rel=”nofollow” にするなど。

記事では細かいブログの使い方やショートコードのパラメーターの指定方法がわからないという方のために有料で動画を作成しています。ワードプレスやDigiPressのテーマを初めて使用する初心者用の動画になりますので、よろしければご検討お願いします。

スポンサードリンク
URL
TBURL

LEAVE A REPLY

*
*
* (公開されません)

CAPTCHA


COMMENT ON FACEBOOK

Return Top