シリーズBテンプレでiPhone閲覧時のフォントサイズ自動調整

「大きすぎるな~」と、前から気になっていました。

 

シリウスで作成したPCサイトをiPhoneで見ると、ブラウザの機能でコンテンツのフォントサイズが2倍くらいに自動調整されます。

 

この現象、iPhone5sまではディスプレイが小さい4インチ主流だったのでOKでした。しかしiPhone6から4.7&5.5インチになってこれが主流になっていくと、サイト全体の見栄えバランスが微妙かと思います。サイドバーや見出しは自動調節されないからやたら小さいフォントのままなのに、コンテンツ部分のサイズだけやたら大きくなってしまいます。

 

ということで、iPhone閲覧時にフォントサイズの自動調整幅を指定できるようにしました。

 

調整方法は、シリウス編集画面にて
編集 > スタイルシートを開きます。

 

シリウスiPhoneフォントサイズ変更CSS

 

シリーズBのデフォルトでは170%のフォントサイズに自動調整されるようにしています。

 

これはiPhone5sの4インチディスプレイでもそれなりに見やすいサイズです。iPhone6以降だと、サイドバー部分のバランスも取れてさらに見やすくなると思います。

 

もしフォントの自動調整パーセンテージを変えたい場合は、上記「170%」の部分を適宜変更してください。

 

AndoroidはOSの仕様で未対応です。普通に2倍くらいに自動調節されます(ごめんなさい)。

 

 

ちなみに今のところ、日本でのiPhoneシェア率は6~7割と言われています。

 

日本のiPhoneシェア率

 

 

6~7割のスマホユーザーには、見易さをお届けできるという機能です。

 

 

余談:スマホサイトの成約率

アフィリエイトにおいて、PCサイトの成約率とスマホサイト成約率が大きく異なるケースがあります。

 

これはディスプレイ上に載る情報が異なってくるから仕方の無いことですが、私の場合はスマホでの成約率が悪い傾向があります。試しにスマホサイトを切ってみると、成約率が上がったものもあります。

 

「それなら、PCサイトでもスマホで見やすくなるように出来ないかな?」と思い作ったのが今回の【シリーズB】です。

 

 

シリウステンプレート【シリーズB】では、iPhoneサイト変換しなくても、スマホで見やすくなるように作ったつもりです。

 

検証した作業は以下。

 

  • 文字と色の色差バランスを細かく検証。
  • シャドウを入れて見出し文字を見やすくしたり。
  • 横幅がスマホディスプレイサイズににピッタリはまるようにしている。
  • iPhone5s、XperiaZ1、Galaxy4の3機種で見栄えをチェック。

 

PCサイトとスマホサイトは、似て非なるものだと感じている方もいると思います。あえてPCサイトのみにしているアフィリエイターさんもいるようですし。

 

スマホサイトは難しい・・・。

 

ということで、今回のiPhone閲覧時のフォントサイズ調整幅変更機能は、PCサイトの見栄えにこだわる方に向けたものです。

 

 

以上、余談でした。

 

 このエントリーをはてなブックマークに追加 

関連ページ一覧

【シリーズB】テンプレート導入方法 | シリウス特典テンプレート

それでは最初にシリウスでシリーズBテンプレートを利用できるようにしましょう。特典サイトから【siriesb_templats.zip】のZIPファイルをダウンロードしてください。ZIPファイルを解凍すると【シリーズB】というフォルダが入って...

続きを読む

【シリーズB】ランキング機能を使う方法(新SCK会員限定) | シリウス特典テン...

シリウス特典テンプレート【シリーズB】では、新SCK会員2か月目で貰える角丸テンプレートをお持ちの方に限り、ランキング機能を利用することが出来ます。この導入方法のみ、会員専用のシリウスカスタマイズカテゴリで説明しています。当サイト購入者登録...

続きを読む

【シリーズB】テンプレートで共通CSSの設定方法 | シリウス特典テンプレート

※この設定については、2014年12月2日15時30分以降にダウンロード頂いた方には必要なくなりました。修正版を配布しておりますので、特典サイトから再度ダウンロードし、テンプレートを差し替えてください。シリーズBではテーブルスタイルのカラー...

続きを読む

【シリーズB】ヘッダー画像の幅について | シリウス特典テンプレート

シリウス特典テンプレート【シリーズB】のヘッダー画像幅は1000pxです。シリウスの通常のヘッダー画像は900pxの為、これを利用するには1000pxに拡大する必要があります。シリウスの画像リサイズ機能や、各種画像ソフトなどで拡大してくださ...

続きを読む

【シリーズB】サイドバーとコンテンツの画像サイズ仕様

シリウス特典テンプレート・シリーズBで、利用できる画像推奨サイズをまとめておきます。画像サイズコンテンツ部分コンテンツ部分は、画像幅665pxでピッタリおさまります。サイドバー部分サイドバーは幅250pxでピッタリはまります。アドセンスも入...

続きを読む

【シリーズB】シリウスでiPhone閲覧時のフォントサイズ調整方法 | シリウス...

「大きすぎるな~」と、前から気になっていました。シリウスで作成したPCサイトをiPhoneで見ると、ブラウザの機能でコンテンツのフォントサイズが2倍くらいに自動調整されます。この現象、iPhone5sまではディスプレイが小さい4インチ主流だ...

続きを読む

【シリーズB】見出しアイコンを変更する方法 | シリウス特典テンプレート

シリウス特典テンプレートシリーズBでは、H2~H4とサイドバー見出しのアイコンを3~5パターンに変更できます。アイコンのデザインって気にする?「そんな細かい事気にしないよ~」と思う人はデフォルト設定のまま利用すればOKです。ですが、掲載する...

続きを読む

【シリーズB】サイドバー追尾設定とカスタマイズ | シリウス特典テンプレート

シリーズBテンプレートでは【追尾有】のテンプレートを選択した場合、編集 > メニューの編集 >”サブメニュー”←この領域と、フリースペースの”メインメニュー下段”が自動追尾されます。動作はシリーズBのデモサイトをご覧ください。デモサイトでは...

続きを読む

【シリーズB】カノニカルタグ自動付加解除方法 | シリウス特典テンプレート

シリウス特典テンプレート【シリーズB】では、各ページにカノニカルタグが自動付加されるようになっています。ワードプレスの場合、URLの正規化目的で自動的に付加されているを真似してみました。ですが、「これは必要ない」という人は以下の部分を削除し...

続きを読む

簡単!サイドバー幅を広げる方法 | シリウス特典テンプレート

シリウス特典テンプレート【シリーズB】では、サイドバー幅を簡単に広げることが出来ます。CSSの3か所の数値を変更するだけという超簡単設計です。前々からよくご要望頂いていたので、今回のテンプレートで実装しました。CSS変更箇所シリーズBでは、...

続きを読む

【シリーズB】テープボックスの利用方法 | シリウス特典テンプレート

シリウス特典テンプレート【シリーズB】では、↑のようなにテープで貼り付けたボックスが利用出来ます。構造とコードの仕組みを解説しておきます。①画像は横250pxに自動リサイズされます。商品紹介であれば、画像にリンクを貼るのも良いと思います。 ...

続きを読む

【シリーズB】サイドバーの透過率を変える方法 | シリウス特典テンプレート

シリウス特典テンプレート・シリーズBでは、サイドバーが薄く透過します。背景のテクスチャや画像を変えることで、サイドバー領域もデザインの一つとして見せる為です。しかし、背景が濃い色のものだと、「透過させたくない」「もっと透過率を変えたい」とい...

続きを読む

【シリーズB】見やすいサイトにする為のコツ | シリウス特典テンプレート

補足として、シリウス特典シリーズBテンプレートを利用して見やすいサイトに仕上げるコツを解説しておきます。なお、ここに書くことは自分が思うことや感じていることであって、もっと良い方法があるかもしれません。とりあえず参考になれば幸いです。コンテ...

続きを読む

【シリーズB】ヘッダー画像の枠線を消す方法 | シリウス特典テンプレート

ヘッダー画像の枠線を消す方法

シリーズBご利用者さんからの希望頂いたので、方法をご紹介。シリウス・シリーズBテンプレートはMタイプ・Kタイプともヘッダー画像の枠線がテーマカラーでくくられる仕様になっています。この枠線を消す方法です。方法は簡単。CSS編集編集 >スタイル...

続きを読む

【シリーズB】見出しが2行になるとアイコンに文字被りが気になる場合

SIRIUS(シリウス)のシリーズBテンプレートサイトをスマートフォンで見ると、スマホ用ブラウザの自動調節機能が働いて、メインカラムの文字が勝手に大きくなります。これはこれでありがたいことですが、画像と組み合わせで表示されている見出しの場合...

続きを読む

シリーズB1カラム使用説明書 | SIRIUS特典テンプレート

SIRIUS特典テンプレートシリーズB1カラム説明書です。SIRIUS本体へテンプレートを導入する方法特典サイトからZIPファイルをダウンロードして解凍すると、フォルダになります。このフォルダを開くと、中に「シリーズB1カラム」というフォル...

続きを読む


SIRIUSの機能解説 限定特典ご案内 限定特典付き購入方法 カスタマイズ&小技 アフィリエイトログ