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


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    パソコンとスマートサイズで記事列を出来る限り同じく表示する?

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

    スポンサーリンク

     

     


     

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

     

    出来る限りですが?

     

    また

     

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

     

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

     

     

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

     

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

     

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

     

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

     

    けれど 

     

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

     

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

     

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

     

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

     

    試してみました

     

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

     

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

     

    13px 充分認識出来ます

     

    12pxにしてみました

     

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

     

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

     

    11PXにすれば ほぼパソコンの記事列と同じになるかな?
    です

     

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

     

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

     

     

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

     

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

     

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

     


     

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

     

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

     

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

     

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

     

     

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

     

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

     

    もしくは ですが フォントサイズを12PXにした際は

     

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

     

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

     

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

     

     

    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;
    }

     

     

    フォンtサイズ指定箇所
    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;
    }

     

     

     


     

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

     

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

     

    記事一覧

     

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

     

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

     

    #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;
    }

     


     

     

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

     

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

     

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

     

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

     

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

     

    デフォルト記載での表示

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

     

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

     

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

     

     

     

    エントリー関連記事一覧

     

    h3見出しの下

     

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

     

     

     

     

    タイトル
    #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 シリウスレスポンシブデザインテンプレート公開
    シリウスカスタマイズ

    パソコン スマートフォン画面でどちらも記事列を適合表示する指定関連解説
    サイトをレスポンシブウェブ化カスタマイズする今事情
    SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
    レスポンシブウェブデザイン設定事情を理解しよう
    シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
    レスポンシブウェブデザイン変更前の説明
    SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
    レスポンシブウェブデザインカスタマイズのレイアウト変更値
    シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
    ヘッダー画像をレスポンシブウェブ構造で作動させる方法
    シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
    ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
    シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
    デフォルト一カラムレスポンシブウェブデザイン設定
    シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
    2カラムテンプレート レスポンシブデザイン設定方法
    SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
    3カラムテンプレート レスポンシブウェブデザイン追加方法
    SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
    2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
    SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
    トップページのみをレイアウト替えした際のカスタマイズ色々
    シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
    レスポンシブサイトの見出しメニューを調整するカスタマイズ
    シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
    レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
    シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
    レスポンシブウェブサイトにPC SP画面切り替えスイッチは不要
    SIRIUS シリウスレスポンシブウェブサイトにPC SP画面切り替えスイッチは必要か?ですが 今時代のスマートフォンではフィンガータッチで適正サイズに調整できるため不要と思われます
    レスポンシブウェブサイトへアドセンスを表示する際の注意ごと
    シリウスサイトをレスポンシブウェブデザインへと機能カスタマイズを追加した際 googleアドセンスをサイドのメニュー位置に置いたままではアドセンスのポリシーガイドラインに違反してしまうのです
    レスポンシブ構造ではサイドバーのアドセンス配置は処理が必要
    シリウスへのレスポンシブ構造追加ではサイドバーのアドセンス配置は スマホサイズでは広告が巻末に押しやられポリシー違反となります 対処法は指定処理が必要...詳細はサイトで
    レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう
    シリウスへレスポンシブウェブデザイン構造を設定したなら掲載する画像の事情により正常に表示されない場合があります 事情解説対処はこちらで.....
    iPhone ipadでサイト背景を固定化する仕様設定
    シリウスサイトの背景を固定化している場合でレスポンシブ化された際 iPhone ipadではサイト背景がスクロールしてしまう障害が発生します 対処法はサイトで......
    サイドメニューを押しやらない固定するレスポンシブウェブレイアウト
    シリウスへのデフォルトレスポンシブウェブレイアウトでは サイドメニューが後方へ押しやられますが 位置を動かさない または メニューのサイズを固定可変がCSS指定により可能となります
    レスポンシブウェブデザイン構造でのフォントサイズ指定
    シリウスレスポンシブウェブデザイン構造でのフォントサイズは シリウス機能で16pxを指定していた場合 iPhoneサイトでは自動で縮小されてしまいます 見やすくする対応は?
    レスポンシブウェブデザインに適合する画像サイズ
    シリウスレスポンシブウェブデザインではスマートフォン パソコンの各画面では 掲載画像がどのように変化するのか?各端末に適合するサイズは?いろんな解釈がありますね
    大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い
    シリウスレスポンシブサイトでは大きな縦画像サイズのヘッダー画像を設置している場合 スマートフォンでは出現スピードの読み込みが遅くなります
    端末により記事コンテンツを切り替え表示する
    シリウスサイトをスマートフォンサイトでは記事列を横幅内に収めて または多少のコンテンツを替えて パソコンサイトと異なるコンテンツに切り替えて表示するカスタマイズ方法の詳細
    スマートフォン PCコンテンツ切り替え時のシリウス機能操作
    SIRIUS シリウススマホ PCデバイスでの切り替えコンテンツについて 初期指定の反映スタイル 付け加えたカスタマイズ説明による反映確認の詳細です
    スマートフォン パソコンサイトで画像を切り替え表示指定する
    当サイトのシリウスレスポンシブウェブデザイン構造ではスマートフォン パソコンサイト画面で画像の表示非表示の切り替え または異なる画像を表示することが指定出来ます
    スマートフォンサイトではスライダー画像は必要か?
    SIRIUS シリウスパソコンサイトでは綺麗に表示されるスライダー画像ですがスマートフォン閲覧サイトでは表示が必要ののでしょうか?
    トップページ全体をワイドヘッダー画像で表示したい?の勘違い
    SIRIUS シリウステンプレートへトップページ全体をワイドヘッダー画像で表示したい?といわれる方がおりますが ウェブ初期時の勘違い?ではないでしょうか とりあえずの講釈はこちらで....
    レスポンシブウェブ構造でのワイドPC画面対応背景画像設定方法
    シリウスのレスポンシブサイトに編集された背景画像を配置する際は ワイドサイズのウルトラPC画面でも 自動拡張されるようclass指定で設定を追加します
    スマートフォンでは、固定のグローバルは出現させない
    SIRIUS シリウスサイトでグローバルナビゲーションのスクロール固定化を指定している場合、スマホ閲覧の際、邪魔になるので出現しないよう指示しましょう
    iphone設定からレスポンシブデザインへ移行する際の注意事
    SIRIUS シリウスのiphone設定からレスポンシブデザインへ移行する際は、指定の解除およびサーバーファイルのiphone削除が必要です
    ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
    SIRIUS シリウスレスポンシブ導入テンプレートでは、ヘッダー画像を縮小させる、またはスマートフォンサイトでは小さな画像に切り替えるとかの考え方も合わせ含めた対処方法

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト