社畜サラリーマンが副業のインターネットビジネスで自由な人生を手に入れるための情報を発信しています。

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

どうも、征矢です。

 

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

 

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

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

 

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

 

 

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

 

サイドバーの活用例

 

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

(スマホで見ている方は、サイドバーが表示されませんので「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です。

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

 

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

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

〜無料メルマガやってます!今なら大ボリュームのアフィリエイト教科書を無料でプレゼント中!〜

関連記事

コメント

  1. こんばんは。

    投稿画面を利用すれば、
    簡単に画像にリンクを設定することが出来るんですね!
    画像のサイズを数値で指定しなければならないのが
    少し面倒ですね。
    サイズをプレビューしながら変更できると便利ですね。

      • 征矢高志
      • 2016年 9月 23日

      QooAIBOさん、こんばんは!

      プレビューしながらでも、一応できることはできます…。
      まあ1つ作ってしまえば、2つ目からは1つ目と同じサイズで設定すればいいので簡単ですよ〜

  2. 画像付きで詳しく説明されてあってわかりやすいですね。
    参考にさせていただきますね。

      • 征矢高志
      • 2016年 9月 24日

      アニーさん、こんにちは!
      コメントがりがとうございます。

      ぜひ参考にしてください!

  3. 征矢さん、
    こんばんはhiroです。
    サイドバーの貼り方とても解りやすかったです^^
    サイドバーも個性が出る所なので、
    しっかり作り込みたいです。
    リンク入れるに忘れる事もあるので(*_*;
    忘れずに入れます^^
    応援ポチ完了です。
    また訪問させて頂きますね。

      • 征矢高志
      • 2016年 9月 24日

      hiroさん、こんばんは!

      サイドバーもあると無いとで、ブログの印象がかなり変わってきますよね。
      個性のあるサイドバーにすると読者にも覚えてもらえたり、メリットも多いです。

      あと応援ありがとうございます!

  1. この記事へのトラックバックはありません。

CAPTCHA


初心者が副業でゼロから稼ぐための無料教材

 

「Blog Master Bible」
当教材は、ネットビジネス初心者がゼロから月収10万円を稼げるようになるためのアフィリエイト教材の決定版です。

ネットビジネスの基本的な知識や考え方から、具体的なブログの作成方法、アクセスの集まる記事の書き方などを100本以上の講義でレクチャーしています。

サラリーマンから主婦まで、副業を考えている方に最適な教材です。

⇛無料ダウンロードはこちら!

管理人プロフィール

どうも、征矢(そや)と申します。

現在、サラリーマン生活をしながら副業のインターネットビジネスで月に10万円以上稼いでいます。

毎月の預金残高を気にしなくなり、社畜のような生活からオサラバ。さらなる自由を求めて独立準備中。

このブログでは、ネットの世界で収入を得る方法について発信してます。

好きなもの:ネコ、カレー、ガンダム
嫌いなもの:パクチー

⇛詳しいプロフィールはコチラ

ブログランキング

いつも応援ありがとうございます。

記事がお役に立てたら、クリックお願いします!


ブログランキング
 

にほんブログ村 小遣いブログ 副業・副収入へ
にほんブログ村
 

ワードプレスの使い方講座

gatag-00010569

ワードプレスの使い方について詳しく解説しています。

⇛こちらをクリック


内容は随時更新中!!

質問・相談・お問合せ