はてブリンクを目立たせようクリックして欲しいリンクがある時、ただ単にリンクを貼るのではなく枠で囲って目立たせてみましょう。できる限りコードはシンプルに、コピペだけでできるようにしました。枠がない場合はこんな感じですね。SHIROMAGこれを枠で囲って強調するようにカスタマイズします。CSSまずはCSSにコードを追加していきます。以下の中から好きなコードを選んで、ダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」に追加して下さい。囲んでヘッダーのタイトル下にでもぶっこんでください。"あわせて読みたい";この部分を任意の文に書き換えて下さい。#カラーコード;この部分を変更すると色を変えられるので、好きな色に変えて下さい。カラーコードはこちらで調べて下さい。www.color-sample.comここでいくつかデザイン例を載せておきます。"あわせて読みたい";この部分を任意の文に書き換えて下さい。#カラーコード;この部分を変更すると色を変えられるので、好きな色に変えて下さい。カラーコードはこちらで調べて下さい。"\f010";この部分がアイコンを指定するコードです。これを書き換えてアイコンを変えることができます。アイコンを指定するコードはこちらの記事を参考にしてください。shirokai.hatenablog.comここでいくつかデザイン例を載せておきます。0.3s;}ボタンっぽいリンクボタンっぽいリンクにできます。文字数が多いと微妙かも。0.3s;}記事で使ってみる好きなコードを選んでCSSに追加したら、記事内で使ってみましょう。p要素にクラスを指定します。見たままモード見たままモードでタイトルのリンクを貼って、HTML編集に切り替えると以下のようなコードになります。SHIROMAG</a></p>強調したいリンクのp要素にクラスを指定してあげるだけでOKです。SHIROMAG</a></p>Chrome拡張機能で簡単に<p>タグにクラスを指定することができますが、リンクが外れてしまうので再度リンクを貼りなおす必要があります。Class」をクリックして下さい。リンクが外れてテキストだけになってしまうので、再度リンクを貼ればOKです。Markdown編集Markdownでは、記事タイトルでリンクを貼るのは以下のように書きますね。[https://www.notitle-weblog.com/entry/hatena-customize:title]<p>タグで囲ってあげればOKです。SHIROMAG</a></p>このコードを<div>タグで囲ってあげればOK。念のためにバックアップを取って下さい。カスタマイズは自己責任でお願いします。不具合が生じても責任は負いかねます。他にもこんな記事書いてます。はてブ次の記事シーズン3配信日決定!Netflixの『フラーハウス』が面白すぎる。PMコードをそのままコピーして、はてな「デザインCSS」のところ貼り付けましたが、機能していないそうです。PMid:nburiCSSは問題なく貼り付けられてますね。AMこんにちは、はてなブログの「デザインCSS」に貼り付けました。購入に関するご案内」というところリンクしたいが「あわせて読みたい」という枠線がありませんね。PMid:nburiHTML編集でpタグにclass=”emphasize-link”を追加して下さい。ソースコードを見たところ挿入されていませんでした。ありがとうございます。PM上手く反映されなくて、何が原因でしょうか?はてな記法で書いているんですが、同じようにクラス指定してpタグで囲っても反映がうまくできませんでした。pcでは記事の上の方に合わせて読みたいのマーク、携帯では反映されなかったです。PMありがとうございました。.1つでこんな差が出るものなんですね。PMとても素敵なカスタマイズで利用させていただきました。ありがとうございます!しかしスマホでは上手くいったのですが、PCだとなぜかアイコンがページ上部に表示されてしまって...。AMたびたび申し訳ありません。何度か貼り直しをしたところ、反映されました。お騒がせしてすいません。コメントをキャンセルお気軽にコメントしてください!!コメント名前・メールの入力は任意です。名前メールアドレスサイト関連記事はてなブログのスマホ表示でスクロールが引っかかるのを解消する【はてなブログカスタマイズ】タイムセールなどで指定の時間だけテキストを表示させる方法ブログのネタに使えそうなサイトを集めてみたYouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった私がアメブロを辞めてはてなブログを始めた理由Search運営者情報SHIROMAブログ運営で独立し、現在は会社を経営しています。WEBデザインやWordPressテーマの制作なども行っています。