ブログ全般

ワードプレスのサイドバーに画像やリンクを貼り付ける方法

どうも、征矢です。

 

この記事では、ワードプレスのサイドバーに画像やリンクを貼り付ける方法について解説していきます。

 

ブログを書く上で、ワードプレスの外観は重要になってきます。

特にサイドバーには様々なコンテンツを配置できるし、自分独自の画像などを貼り付けておくだけでも見栄えがかなり変わってきます。

 

なので、サイドバーへの画像とリンクの貼り方を覚えて、独創的なブログを作ってみましょう。

 

 

WordPressのサイドバーに画像やリンクを貼り付ける方法

 

サイドバーの活用例

 

まずはサイドバーのコンテンツがどんなものかイメージするために、僕のブログのサイドバーをご覧ください。

(スマホで見ている方は、サイドバーが表示されませんので「PC表示」に切り替えてください)

 

左のサイドバーにはこのように、パッと目を引く画像とリンクが貼ってあります。

160920-0001

 

画像とその下の文字をクリックすることで、それぞれの記事が表示されるようにリンクも貼ってあります。

 

このようにして、読んでもらいたい記事を目立たせることで読者が

 

「お!?この記事面白そう!!」

 

と思ってくれれば、クリックして記事を読んでもらえるわけですね。

 

 

「読まれた回数が多いランキング」や、「最新記事」をずらっと並べるプラグインもありますが、それをそのまま載せてもあまり人目を引きませんし、オリジナリティもありません。

 

ちょっと画像を自分で加工して、オリジナル性の高いサイドバーにしてみましょう。

 

 

画像、リンクの貼り方

 

まずはサイドバーにリンクを貼りたい記事を書いたら、記事のイメージに合う画像を探しましょう。

なるべく人目を引きやすそうな、インパクトのある画像を選ぶのがオススメです。

 

画像を選んだら、画像の加工ソフトなどを使って文章を入れます。

文章は画像が隠れてしまわない程度の大きさと文字数で、簡潔にまとめましょう。

 

例えば、

 

「◯◯できるようになる方法」

「△△なのは何故!?」

 

のような文章は、人目を引きやすいと言われていますね。

書籍のタイトルなんかを参考にするといいかもしれません。

 

 

画像と記事が揃ったら、いよいよリンクを作成していきます。

HTMLの知識がある人はそのままサイドバーに記述していけばいいのですが、僕のように大した知識が無い人は、以下の手順で作成すると簡単です。

 

まずはワードプレスの管理画面を開いてください。

160717-0003

 

 

「投稿」から「新規追加」をクリックしてください。

160920-0002

 

新規投稿の画面が開きますので、記事を書く欄に「メディアを追加」でさきほど準備した画像を貼り付けてください。

160920-0003

 

 

次に、リンクを貼る記事を開いてURLをコピーしてください。

例では「テストです。」という記事を使用しています。

160920-0004

 

 

記事投稿画面に戻り、貼り付けた画像に先程コピーしたURLをリンクさせます。

画像を選択して、「リンクの挿入/編集」ボタンをクリックしてください。

160920-0005

 

 

表示された枠にURLを貼り付け、「適用」ボタンをクリックしてください。

160920-0006

 

 

記事欄の右上の「テキスト」タブをクリックして、テキストモードを開いてください。

すると、URLリンクを貼った画像のHTMLコードが記述されています。

160920-0007

 

 

このコードを全文コピーしてください。

160920-0008

 

 

そうしたらいったん、この記事は下書き保存しておきましょう。

 

続けて左メニューの「外観」から「ウィジェット」をクリックしてください。

160920-0009

 

 

今回は、左のサイドバーに画像とリンクを貼り付けますので、「サイドバー1」の内容を編集していきます。

160920-0010

 

 

画面左側の「利用できるウィジェット」のリストの中から「テキスト」を選んで、「サイドバー1」

中にドラッグ&ドロップします。

160920-0011 160920-0012

 

 

今回の例では、「検索」と「最近の投稿」の間に「テキスト」を挿入しました。

どこに挿入するかは好みで問題ありませんが、なるべく上の方が目につきやすいのでオススメです。

 

ちなみにこの状態でブログの左サイドバーがどうなっているかというと…

160920-0013

 

赤枠で囲った部分がさきほど挿入した「テキスト」のスペースです。

まだ何もしていないので、空白ですねw

 

では早速、このテキスト欄にリンクを貼っていきましょう。

 

「外観」から「ウィジェット」を開き、先程ドラッグ&ドロップした「テキスト」の「▼」をクリックしてください。

すると、テキストの詳細情報を入力する欄がビロっと表示されます。

160920-0014 160920-0015

 

次に、「タイトル」の欄に文字を入力し、「内容」の欄にさきほどコピーしたコードを貼り付けてください。

入力できたら「保存」をクリックしてください。

160920-0016

 

 

では、サイドバーがどうなったか見てみましょう。

160920-0017

 

メチャメチャはみ出してますねww

 

なので、もう一度「ウィジェット」「テキスト」を編集します。

画像サイズが大きすぎるので、枠にちょうど収まるように調節してください。

160920-0018

 

「width」と「height」の値を調節して、枠のサイズに合うようにしてください。

調節できたので、もう1度確認します。

160920-0019

 

ちょうどいい感じになりましたね!!

 

ではこの画像をクリックしてみて、ちゃんと記事が開くかも確認します。

160920-0020

 

 

画像をクリックすると…

160920-0021

 

「テストです。」という記事が表示されました。

これで完成です。

 

あとはお好みで、画像の下に文字を入力したりして、同じようにリンクを貼ればOKです。

もちろん例のように画像だけでもいいですよ。

 

こんな感じで、あなただけのオリジナルサイドバーを作ってみると、他のブログと差別化できて面白いかもしれません。

ぜひ試してみてください!