パソコンサイトでは整えられた記事の並びでもレスポンシブ化された
サイトのレイアウトでは記事列に違いが生じます

 

サイドメニューののレイアウト移動は構成上仕方ないものとしても
記事列は出来る限りパソコンサイト同様に配列したいものですね

 

では　スマートフォンでもパソコン画面と同様に記事配列を
表示できるか？　をあれこれと解釈します

 

シリウスへレスポンシブウェブデザイン構造を組み込んでパソコンを
基本とし　スマートフォン画面を確認してみると
サイドバーが下方へ移動している

 

記事列が横幅縮小のため行き場を失い折り返されている

 

画像などは画像コードに数値指定があれば適合表示されます

 

が...その他もございますが詳細は省きます

 

 

記事列は　画面の横サイズが狭められているため途中で

 

記事言葉の意味が通じなくなるかもしれないという状況など
一切関係なく折り返されてしまいます

 

他のレスポンシブウェブデザイン構造を取り入れてるサイトでも
同じような表現はやや見られます

 

でも　大手サイトはパソコン画面　スマホ画面とともに
ぴしゃりと記事列が適合配置されておりますね

 

そんな適合表示を当サイトでご案内している
レスポンシブウェブデザイン構造に追加する手順です

 

最初から組み込んどけ！
と　お叱りを受けるようで申し訳ありませんが

 

なにぶんにも　一度に全て組み込むと　複雑怪奇で意味不明と
なるかもしれませんので　レスポンシブウェブデザイン構造を
組み込み以降　追加することが無難かと？

 

当サイトでご案内しているレスポンシブウェブデザイン構造の
説明ページでのレスポンシブ記述に追加するだけですが

 

以降の調整事項も複数ありますのでよくご確認ください

 

スポンサーリンク

 

 

---

 

ここではサイト内記事列のフォント配列をパソコンサイト同様に
表示する....

 

出来る限りですが？

 

また

 

トップページ更新履歴
パンくずリスト
カテゴリーページ巻末に指定すれば表示される記事リスト
エントリーページで巻末に指定すれば表示される関連リスト

 

以上の範囲を含め進めます　

 

 

ここですみません
あくまでスマートフォンを縦ではなく横配置で見ているとしてください

 

記事列の折り返しレイアウト

 

この事情は　パソコン用で指定されているフォントサイズが　そのまま
スマートフォン画面でも表示されるからなのです

 

レスポンシブ化された場合　フォントサイズも小さくすればよいのです

 

けれど　

 

フォントサイズを小さくすれば　フォントを認識しずらい

 

若い方は　小さくとも読めるでしょうが

 

加齢とともに　小さな文字が　見えん...です～？

 

ま　スマホなど若い方向けなんでしょうから？

 

試してみました

 

まずパソコン用サイトはフォントを16ｐｘにしている状態です

 

レスポンシブ化された場合のスマートフォン画面表示フォントサイズ

 

13ｐｘ　充分認識出来ます

 

12ｐｘにしてみました

 

でも　フォントを12ｐｘを例にしますと　

 

記事カラムが　５８５ＰＸサイズで　記事の折り返しまで
多少右にスペースが空きます

 

１１ＰＸにすれば　ほぼパソコンの記事列と同じになるかな？
です

 

１１ＰＸにしてみました
僅かですが　右端の一文字だけ折り返されました

 

１１ＰＸならば　この段階では文字も充分認識できますね
パソコンサイトで　右端を一文字だけ空ければ　ほとんど
同じ記事列が配列できる状況です

 

 

１０ｐｘにすれば　当然ながらパソコンサイト同様の記事配列に
なります

 

スマートフォン画面では１０ｐｘほどで指定しておられるサイトも
ございますが　文字を認識しやすいでしょうか？

 

選択は　あなたの判断にお任せします？

 

---

 

記事とはすべての列が左から右端まで行きますか？

 

通常は　手前どまりも多いですね

 

その辺を考えながら　構成を考えればよいかも

 

サイドメニューまでの間にすペースがあってもよいと考えると
良いかなと

 

 

この方法は　サイトが2カラム　3カラムで

 

また　サイトの横幅が大きするとうまくいかないみたいです

 

もしくは　ですが　フォントサイズを１２ＰＸにした際は

 

サイドバーを拡張して記事カラムを狭める

 

記事カラム画560ＰＸほどならベストでしょうか

 

アメーバ等のブログサービスにあるような記事カラムが５０％程の
レイアウトなら上手く配置できるでしょうね

 

 

yahooサイトのレイアウトを参考にしてみては？
http://www.yahoo.co.jp/

 

ではどのようにフォントを指定するかですが　記事本文だけで
カスタマイズは終了しません

 

トップページ更新履歴

 

パンくずリスト

 

以下を関連記事一覧を巻末に表示設定している場合は

 

カテゴリーページ巻末に指定すれば表示される記事リスト
エントリーページで巻末に指定すれば表示される関連リスト

 

でも　カスタマイズが必要です

 

---

 

記事本文のフォントをスマートフォンでは小さく表示する手順

 

 

スタイルシートのメェデアクエリ内上部に　bodyコードを指定します

 

ここでの改行記述配置はは　すべてメェデアクエリ内でのことです

 

 

 

 

デフォルトコード
ここはこのままで良いです

 

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #FFFFFF;
font-size: 0.9em;
line-height: 140%;
background-color: #F5F5F5;
<% backgroundImage %>
<% backgroundDisplay %>
<% backgroundColor %>
<% bodyFontSize %>
}

 

 

メェデアクエリ内の一番上に　コピーして貼り付け改行します

 

改行する箇所はフォントサイズ指定の数値を書き換え

 

font-size: 0.9em;の記述をpx指定で好みの数値に変えてください

 

例
font-size: 12px;

 

 

 

シリウス機能　サイトオプションで記事のフォントサイズは
指定されていますね

 

そのサイズ指定をメェデアクエリ内では外さなければなりません

 

外さないと　シリウス機能指定のフォントサイズが優先されてしまうのです

 

以下行を削除します
<% bodyFontSize %>

 

 

@media(max-width:698px){

 

記載例
body {
margin: 0px;
padding: 0px;
text-align: center;
color: #333333;
font-size: 12px;
line-height: 140%;
background-color: #F5F5F5;
<% backgroundImage %>
<% backgroundDisplay %>
<% backgroundColor %>
}

 

これで　レスポンシブウェブサイトでは　記事が指定したフォントサイズに
変更されました

 

以降はパソコンサイトと比較して自己責任で調整してください

 

---

 

パンくずリスト

 

サイト上部にパンくずリストを表示させている場合は　やはり
スマートフォンではフォントが小さいままでトップページリンクが
認識しにくいですね

 

スタイルシートで以下記述を探してください

 

 

#siteNavi {
font-size: 0.775em;
line-height: 1.5em;
margin-bottom:15px;
}

 

 

フォンｔサイズ指定箇所
font-size: 0.775em;

 

数値をパソコンサイトでも　記事フォントと同じくするなら
以下例を参考に書き換えます

 

#siteNavi {
font-size: 15px;
line-height: 1.5em;
margin-bottom:15px;
}

 

 

パソコン表示は今までのままで　スマートフォンではフォントを
多少大きめにするときは
記述はいじらず　そのまま

 

コピーしてメェデアクエリ内に再配置して
フォント数値のみ書き換えてください
font-size: 15px;

 

このままのサイズでスマートフォン表示するなら
ここで完了

 

---

 

トップページの更新記事一覧

 

トップぺージで更新履歴を表示している場合のフォントサイズは
メェデアクエリ内レスポンシブコードに未指定の際は
シリウスパソコン用フォントサイズがそのまま指定されます

 

記事配列同様のフォントサイズにするには

 

スタイルシート内の以下記載をメェデアクエリ内に再配置して

 

#whatsnew li {
line-height: 25px;
list-style-image: url(img/whats_li.jpg);
margin-right: 10px;
margin-left: 10px;
}

 

フォント指定を追加行します
font-size: 11px;
数値は記事フォントサイズに合わせます

 

記載例
#whatsnew li {
line-height: 25px;
list-style-image: url(img/whats_li.jpg);
margin-right: 10px;
margin-left: 10px;
　　　　font-size: 11px;
}

 

 

 

---

 

カテゴリー記事一覧のｈ３見出しフォントサイズ変更

 

カテゴリーページで表示される　記事一覧のｈ３見出しフォントサイズ

 

記事一覧

 

見出しは　以下記載に指定を追加します

 

/* カテゴリーリスト */

 

#categorylist h4 a{
color: #444444;
}

 

赤記載画追加行です

 

テキストカラー　フォントサイズは自己判断で改行願います

 

 

#categorylist h4 a{
color: #444444; 　テキストタイトルカラー
font-size:15px;　　テキストタイトルフォントサイズ
margin: 0 0.2em;
padding: 0;
font-weight: normal;
text-decoration: underline;

 

}

 

 

カテゴリ―記事一覧リストフォント変更

 

 

テキスト上のタイトル

 

テキスト説明文

 

最初に言いますがここでのフォントサイズは記事フォントと
同じに指定しても　若干小さめになります？

 

記事フォントサイズより　1px;大きくして調度ぐらいです

 

メェデアクエリ内に置く記載

 

 

テキスト上部のタイトル
font-size: 15px;

 

ここから
#categorylist h4 {
clear: none;
background-image: url(img/categorylist.jpg);
background-repeat: no-repeat;
font-size: 15px;
height: 30px;
padding-left: 25px;
padding-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
line-height: 30px;
background-position: left top;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 8px;
margin-left: 0px;
overflow: hidden;
}

 

 

 

テキストタイトルフォントカラー指定
カラーコード変更
color:#000000;

 

 

#categorylist h4 a{
color:#000000;
}

 

ここまで

 

 

テキスト説明文

 

#categorylist .desc {
font-size: 12px;　テキスト説明文フォントサイズ
line-height: 130%;
color: #ffffff;
padding: 10px;
}
ここまで

 

 

続きを読むのフォント指定のフォント指定

 

 

≫続きを読む

 

以下記載の　font-size:15px;　数値を変更

 

#categorylist .cbox{
margin-bottom:15px;
font-size:15px;
}

 

---

 

 

エントリー関連記事の見出し変更

 

この表示枠は　ｈ3タグで表示されますがそのままで良い方は
それなりに

 

フォントサイズとか　カラーを」指定する場合は　サイトオプションの
サイトの表示に関する設定で変更します

 

エントリーリストの見出しでｈ３で囲まれる記述を変更します

 

すると枠背景は表示されません

 

デフォルト記載での表示

パソコン　スマートフォン画面でどちらも記事列を適合表示する指定関連

 

変更例
例　
パソコン　スマートフォン画面でどちらも記事列を適合表示する指定関連

 

下記記述を参考にしてください
<u><span style="font-size:17px;"><span style="color:#0ACCFF"><% pageTitle %>関連</span></span></u>

 

 

 

エントリー関連記事一覧

 

ｈ３見出しの下

 

メェデアクエリ内に置く記載
タイトル　テキスト記載はコピーして使う際は削除してください

 

 

 

 

タイトル
#entrylist dt {

 

font-size: 13px;
background-image: url(./img/entlist.jpg);
background-repeat: no-repeat;
background-position: left 5px;
line-height: 30px;
padding-left: 15px;
}

 

テキスト
#entrylist dd {
margin-left: 15px;
margin-bottom: 30px;
font-size: 12px;
color: #FFFFFF;
line-height: 140%;
}

 

例記載はこのままでも使えますが
指定値改行は自己判断で願います

 

 

この範囲で　記事範囲のフォンとしては対応頂けます

 

 

 

念のため記載

 

ヘッダー内は以下指定でフォント変更

 

#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: auto;
border-bottom:solid 1px #EBEBEB;
}

 

#header h2 ,#header .title {
width: 550px;
font-size: 36px;　タイトルフォントサイズ　ここで小さくもできます
line-height: 36px;
position: relative;
left: 30px;
top: 50px;
<% pageTitleFontSize %>
<% pageTitlePlace %>
}

 

#header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
color: #636363;
text-decoration: none;
<% pageTitleColor %>
}

 

#headertext {
text-align: left;
font-size: 11px;　説明
line-height: 130%;
width: 550px;
position: relative;
left: 30px;
top: 60px;
<% pageDescFontSize %>
<% pageDescPlace %>
<% pageDescColor %>
}

 

以上です

 

---

 

アイフォンの上級使用機種

 

Ipadでは？との疑問もあるでしょう

 

 

Ipadでも　小さな画面の機種の場合で　レスポンシブか化した際は

 

スマートフォンサイズのフォントは　同サイズでも枠が大きいため

 

逆に認識しずらくなります　

 

その際は　メディアクエリを一つ追加することになります

 

詳細はこちらでご確認いただけます
シリウスレスポンシブウェブデザインのレイアウト変更値

 

 

パソコン　スマートフォン画面でどちらも記事列を適合表示する指定
SIRIUS　シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ