WordPressテーマ「メシオプレス」ブログ

モバイルファースト対応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版の閲覧状態)が保存されます。

ただし、クッキーを利用しているので、クッキーが使えない環境では別ページに移る度に設定がリセットされてしまいます。

メシオプレス03設定一覧

この記事を書いた人

めしお
めしお メシオプレス販売者

めしおさんのめしおさんによるめしおさんのためのWordPressテーマ「メシオプレス」を有料でおすそ分けしています。

コメント

この記事へのコメントはありません。

コメントする


※メールアドレスは公開されません。

オリジナル有料WordPressテーマ好評発売中

メシオプレス02 メシオプレス03