りつのひとりごと

りつのひとりごと

ひとりでゆるーくやってます

MENU

パンくずリストにアイコンを表示させてみました

CSSをいじったのは意外と久しぶりかしら……。

……りつにしては。←ここ重要。



今回は、パンくずリストを触りました。


まあ、あの、えっと、グローバルメニューを復活させたので、

今までのデザインのパンくずリストではグローバルメニューを邪魔しちゃうのでちょっとシンプルにしておこうかと。



ただあまりにシンプルすぎて誰の目にも止まらなかったらさみしいので、

アイコンをつけました。

アイコンつけると少しは存在感増すかなと思って!(^ω^)


元々日付とかカテゴリーとかでアイコン使っているので、同じ方法でやってみた。

他に方法あるのかなー?といろいろ調べてみたけど、日付やカテゴリーと同じ方法が一番簡単だと思いました。

#top-box .breadcrumb-link :before{
    font-family: "blogicon";
    content: "\f017";
}
#top-box .breadcrumb-child a:before{
    font-family: "blogicon";
    content: "\f04a";
}


ちょっと前までパンくずリストって触れたいけど触れられない存在だったんですよね。

なんでかっていわれると、わからないんですけど(;^ω^)


でもだんだんわかってきました。
f:id:diaace:20170405004725j:plain


要はこういうことだろ。ちょっと違うかもしんないけど。


グローバルメニューについては、いつぞやの記事のほうで熱く語っていました。

diaace.hatenadiary.jpdiaace.hatenadiary.jp


もしも読んでいただけるのならば、下の記事だけでもよろしくお願いします。


あといわゆるページトップへ戻るボタンもつけてみました。


これはさすがに全然わからなかったので、
blog.mshimfujin.net

を勝手に参考にしました。

(記事で紹介されているコードの

下から4行目の(jQuery)って必要なのかな……?)


なぜ今まで苦戦していたのだろうかと思うほど簡単にできました。

CSSすらまだまだなのに、jQueryは難しすぎます。

このコードが何をさしているのか全然わからない……。



ちなみにJavaScriptは勉強中(^ω^)

いつか使いこなせるようになりたいです。


色が気に入らないのでまたかえるかもです。

かえすぎだよりつさん。