オタクの戯言

オタクが思うがままに書き連ねていく、とりとめのないブログです

はてなブログでリンクをオシャレに囲う際、余白を無くす方法(囲い枠・ボックスデザイン)

スポンサーリンク

はじめに

当ブログにお越しいただき、恐悦至極にございます。あにおです。


f:id:aniota-alvarado:20171108192707p:plain

色々な人のブログを拝見していて、そこそこの頻度で目にする度に自分もやりたい!と思っていたことがあります。

それは、過去に書いた自分の記事のURLを貼り付け、「関連記事」だったり、「Check!!」だったりで強調しつつ、枠で囲むという手法です。

今回、実際に調べてみてちょっと躓いたところがあったので、その辺りを詳しく書いていきたいと思っています。


それでは、最後までお付き合いいただければ幸いです。

最初に参考にしたやり方だと、上のほうに空白(余白)ができてしまった

あの枠で囲ってオシャレな良い感じに強調する手法が、一体何と呼ばれているのかわからなかったので、とりあえず「リンク 囲む 方法」とかで調べてみることにしました。

それで出てきた一覧を見て、この手法が「ボックスデザイン(囲み枠)」という事を知ります。

やり方もかなり丁寧に書いてくださっているサイトを発見し、言われた通りにコードを「デザインCSS」に貼り付け、試しに記事を書いてみると・・・、

リンクの上のほうに不自然な空白が!?


うーむ、これはどうしたもんかと思って色々と調べてみたところ、コードの「padding」の値をいじれば余白部分が調節できるようです。

値についてはpx(ピクセル)だったり、em(エム)だったりと異なるようですが、そこら辺は気にせずその前にある数字をいじくって微調整しました。

が、どう頑張っても改善しない!

これはどうやら、私が情弱というのももちろんあるとは思いますが、使用しているはてなブログのテーマとの相性が悪いというのもありそうです。

そこで、別のデザインのもので試してみることにしました。

使用しているテーマ「CONTENTS」と相性の良かったボックスデザイン

あれこれ調べてみた結果、以下の「あさくまろん」さんで紹介されていた、「NO TITLE」さんが載せてるボックスデザインとの相性が良いようでした。

どうです?不自然な空白(余白)もなく、それっぽく表示されているでしょう?

言われた通りやっただけで、私は何一つ工夫していないのでドヤ顔になる資格は一切ないんですけど、嬉し過ぎて思わずドヤってしまいましたよね。

一度この余白問題に関して挫折していたので、本当に助かりました。この場を借りて厚く御礼申し上げます。



ちなみに、中に表示されるURLですが、私はコードを覚えていないし他に有効なやり方も知らないので、いちいちリンクを適当な個所にコピペして、出てきたものをカットして貼り付けています。
f:id:aniota-alvarado:20171108190528p:plain
こんな感じで、一度はてなの「リンクを挿入」の機能を経由するわけです。

地味に面倒なので、もっと良いやり方があれば是非教えてください!(必死)

おわりに

ブログのアクセス数を増やす際に、自分の過去に書いた記事で関連するものを紹介するというのは結構重要だと聞いたことがあります。

もっとも、はてなの標準機能であるブログカードなんかは、あまり良くないという話があるとかないとか・・・。

そんな時、このボックスデザイン(囲い枠)で強調するという方法は、かなり有用なんじゃないでしょうか。

あなたがもし導入したはいいけどどうも上手くいかないなんてことがあるならば、同じように色々なタイプの物を試してみて下さいね。



長くなってしまいましたが、最後まで読んでいただきありがとうございました。

それでは、またのお越しをお待ちしております。

Copyright © 2016-2018 オタクの戯言 All rights reserved.