Random Life Blog

日々のあれこれ

記事のリンクを枠で装飾するカスタマイズ

スポンサーリンク

記事リンクを枠で装飾するカスタマイズ

記事リンクを枠で装飾するカスタマイズ

みなさん、こんばんは。

ここ1週間くらいはてなブログのカスタマイズを記事にしてますが、カスタマイズもそろそろやることが無くなってきました。

今日は、記事のリンクを目立たせるカスタマイズをやってみようと思います。

「関連記事」とか「あわせて読みたい」とか表示するあれです。

 

記事リンク

はてなブログでは記事のリンクを作るのは簡単ですよね。

f:id:samada:20190514233334p:plain

リンクボタンをクリックして記事のURLを入力すれば、ブログカード、記事タイトルのリンク、URLのリンクが自動で生成され選択して貼り付けることができます。

この中でも「ブログカード」は情報量も多く貼り付けるにはもってこいですが、やや大きすぎたり、もう少しシンプルにリンクを貼りたいと思う方も多いはずです。

目立ち度では

記事タイトルリンク < これから作るリンク < ブログカード

という風な感じのものを作っていきたいと思います。

 

参考にさせて頂いたブログは以下↓

www.notitle-weblog.com

 

CSSを貼り付け

まずはCSSを貼り付ける作業から。

 

f:id:samada:20190508201917p:plain

はてなブログの設定画面の左メニューの【デザイン】をクリック。

 

f:id:samada:20190508201625p:plain

パナマークの【カスタマイズ】をクリック。

 

f:id:samada:20190508201649p:plain

一番下にある【デザインCSS】にCSSのコードを貼り付けます。

 

f:id:samada:20190514233412p:plain

貼り付けたら【変更を保存する】をクリックしてひとまず終了です。

 

貼り付けるコード

.entry-content .emphasize-link {

position: relative;

margin: 36px 0 16px;

padding: 16px 10px;

border: 2px solid #000000;

background-color: #ffffff;

}

.entry-content .emphasize-link p:last-child {

margin-bottom: 0;

}

.entry-content .emphasize-link::before {

position: absolute;

bottom: 100%;

left: -2px;

padding: 2px 6px;

content: "あわせて読みたい";

background-color: #000000;

color: #fff;

font-weight: bold;

}

 

 

全体を黒、背景色を白にしてみました。

ちょっと野暮ったい感じかな・・・。

5行目のborder: 2px solid #000000;が枠の色です。太さが2pxで色が黒。

6行目のbackground-color: #ffffff;が背景色。白にしました。

content: "あわせて読みたい";の「あわせて読みたい」の部分を「関連記事」や「おすすめ記事」なんかに変更してもOKです。

その下のbackground-color: #000000;は「あわせて読みたい」の背景色です。ここも黒に。

 

CSSを貼り付けたら実際に記事に反映させる方法をみていきましょう。

 

リンクの作り方

まずは【見たままモード】で記事のリンクを作ります。

そうしたら【HTML編集】に切り替えます。

 

<p><a href=“https://○○○○○○○○.hatenablog.com/entry/○○○○”>●●●●●●</a></p>

 

上記のように記載されていると思います。

ここで最初にある<p>の部分に書き足していきます。

 

<p class=“emphasize-link”><a href=“https://○○○○○○○○.hatenablog.com/entry/○○○○”>●●●●●●</a></p>

 

先頭の<p>を<p class=“emphasize-link”>に書き換えましょう。

これで出来上がりです。 

 

実際のリンクでみていきましょう。

下が装飾される前の普通のリンク。

 

はてなブログのサイドバーモジュールタイトルのカスタマイズ方法 - Random Life Blog

 

これを装飾するため、一旦、【HTML編集】に切り替えます。

そうするとこんな感じ↓になっているはずです。

 

<p><a href="https://randamlife.hatenablog.com/entry/2019/05/14/200000">はてなブログのサイドバーモジュールタイトルのカスタマイズ方法 - Random Life Blog</a></p> 

 

これの<p>の部分に class="emphasize-link" を書き加えます。

<p>を<p class="emphasize-link">に置き換えると説明したほうが分かりやすいかもしれませんね。

 

<p class="emphasize-link"><a href="https://randamlife.hatenablog.com/entry/2019/05/14/200000">はてなブログのサイドバーモジュールタイトルのカスタマイズ方法 - Random Life Blog</a></p>

 

そうすると、こうなります↓

 

 

これで出来上がりです。

記事作成時には【プレビュー】でデザインを確認できます。

【見たまま】ではデザインが反映されません。

【プレビュー】で確認してください。

 

記事の装飾リンクの作り方まとめ

好きなデザインのCSSを選び、枠の色や背景色を変えてみたりして【デザインCSS】に貼り付けて、本文上にリンクを作ります。

【HTML編集】に切り替えて、リンクの先頭にある<p>を<p class="emphasize-link">に書き換えれば出来上がりです。

 

 

 

 

randamlife.hatenablog.com