ブログ

    はてなブログ・リンクを目立たせるコピペカスタマイズ

    はてなブログ・リンクを目立たせるコピペカスタマイズ

    はてなブログに限らず、ウェブサイトのリンクって「こんな感じ」ですよね。

    それをちょっとカスタマイズして目立たせましょう。

    やっぱりリンクが目立つことによってクリック率が上がるので、PV数も増えるし、良いことだらけだと思います。

    はてなブログのリンクの貼り方

    まずはてなブログのリンクの貼り方ですが、

    1. ブログカード
    2. タイトルをそのまま表示する
    3. URL

    の時は、Ctr+VボタンでURLを貼り付ければこのようなポップアップが出てきて、選べます。

    はてなブログ リンクの貼り方

    記事のタイトルと違う文字にリンクを貼る場合は、指定の文字を選んで、リンクボタンを押し、テキストリンクを選びます。

    はてなブログ テキストリンクの作り方

    実際に私はテキストリンクをよく使っているのですが、「テキストリンクの使い方!これを学べば収益・PVがぐっと上がるよ」で詳しい使い方を紹介しているので、一緒にどうぞ。

    ブログカードもそこそこかっこいいので昔は使っていましたが、「今スグできる・はてなブログの高速化9つの対処法」でも紹介したように、重いんですよね。表示速度が少しですが遅くなるので使うのをやめました。

    今回はこのテキストリンクをかっこよく表示するように、枠をつけてこんな感じにしましょう。(色は変えれますので、ご心配なく(笑))

    はてなブログ リンクを枠で囲って目立たせるカスタマイズ

    リンクに枠をつけるCSS

    下記のコードを、デザインCSSに貼り付けます。場所は「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」です。

    はてなブログ カスタマイズ リンクを囲って目立たせるCSS
    .entry-content .emphasize-link {
    position: relative;
    margin: 36px 0 16px;
    padding: 16px 10px;
    border: 2px solid #df8182;/* 枠の色 */
    background-color: #fffbf5;/* 背景色 */
    }
    .entry-content .emphasize-link p:last-child {
    margin-bottom: 0;
    }
    .entry-content .emphasize-link::before {
    position: absolute;
    top: -12px;
    left: 10px;
    padding: 0 10px 0 26px;
    content: "関連記事";
    background-color: #df8182;/* 文字背景色 */
    border-radius: 10px;
    color: #fff;/* 文字色 */
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    }
    .entry-content .emphasize-link::after {
    position: absolute;
    top: -16px;
    left: 4px;
    width: 28px;
    height: 28px;
    background-color: #df8182;/* マーク背景色 */
    border-radius: 14px;
    line-height: 25px;
    text-align: center;
    content: "\f010";
    font-size: 18px;
    font-family: "blogicon";
    color: #fff;/* マーク色 */
    }

    注)枠の色や背景の色解説している所の#以降の文字を変えたら、それぞれの色が変わります。色は原色大辞典よりどうぞ。

    はてなブログ リンクを枠で囲って目立たせるカスタマイズ

    次は使い方です。見たまま編集ではできないので、HTML編集モードでやります。

    例)リンクをつけた状態の「記事はこちらから」をHTML編集で見ると、このようになります。

    • <p>記事は<a href=”https://www.gipsyjazznyumon.com/life/hatenablog-matome”>こちら</a>から</p>

    これに<div class=”emphasize-link”></div>をつけ足します。

    • <div class=”emphasize-link”><p>記事は<a href=”https://www.gipsyjazznyumon.com/life/hatenablog-matome”>こちら</a>から</p></div>

    これだけです。

    例2)「はてなブログ・目次と見出しのカスタマイズ!コピペのみで5分でできるよ」であれば、こうなります。

    • <p><a href=”https://www.gipsyjazznyumon.com/life/customise-on-a-table-of-contents-and-heading”>「はてなブログ・目次と見出しのカスタマイズ!コピペのみで5分でできるよ」</a></p>

    これに<div class=”emphasize-link”></div>をつけ足して

    • <div class=”emphasize-link”><p><a href=”https://www.gipsyjazznyumon.com/life/customise-on-a-table-of-contents-and-heading”>「はてなブログ・目次と見出しのカスタマイズ!コピペのみで5分でできるよ」</a></p></div>

    お次はこのように2行にする場合を紹介します。

    はてなブログ リンクを枠で囲って目立たせるカスタマイズ

    2行以上あっても使い方は同じで、<div class=”emphasize-link”></div>で囲います。

    • <div class=”emphasize-link”><a href=”https://www.gipsyjazznyumon.com/life/hatenablog-matome”>はてなブログの高速化1</a><p><a href=”https://www.gipsyjazznyumon.com/life/hatenablog-matome”>はてなブログの高速化2</a></p>
      </div>

    基本的に、<div class=”emphasize-link”></div>で囲えばOKです。

    最後に

    これでリンクが目立つので、クリックされる可能性は上がりますね。

    もしこの方法で囲いが使えない場合は、もうすでに似たようなCSSを書いている可能性があるので、チェックしてみて下さいね。