どうも、征矢です。
この記事では、ワードプレスのサイドバーに画像やリンクを貼り付ける方法について解説していきます。
ブログを書く上で、ワードプレスの外観は重要になってきます。
特にサイドバーには様々なコンテンツを配置できるし、自分独自の画像などを貼り付けておくだけでも見栄えがかなり変わってきます。
なので、サイドバーへの画像とリンクの貼り方を覚えて、独創的なブログを作ってみましょう。
WordPressのサイドバーに画像やリンクを貼り付ける方法
サイドバーの活用例
まずはサイドバーのコンテンツがどんなものかイメージするために、僕のブログのサイドバーをご覧ください。
（スマホで見ている方は、サイドバーが表示されませんので「PC表示」に切り替えてください）
左のサイドバーにはこのように、パッと目を引く画像とリンクが貼ってあります。
画像とその下の文字をクリックすることで、それぞれの記事が表示されるようにリンクも貼ってあります。
このようにして、読んでもらいたい記事を目立たせることで読者が
「お！？この記事面白そう！！」
と思ってくれれば、クリックして記事を読んでもらえるわけですね。
「読まれた回数が多いランキング」や、「最新記事」をずらっと並べるプラグインもありますが、それをそのまま載せてもあまり人目を引きませんし、オリジナリティもありません。
ちょっと画像を自分で加工して、オリジナル性の高いサイドバーにしてみましょう。
画像、リンクの貼り方
まずはサイドバーにリンクを貼りたい記事を書いたら、記事のイメージに合う画像を探しましょう。
なるべく人目を引きやすそうな、インパクトのある画像を選ぶのがオススメです。
画像を選んだら、画像の加工ソフトなどを使って文章を入れます。
文章は画像が隠れてしまわない程度の大きさと文字数で、簡潔にまとめましょう。
例えば、
「◯◯できるようになる方法」
「△△なのは何故！？」
のような文章は、人目を引きやすいと言われていますね。
書籍のタイトルなんかを参考にするといいかもしれません。
画像と記事が揃ったら、いよいよリンクを作成していきます。
HTMLの知識がある人はそのままサイドバーに記述していけばいいのですが、僕のように大した知識が無い人は、以下の手順で作成すると簡単です。
まずはワードプレスの管理画面を開いてください。
「投稿」から「新規追加」をクリックしてください。
新規投稿の画面が開きますので、記事を書く欄に「メディアを追加」でさきほど準備した画像を貼り付けてください。
次に、リンクを貼る記事を開いてURLをコピーしてください。
例では「テストです。」という記事を使用しています。
記事投稿画面に戻り、貼り付けた画像に先程コピーしたURLをリンクさせます。
画像を選択して、「リンクの挿入/編集」ボタンをクリックしてください。
表示された枠にURLを貼り付け、「適用」ボタンをクリックしてください。
記事欄の右上の「テキスト」タブをクリックして、テキストモードを開いてください。
すると、URLリンクを貼った画像のHTMLコードが記述されています。
このコードを全文コピーしてください。
そうしたらいったん、この記事は下書き保存しておきましょう。
続けて左メニューの「外観」から「ウィジェット」をクリックしてください。
今回は、左のサイドバーに画像とリンクを貼り付けますので、「サイドバー１」の内容を編集していきます。
画面左側の「利用できるウィジェット」のリストの中から「テキスト」を選んで、「サイドバー１」の
中にドラッグ＆ドロップします。
今回の例では、「検索」と「最近の投稿」の間に「テキスト」を挿入しました。
どこに挿入するかは好みで問題ありませんが、なるべく上の方が目につきやすいのでオススメです。
ちなみにこの状態でブログの左サイドバーがどうなっているかというと…
赤枠で囲った部分がさきほど挿入した「テキスト」のスペースです。
まだ何もしていないので、空白ですねｗ
では早速、このテキスト欄にリンクを貼っていきましょう。
「外観」から「ウィジェット」を開き、先程ドラッグ＆ドロップした「テキスト」の「▼」をクリックしてください。
すると、テキストの詳細情報を入力する欄がビロっと表示されます。
次に、「タイトル」の欄に文字を入力し、「内容」の欄にさきほどコピーしたコードを貼り付けてください。
入力できたら「保存」をクリックしてください。
では、サイドバーがどうなったか見てみましょう。
メチャメチャはみ出してますねｗｗ
なので、もう一度「ウィジェット」の「テキスト」を編集します。
画像サイズが大きすぎるので、枠にちょうど収まるように調節してください。
「width」と「height」の値を調節して、枠のサイズに合うようにしてください。
調節できたので、もう１度確認します。
ちょうどいい感じになりましたね！！
ではこの画像をクリックしてみて、ちゃんと記事が開くかも確認します。
画像をクリックすると…
「テストです。」という記事が表示されました。
これで完成です。
あとはお好みで、画像の下に文字を入力したりして、同じようにリンクを貼ればOKです。
もちろん例のように画像だけでもいいですよ。
こんな感じで、あなただけのオリジナルサイドバーを作ってみると、他のブログと差別化できて面白いかもしれません。
ぜひ試してみてください！
