目次
CTAとは？
https://web60.co.jp/cta.html
ＣＴＡとは”Call to action”の略で、日本語で言えば「求める行動」です。 単なる用語の理解でなく、Ｗｅｂマーケティングでの重要性を知ってほしいので、説明します。
賢威8ではあらかじめ用意されたCSSを特定の記述をしたHTMLによって呼び出すことができます。
以下賢威8の全CTAパーツデザインテンプレートのまとめチートシート。
最新verの賢威8が適用可能要件のようです。
コメントボックス
デザイン
賢威8
刷新された圧倒的デザイン
強力な訴求力のCTAパーツ
どうもかつをです。
賢威8ではいくつかのCTAパーツが用意されています。
CTAパーツとは「Call・To・Action」の事で、読者に行動を促す訴求のためのパーツです
もともと組み込まれたCSSによるデザインをHTMLタグで呼び出すことによって適用されます。
以下に記載するソースコードをコピペすれば、あなたの賢威8のサイトでも同様のデザインとしてお使いいただけます。
ソースコード
<div class="commentary-box"> <div class="commentary-box_inner"> <h3 class="commentary-box_title title_no-style p100-r"><span>賢威8</span><br> 刷新された圧倒的デザイン<br>強力な訴求力のCTAパーツ</h3> <div class="talker-thumb"><img alt="かつを" src="https://lets-hack.tech/wp-content/uploads/2019/04/c2acdf1703eaf8293d6aa05a3b5cb8e4_400x400.jpeg"></div> <p class="m0-b">どうもかつをです。<br> 賢威8ではいくつかのCTAパーツが用意されています。<br> CTAパーツとは「Call・To・Action」の事で、読者に行動を促す訴求のためのパーツです<br><br> もともと組み込まれたCSSによるデザインをHTMLタグで呼び出すことによって適用されます。<br> 以下に記載するソースコードをコピペすれば、あなたの賢威8のサイトでも同様のデザインとしてお使いいただけます。</p> </div> </div>
商品ボックス1
デザイン
書籍「沈黙のWebライティング —Webマーケッター ボーンの激闘—」
- 価格：
- 2,160円（税込）
謎のWebマーケッター「ボーン・片桐」の活躍を「ハードボイルドに」描いたストーリーから楽しくWebライディングを学べる実用入門書。
マンガコンテンツを通じてWebで「成果を上げる」ための文章の書き方、SEOに強いライティングのノウハウの基礎を学んだあとは、各章の終わりにある実践的・専門的な解説を読めばより深い知識を身に付けることができます。
ブロガーやライターだけでなくすべてのWeb担当者にもオススメできるライティング本です。
ソースコード
<div class="item-box"> <div class="item-box_thumb"> <a href="https://www.amazon.co.jp/gp/product/4844366238/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4844366238&linkCode=as2&tag=type2107-22&linkId=5971283a034242cec1300c2e0724bd11" target="_blank"><img src="https://lets-hack.tech/wp-content/uploads/2019/04/51TvUiUYtL._SX350_BO1204203200_.jpg" alt="書籍「沈黙のWebライティング —Webマーケッター ボーンの激闘—」" width="241" height="342"></a> </div> <h3 class="item-box_title title_no-style">書籍「沈黙のWebライティング —Webマーケッター ボーンの激闘—」</h3> <div class="item-data"> <dl> <dt>価格：</dt> <dd><span class="red f12em">2,160円</span><small>（税込）</small></dd> </dl> </div> <div class="item-box_desc"> <p class="f08em m0-b">謎のWebマーケッター「ボーン・片桐」の活躍を「ハードボイルドに」描いたストーリーから楽しくWebライディングを学べる実用入門書。<br><br> マンガコンテンツを通じてWebで「成果を上げる」ための文章の書き方、SEOに強いライティングのノウハウの基礎を学んだあとは、各章の終わりにある実践的・専門的な解説を読めばより深い知識を身に付けることができます。<br><br> ブロガーやライターだけでなくすべてのWeb担当者にもオススメできるライティング本です。</p> </div> <div class="btn-detail"> <a href="https://www.amazon.co.jp/gp/product/4844366238/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4844366238&linkCode=as2&tag=type2107-22&linkId=5971283a034242cec1300c2e0724bd11" class="btn dir-arw_r btn_gray" target="_blank"><span class="icon_arrow_s_right"></span>Amazonで詳細を見る</a> </div> </div>
商品ボックス2
デザイン
ソースコード
<section class="item-box02"> <div class="item-box_inner"> <h3 class="item-box_title title_no-style">プログラミング講座</h3> <div class="item-box_thumb"> <img src="https://lets-hack.tech/wp-content/uploads/2019/04/sample-service.png" alt="プログラミング講座" width="393" height="335"> </div> <div class="item-data"> <div class="item-data_sec al-c"> 初期費用 <span class="f20em red b">5,400</span>円（税込）<br> <span class="f20em">+</span><br> 月額費用 <span class="f20em red b">1,980</span>円（税込）<br> </div> <div class="al-c"> <p class="b m0-b f20rem">支払い方法</p> <div>PayPalを用いたクレジットカード決済</div> </div> <div class="btn-detail"> <a href="#" class="btn dir-arw_r btn_orange"><span class="icon_arrow_s_right"></span>ご購入はこちらから</a> </div> </div> </div> </section>
商品ボックス3
デザイン
ソースコード
<section class="item-box03"> <div class="item-box_inner"> <h3 class="item-box_title title_no-style">賢威7 WordPress版</h3> <div class="item-box03_col_wrap"> <div class="item-box03_col item-box03_thumb"> <img src="https://lets-hack.tech/wp-content/uploads/2019/04/package-keni7.png" alt="賢威" width="309" height="328"> </div> <div class="item-box03_col item-box03_cont"> <p>賢威のWordPressテンプレートでは、特別なプラグインを入れなくても、SEOでよく使う設定を初期設定で組み込んでいます。<br> これが、賢威のWordPressがSEOに強い理由のひとつです。</p> <table class="tl-f"> <tbody> <tr> <th>バリエーション</th> <th>カラム数</th> <th>言語</th> </tr> <tr> <td>25種類</td> <td>3パターン</td> <td>HTML5</td> </tr> <tr> <th>サーバ環境</th> <th>WPのバージョン</th> <th>-</th> </tr> <tr> <td>PHP 5.6以上<br>MySQL 5.5 以上</td> <td>WordPress 4.8 以上</td> <td></td> </tr> </tbody> </table> </div> </div> <div class="btn-detail_wrap"> <div class="btn-detail_col btn-detail_left w40 p10-r"><a href="https://lets-hack.tech/wordpress/keni/review/" class="btn btn_gray m0 w100">詳細</a></div> <div class="btn-detail_col btn-detail_right w60"><a href="https://px.a8.net/svt/ejp?a8mat=35AWZT+6OJ7HM+3Q2O+60OXD" class="btn dir-arw_r btn_orange m0 w100"><span class="icon_arrow_s_right"></span>ご購入はこちら</a></div> </div> </div> </section>
メルマガ登録フォーム1
デザイン
ソースコード
<div class="btn_mailmaga_wrap"> <a href="#" class="btn btn_style03 w100 al-c f14rem"> <span class="btn_mailmaga"><span class="icon_mail"></span>メルマガに登録する</span><br> ブログの最新情報を確実に受け取れます！ </a> </div>
メルマガ登録フォーム2
デザイン
メールマガジンを購読する
ブログの更新情報を週1度お届けします。
メールアドレスを入力
ソースコード
<div class="form-mailmaga"> <h3 class="form-mailmaga_title title_no-style"><span class="icon_mail"></span>メールマガジンを購読する</h3> <div class="form-mailmaga_inner"> <p class="m10-b">ブログの更新情報を週1度お届けします。</p> <p class="m0-b b">メールアドレスを入力</p> <form method="post"> <div class="form-mailmaga_mail"> <input placeholder="[email protected]" size="50" type="text" id="id01" name="mail" value=""> </div> <p class="note"><small>※購読解除はいつでも可能です</small></p> <button class="btn dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span>登録する</button> </form> </div> </div>
SNSフォローボタン
デザイン
ソースコード
<div class="sns-follow-box"> <div class="sns-follow-box_inner"> <p>ブログの更新情報を<br>Twitter／Facebookでチェックする</p> <div class="sns-follow-box_btns_fb"><a href="#"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></div> <div class="sns-follow-box_btns_tw"><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></div> </div> </div>
ログインフォーム
デザイン
ログイン
SNSでログインする
ソースコード
<div class="form-login"> <h3 class="form-login_title title_no-style">ログイン</h3> <div class="form-login_inner"> <form method="post"> <div class="form-login-item"> <p class="m10-b b"><label for="user_mail">メールアドレス</label></p> <div class="form-login_mail"> <input id="user_mail" name="user_mail" size="50" type="email" placeholder="[email protected]"> </div> </div> <div class="form-login-item"> <p class="m10-b b"><label for="user_pswd">パスワード</label></p> <div class="form-login_mail"> <input id="user_pswd" name="user_pswd" size="50" type="password" placeholder="半角英数字8～12文字"> </div> </div> <div class="form-login-item_btn"> <button class="btn dir-arw_r btn_style03 "><span class="icon_arrow_s_right"></span>ログインする</button> <p class="link-next02"><a href="#">アカウントを新規で追加する</a></p> <p class="link-next02"><a href="#">パスワードを忘れた方</a></p> </div> </form> <hr data-content="OR"> <h4 class="form-login_title_sub title_no-style">SNSでログインする</h4> <form method="post"> <ul class="list-login-btn_sns"> <li class="login-btn_fb"><button><i class="fab fa-facebook" aria-hidden="true"></i> Facebookでログインする</button></li> <li class="login-btn_tw"><button><i class="fab fa-twitter" aria-hidden="true"></i> Twitterでログインする</button></li> </form> </div> </div>
お問い合わせボタン
デザイン
お問い合わせはこちらから
075-7X8-7X8
（受付時間 平日9:00～18:00）
ソースコード
<div class="contact-box"> <div class="contact-box_inner"> <h3 class="contact-box-title title_no-style">お問い合わせはこちらから</h3> <div class="contact-box_in"> <div class="contact-box-item contact-box_tel"> 075-7X8-7X8 <span>（受付時間 平日9:00～18:00）</span> </div> <div class="contact-box-item contact-box_mail"> <a href="#" class="btn dir-arw_r btn btn_style01"><span class="icon_arrow_s_right"></span><span class="icon_mail"></span>メールでのお問い合わせ</a> </div> </div> </div> </div>
まとめ
あまり積極的に使っているサイトは見かけないですが、もともと用意されているスタイルも意外と豊富なことが分かります。
テーマのCSSに組み込まれているクラスのみですので、賢威8を使っている方は是非試してみてください。
その他のカスタマイズも色々公開しています↓
あわせて読みたい
「次世代フォーマットでの画像の配信」対策！簡単WebP配信設定
GoogleのPageSpeed Insightsに表示される警告の一つ「次世代フォーマットでの画像の配信」の対策が簡単に行える、ワードプレスプラグイン[EWWW image optimizer]の照会と、設定方法を公開しています。
created by Rinker
¥3,703
(2024/10/06 02:28:57時点 Amazon調べ-詳細)
[cc id=1167]
コメント