リンクを目立たせよう
クリックして欲しいリンクがある時、ただ単にリンクを貼るのではなく枠で囲って目立たせてみましょう。
できる限りコードはシンプルに、コピペだけでできるようにしました。
枠がない場合はこんな感じですね。
必見!はてなブログのカスタマイズを一気に紹介する – SHIROMAG
これを枠で囲って強調するようにカスタマイズします。
CSS
まずはCSSにコードを追加していきます。以下の中から好きなコードを選んで、ダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」に追加して下さい。
スマホで使う場合は、<style> ~ </style> で囲んでヘッダーのタイトル下にでもぶっこんでください。
シンプルなタイプ
必見!はてなブログのカスタマイズを一気に紹介する – SHIROMAG
.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; bottom: 100%; left: -2px; padding: 2px 6px; content: "あわせて読みたい"; background-color: #df8182; color: #fff; font-weight: bold; }
これがベースで、コード内の、
content: "あわせて読みたい";
この部分を任意の文に書き換えて下さい。
background-color: #カラーコード;
この部分を変更すると色を変えられるので、好きな色に変えて下さい。カラーコードはこちらで調べて下さい。
ここでいくつかデザイン例を載せておきます。
必見!はてなブログのカスタマイズを一気に紹介する – SHIROMAG
.entry-content .emphasize-link { position: relative; margin: 36px 0 16px; padding: 16px 10px; border: 2px solid #ee7917; background-color: #fffbf5; } .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: "Check!!"; background-color: #ee7917; color: #fff; font-weight: bold; }
必見!はてなブログのカスタマイズを一気に紹介する – SHIROMAG
.entry-content .emphasize-link { position: relative; margin: 36px 0 16px; padding: 16px 10px; border: 2px solid #c62824; background-color: #fffafa; } .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: #c62824; color: #fff; font-weight: bold; }
アイコンが入ったタイプ
こちらはアイコンを入れたタイプ
.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; }
これがベースで、コード内の
content: "あわせて読みたい";
この部分を任意の文に書き換えて下さい。
background-color: #カラーコード;
この部分を変更すると色を変えられるので、好きな色に変えて下さい。カラーコードはこちらで調べて下さい。
content: "\f010";
この部分がアイコンを指定するコードです。これを書き換えてアイコンを変えることができます。
アイコンを指定するコードはこちらの記事を参考にしてください。
ここでいくつかデザイン例を載せておきます。
.entry-content .emphasize-link { position: relative; margin: 36px 0 16px; padding: 16px 10px; border: 2px solid #ee7917; 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: "Check!!"; background-color: #ee7917; 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: #ee7917; border-radius: 14px; line-height: 25px; text-align: center; content: "\f029"; font-size: 18px; font-family: "blogicon"; color: #fff; }
.entry-content .emphasize-link { position: relative; margin: 36px 0 16px; padding: 16px 10px; border: 2px solid #c62824; background-color: #fffafa; } .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: #c62824; 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: #c62824; border-radius: 14px; line-height: 27px; text-align: center; content: "\f009"; font-size: 16px; font-family: "blogicon"; color: #fff; }
ちょっと浮かすだけ
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】
.entry-content .emphasize-link a { display: block; padding: 16px; border: 1px solid #eee; box-shadow: 0 2px 2px rgba(0,0,0,.4); -webkit-transition: all .3s; transition: all 0.3s; } .entry-content .emphasize-link a:hover { box-shadow: none; -webkit-transition: all .3s; transition: all 0.3s; }
ボタンっぽいリンク
ボタンっぽいリンクにできます。文字数が多いと微妙かも。
.entry-content .emphasize-link a { display: block; position: relative; padding: 14px 30px 14px 16px; border: 2px solid #fff; color: #fff; text-decoration: none; background-color: #be2d32; box-shadow: 0 2px 2px rgba(0,0,0,.4); -webkit-transition: all .3s; transition: all 0.3s; border-radius: 6px; } .entry-content .emphasize-link a::before { position: absolute; top: 0; left: 0; width: 100%; height: 50%; content: ""; background-color: #fff; opacity: .1; } .entry-content .emphasize-link a::after { position: absolute; top: 50%; right: 14px; margin-top: -10px; font-family: "blogicon"; line-height: 20px; content: "\f006"; } .entry-content .emphasize-link a:hover { box-shadow: none; -webkit-transition: all .3s; transition: all 0.3s; }
.entry-content .emphasize-link a { display: block; position: relative; padding: 14px 30px 14px 16px; border: 2px solid #fff; color: #fff; text-decoration: none; background-color: #3156b9; box-shadow: 0 2px 2px rgba(0,0,0,.4); -webkit-transition: all .3s; transition: all 0.3s; border-radius: 6px; } .entry-content .emphasize-link a::before { position: absolute; top: 0; left: 0; width: 100%; height: 50%; content: ""; background-color: #fff; opacity: .1; } .entry-content .emphasize-link a::after { position: absolute; top: 50%; right: 14px; margin-top: -10px; font-family: "blogicon"; line-height: 20px; content: "\f006"; } .entry-content .emphasize-link a:hover { box-shadow: none; -webkit-transition: all .3s; transition: all 0.3s; }
記事で使ってみる
好きなコードを選んでCSSに追加したら、記事内で使ってみましょう。p要素にクラスを指定します。
見たままモード
見たままモードでタイトルのリンクを貼って、HTML編集に切り替えると以下のようなコードになります。
<p><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見!はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p>
強調したいリンクのp要素にクラスを指定してあげるだけでOKです。
<p class="emphasize-link"><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見!はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p>
Chrome拡張機能で簡単に<p>タグにクラスを指定することができますが、リンクが外れてしまうので再度リンクを貼りなおす必要があります。
はてなブログ編集用のChrome拡張機能を作りました(使い方の説明) | SHIROMAG
Chrome拡張を使う場合は、
カスタマイズしたいリンクを選択して、
「emphasize-link」を入力して「Add Class」をクリックして下さい。リンクが外れてテキストだけになってしまうので、再度リンクを貼ればOKです。
Markdown編集
Markdownでは、記事タイトルでリンクを貼るのは以下のように書きますね。
[https://www.notitle-weblog.com/entry/hatena-customize:title]
<p>タグで囲ってあげればOKです。
<p class="emphasize-link">[https://www.notitle-weblog.com/entry/hatena-customize:title]</p>
複数のリンクを囲む
<p><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見!はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p> <p><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見!はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p>
このコードを<div>タグで囲ってあげればOK。
<div class="emphasize-link"> <p><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見!はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p> <p><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見!はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p> </div>
注意事項
- 念のためにバックアップを取って下さい。
- カスタマイズは自己責任でお願いします。不具合が生じても責任は負いかねます。
他にもこんな記事書いてます。