2017/09/28

「あわせて読みたい」のリンクをWordPressで設置する方法

 
あわせて読みたいをWordPressで作成する方法

この記事を書いている人 - WRITER -
y-hey
ブロガー・アウトドアライフクリエイターとして 多くの人にキャンプ、登山、旅行について興味を持ってもらい ”人生を120%楽しんでもらいたい”と考えている男です。 2児の父ですが単独で南米最高峰アコンカグアや アフリカ最高峰キリマンジャロを一眼レフカメラと共に登ったり (普段は自称イクメンです)空手もやってる多趣味な男です。 ブログは2005年から書いています。(当サイトは2015年からです) 2017年8月に月間50,000PV突破しました! もし記事を読んで「役に立った」「面白そう」「笑えるわー」 と思われた方は、いいね、ツイート、はてぶ していただけますと更新の励みになります。 よろしくお願いします!
詳しいプロフィールはこちら

当ブログを読んでいただきありがとうございます。
ブログを12年書いているy-heyです。

ブログを書いている方なら、ご自身のブログの関連記事を紹介したい場合って結構ありますよね?

 

そんな場合、テキストリンクだけだとなんかちょっとシンプルすぎるというか、
もう少しかっこよくしたいなー、と思ったことありませんか?

というわけで、以前は↓の記事にて「あわせて読みたい」というタイトルと共に
枠をつけてリンクをかっこ良く装飾する方法をお伝えしました。

WordPressのリンクに枠を付けてカッコよくする方法!

 

この記事のコメント欄で質問を受けたのですが、
複数のリンクを貼りたい場合、この方法では対応するのが難しかったため
今回は複数のリンクも貼れる方法を書きますね。

 

完成イメージは↓のようになります!

リンクが1つの場合

 

リンクが2つ以上の場合

 

元のテキストリンク(↓の文字だけのリンク)

グーグルの人に教わった検索上位に入るためのたった一つのコツ

よりなんかクリックしたくなる気がしませんか? クリックしたくなりますよね?
お願いだからクリックしたくなると言って!

ふぅ、すこし取り乱してしまいましたが、今回はその設定方法をお伝えします!

 

「あわせて読みたい」リンクを作成する方法 (WordPress)

1. 事前準備編 CSSをカスタマイズ

まずはCSS(カスケーディング・スタイル・シートと言い、ブログやHPのデザイン部分を決めているコード)
をカスタマイズするのですが、何かあってもいいように
念のため事前にバックアップを取っておくことをオススメします。

(関連記事:初心者でもワードプレスのバックアップを確実に取る方法!

さて、↑の記事を読んでバックアップをしっかりとったら
ここからCSSのカスタマイズに入ります。

 

ちなみにCSSをカスタマイズする場合は子テーマを作っておくと良いです。

子テーマにすれば親テーマがアップデートされた場合でもCSS変更箇所がリセットされません。
詳しくは別記事で解説しています。

 

 

それではCSSを編集していきましょう!

まずはWordPressの管理画面を開き、外観→CSS編集を行います。

テキストリンクをカスタマイズ1

 

そして最初に紹介しましたおすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズのサイトに掲載してありました以下のコードをコピーして貼り付けます。
元サイト様、役立つコードの作成ありがとうございます!

(参照元サイト:おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ

2017.9.28修正:CSSコード内4,11,14行目のクラスセレクタを一部削除し、どのテーマでもCSSが反映されるようにしました。

 

WordPressの画面では↓のようなカンジになるかと思います。

テキストリンクをカスタマイズ2

 

無事にコピペが完了しましたら
「スタイルシートを保存」をクリックします。

テキストリンクをカスタマイズ3

 

無事に保存できたら↓のように「スタイルシートを保存しました」とメッセージが出ます。

テキストリンクをカスタマイズ4

これでCSSのカスタマイズは終了しました。

 

2. 投稿編 新規投稿時に以下のコード追加

リンクが1つの場合

今度はいつも投稿する時のように新規投稿画面に行きます。

テキストリンクをカスタマイズ5

 

「テキスト」をクリックしてテキストモードにします。

テキストリンクをカスタマイズ6

 

そこで以下のコードを貼り付けます。

(参照元サイト:おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ

 

あわせて読みたい HTMLコード1

 

コード内の「リンク先URL」の部分を リンクさせたい記事のアドレスに変更し、
(例:https://y-hey.com/blogwriting-shorter/)

「リンク先タイトル」の部分を リンクさせたい記事のタイトルに変更します。
(例:ブログ書く時間を1/3に短縮するたった一つの大切なこと)

最初の例の場合のようですと↓のようになります。

 

すると↓のようなリンクになります! やったー!

 

リンクが2つ以上の場合

リンクが2つ以上ある場合は 記事投稿画面で同じくテキストモードにした状態で

とdivタグを使って囲んだコードをコピペすればOKです。

あわせて読みたい HTMLコード2

 

コード内の「リンク先URL1」の部分を 最初にリンクさせたい記事のアドレスに変更し、
(例:https://y-hey.com/googlesearch-rank/)

「リンク先タイトル1」の部分を リンクさせたい記事のタイトルに変更します。
(例:グーグルの人に教わった検索上位に入るためのたった一つのコツ)

そして、コード内の「リンク先URL2」の部分を 2番目にリンクさせたい記事のアドレスに変更し、
(例:https://y-hey.com/wordpress-display/)

「リンク先タイトル2」の部分を 2番目にリンクさせたい記事のタイトルに変更します
(例:WordPressが表示される仕組みとは? WordPressブロガーが知っておくべき基礎知識)

 

すると、↓のようなリンクになります!

pタグでリンクを追加すれば3つ、4つ以上でもできますよ!

 

スポンサーリンク

まとめ

今回はWordPressのブログやサイトで「あわせて読みたい」という枠を作って
リンクをカスタマイズする方法を紹介しましたがいかがでしょうか?

ブログを投稿する際にテキストモードにして
以下のコードを貼り付けるだけでいい感じなリンクにすることができます。

リンクが1つの場合

 

リンクが2つ以上の場合

(参照元サイト:おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ

 

投稿毎に必要になるコードですので
ご自分がお使いのパソコンのメモ帳やワード等にコピペするか、
WordPressのプラグイン、「Add Quick Tag」を使って設定しておけば
ブログ投稿時の作業性があがると思いますよ。

この記事を読んであなたのブログライフがちょっとだけ豊かになれば幸いです。
最後までお読み頂き本当にありがとうございました。

 

↓さっそく使ってみました!(笑)

 

スポンサーリンク
この記事を書いている人 - WRITER -
y-hey
ブロガー・アウトドアライフクリエイターとして 多くの人にキャンプ、登山、旅行について興味を持ってもらい ”人生を120%楽しんでもらいたい”と考えている男です。 2児の父ですが単独で南米最高峰アコンカグアや アフリカ最高峰キリマンジャロを一眼レフカメラと共に登ったり (普段は自称イクメンです)空手もやってる多趣味な男です。 ブログは2005年から書いています。(当サイトは2015年からです) 2017年8月に月間50,000PV突破しました! もし記事を読んで「役に立った」「面白そう」「笑えるわー」 と思われた方は、いいね、ツイート、はてぶ していただけますと更新の励みになります。 よろしくお願いします!
詳しいプロフィールはこちら
 

Copyright© 登っちゃえば? , 2017 All Rights Reserved.