あのブログでよくみかける『リンクを枠で囲って目立たせる』カスタマイズを実際にやってみたよ
いつもご覧いただきありがとうございます、オオセラです :D
今回は、「実際にやってみたブログのカスタマイズ」を紹介したいと思います。
わたくしオリジナルのカスタマイズではないので、参考にしたサイトさまもかならず紹介しております。もちろん、ソースコードなど詳しくはそのサイトさまに載っていますので、この記事を読んで興味がでてきたらぜひ、そちらでご確認をお願いいたしますm(_ _)m
では早速いきましょう。今回やって見たカスタマイズはこちら！
「リンクを枠で囲って目立たせる」カスタマイズ
参考にしたサイトさまはこちらです :D
カスタマイズを考えたらかならず行き着くであろう、いやもう言うまでもなく超有名なサイトさまです。はてなブログのカスタマイズに関してたくさん記事があります。今回は、そちらに記載されている「リンクを目立たせるためのカスタマイズ」を実践してみました :D
カスタマイズ前
iPhoneの画面割れ修理でApple Store, Ginzaに行ってきたよ（オマケ付） - アンダースタンド！
カスタマイズ後
iPhoneの画面割れ修理でApple Store, Ginzaに行ってきたよ（オマケ付） - アンダースタンド！
ほかのブログでこういうデザインよくみかけませんか？ このいかしたカスタマイズをやってみたい！と思って探してみたところ、「NO TITLE」さまで見つけました！
このカスタマイズの特徴
考えられる特徴を4つ挙げてみます。
- リンクが目立つので、クリック率が上がるかも
- 色を変えたりアイコンを表示させたりとかなり自由度が高い。しかも簡単！
- ソースコードを「デザインCSS」に追加しておくだけなのでカスタマイズが簡単
- 「リンクを目立たせるバージョン」と「目立たせない通常バージョン」と使い分けができる
ひとつひとつみていきましょう。
1. いうまでもなく目立つため、クリックさせたいリンクに適用することで、クリック率が上がることが期待できます。
2. 上記のカスタマイズ後の例では、アイコン表示タイプを選びました。色を変えたり、他のアイコンを表示させたりすることも簡単にできます。HTMLの難しい知識は一切不要で、コピペでいけちゃいます。
3. 適用したいカスタマイズを、はてなブログの
ダッシュボード「デザイン」→「カスタマイズ」→「デザインCSS」
に追加するだけです。
4. このカスタマイズをブログの記事に適用するには、3.の設定を行った後、記事にリンクをはりつける → HTMLモードにして一部変更するだけです。これもコピペでいけちゃいます。
具体的には、
リンク先頭の <p> を <p class="emphasize-link"> という文字列に書き換えるだけです。 さっきの例で見てみましょう。
（例）
カスタマイズ前
<p><a href="http://under-stand.hatenablog.jp/entry/2017/06/01/000000">iPhoneの画面割れ修理でApple Store, Ginzaに行ってきたよ（オマケ付） - アンダースタンド！</a></p>
カスタマイズ後
<p class="emphasize-link"><a href="http://under-stand.hatenablog.jp/entry/2017/06/01/000000">iPhoneの画面割れ修理でApple Store, Ginzaに行ってきたよ（オマケ付） - アンダースタンド！</a></p>
（NO TITLEさまのページを参照して作成しています。参照元: おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ - NO TITLE）
デザインCSSにコードを追加する時の注意点
これはコードを追加するカスタマイズ全般に言えることですが、コードを追加するときに、「どこからどこまでがどんなカスタマイズ用のコードだったか」をわかりやすくしておく必要があります。
というのも、万が一カスタマイズがうまく反映しなかった場合、あとからそのコードを削除する必要があるかもしれませんよね？
そのため、たとえばぼくはこんなふうにしています。
179行目以降にカスタマイズのコードを貼り付けたい場合、です。
（上記画像内 182行目以降は、NO TITLEさまのコードを引用しています。引用元: おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ - NO TITLE）
赤枠で囲っているコードを挟みます。赤枠の中であれば、文字は自分で分かるように変えても構いません。ぼくは「リンクを枠で囲う（from NO TITLE）」というふうに、"カスタマイズ内容 + 参照したサイトさまの名前"を記載しました。付箋(ふせん)がわりにつかうといいかもしれないです :D
コピペ用においておきますね。
↓
/*--------------------------------------
（カスタマイズ名などを入れる）
--------------------------------------*/
さいごに
いかがでしたか？このカスタマイズ、単純に見た目のデザイン度合いが上がりますし、簡単なのでほんとうにおススメです！
次回以降の記事でも、今回紹介したカスタマイズをちょくちょく使っていきたいと思います :D
さいごまでご覧いただきありがとうございました。
以上、オオセラがお届けいたしました :D
★こちらの記事もおススメです
