ぽんむらのーと。

明石に在住するぽんむらの自由帳。カメムシになりたい

関連記事などのリンクを控えめに目立たせるカスタマイズ【はてなブログ】

いきなりですが、最近関連リンクなどを目立たせるカスタマイズを行っている方が多いですよね。こんなかんじ!

こちらのカスタマイズは シロマティ (id:shiromatakumi) さんの以下の記事を参考にさせて頂きました!

shiromatakumi.hatenablog.com

いつも(勝手に)お世話になっております

さて、枠付きリンクは目立つので素敵なのですが、もうちょっと抑え気味に目立たせたい(矛盾)と思ったのでこんな感じで作ってみました

私と同じように控えめに目立たせたいという矛盾した欲求をお持ちの方の参考になれば幸いです

リンク装飾【文字列固定版】

関連記事や参考リンクなど決まった用途で使われる場合であれば文字列は固定でOKでしょうか?

サンプル

サンプルとして「関連記事」というワードを入れてみました

HTML

<p class="link-decoration"><a href="【URL】">【テキスト】</a></p>

HTML編集モードでリンクを囲むp要素にクラスを指定すればOKです

CSS

.link-decoration::before {
    content: '関連記事';
    padding: 4px 8px;
    color: #ee7917;
    background-color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0px;
    line-height: 1.0;
    margin-right: 8px;
    display: block;
    border: 1px solid #ee7917;
    border-radius: 4px;
    float: left;
}

コード内の以下の部分を自由に変更して下さい

content: '関連記事';

リンク装飾【文字列毎回指定版】

毎回色々な文字列に変更したいという欲張り欲求をもった方にオススメ

サンプル

公式サイトぽんむら

サンプルとして「公式サイト」というワードを入れてみました

HTML

<p><span class="link-decoration">公式サイト</span><a href="【URL】">【テキスト】</a></p>

p要素にクラスを付与せずに「<span>~</span>」を追加します。HTML内で文字列を入れているので「公式サイト」の部分を好きな文字列に変更できます

CSS

.link-decoration {
    padding: 4px 8px;
    color: #ffb53c;
    background-color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0px;
    line-height: 1.0;
    margin-right: 8px;
    display: inline-block;
    border: 1px solid #ffb53c;
    border-radius: 4px;
}

カスタマイズ

色の変更

モノクロームぽんむら

カラーの変更はCSSの「color」「background-color」「border」のカラーコードを変更してください

color: #fff;
background-color: #999;
border: 1px solid #333;

角丸にしない

お硬いぽんむら

CSSの「border-radius」を「0」にすると角丸にしないことも可能です

border-radius: 0px;

もっと角丸

お柔らかいぽんむら

逆に「border-radius」の数値を大きくするともっと丸くなります

border-radius: 10px;

アンチ太字

細いほうが好きぽんむら

CSSの「font-weight」を「normal」に変更して下さい

font-weight: normal;

アイコンフォントをつけてみる

参考リンクぽんむら

文字列毎回指定版の方にFont awesomeのアイコンを疑似要素の::beforeを使って差し込んじゃます

.link-decoration::before {
    content: '\f0c1';
    font-family: FontAwesome;
    margin-right: 4px;
}

そのままだとくっつきすぎちゃうので「margin-right: 4px;」を設定しています

まとめ

シンプル系が好みで、目立たせるカスタマイズが苦手だったりします・・・!

カスタマイズは自己責任で念のためにバックアップを取って行って下さい!