WordPressブログのリンクのいろいろな貼り方|図解で簡単解説

リンクの貼り方

WordPressブログで記事を書くときに、リンクを貼ることがあります。

文字からのリンク、画像からのリンク、タグを使ったり、埋め込んだり。

リンクの貼り方には、いろいろあるのですが、初心者にとってはわかりにくいものです。

リンクを上手に貼ることができると、記事を読んでもらいやすくなります。

内部リンクは検索エンジン対策にもなりますね。

  • WordPressブログのリンクの貼り方には、どのような方法があるの?
  • WordPressブログにSNSの投稿を埋め込むには?
  • WordPressブログにアフィリエイトのリンクを貼るには?

この記事では、WordPressブログのリンクのいろいろな貼り方を図解で解説します。

目次

WordPressブログのいろいろなリンクの貼り方

WordPressには、様々な機能がついています。

リンクを貼るといっても、実はいろいろなリンクの貼り方があるのです。

いろいろなリンクの貼り方
  • ブログの記事の文字にリンクを貼る
  • ブログの画像にリンクを貼る
  • ブログの関連記事のリンクを貼る
  • ブログのボタンを使ってリンクを貼る
  • ブログにYouTube動画を埋め込む
  • ブログにツイッターのツイートを埋め込む
  • ブログにアフィリエイトのリンクを貼る
  • 広告タグを使ってAmazonのリンクを貼る

こういったWordPressブログのリンクの貼り方を、サンプルを使って図解で解説していきます。

このブログはSWELLというWordPressテーマを使っていますので、他のWordPressテーマを使っている場合には、機能や見え方や違う場合がありますので、ご了承ください。

SWELLは読者にとって読みやすい、使い手にとって使いやすき機能がたくさんあるおすすめWordPressテーマです。

WordPressテーマSWELLに関して詳しくは、以下の記事を参照してください。

ブログの文字にリンクを貼る

まずはいちばんシンプルな、文字にリンクを貼る方法からです。

以下は「ブログの文字にリンクを貼る」見本です。

ブログの文字にリンクを貼る見本

ブログの文字にリンクを貼るには、まずリンクを貼りたい文字列を指定します

リンクを貼りたい文字列を指定

するとメニューバーが表示されます。

メニューバー

このメニューバーの各メニューをクリックすることで、選択した文字列に対するいろいろな操作をすることができます。

メニューバー
メニューバーの項目

①ブロックタイプ・スタイルの変更

②行を上下に移動させる

③敵視との配置の変更(左寄せ、中央寄せ、右寄せ)

④太字(ボールド)

⑤斜体(イタリック)

⑥リンクの設定

⑦SWELL装飾(SWELLテーマの機能)

⑧フォントサイズ

⑨マーカー

➉その他のオプション

メニューバーの項目や見え方は使っているテーマによって若干異なります。

⑤がリンクの設定です。

リンクマークをクリックします。

リンクマークをクリック

図のようなエリアが表示されるので、①リンクを貼りたいURLをいれて、②新しいタブで開くようにしたい場合は、このボタンをクリックし、③URLを確認してクリックします。

図のようなエリアが表示されるので、①リンクを貼りたいURLをいれて、②新しいタブで開くようにしたい場合は、このボタンをクリックし、③URLを確認してクリックします。

新しいタブで開かない場合には、②のボタンをクリックしません。

リンクを貼った文字が青くなれば完了です。

青い文字

リンクを貼った文字列をクリックすると、以下のようにリンクが確認できます。

修正する場合には、鉛筆マークをクリックします。

修正は鍵マーク
ブログの文字にリンクを貼る見本

ブログの画像にリンクを貼る

次は、ブログの画像にリンクを貼る方法です。

以下は「ブログの画像にリンクを貼る」見本です。

ブログの画像にリンクを貼る見本
リンク

ブログの画像にリンクを貼るには、まず①リンクを貼りたい画像を指定します。

メニューが表示されるので、②リンクマークをクリックします。

②リンクマークをクリック

リンクエリアが表示されるので、赤枠にリンクを貼りたいURLをいれます。

リンクを貼りたいURLをいれます

矢印マークをクリックして確定させます。

矢印マークをクリック

新しいタブで開くようにしたい場合は、赤枠をクリックして展開します。

新しいタブで開くようにしたい場合は、赤枠をクリックして展開

新しいタブで開くようにしたい場合は、このボタンをクリックします。

新しいタブで開くようにしたい場合は、このボタンをクリックします。

新しいタブで開かない場合には、このボタンをクリックしません。

ブログの画像にリンクを貼ることができました。

ブログの画像にリンクを貼る見本
リンク

ブログの関連記事のリンクを貼る

ブログの関連記事のリンクを貼るには、SWELLの関連記事の機能を使います。

以下は「ブログの関連記事のリンクを貼る」見本です。

ブログの関連記事のリンクを貼る見本

ブログの観点記事のリンクを貼るには、①関連記事を入れる位置にカーソルをあわせ、②「+」をクリックして、③「関連記事」をクリックします。

①関連記事を入れる位置にカーソルをあわせ、②「+」をクリックして、③「関連記事」をクリック

関連記事マークが表示されない場合は、「すべてを表示」をクリックして選択してください。

①挿入したい記事の件名を入れて表示されたリストの中から、②記事をクリックして選択します。

①挿入したい記事の件名を入れて表示されたリストの中から、②記事をクリックして選択

これで関連記事が表示されます。

ブログの関連記事のリンクを貼る見本

ブログのボタンを使ってリンクを貼る

ブログの関連記事のリンクを貼るには、SWELLの関連記事の機能を使います。

以下は「ブログの関連記事のリンクを貼る」見本です。

ブログのボタンを使ってリンクを貼る見本

ブログのボタンを使ってリンクを貼るには、①ボタンを入れる位置にカーソルをあわせ、②「+」をクリックして、③「ボタン」のマークが表示されないので、この場合には「すべてを表示」をクリックします。

①ボタンを入れる位置にカーソルをあわせ、②「+」をクリックして、③「ボタン」のマークが表示されないので、この場合には「すべてを表示」をクリック

左側に表示されるブロックエリアから、「SWELLボタン」をクリックして選択します。

「SWELLボタン」をクリックして選択

ボタンが挿入されるので、①ボタンに表示したいテキストを入れて、②リンクマークをクリックします。

リンクマークをクリック

①リンクを貼りたいURLをいれて、②新しいタブで開くようにしたい場合は、このボタンをクリックし、③URLを確認してクリックします。

①リンクを貼りたいURLをいれて、②新しいタブで開くようにしたい場合は、このボタンをクリックし、③URLを確認してクリック

これでブログのボタンを使ってリンクを貼ることができました。

ブログのボタンを使ってリンクを貼る見本

ブログにYouTubeの画像を埋め込む

ブログにYouTubeの動画を埋め込む方法です。

以下は「ブログにYouTubeの動画を埋め込む」見本です。

ブログにYouTubeの画像を埋め込む見本

YouTubeの画像を埋め込むには、①埋め込みたい動画の下にある「共有」をクリックします。

共有ウインドウが表示されるので、②コピーをクリックします。

YouTubeの画像を埋め込む

①YouTube画像を埋め込む位置にカーソルをあわせて、②「+」をクリックし、③「YouTube」のマークが表示されないので、「すべてを表示」をクリックします。

①YouTube画像を埋め込む位置にカーソルをあわせて、②「+」をクリックし、③「YouTube」のマークが表示されないので、「すべてを表示」

左側に表示されるブロックエリアから、「YouTube」」をクリックして選択します。

「YouTube」」をクリック

①YouTube動画からコピーしたリンクを貼りつけて、②「埋め込み」をクリックします。

「埋め込み」をクリック

YouTubeの動画を埋め込むことができました。

ブログにYouTubeの画像を埋め込む見本

ブログにツイッターのツイートを埋め込む

ブログにツイッターのツイートを埋め込む方法です。

以下は「ブログにツイッターのツイートを埋め込む」見本です。

ブログにツイッターのツイートを埋め込む見本

ブログにツイッターのツイートを埋め込むには、まず埋め込みたいツイートのURLをコピーします。

埋め込みたいツイートのURLをコピー

① ツイッターのツイートを埋め込む位置にカーソルをあわせて、②「+」をクリックし、③「Twitter」のマークが表示されないので、「すべてを表示」をクリックします。

「Twitter」のマークが表示されないので、「すべてを表示」をクリック

左側に表示されるブロックエリアから、「Twitter」」をクリックして選択します。

「Twitter」」をクリックして選択

ツイートを埋め込むことができました。

ブログにツイッターのツイートを埋め込む見本

ブログにアフィリエイトのリンクを貼る

ブログにアフィリエイトのリンクを貼る方法です。

以下は「ブログにアフィリエイトのリンクを貼る」見本です。

ブログにアフィリエイトのリンクを貼る見本

審査にとおるとアフィリエイトリンクという広告をはることができるようになります。

プログラムの「広告リンク」がクリックできるようになっているので、「広告リンク」をクリックします。

テキスト広告やバナー広告など、いろいろなパターンの広告が表示されるので、好きな広告を選んで「素材をコピーする」をクリックします。

これでアフィリエイトリンクがコピーされました。

好きな広告を選んで「素材をコピーする」

アフィリエイトリンクは、あなただけのリンクです。このリンク経由の購入に対して報酬が発生します。

コピーしたアフィリエイトリンクをWordPressに貼ります。

アフィリエイトしたい記事の①アフィリエイトリンクを入れる位置にカーソルをあわせます。

右側に「+」マークが表示されるので、②「+」をクリックします。

すると四角いメニューが表示されるので、③「すべてを表示」をクリックします。

左側にメニューが表示されるので、スクロールして「カスタムHTML」をクリックします。

「カスタムHTML」とはHTMLをブログに貼るためのメニューです。

このような画面になります。

「カスタムHTML」

ここにコピーしたアフィリエイトリンクを以下のように貼りつけます。

貼りつけたら「プレビュー」をクリックして表示を確かめます。

アフィリエイトリンクを以下のように貼りつけます

このようにアフィリエイトリンクで広告をブログに貼ることができました。

ブログにアフィリエイトのリンクを貼る見本

広告タグを使ってAmazonのリンクを貼る

広告タグを使ってAmazonのリンクを貼る方法です。

以下は「広告タグを使ってAmazonのリンクを貼る」見本です。

広告タグを使ってAmazonのリンクを貼るの見本

まずは、広告タグを作成します。

今回は、「実践! 50歳からのライフシフト術―葛藤・挫折・不安を乗り越えた22人」という本の広告タグを作成して、Amazonのリンクを貼ります。

広告タグを作成するには、WordPress管理画面から、①広告タグ、②新規作成を選びます。

WordPress管理画面から、①広告タグ、②新規作成

広告タグの新規作成画面になるので、Amazon型を選択します。

Amazon型を選択

Amazon型の入力画面になりので、以下のように入力します。(画像クリックで拡大できます)

Amazon型の入力画面
  • ①タイトルを入力
  • ②枠線ありを選択
  • ③Amazonの画像リンクをコピーして、この枠に貼り付け
  • ④評価(★の数)を選択
  • ⑤表示名(商品名)を入力
  • ⑥価格を入力
  • ⑦Amazonのテキストリンクをコピーして貼り付け
  • ⑧ボタンテキスト名を入力(ここではAmazonと入力)

このように入力しました。(画像クリックで拡大できます)

入力例

入力が終ったら、「公開」をクリックします。

公開

ここから作成した広告タグを挿入します。

① Amazonのリンクをいれたい場所にカーソルをあわせ、②「+」をクリックして、③「広告タグ」のマークが表示されないので「すべてを表示」をクリックします。

① Amazonのリンクをいれたい場所にカーソルをあわせ、②「+」をクリックして、③「広告タグ」のマークが表示されないので「すべてを表示」をクリック

左側に表示されるブロックエリアから、「広告タグ」をクリックして選択します。

「広告タグ」をクリック

広告タグが挿入されるので、① Amazon型のプルダウンメニューを開いて、②先ほど公開した広告タグを選択します。

公開した広告タグを選択

公開した広告タグがない場合には、記事を下書き保存してから、ページを読み直してみてください。

広告タグで、Amazonのリンクを貼ることができました。

広告タグを使ってAmazonのリンクを貼るの見本

まとめ|WordPressブログのリンクのいろいろな貼り方

WordPressブログのリンクの貼り方を解説しました。

いろいろなリンクの貼り方
  • ブログの記事の文字にリンクを貼る
  • ブログの画像にリンクを貼る
  • ブログの関連記事のリンクを貼る
  • ブログのボタンを使ってリンクを貼る
  • ブログにYouTube動画を埋め込む
  • ブログにツイッターのツイートを埋め込む
  • ブログにアフィリエイトのリンクを貼る
  • 広告タグを使ってAmazonのリンクを貼る

リンクの貼る機能を上手に使って、読みやすい記事を書きましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次