ブログ運営

【ブログカスタマイズ】超簡単!「Canva」でのコンテンツボタンの作り方を解説。

こんにちは、さと@satopic1です!

今回は、このような「コンテンツボタン」の作り方を解説します。
このボタンに思い思いのリンクを貼ることで、ユーザーが思い思いのコンテンツに飛べる、といったものです。

サイトの見栄えも良くなり、
どんなブログでも適用できますので、ぜひ試してみてください!

今回使用するサービスは「Canva」という無料サービスです。
実際の操作画面を見ながら解説していくのでかなりわかりやすくなっています。
ではどうぞ!

コンテンツボタンを作成する際の準備

ボタンのデザインを作成する


実際に、僕がサイトで使用しているこのデザインを『canva』で作成してみましょう。

Canvaは有料版と無料版がありますが、無料版でも全く問題なくアイキャッチのデザインが作成できます。

会員登録をする

会員登録といっても、ニックネームと利用目的を記載するだけです。簡単ですね!
GoogleアカウントやFacebookアカウントも使用できます。

もうすでに会員だよ!という方は読み飛ばしてください。「コンテンツボタンのデザイン作成」からどうぞ。

ニックネームを入力

利用目的を入力


入力後、「Googleで登録」「Facebookで登録」「メールアドレスで登録」のいずれかを選択し、画面の指示に従って操作すれば登録完了です。

コンテンツボタンのアイキャッチ作成

①「メルマガヘッダー」を選択

ここでは、600px×200pxのキャンパスの「メルマガヘッダー」を選択します。

②「色選択ボタン」を選択し、背景色を選択

背景色を選択します。ここで自由に色を選択できます。

③「テキスト」を選択後、「テキストボックスを追加」を選択

「テキストボックスを追加」を選択することで、以下のようなテキストボックスが表示されます。
この中に好きなテキストを入力することができます。

④自由なフォントを選択し、文字入力

・入力した文字の位置は、テキストボックスを動かすことによって移動できます。
・文字色・文字サイズの変更も可能です。
・太文字・斜体への変更も可能です。

⑤文字入力後、「アップロード」を選択

「アップロード」機能で、デザインに貼り付けたい画像を読み込むことができます。

⑥「画像をアップロード」を選択し、画像をアップロードする

アップロードした画像がサイドバーに表示されるので、その画像を表示させたい場所にドラッグ&ドロップする。

⑦デザイン完成。「ダウンロード」を選択。

これでデザインが完成しました。配置バランスなどの微調整を行なった後「ダウンロード」を選択しましょう。

⑧ファイル種別を「JPG」で選択し、「ダウンロード」を選択

PNGだとファイル容量が重くなってしまうので、サイトを開くスピードの低下に繋がり、ユーザーにストレスを感じさせてしまします。SEO的にも良くないので、検索順位に悪影響を及ぼすこともあります。


以下表示になればダウンロード完了。


以下のようなコンテンツボタンのデザインが完成しました!


では次は、HTMLタグを使用して、この画像にリンクを貼りましょう!
コピペのみなのでとても簡単です!!

完成した画像にリンクを貼る

では実際に作成した画像にリンクを貼っていきましょう。
ここからは、WordPressの操作画面を見ながら解説していきます。
(ちなみに、僕が使用しているテーマは「JIN」です)

完成した画像をアップロードする

①「メディア」→「新規追加」の順で操作(移動画面先でアップロード)

これでアップロードは完了です。

完成した画像にリンクを貼る

①「外観」→「ウィジェット」を選択

②「カスタムHTML」を選択

③「カスタムHTML」を「サイドバー」にドラッグ&ドロップ

④「タイトル設定」「コード貼り付け」


貼り付けるコードは以下の通り。コピペして使用してください。

<a href=”リンク先のURL“><img src=画像のファイル名(保存場所)” /></a>

コード内に記載する「URL」「ファイル名」を調べる方法を紹介します。

リンク先のURLを調べる

リンク先にしたいページのURLを貼り付けましょう。

画像のファイル名(保存場所)を調べる

「メディア」→「ライブラリ」の順で操作すると、先ほどアップロードした画像があるかと思うので、それをクリック。
すると、以下のような画面になります。
赤丸で囲っているところが「画像のファイル名(保存場所)」なので、コピぺしましょう。

完成!!

完成がこちら。
【PC】

【スマホ】

このボタンをクリックすることで、指定のページに飛べる、と言う仕組みです。
こういったデザインを活用して、ブログ・サイトの直帰率を改善し、サイトの有用性を高めましょう!!

またね。さと@satopic1でした!