ことから暮らしのアイテムブログ運営WordPressブログの始め方アクセスアップブログカスタマイズ雑記お問い合わせ買って良かった睡眠系アイテムホームブログ運営ブログカスタマイズCSSコピペで完了!「あわせて読みたい」リンクをWordPressで設置しよう!本サイトのコンテンツには、プロモーションが含まれている場合があります。2023年12月18日SHAREポストシェアはてブLINEブログでよくみかける「あわせて読みたい」のリンク、設置してみたいなと思う人はいませんか?実は、コピペだけで簡単につくれてしまいます。この記事では、「あわせて読みたい」のリンクの作り方を2種類、紹介します。同じタブへ飛ぶ「あわせて読みたい」の作り方とCSS別のタブへ飛ぶ「あわせて読みたい」の作り方とCSSあわせて読みたいのリンクの下線を引かないためのCSSあわせて読みたいの中にいくつもリンクを入れるあわせて読みたいリンクの作成方法まとめ「あわせて読みたい」リンクの完成品2種類あるのですが、まずは1つ目の、同じタブのまま飛ぶリンクです。ブログのTOPページへ戻れるよクリックするとブログのTOPへ戻ることができます。どこへ遷移するのか、タイトルは何かというのも、もちろん変更可能です。タイトルが試験的なものなので変に見えますが、記事のタイトルならびしっと決まること間違いなし(笑)続いて2つ目の、別タブで飛ぶリンクです。ブログのTOPページへ戻れるよクリックして違いを確かめてみると分かりやすいです。同じタブで遷移するものと別のタブで遷移するものを分けたかというと、ユーザにとって便利だからです。記事の途中に「こんな記事も参考になりますよ」というのは別のタブに飛ばしてあげたほうがもともと読んでいた記事に戻ってきやすいです。記事の最後なら「帰る前にこれもどう??」という感覚で同じタブで飛ばしてあげると、(もともと読んでいた記事に戻る必要はないので)ユーザにとって楽です。同じタブへ飛ぶ「あわせて読みたい」の作り方とCSSでは、同じタブで遷移するリンクの作り方です。HTMLはこのようになっています。0px;}これで、完成します。HTMLはWordPressだと、カスタムHTMLブロック内に書き込んでください。CSSについては、「外観」→「テーマファイルエディタ―」→「style.css」の一番下にコピペです。別のタブへ飛ぶ「あわせて読みたい」の作り方とCSSHTMLはこのようになっています。長いのでコピペするときはスライドして見てください。/*リンクの色と同じにする*/}リンクの最後に「別のタブへ飛びますよ」というアイコンもつけています。ここのアイコンの色は、各自リンクに指定している色と同じになるように変えてくださいね~。あわせて読みたいのリンクの下線を引かないためのCSSここは各自のお好みで。あわせて読みたいのリンクには下線を引かないようにし、マウスがホバーしたときに下線が現れるようにしたい場合はCSSに追記してください。underline;}上記のコードを追記するだけでOKです。underline;}これも追記すればできます!あわせて読みたいの中にいくつもリンクを入れるこういった使い方もできます。リンクふたつめこれのコードは、↓こんな感じになっています。href="https://maipyon.net/">リンクふたつめ</a></div>中身のaタグを増やすことによって、いくらでもリンクをふやすことができます。同様に、別タブに飛ばすHTMLコードも、aタグを中に増やすことでいくらでもリンクを増やすことができます。あわせて読みたいリンクの作成方法まとめあわせて読みたいのリンクを2種類紹介しました。内側にあるリンクの色ですが、今回は特に指定をしていないので皆さんがaタグ(リンクの色)に指定している色と同じになります!単純なリンクよりも、デザインされたリンクの方が目につくこと間違いなしですし、回遊率もあがります。ブログカードをプラグインなしでサクッと作成する方法を紹介します。画像付きのリンクなので、リンクのクリック率も上がるので、一番オススメのリンク。デザインは2通り紹介しています。【WordPress】タイトルを画像に変更しておしゃれなデザインにする方法この記事を書いた人maipyonWebクリエイターWeb系エンジニアのブロガーうさぎ。ガジェットレビュー・暮らしの中で役立ったアイテム・ブログ運営などを思うがままに書いています。「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。雑記お問い合わせmaipyonWeb系エンジニアのブロガーうさぎ。ガジェットレビュー・暮らしの中で役立ったアイテム・ブログ運営などを思うがままに書いています。「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。