wildhawk
WordPressのショートコードで
魅力的なデザインのボタンを設置しよう
魅力的なデザインのボタンを設置しよう
「Shortcodes Ultimate」でボタンを設置
WordPressで魅力的なデザインのボタンを設置する場合、CSSやJavaScriptを使う方法がありますが正直、覚えることも多く、設置や調整も面倒なため、諦めている方も多くいると思います。
そこで今回は、CSSやJavaScriptを書くことなく、WordPressで簡単に魅力的なデザインのボタンを設置することができる、無料プラグイン「Shortcodes Ultimate」の、設置する手順を詳しく解説いたします。
「Shortcodes Ultimate」のインストールはこちらをご確認ください。
こんな人にオススメ
WordPressで簡単にボタンを設置したい
WordPressでCSSを使わずデザインされたボタンを設置したい
WordPressで導線用に同じデザインのボタンを設置したい
CSSを覚えるのは面倒。。。でもセンスの良いデザインのサイトは作りたい。そんな方にショートコードはオススメ
ショートコードは、エディタのHTMLに、以下の様なコードを入力することで、実行することが可能です。
[su_button url="#" target="blank" style="3d" background="#0b521b" color="#FFFFFF" size="3"]Button[/su_button]
| url | ボタンのリンク先のURLを設定 Default value: Site URL |
||||||||||||||||||||
| target | リンク先を別タブで開く場合は「_blank」を設定 Default value: self |
||||||||||||||||||||
| style | ボタンの種類を設定（マウスオンで変わるボタンも有り）
Default value: default |
||||||||||||||||||||
| background | ボタンの色を指定 Default value: #2D89EF |
||||||||||||||||||||
| color | 文字の色を指定 Default value: #FFFFFF |
||||||||||||||||||||
| size | ボタンの大きさを1〜20で指定 Default value: 3 |
||||||||||||||||||||
| wide | ボタンの幅を100%にするか指定
Default value: no |
||||||||||||||||||||
| center | ボタンをセンターに指定
Default value: no |
||||||||||||||||||||
| radius | ボタンの角を丸くする設定
Default value: auto |
||||||||||||||||||||
| icon | アイコンを追加する設定 例 icon=”icon: arrow-circle-right” Button ※アイコンの一覧はこちら |
||||||||||||||||||||
| icon_color | アイコンの色を設定 例 icon_color=”red” Button |
||||||||||||||||||||
| text_shadow | 文字に影を設定（水平方向の距離 垂直方向の距離 影のぼかし半径 影の色） 例 text_shadow=”1px 1px 1px black” Button |
||||||||||||||||||||
| desc | テキストの下に説明文を設置 例 desc=”test” Buttontest |
||||||||||||||||||||
| download | リンクがファイルダウンロードの場合に設定 例 desc=”test” Button |
||||||||||||||||||||
| onclick | JavaScriptを設置 | ||||||||||||||||||||
| rel | リンクのrel属性を設定 設定値: nofollow, lightbox |
||||||||||||||||||||
| title | リンクのtitle属性を設定 | ||||||||||||||||||||
| id | リンクのid属性を設定 | ||||||||||||||||||||
| class | リンクのclass属性を設定 |
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください