Amazonタイムセールはこちら
ブログ運用

【ワードプレス】ウィジェットに自作した画像リンクを配置する方法

【ワードプレス】ウィジェットに自作した画像リンクを配置する方法

ワードプレスにある「ウィジェット」

聞き慣れない言葉なので、初めは何のことか分からないですよね。

ウィジェットは、コンテンツを自由にカスタマイズできる便利な機能です。

最近の投稿一覧、検索窓、アーカイブなどを、簡単に表示できるブログ部品のようなものです!

今回は、ウィジェット(サイドバー)自作した画像リンクを配置する方法についてご説明します。

配置すると、このような感じになります▼

【PCでの表示】

ウィジェット広告の見え方PC

【スマホでの表示】

ウィジェット広告の見え方スマホ

まとめ記事やキラーページへ誘導したいときにも役立ちますので、ぜひ確認してみてください♪

ねずみん
ねずみん
コードを一切いじらずに簡単に出来る方法で紹介します!!

画像リンクに使用する画像を作成!ちょうど良いサイズを解説

まずは、画像リンクに使用する画像を作成します。

適当なサイズで作るのではなく、一般的な広告バナーサイズを参考に大きさを考えると良いと思います。

大手ASPのA8.netがアフィリエイトプログラムとして用意している「バナー素材サイズ一覧」が、非常に分かりやすく勉強になると思います!

画像サイズ一覧

画像出典:A8.net

A8.netではブロガー、アフィリエイターに役立つ情報がたくさん配信されています!

登録がまだという方はぜひ、チェックしてみて下さい♪

あわせて読みたい
A8.netとは?アフィリエイト初心者が登録するメリット5つ紹介
A8.netとは?アフィリエイト初心者が登録するメリット5つ紹介これからアフィリエイトを始めようとしている方、A8.netは100%登録必須のASPです。 「アフィリエイト」とは、自分のメデ...

ご参考までに、作成した画像を一つ貼っておきます。

下記画像は、320×100pxで作成しました。作成ソフトは、無料で使用できるCanvaです。

wordpress攻略するぞ

A8.netの広告素材サイト一覧にもあるように、もう少し小さめで作成したい方は320×50で作成しても良いですし、大きめが良ければ300×250でもいいと思います!

配置したいスペースにもよるので、自分のブログに合ったサイズを選ぶと良いですよ☆

ねずみのキャラクターはIllustratorでオリジナルのイラストを描き、保存したものを素材としてCanvaに取り入れて使用しています。

あわせて読みたい
【PC版】Canvaの使い方 アイキャッチをプロっぽくデザイン!
【PC版】Canvaの使い方 アイキャッチをプロっぽくデザイン!デザイン作成ツールの「Canva」 無料で使用できる手軽さから、ブログのアイキャッチや、YouTubeのサムネなどに使用している方...

メインにするようなイラストがない場合は、ココナラで作成依頼をするのがおすすめです。

ココナラのクリエイターに依頼する
唯一無二のキャラクターをブログ用に持つことで、他ブログとの差別化にもなりますよ!

画像に設置する絵は、無料のイラストサイトから取ることが多いです。

無料かつ会員登録なしで、商用利用OKのサイトを紹介している記事があるので、参考にしてみて下さい▼

あわせて読みたい
無料・商用利用OK・登録なし!フリーイラスト素材のサイト厳選紹介
無料・商用利用OK・登録なし!フリーイラスト素材のサイト厳選紹介ブログのアイキャッチ画像や、記事の合間にちょっとしたイラストを入れたい場合に、イラスト探しって結構大変ですよね。 素材サイトも、素...

ウィジェット(サイトバー)に画像リンクを設置する方法

画像が出来たら、さっそく設置していきましょう!

※Wordpressのテーマ「JIN」使用での説明になります

WordPressの管理画面から、外観→ウィジェットをクリックし、ウィジェットの設定画面を開きます。

ウィジェット作成画面1

左側にある「利用できるウィジェット」から、【テキスト】という項目をドラッグして、「サイドバー【PC】」というところに置きます。

フルダウン(▼)をクリックすると、下記のような画面が表示されます。

ウィジェット広告作成画面2

①タイトルを決めます!

「ピックアップ」、「おすすめ」、「要チェック」など、好きなタイトルにしましょう。

②メディアを追加

メディアとは、画像です。先ほど作成した画像を貼り付けましょう!画像は圧縮してから取り込むことをお勧めします。

③リンクの挿入

画像を貼り付けたら、リンクボタン🔗を押します。すると下記のような画面が表示されます。

ウィジェット広告作成画面3

窓に、リンク先のURLを入力します。

リンク先は、作成したまとめ記事でも良いですし、タグやカテゴリーのまとめページでもいいと思います。

リンク設定ボタン⚙を押すと、新しいタブでリンクを開くように、チェックを入れるだけで、設定することもできます。

以上で完了です!

ねずきち
ねずきち
なんて簡単なんだ!!

ちなみに今説明した設定は、テーマJINをお使いの方であれば「カスタマイズ」のライブプレビュー画面でも設定することが出来ます。

画像リンクの作成と配置方法さえマスターしておけば、どこでも自分の好きなところに表示させて、クリックを促すことができるのでどんな場面でも役立ちます!

ねずみん
ねずみん
この記事がお役に立てれば嬉しいです♪
あわせて読みたい
サイトマップ作成からサーチコンソール追加までの手順【運営に必須】
サイトマップ作成からサーチコンソール追加までの手順【運営に必須】自分のメディア(サイトやブログ)を作成したら、Google Search Consoleに登録すると思います。 登録しただけで終わ...
あわせて読みたい
TwitterカードをWordpressで超簡単に設定する方法
TwitterカードをWordpressで超簡単に設定する方法ブログを更新したら、ツイッターにも投稿する方が多いと思います。ただ、URLを載せるだけだとなかなかクリックしてもらえないですよね。 ...
ブログで稼ぎたい人向けの書籍