>>アフィリエイトで毎月20万円の報酬が発生する仕組みを作る方法をメール講座にしました

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




こんにちは。ゆかです(^^)

WordPressの記事内にリンクを貼ることって良くありますよね。

その時に、リンクだけって味気ないなぁって感じることがあります。

そして他の方のブログとか見るとこんなのをよく見かけるんです。

↓ ↓ ↓

これってどうするんだろうなぁって感じていました。

テーマによって出来るとか出来ないとか関係しているんだろうなぁって勝手に思っていて、わたしのでは、出来ないって諦めていました。

ですが、最近調べてみたら、わたしのWordPressにも出来るということを発見したのです!!

嬉しかったので備忘録として残しておきます(∩´∀`)∩

 

◆ちなみに、おしゃれに別記事を見せたいときは、ブログカードがオススメですので、こちらも参考にしてみてください。

『あわせて読みたい』をブログカードで見せて回遊率をアップさせる方法

 

◆WordPressのテーマで『AFFINGER5(アフィンガー5)』の方はこちらの記事を読まれてください。

AFFINGER5(アフィンガー5)でブログカードを作成する方法

 

『あわせて読みたい』カスタマイズ方法

凄く簡単な方法でした。CSSコードを追加するだけでカスタマイズできました。

CSSを追加する際の注意点ですが、何が起こっても元に戻すことが出来るように、必ずバックアップを取ることをお勧めします。

 

※CSSとは、カスケーディング・スタイル・シートと言い、ブログやHPのデザイン部分を決めているコードになります。

CSSカスタマイズ

下記コードがありますので、まずはこのコードをコピーします。

 

/* ===================================================
あわせて読みたい 複数リンク対応カスタマイズ
=================================================== */
.emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #df8182;
background-color: #fffbf5;
}
.emphasize-link p:last-child {
margin-bottom: 0;
}
.emphasize-link::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: "あわせて読みたい";
background-color: #df8182;
color: #fff;
font-weight: bold;
}

 

そしてコピーしたコードを追加CSSへ貼り付けします。

追加CSSは、【外観】【カスタマイズ】をクリックします。

 

左サイドバーにカスタマイズ画面が表示されます。 それの一番下の追加CSSをクリックします。

 

一番下の行にコピーしたコードを追加します。

 

貼り付けが出来たら【公開】をクリックします。

これでCSSのカスタマイズは完了です。

 

投稿方法:リンク1つ

投稿のページで「あわせて読みたい」を入力したい場所にテキストモードで下記のHTMLタグを入力してください。

<p class=”emphasize-link”><a href=”リンク先URL“>リンク先タイトル</a></p>

 

リンク先のURLは、飛ばしたいページのURLを入力します。 リンク先タイトルは、そのページのタイトルです。

例えば・・・

リンク先URLに「https://yuka001.com/netbusiness/womanbusiness/」

リンク先タイトルに「忙しい主婦が自由に生きられる働き方とは」を入力します。

<p class=”emphasize-link”> <a href=”https://yuka001.com/netbusiness/womanbusiness/“>忙しい主婦が自由に生きられる働き方とは</a></p>

 

するとこうなります。

 

 

これで「あわせて読みたい」が表示されました(∩´∀`)∩

 

投稿方法:リンク2つ以上

先ほどの投稿ではリンクが一つだけの方法でしたが、リンク先が2つ以上は下記のHTMLタグを入力してください。

<div class=”emphasize-link”> <p><a href=”リンク先URL1“>リンク先タイトル1</a></p> <p><a href=”リンク先URL2“>リンク先タイトル2</a></p> </div>

 

先ほどのご説明と同様で、投稿のページで「あわせて読みたい」を入力したい場所にテキストモードで上記コードをコピーして貼り付けてください。

 

例えばこのような感じです。

<div class=”emphasize-link”> <p><a href=”https://yuka001.com/report/easy-report-lab/”>【無料レポートの極意~Easy Report Lab~】坪井拓弥さんのレポート</a></p> <p><a href=”https://yuka001.com/report/merumagapop/”>【メルマガPOP】ぽっぷな発信をしているメイコさんのレポート☆</a></p> </div>

するとこうなります。

補足

わたしは、カラーコードを変更していますので、枠などが濃いピンクになっていますが、上記でお伝えしたCSSのコードをそのまま使用すると薄いピンクとなります。

カラーコードを変更したいときは下記の赤枠のカラーコードを変更してみてください。

そうすると自分の好きなカラーに変更することが出来ますよ(^^♪

この記事があなたのブログ作りにお役に立てることを願っています(∩´∀`)∩

 

上手く表示されないなどの疑問や質問などがありましたら、お気軽にわたしへお問合せくださいね(*^^*)

 

もっとWordPressに個性を入れていきたい、他の人と違った印象にしたいという方にはこちらの記事もおすすめですよ(*^^*)♪

WordPressの記事内の文字を動くマーカーでおしゃれに装飾するプラグイン『ZEBLINE(ゼブライン)』の設定方法と使い方

 

シェアしてね♪


ブログ記事を書いても一向に成果が出ない!
心が折れそうな思いをするのはもう終わりにしませんか?


登録は無料!解除はいつでも自由! 興味のある方はご登録くださいね!!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUT US

アフィリエイター兼WEB制作マーケター
パソコンが苦手な初心者さんのブログ運営をサポートしたり、代行でWordPressの立ち上げをしています。 WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。

1日15分から始める無料メール講座

カテゴリー

あなたにおすすめサービス♪