comments trackbacks you may also like

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

2019年11月27日
#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テクの小技。とても参考になりました(^^)

この記事、おもしろかったわ。
気に入ったらどしどしシェアしてね♪
\Thanks/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール
iconiconiconicon

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

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.
未分類 (0)
シン・胃がん闘病記 (50)
┣  AVANT:癌の余命宣告~共存 (37)
┗  セントラルドグマ:父親の胃癌 (13)
胃がん闘病記録まとめ (85)
┣  ステージ3B-多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
胃がん-Stomach_cancer (5950)
┣  胃がんブログ (286)
┣  よりぬき胃がんブログ (16)
┣  胃がん闘病記-日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (36)
┗  がん治療のクラウドファンディング (10)
がんのこと-ガン情報全般-cancer (569)
┣  がんブログ (334)
┗  がんニュース (235)
胃がん障害年金ブログ (71)
┣  障害年金-準備編 (23)
┣  障害年金-審査から年金受給まで (12)
┣  障害年金-審査請求-不服申立 (26)
┗  障害年金-再審査請求 (10)
Amazon (170)
┣  Amazonセール (4)
┗  Kindleセール (165)
おもしろグッズ (12)
今日のエッセイ (154)
ニュース-芸能-話題 (888)
┗  転職-キャリアアップ (21)
占い-心理テスト (6)
恋愛-人間関係 (30)
終活ブログ (12)
グルメ (117)
┣  低糖質レシピ (31)
┗  お酒の飲み方 (2)
胃切除後の食事レシピ (672)
┣  ご飯-おかゆ-和食 (174)
┣  おかず (140)
┣  味噌汁-スープ (75)
┣  カレー関係 (66)
┣  パン-洋食 (63)
┣  麺類 (112)
┗  その他-簡単レシピなど (39)
ブログ (261)
┣  FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (188)
┣  FC2ブログ日記-カスタマイズの所感など (26)
┣  GoogleAdsense-アドセンス (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhoneの使い方-アプリなど (34)
司法書士 (26)
┣  仕事-実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (28)
┣  家電 (11)
┣  ホーム&キッチン (5)
┣  ビューティー&ヘルスケア (5)
┣  QOL改善&ヘルスケア (2)
┗  お酒 (5)