ジェネシスフレームワークでブログ編集画面を「iPhoneX/11Pro」に最適化するための作業効率化プラグイン

SEOに強いWordPressテーマ「ジェネシスフレームワーク」用の編集プラグインをご用意いたしました。スマホに特化したウェブサイトを構築する際にはかなり効率化が計れるのでぜひお試しください。

ジェネシスフレームワークでブログの編集画面を「iPhoneX/11Pro」に最適化するための作業効率化プラグイン

最近は少しずつ「特化型のサイト」を構築するケースが増えてきました。なかには来訪ユーザーの９割以上がスマホユーザーというサイトもあるのでそういったサイトではよりスマホに最適化します。つまり、サイトでコンテンツを見るユーザーはスマホでしか見ないのでスマートフォンで読みやすい構成を採用するわけです。

そんなときに僕たちがもっとも使っているテーマが「Genesis Framework」です。ワードプレスでは言わずもがな有名とされるジェネシスフレームワーク。SEOにも強く、とても優秀なテーマと言えるでしょう。

そんな最強のワードプレステーマ（ジェネシスフレームワーク）を使ってスマホユーザーに特化したウェブサイトを作るときに更新性を格段に向上させるプラグイン「WP Genesis Framework Editor CSS iPhoneX Style」。百聞は一見にしかずということで適用した後の状態を早速見ていきましょう。

プラグインを有効化した後の状態

iPhoneX/11Proと同じ横幅でブログが更新可能になります。

念のためページ側を見てみましょう。以下はパソコンで開いた画面なので少し比較しづらいですが、ブログ更新画面で表示されていた改行位置がそのままサイト側に反映されているのが確認できます。

ブログ投稿画面とページ側を重ねて確認してみました。

iPhoneX/11Proでページを開いた画面

iPhoneX（11Pro）で開いた画面が以下です。更新画面と同じ位置で改行していますね。

パソコンで見ても、スマホで開いても「同じ位置で改行」されているのでサイト全体に統一感があって見やすさも向上していますね。もちろん、iPhoneX/11Pro以外のスマホであれば改行位置は異なりますが、これから主流になっていく最新式のスマートフォンに合わせておくことで数年後にはスタンダードになるはずです。

プラグインを新規追加する方法

まずは管理画面にログインして「プラグイン > 新規追加」をクリック。

- 新コースでワードプレスを学ぶ【AD】-

次に「プラグインのアップロード」をクリック。

すると以下の画面が開きます。

ファイルを選択にZIPファイルをドラッグ＆ドロップ。

選択された状態になったら「今すぐインストール」をクリック。

次にプラグインを有効化をクリック。

以下のメッセージが表示されたら完了です。

まとめ

ブログ投稿画面が「スマホ側で表示される改行位置」とまったく同じ位置になれば更新作業がかなりはかどるのでおすすめです。本来は管理画面とホームページ側を見比べながら「どの部分で改行されるかをチェック」しながら作成画面と表示ページを行ったり来たりしないといけないのでその作業がすべてなくなります。

スマホに特化したサイトであればスマートフォンで見た目に集中すればOKです。来訪ユーザーがスムーズにサイトを見れて「読みやすい位置で改行」されたら快適に閲覧できるので滞在率もアップします。もし興味があればぜひプラグインをダウンロードしてお試しくださいませ。更新速度が上がるのでかなりおすすめです。