モバイルファースト対応WordPressテンプレート「メシオプレス03」の専用画面「スマホ用設定」の解説記事です。この設定は基本的にスマホ版の「デザイン面」の設定です。モバイルファースト感覚でコンテンツを作成するには、ウィジェット解説ページの「スマホ専用ウィジェット」を活用してください。
この記事は、メシオプレス03リリース当時に書かれたものです。最新の設定方法は購入者サイトで確認してください。
スマホ用設定
外観→「スマホ用設定」から設定できます。
●1. ヘッダー画像の設定
PCとは別に、スマホ専用のヘッダー画像（ロゴ画像）を設定できます。幅260px、高さ54pxが推奨です。Retina対応にする場合は倍のサイズ（幅520px、高さ108px）の画像を用意してください。綺麗でクッキリとした画像になります。
ただし、これが気になるかどうかは個人差があると思いますし、そういうのが面倒であれば、そのままの大きさでアップロードして「非対応」を選択すればOKです。PC用の1000pxのヘッダー画像を併用する場合もそのままで大丈夫です。
●2. 背景の設定
ヘッダー部分と、ページ全体部分の背景色を別々に設定できます。
ページ全体部分は、主にページ上段や下段の「ウィジェットエリア」の背景色になります。
●3. ホームアイコンの設定
ユーザーがサイトをホーム画面に登録した時に表示されるアイコンを設定できます。iPhoneの場合は「光沢有り」を選択すると、アイコンに光沢を付けることができます。
●4. 文節での改行
文章を文節などのタイミングで改行している場合、スマホとPCでは画面幅が違うために、スマホから見ると変なタイミングで改行されてしまいます。それを改善するために、スマホ閲覧時にはbrタグを自動で削除する機能を搭載しました。
文節タイミングで改行している場合は、「無効にする」を選択するとスマホから見た際に読みやすくなります。
ただし、無効にするとリンク位置の改行も無効化されてしまいます。なので、スマホ時代の記事の書き方としては、文節改行はあまりおすすめしません。私も昔は文節改行が好きだったのですが、2013年の秋くらいから文節改行はやめました。
●5. 画像の左右寄せ
画像を左右に寄せてテキストを挿入している場合、PCでは良い感じに収まっていても、スマホから見ると画面幅が違うためにおかしなことになります。それを改善するために、スマホ閲覧時には、画像の左右寄せを無効化し、中央寄せにする機能を搭載しました。
ただし、リンクの左端に矢印画像を付けている場合などは、中央寄せにするとリンクの上に矢印が移動してしまいますので、中央寄せにしたくない場合は「PCと同じ表示にする」を選択してください。（メシオプレス03標準の矢印装飾機能を使えば問題ありません）
「PC版を見る」ボタン
スマホ版のメニューボタン内、またはページ最下部に、ユーザーがPC版へ切り替えできるボタンが付いています。このボタンを押すと、同一セッション内（ウィンドウを閉じるまで）は他の記事に移動してもこのボタンを押した設定（PC版の閲覧状態）が保存されます。
ただし、クッキーを利用しているので、クッキーが使えない環境では別ページに移る度に設定がリセットされてしまいます。
この記事へのコメント
この記事へのコメントはありません。