koblog

高校生のWEBデザインブログ

【はてなブログ】コピペだけ!パンくずリストのカスタマイズ

サムネイル

SEO的にもユーザビリティ的にも便利なパンくずリストはてなブログでは自動で表示できるので、とても便利です。

しかし何もカスタマイズしていないと、少し物足りなさを感じてしまうデザインになっています。そこで今回は、はてなブログパンくずリストにアイコンを付ける方法を紹介します。

 

今回のカスタマイズでは、はてなブログ純正のアイコンを使いますが、Font Awesomeを使うこともできるので、詳しくは下の記事を参考にしてください。

 

 

パンくずリストを表示する

カスタマイズには当然ですが、パンくずリストの表示が必要です。デザイン設定から「パンくずリストの表示」を有効にしてください。

キャプチャー1

 

カスタマイズ方法

CSS
#top-box .breadcrumb a {
  text-decoration: none !important;
  color: #5faae0 !important; /* 文字・アイコンの色 */
}
#top-box .breadcrumb-link::before {
  font-family: blogicon; 
  content: "\f017"; /* アイコン指定 */
}

 

パンくずリストにはtop-boxというidがついています。上のコードではパンくずリストのリンクの色と、「トップ」の前にアイコンをつけるように設定しています。今回、青色にしていますがこのブログに合うようにしているので、自分のブログに合うように変えてみてください。色の変え方は下の記事で紹介しています。 

 

アイコンははてなブログ純正のものを使っていて、下の画像のように「ホームアイコン」が付きます。もちろんFont Awesomeのアイコンを使うことも出来ます。

 

Font Awesome
#top-box .breadcrumb-link::before {
  font-family: Font Awesome 5;
  content: "\〇〇〇"; /* アイコン */ 
}

 

キャプチャー2
 

CSSの編集については下の記事を参考にしてみてください。 

 

 

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる