Python & Raspberry Pi 開発ブログ ☆彡

PythonとRaspberry Piの基本的な使い方をわかりやすく解説。初心者、入門者必見!!

はてなブログでレスポンシブデザイン、パンくずリストの設定をする

今回ははてなブログでレスポンシブデザイン、パンくずリストを設定する方法を紹介したいと思います。どちらも、ユーザーに対してわかりやすいホームページになり、SEO対策にも有効とされています。

レスポンシブデザインとは

スマホでWebページを見ることが当たり前になりました。ただ、PCより画面が小さいので、PCと同じようにWebページを表示してしまうととてもみづらいです。レスポンシブデザインは、PC、スマホ、タブレット等、Webページを見る端末によって、自動的に表示形式を見やすくするデザインのことを言います。はてなブログでは、チェックを1つ入れるだけでレスポンシブデザイン設定を有効にすることができます。それでは設定方法を紹介していきます。

レスポンシブデザインの設定方法

[デザイン] ⇒ [スマートフォンタブ] ⇒ [詳細設定] からレスポンシブデザインの項目にチェックを入れます。これだけです、簡単ですね。下記の写真も参考にしてください。

responsible

パンくずリストとは

パンくずリストとは、ホームページのどの階層にいるかを表示したもの、という感じでしょうか。言葉で説明すると、わかりにくいですが、下記の写真のやつです。どのホームページでもよく見かけますね。こちらもユーザーに対してわかりやすいホームページになり、SEO対策にも有効とされています。

breadcrumb list

パンくずリストの設定方法

[デザイン] ⇒ [カスタマイズタブ] ⇒ [記事] からパンくずリストの項目にチェックを入れます。これだけです、こちらも簡単ですね。下記の写真も参考にしてください。

breadcrumb list setting

[デザイン] ⇒ [スマートフォンタブ] ⇒ [記事]に同様の手順でパンくずリストの項目にチェックを入れておきましょう。

はてなブログでは、レスポンシブデザインやパンくずリストの機能をチェックひとつで実現することができます。自分でコードを実装する必要がないので、とても助かりますね。以上で説明を終わります。

トップに戻る