キーワードファインダーSEOブログ

2020年 5月 の投稿一覧

メディアクエリについて記述方法などまとめ

メディアクエリについて記述方法などまとめ

デバイスの幅によってそれぞれ適したcssを読み込むために必要な“メディアクエリ(Media Queries)”をしっかりと理解していますか?

この“メディアクエリ”とは、主にスマホ対応するレスポンシブデザインに必須となるタグで、メディアタイプやメディア特性によって各種対応するデバイスや、分岐条件(widthを用いた横幅のサイズ)などを指定するとことによって、Webサイトを各種デバイスに適した形で見せることができ、最近ではheadタグやcssに必ずと言って良いほど記述されていると思われます。
※アクセスしてきたデバイスの幅を読み取る“viewport(ビューポート)”の記述も必須です。

その設定・記述方法は思ったよりも簡単で、Webページに関して言えば単純に横幅を指定して読み込むcssを変えるだけのもので、後ほど詳しくご説明しますが、複雑にならないための管理方法としてひとつのcssに全てをまとめているという方も多いのではないでしょうか?

このようにメディアクエリとは、以下のようにcssファイルそのものをデバイスの幅によって変更させたり、cssファイル内で読ませるスタイルを変更することも可能です。

  • 読み込むcssファイルそのものをデバイスによって変える
  • 読み込むスタイルをデバイスによって変える

両者は似ているようですが、要はstyle.cssを振り分けるのか?それともcss内で読み込むスタイルを切り替えるのか?といった違いで、その場合メディアクエリの記述方法が若干異なり、基本的にデバイスの横幅を指定するだけで各種css・スタイルを適応させることができるというものです。
※ここで指定する横幅の数値をブレイクポイントと呼びます。

そのため、このメディアクエリはレスポンシブデザインには欠かせないもので、簡単に言うと…ビューポートでアクセスしてきたデバイスの横幅を取得、メディアクエリで読み込むcssを振り分けることで適宜デバイスに合った見せ方ができ、ユーザビリティにも繋がる重要な役割を果たすタグと覚えておくと良いでしょう。

では今回は、アクセスして来たデバイスによって適したcssを振り分けるために必要な“メディアクエリ”について、意味や記述方法など詳しくご説明していきたいと思います。

続きを読む

Google XML Sitemapsの使い方と設定方法について

XMLサイトマップを自動生成するWordPressのプラグイン“Google XML Sitemaps”を使用していますか?

“Google XML Sitemaps”とは、検索エンジンにブログ内の重要なページを中心にクロールしてもらうために役立つsitemap.xmlを自動生成してくれるWordPressの数多く存在するプラグインのひとつです。
※sitemap.xmlはクローラーに対して強制力はありません。

もちろん“sitemap.xml”は手動でも更新可能ですが、更新性が高いとあまりにも手間なので、こういったプラグインを導入して自動更新にしておくと後々の管理としても大変便利です。

ちなみに今回ご紹介するのは検索エンジン向けにクロールのヒントとなるsitemap.xmlを自動生成してくれるWordPressのプラグインのことであって、検索ユーザー向けのHTMLサイトマップページとは異なります。

また、こういったプラグインは様々公開されていますが、中でも“Google XML Sitemaps”は未だ定期的に更新されていて、セキュリティ面でも安心でき、sitemap.xmlを自動生成してくれるのはもちろん、インストール後の設定なども非常にシンプルで使いやすいため、導入している方も多いのではないでしょうか?

シンプルとは言っても除外したいカテゴリーや個別記事も指定でき、sitemap.xmlを作成するにあたって必要な項目は備えられているので、構造上困ることもありません。

では今回は、クローラーに対してページの一覧を優先度や更新頻度などと併せて記述するsitemap.xmlを自動生成してくれるWordPressのプラグイン“Google XML Sitemaps”のインストールから設定方法について、詳しくご説明していきたいと思います。

続きを読む