パンくずリストをアイコンフォントにしてみたよ( ̄∇+ ̄)vキラーン


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , , | 閲覧数:304 | Leave a comment

パンくずリストをアイコンフォントで
前回に引き続き、今度はパンくずリストをアイコンフォントで実装してみた。

って、言うほど大層な事ではないけどね。

アイコンフォントの導入は済んでるので、あとはクラスを付与するだけという手軽さ。
アイコンフォントの導入はこちら↓

ちょっと前に、パンくずリストをプラグインなしで実装したばかり。


その時の出来上がりがこんな感じ↓

パンくずリスト

CSS(スタイルシートに追加)

スタイルシートに、ちょっとだけ追加します。

これは、クラス「lsf-icon」の前に「title」で指定したアイコンフォントを表示する設定です。

これによって、こんな風に表示できました↓
パンくずリストをアイコンフォントで

 

参考:Ligature Symbols

breadcrumb.phpを少し変更

class=”lsf-icon” title=”home”のように、title=””には「Ligature」を入れます。

元々のスタイルシートを修正

前回追加したパンくずリスト用のスタイルシートを修正。

感想

アイコンフォントを導入しさえすれば、あとは実に簡単であっという間にできてしまう。

画像の数もこれで大幅に削減できたし、少しは表示速度を上げられたかも。
PageSpeed Insightsが、なぜかエラー頻発で計れません。

キャッシュも設定しているので、2、3日して確認してみましょう♪

アイコンフォントでページトップへ戻るリンクを作成した記事はこちら↓

追記

前へ、次へのナビゲーションリンクをアイコンフォントで作成はこちら↓

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , , | 閲覧数:304 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA