セミリタイアブログだけど「参考・リンク」バッジをつけてみた

シェアする

スポンサーリンク
web design

ブログで外部リンクを表示するとき、左横に「参照:」という文字をつけていた。

例えば、「Yahoo!JAPAN」へのリンクを表示するときは次のように記述していた。

参照:Yahoo!JAPAN

これでもいいんだけど、他のブログを見ていると「おしゃれな文字飾り」をしていて、やってみたくなった。

スポンサーリンク

バッジをつけてみた

こんな感じ。

参照Yahoo!JAPAN

LINKヤフー!ジャパン

本やサイトの文章を引用した場合は、このように使おうと思う。

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

出典夏目漱石『吾輩は猫である』

※※

やりかたは、次のサイトを参考にさせていただいた。

参考CSSでリンク横に「参考・LINK」バッジをつけてみよう(vdeep)

style.cssを変更する

当ブログはWordPressで運営しているので、使用しているテーマ「Simplicity」の子テーマのstyle.cssに、上記の参考サイトにあるプログラムソースを追加した。

style.cssはWordPress管理画面の「外観」>「テーマの編集」をたどっていくとある。

実は、「Simplicity」にはバッジは実装されている。

参照Simplicityの基本的な文章装飾スタイルを使う方法まとめ(Simplicity)

が、バッジの色や大きさなどを自分好みに変えたい場合はstyle.cssを修正する必要がある。

簡単にできるので、外部リンクの前に表示する文字を「バッジ」で飾りたい場合はおすすめ。

※style.cssを修正するときは、修正前のプログラムソースをテキストエディタなどに保存してバックアップを取ったほうがいい。

WordPressレッスンブック HTML5&CSS準拠
エビスコム
ソシム
売り上げランキング: 42,278
スポンサーリンク

シェアする

    関連コンテンツ

    twitterをフォローする
    twitterをフォローする

    ブログを購読する
    ブログを購読する

    follow us in feedly Subscribe with Live Dwango Reader RSS