![リンクの貼り方紹介](https://panadablog.com/wp-content/uploads/2020/07/49a6d962b1c2ec0911145dbea9ead288-1024x576.png)
当記事ではWordPress利用者向けに覚えておくべきリンクの貼り方4パターンを解説致します。
リンクは適切に貼ることで読者がサイト内を巡回しやすくもなるので是非身に着けていきましょう!
ブログ初心者でも安心な画像多めの解説です。気軽に見ていって下さい。
- テキストリンク
- 応用:アンカーリンク
- YouTubeリンク
- ブログカード(※1)
※1…ブログテーマ「Cocoon」を使った貼り方になります。
テキストリンクの貼り方
![テキストリンク](https://panadablog.com/wp-content/uploads/2020/07/9d226f3b9d4fdee55913a063edb4e646-1024x576.png)
リンクの中でも採用率、汎用性が高くクリックもされやすいテキストリンクの貼り方です。
- テキストを書く
- テキストを選択した状態にする
- エディタから「リンク(🔗マーク)」を選択
- 表示された枠内にリンクしたいURLを入力
- 「↲」かエンターを押して完了
①URLを貼るテキストを書く
URLを貼るためのテキストを書きます。
以下の画像では「ここにリンクを貼ります」の部分です。
![リンクするテキスト](https://panadablog.com/wp-content/uploads/2020/07/d1136c7717e4c5fd38e469a3acec2b6d.png)
②テキストを選択した状態にする
①で書いたテキストの上をマウスでドラッグして選択状態にします。
テキストが青くなっていれば選択されている証拠です。
![リンク部分選択](https://panadablog.com/wp-content/uploads/2020/07/J3gAdcFLcTXZBRV1593671991_1593672157.png)
③エディタから「リンク(🔗マーク)」を選択
![リンクアイコン](https://panadablog.com/wp-content/uploads/2020/07/MtebO3w0Z6BHDik1593672342_1593672513.png)
④表示された枠内にリンクしたいURLを入力
この時URLが正確か確認してください。
間違っているとリンクが動作しませんので注意。
![URL入力](https://panadablog.com/wp-content/uploads/2020/07/0389425f1c34130436423595a9c026a2.png)
⑤「↲(送信)」かエンターを押して完了
入力したら枠の右側にある「↲」かエンターを押して完了です。
![リンク決定](https://panadablog.com/wp-content/uploads/2020/07/271e3bcba9676d06cbea3d87a1c49467.png)
リンクされた状態で再度テキストを選択すると入力したURLが表示されます。
![リンク確認](https://panadablog.com/wp-content/uploads/2020/07/5R1IFn6JLb9fYZX1593673348_1593673412.png)
リンクを解除するには…
テキストを選択した状態で解除アイコンをクリックするとリンクを解除できます。
解除アイコンは先ほど鎖アイコンだった部分にあたります。
![リンク解除](https://panadablog.com/wp-content/uploads/2020/07/HUS0aqhY81xtl1u1593673528_1593673687.png)
ここまでがテキストリンクの貼り方です。
次はテキストリンクを応用したアンカーリンクを紹介します。
アンカーリンクの貼り方
![イカリ](https://panadablog.com/wp-content/uploads/2020/02/d972317bc4a42ad3a3128a93b00e02df-1024x576.png)
通常テキストリンクはリンク先ページの先頭へジャンプしますが、ここで紹介する「アンカーリンク」はページの途中や特定の見出しへジャンプさせることができるリンクです。
![アンカーリンク例](https://panadablog.com/wp-content/uploads/2020/02/a2c455b8dec4b18408d4b0ad5650e0ee-1024x576.png)
アンカーリンクはテキストリンクに少しだけ手を加える必要があるので別個に手順を解説しています。詳細は以下の記事をご覧下さい。
手を加えると言っても大変な作業は無く5分程度あれば簡単に作れます!
YouTubeリンクの貼り方
![YouTube](https://panadablog.com/wp-content/uploads/2020/07/ceaa5657f22ea00bb903b7fadda36e37-1024x576.png)
続いてはYouTubeの動画リンクの貼り方です。近頃はYouTube動画を参考文献にする方法も多く採られているため覚えておいて損はありません。
といってもこちらは小難しい手順はありません。
対象の動画を開きURLをコピーした後…
![YouTube動画URL](https://panadablog.com/wp-content/uploads/2020/07/22aA12XOWsNXYxN1593675411_1593675447.png)
記事内にペーストするだけ。
これで完了します。
![記事内へのYouTubeリンク貼り付け](https://panadablog.com/wp-content/uploads/2020/07/eede9169f40167e00a7c3ee9a839153b.jpg)
一応エディタ内にYouTubeの埋め込み用ブロックはありますが、直接URLを貼り付けても自動的にYouTubeの動画リンクと判断してくれるのでURLコピペが最も簡単です。
動画の開始位置を指定して貼る
動画を最初からではなく再生開始位置を指定して貼り付ける裏技も載せておきます。
長い動画であったり、ピンポイントでここを見てほしい!という場合に便利です。
まずはYouTube側で開始位置に指定したい部分で動画を停止しておきます。
その後動画欄の右下にある「共有」を選択。
![共有](https://panadablog.com/wp-content/uploads/2020/07/7228119b8be5e8fc301873a7efe68a6f-1024x156.png)
①共有メニューで「開始位置」にチェック。
②URLをコピーして記事内にペースト。
![開始位置指定](https://panadablog.com/wp-content/uploads/2020/07/lhc7aqR69zaOPZQ1593676589_1593676815.png)
開始位置の横に出ている時間は先ほど停止した部分の時間で、リンクとして貼り付けた際はこの位置から再生されることを表しています。
①→②の順番でURLをコピーしないと最初から再生されてしまうので注意しましょう。
YouTube動画のリンクの貼り方は以上です。
ブログカードの貼り方【Cocoonユーザー向け】
![ブログカードCocoon](https://panadablog.com/wp-content/uploads/2020/07/63689c95f130b65f17a92786ecd10a6e-1024x576.png)
続いてはアイキャッチ画像と大き目サイズのカード型が特徴的なブログカードの貼り方を解説致します。
こちらはブログテーマによって貼り方が異なります。今回は当サイトの使用テーマ「Cocoon」で説明していきます。
Cocoon以外をお使いの方は使用テーマのエディタからブログテーマを探してみてください。多くの場合はほぼ同様の貼り方ができます。
- エディタから「Cocoonブロック」内にある「ブログカード」を選択
- ブログカードのボックス内にURLを貼る
- ラベルを設定する
①エディタから「Cocoonブロック」内にある「ブログカード」を選択
![エディタブロックブログカード選択](https://panadablog.com/wp-content/uploads/2020/07/s9hzlEspLyANT5p1593679368_1593680323.png)
選択後、以下のような灰色のボックスが出てくればOKです。
![ブログカードボックス](https://panadablog.com/wp-content/uploads/2020/07/ea2335cf7580669027c92fa188eff09e.png)
②ブログカードのブロック内にURLを貼る
灰色ボックスの中間より少し下あたりをクリックしてください。
少し見つけにくいですが、テキスト入力欄があります。
入力欄が見つかったらリンクしたいURLを貼り付けます。
![ボックス入力](https://panadablog.com/wp-content/uploads/2020/07/64b00ee8426a569dd9adfbf6d47f54ee.png)
③ラベルを設定する
URLを貼り終えたら最後にラベルを設定します。
ラベルは右側の「スタイル設定」から選択できます。
ここでは「参考記事」を選んでみました。
![ラベル設定](https://panadablog.com/wp-content/uploads/2020/07/pvhA9Ciasslt7jE1593681316_1593681556.png)
完成したブログカードがこちら↓
![ブログカード例](https://panadablog.com/wp-content/uploads/2020/07/30977c3de2f9994ff23b20d9fcbd3462.png)
因みにボックス内に複数URLを入力することもできます↓
![URL複数入力例](https://panadablog.com/wp-content/uploads/2020/07/075ec6902389c60741d27f19a4bcd88b.png)
複数入力した際の表示のされ方↓
![複数入力ブログカード](https://panadablog.com/wp-content/uploads/2020/07/57d9ddf31aacd61b3513291d7215d3e1.png)
ブログカードを使用することで記事の彩りが豊かになりますが、占有面積が大きめでスマホから見ると画面の約3分の1を占めるという諸刃の剣でもあります。
ブログカードを3つ並べたものをレスポンシブテスト(スマホでの見た目を確認できる機能)で見てみるとこんな感じに…↓
![レスポンシブテスト](https://panadablog.com/wp-content/uploads/2020/07/8b0f3d820d37da3a5249eb710a62fcc5.png)
一画面に2つ以上並ぶとスクロールが必要になってしまうので、使いどころに気を付けて活用すべきだといえます。
まとめ:リンクの貼り方をマスターしよう
![ブログまとめ](https://panadablog.com/wp-content/uploads/2020/05/79e21f113ba46dadf8b8dee26d1b5f27-1024x576.png)
以上が覚えておくべきリンクの貼り方4パターンの紹介でした。
ここで解説した4つをマスター出来ればリンク設置で困ることはほぼ無いかと思います。
もし使いどころに迷ったらとりあえずテキストリンクを使うのが無難。設置方法も楽でクリックもされやすいのでおすすめです。
リンクは読者にサイトを見回ってもらうための大切な導線となるので、是非とも記事に活かしていきましょう!
コメント