ゆうらり Happy Smile
FC2ブロガーさんのアイデアに感心!リンク行頭のリストマークにファビコンを使ってみた件

FC2ブロガーさんのアイデアに感心!リンク行頭のリストマークにファビコンを使ってみた件

FC2ブログ日記-カスタマイズの所感など
2019/11/27 0
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#FC2ブログ #FC2ブログカスタマイズ #リンク装飾 #ファビコン #ウェブデザイン #ブログカスタマイズ #リストマーク装飾 #ファビコン読み込み #ブログ日記 #ブログ運営

FC2ブログ『ゆうらりハッピースマイル』の管理人Mです。いつもご訪問いただき、ありがとうございます(^^)


僕のブログには、毎日たくさんのFC2ブロガーさんがご訪問して頂けるので、いつも楽しく拝見させてもらってます。


ところが僕の場合は記事を読む前に、FC2ブロガーさんが運営するブログにどんな装飾やカスタマイズを施しているのか?にまず目がいってしまいまして(^_^;)


昨日読ませて頂いたブログには、僕がこれまで一度も浮かばなかったアイデアが取り入れられていて、「そんな発想があったのか!」と、思わず感心してしまった次第です。


そこで、僕もさっそく真似させてもらいました。

スポンサードリンク

リンク行頭のリストマークをファビコンを設置するカスタマイズ

ゆうらりHappySmileのファビコン

僕のブログに取り入れさせてもらったのは、リンク行頭の装飾でした。拝見したブログには、リンクの行頭にファビコンを読み込んでリストマーク代わりにしていたんです。


「このFC2ブロガーさん、凄いアイデア持っているんだなぁ…。」


僕もこれまで、リンクの装飾にはこだわってきたつもりです。しかし、ファビコンの活用まではまったく思いつきませんでした。


そうか。Webサイトにファビコンが設定されていれば、それを読み込むことが可能だったんですね。


で、今までは、リンクの行頭をこんな感じにしていたのを


一般的なリンク行頭のリストマーク


ファビコンを読み込んで、リンクの行頭に配置してみました。


例:<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://www.google.com/s2/favicons?domain=https://〇〇〇/" alt="〇〇〇">

ちなみに、画像とリンクテキストの縦位置が合わないかと思いますので、下記の記事などを参考にしてみました。

CSSで中央寄せする9つの方法(縦・横にセンタリング)

【図解】HTML&CSSで縦・横・ど真ん中にセンタリングする方法を総まとめしました。また「中央寄せできない」というときの対処法も一覧にしています。

>>vertical-align-スタイルシートリファレンス

おわりに/FC2ブロガーさんのWebテク。ちょっとした小技が参考になりました

リンク行頭のリストマークにファビコンを使った例

何だかイイ感じですよね(*'▽'*)思わずクリックしたくなっちゃいます♪


FC2ブロガーさんのアイデアをパクって申し訳ないのですが(汗)ちょっとしたWebテクの小技。とても参考になりました(^^)

この記事が気に入ったら
いいねとシェアしよう!

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!

 0

There are no comments yet.
FC2ブログ日記-カスタマイズの所感など