【WordPress】 バージョン4.5で出来るようになったこと

WordPress4.5が公開されましたね。
WordPress4.5
有志の皆様のおかげで少しずつ、より良くバージョンアップしていくWordPress。
今回は何が変わったのかなーと内容を見てみると
カスタムロゴの追加とライブレスポンシブレビューが可能になっていました。
これは嬉しい!ということで、それぞれどういったことが出来るのかをご説明してみます。


カスタムロゴの追加

ここで追加できるWordPressカスタムロゴは、
ブラウザでサイトを開いた時のブックマークアイコン(ファビコン)と
スマホでWordPressサイトをホーム画面に追加した時のアプリアイコンになります。
 ファビコンについて詳しくは
 ファビコンの作り方~ブックマークやタブで個性を出そう~の記事をご覧ください。
既にファビコン表示を行っている方は改めて追加する意味が無いかもしれませんね。
今までファビコン設定をしていなかった方や、
画像を作り直してファビコンを変えたい方は以下の手順に従って設定してみてください。

カスタムロゴの追加方法

まず【 サイトアイコン 】として使いたいロゴ画像を作成します。
縦512px × 横512px 以上の正方形の画像。
ということで用意した画像がこちら。
表示上は小さくしていますが、512×512で作っています。
エヌシステムブログのロゴアイコン
画像を準備したら、WordPressホームのメニューから【 外観 】⇒【 カスタマイズ 】を選択します。
カスタマイズ
【 サイト基本情報 】⇒【 画像を洗濯 】をクリックして画像を選びます。
アイコン設定
上部【 ファイルのアップロード 】のタブをクリックして【 ファイルを選択 】し、
自分のパソコンの中から使いたい画像を選択します。
もしくは、あらかじめメディアライブラリにアップロードしておいた画像を選択します。

これはメディアライブラリから画像を【 選択 】した場合です。
WordPressアイコン画像を選択
※うまく反映されない場合は、画像タイトルを日本語でなく英字に変えたり、
 何度か選択を繰り返してみてください。

画像が反映されたら【 保存して公開 】をクリックしてください。
ブラウザ上のサイトアイコン(ファビコン)として、
また、スマホでWordPressサイトをホーム画面に追加した時のアプリアイコンとして使われます。
サイトアイコン


ライブレスポンシブレビュー

最近のWeb界隈では、自分のサイトやブログがスマホではどう見えているのか、
タブレットでは、パソコンでは・・・というそれぞれの表示について気を配り、
どんな機器でサイトを見ても大丈夫なサイト(レスポンシブWebデザインで構築されたサイト)、
つまりスマートフォンやタブレットでの使い勝手(モバイルユーザビリティ)に優れたサイトを
作ることが推奨されています。
この 『 機器ごとの表示の違い 』 をすぐに確認できるのがライブレスポンシブレビューです。

自分のサイトの見え方を知るために

自サイトの表示確認ができるResponsive Design Testingというサイトもあるのですが、
これはサイトURLを入力する必要があるので、WordPressのみを使っている(他にサイトが無い)場合は
WordPress上のライブレスポンシブレビューを使った方が早くて便利ですね。

ライブレスポンシブレビューを使う

今回のアップデートから使えるようになったライブレスポンシブレビューの使い方は簡単。

WordPressホームのメニューから【 外観 】⇒【 カスタマイズ 】を選択、
メニューの下部にあるデバイスアイコンをクリックして
PC・タブレット・モバイルそれぞれを切り替えるだけです。
カスタマイズ
ライブレスポンシブレビュー

モバイルユーザビリティとは

携帯機器における使い勝手のこと。
スマホやタブレットが普及し、Webサイトを見る主な環境がパソコンだとは言いきれなくなったので、
現存のパソコン用サイトもスマホで見たときのことをちゃんと気にしないといけないよ、ということです。

具体的には以下のようなサイトが
『 モバイルユーザビリティの優れた、モバイルフレンドリーなサイト 』です。
・リンクやクリックボタンの間に十分な余白があり、指で押しやすい
・ユーザーが使っている機器の画面幅を自動で読み取って表示を変更する
・文字が小さすぎず大きすぎない
・横にスクロールしたり、縮小を使う必要がなくコンテンツがきちんと読める、画像が見られる

詳しくはスマホ最適化についてのシリーズ記事をご覧いただいて、
まだスマホ最適化をしていない方はこの機会にご検討ください。
 スマホ最適化 【 1 】 モバイル ユーザビリティの問題って?
 スマホ最適化 【 2 】 スマホ表示の確認と作業の流れ
 スマホ最適化 【 3 】 ビューポート(viewport)の設定
 スマホ最適化 【 4 】 メディアクエリー(Media Queries)の設定
 スマホ最適化 【 5 】 htmlファイルとCSSファイルを編集

タイトルとURLをコピーしました