Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。ブログカスタマイズ記事下にCTAを設置するカスタマイズを作りましたのでご紹介します。WordPressの有料テーマではよく見かけますね。このカスタマイズははてなブログはもちろん、WordPress、その他のブログサービスでも使えます。Action:コールトゥアクション)」の略でWebページ上でユーザーにクリックしてもらうなど行動を起こさせるためのボタンや画像・テキストを意味します。はてなブログのトップページで言うとこの「はてなブログとは」の緑色のボタンがCTAです。webサイトを作るとき、ユーザーに商品を購入してほしい、お問い合わせしてほしい、など何かしらの目的がある場合が多いと思います。したPRしたいものを訴求し、コンバージョンへ結びつけるのがCTAです。資料請求などがCTAの対象になりやすいです。今なら「Note購入」などもCTAになりそうですね。アフィリエイトリンクに使っても良いと思いますし、一番PRしたいことをCTAに入れると良いと思います。見た目はこんな感じ自分のはてなブログテーマを対象としてCTAを作ってみました。PC版スマートフォン版レスポンシブデザインでスマートフォンに対応しています。レスポンシブデザインではないスマートフォン版を使っている場合もそのままコードをスマートフォン版の記事下に入れてもらえば使えます。カスタマイズコードHTML(記事下)デザイン>カスタマイズ>記事下のところに以下のコードを入れて下さい。内容は適宜変えてください。class="cta-description">ここに説明文を入れます。aria-hidden="true"></i>CTAボタン</a></div></div>CSSデザインCSSに以下のコードを追記してください。色などは適宜変えてください。none;}スマートフォン用レスポンシブではないはてなブログ独自のスマートフォン版をご使用の方は以下のコードをそのまま記事下に入れて下さい。class="cta-description">ここに説明文を入れます。none;}</style>補足:FontAwesomeの読み込みボタンのアイコンはFontAwesomeを使っています。FontAwesomeを読み込んでない方はフッタなどに以下を追加してください。どこかで使ってる方は不要です。href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">以上、記事下にCTAを設置するカスタマイズでした。よろしければどうぞご利用下さい。その他のはてなブログカスタマイズ記事はこちらをどうぞ。20:29あわせて読みたい☆引用の範囲内でしたらこのブログの画像・文章・コード転載OKです。引用元をリンク付きでご明記下さい。この記事のURLとタイトルをコピーする最後までお読み下さりありがとうございます。»Recommend本格的なカスタマイズをするならはてなブログProがおすすめです。Green』『stripe』『yumekawa』『Haruni』はてなブログテーマを制作しています。HTML/CSS/WordPressとはてなブログカスタマイズがメインコンテンツ。特定商取引法に基づく表記このブログについてのお問い合わせお見積り・ご相談ブログのカスタマイズご依頼についてのお見積はこちら↑。このブログで紹介しているコードは、ご使用のテーマによっては調整が必要な場合があります。あらゆる場面、状況に対応することは難しいためです。ここで紹介しているコードはあくまでも一例で、各自ご自身の責任の元で調整してください。このブログで紹介しているコードは、一般的なブログであれば問題ないと認識しておりますが、全てのブログに適しているとは保証できません。万一トラブルが発生したとしても、それに対する一切の保証をいたしかねます。ご自身の判断と責任においてご利用いただくことをご了承下さい。☆引用の範囲内でしたらこのブログの画像・文章・コード転載OKです。引用元をリンク付きでご明記下さい。ヘルプマークとは?ヘルプマークは見えない障害、義足や人工関節を使用している方、内部障害や難病の方、妊娠初期の方など、援助や配慮が必要な方が付けるマークです。(1)PopularSozaifreepikAboutこのブログではサイト制作やHTML・CSS、はてなブログカスタマイズ、WordPressについて書いています。最新記事スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。