幅の非常に狭いデバイスで関連記事のレイアウトが崩れる

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも 幅の非常に狭いデバイスで関連記事のレイアウトが崩れる

このトピックには17件の返信が含まれ、2人の参加者がいます。2 ヶ月前わいひら わいひら さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #55742 返信

    pandametal

    特に不具合という事ではなく、仕様だと思いますが、一点気がついたので。
    モバイル表示で、幅の狭いデバイス(320px)にすると、関連記事部分の抜粋がサムネイルの下に回り込んでしまいますね。

    あと記事タイトルもサムネイルの下部に広がってしまう(文字は重ならない)ようです。(記事タイトルの背景に色をつけると重なって見える)。これはトップページのエントリーカード表示でもなるようです。

    ※Google Chromeのデベロッパーツールのスマホ表示で確認しています、iPhone4や5を選ぶとなりますね。実際のiPhoneでどうなるかは持っていないので確認していません。

    構造的な修正が必要だろうと思いますが、そもそも今時幅320px以下のデバイスもないだろうから、修正の必要はないかも知れませんが。

    だからなんだと言う話でスミマセンが。

  • #55749 返信
    わいひら
    わいひら
    キーマスター

    それはおそらく、仕様通りに表示されて、そのようになっているんだと思います。
    こんな感じの表示なら、仕様です。

    詳しくはこちら。
    Simplicity2.1.0で追加したPCとモバイルの中間デザインについて

    下に回り込ませない方法だと、横幅が狭くなりすぎて読みづらく、縦にもスペースをとるので、そのようにしたんだと思います。
    おっしゃるように、いずれにせよ、今は320端末を使用している人も少ないと思うので、どちらの表示でも問題ないのかなと思います。
    ※320端末で画像を下に回り込ませない表示にするなら、画像を小さくする必要が出てくるという難点もあるので。

  • #55750 返信

    pandametal

    これ、構造的な問題なので改造は簡単ではないと思いますが

    例えば記事タイトルに非常に長い文章を入れた場合に、サムネイルの横から始まってサムネが終わったところでサムネの下側に回り込むようになりますが

    抜粋部分はそうならずにブロックごと横か下、と言う風になってしまいますね。

    タイトルと同じように横から回り込んで下側に、という風になるといいなと思ったのですが、簡単ではないと思いますし、それほど重要な話でもないので、まぁいいですよね(^^;)

    要望として、記事タイトルをサムネの上側に表示したい、と言う希望はあるのですが、(サムネをタイトル行の下、抜粋はサムネの横というように)まだWordPressとSimplicityについてちゃんと理解していない部分が多いので、いずれ研究課題と考えております。

  • #55752 返信

    Akira

    構造的な問題なので改造は簡単ではないと思いますが

    何も構造的な問題はありません。

    抜粋部分はそうならずにブロックごと横か下、と言う風になってしまいますね。タイトルと同じように横から回り込んで下側に、という風になるといいなと思ったのですが

    CSSを変更されればいいのではないでしょうか。

    例えば下記のCSSを書くことで、画面幅359px未満で抜粋部分が記事タイトル下からサムネイルの下に回り込みます。

    @media screen and (max-width: 359px) {
      .related-entry .related-entry-snippet {
        clear: none;
      }
    }
  • #55753 返信
    わいひら
    わいひら
    キーマスター

    これ、構造的な問題なので改造は簡単ではないと思いますが

    構造的な問題ではなくて、仕様です。
    改造も、Akiraさんが言及されているように、CSSで比較的簡単に(PHPを使用せずに)できます。

  • #55754 返信

    かうたっく

    こんばんは

    #55742

    幅の狭いデバイス(320px)にすると、関連記事部分の抜粋がサムネイルの下に回り込んでしまいますね。

    あと記事タイトルもサムネイルの下部に広がってしまう(文字は重ならない)ようです。(記事タイトルの背景に色をつけると重なって見える)。。

    について、特に回答がないので。

    下記の領域、関連記事のh3のみ
    背景を追加したら、画像(サムネイル)と記事タイトルどちらも背景が灰色になります。

    .related-entry-title {
        background: #ddd; /*背景#ddd 灰色追加*/
    }

    画像も背景の灰色になっている領域って事。
    http://netakiri.net/uploader/src/up0321.png

    関連記事のh3のリンクaの領域を指定すれば
    記事タイトルのみ背景が灰色になりますよ。

    .related-entry-title-link {
        background: #ddd;
    }

    画像は背景の灰色にならない。タイトルのみの領域と言う事の違い
    http://netakiri.net/uploader/src/up0322.png

    これはトップページのエントリーカード表示でもなるようです。

    コチラも同じセレクタ(HTMLの指定の仕方が同じ)ですが、CSSの指定方法を変更すれば対応できそうですので、試してください

  • #55755 返信

    かうたっく

    (文字は重ならない)ようです。

    に関してですが、line-height: 110%;の指定があるので重なりません、てな感じです。

  • #55757 返信

    かうたっく

    https://wp-simplicity.com/suport/topic/%e5%b9%85%e3%81%ae%e9%9d%9e%e5%b8%b8%e3%81%ab%e7%8b%ad%e3%81%84%e3%83%87%e3%83%90%e3%82%a4%e3%82%b9%e3%81%a7%e9%96%a2%e9%80%a3%e8%a8%98%e4%ba%8b%e3%81%ae%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88/#post-55750

    要望として、記事タイトルをサムネの上側に表示したい、と言う希望はあるのですが、(サムネをタイトル行の下、抜粋はサムネの横というように)

    CSSだけでも行ける気もします
    画像サイズも決まってる状態でのこと。と思われますから。

    抜粋文に、関しては
    また下へ回り込まないように、指定する必要はありそうですね。。

    実際やってませんが…やってみる時間あれば試してください^^

    今、引用の項目が気になったもので。。

  • #55797 返信

    pandametal

    みなさんありがとうございます。
    とりあえず、幅の狭いデバイスの件は置いといて

    エントリーカードをこのようなレイアウトにしたいのですが、SCCだけで可能なのですか?

    いくつか試してみたのですが、うまく行きませんでした

    てっきり領域の並べ替えが必要=構造の改造が必要なのかと思ったのですが

    Attachments:
  • #55799 返信

    かうたっく

    今も前回の回答も
    構造を確認してません

    けど、CSSだけでもそのようにするのは可能です。

    スタイルの状況によって面倒か簡単かはありますけど(*^^*)

  • #55810 返信
    わいひら
    わいひら
    キーマスター

    僕も可能か不可能かで言えば、可能のような気もします。
    ただ、モバイル環境も含めて正常表示させるには、難しい可能性もあります。
    詳しくは、実際のページのURLを提示していただいて、設定状態を見せていただかないと何とも言えないかもしれません。

  • #55811 返信

    pandametal

    ページはここですが
    http://pandametal.xsrv.jp/wp/
    すみません、実現できておらず、標準の状態に戻してあるので、ページを見てもらっても意味がないですね
    もう少し、構造の理解が進めばなんとかする方法も思いつくかも知れません。どうしてもそうしないと困るという状態でもないので、将来の課題ということで、ゆっくり研究していきたいと思います。
    ありがとうございました。

  • #55815 返信

    かうたっく

    http://pandametal.xsrv.jp/wp/17383.html の関連記事を変更しました。

    このカスタマイズをすると、ご自身でつけられたボーダーの位置がおかしくなるので、500px未満で変更しました。

    完全レスポンシブではないので、確認に時間がかかってしまったので、500px未満限定にしました。

    http://netakiri.net/uploader/src/up0329.png
    上、▲500px未満。

    下、▼320px。
    http://netakiri.net/uploader/src/up0331.png

    有効にする場合は、mobile.cssに追記してください。

    @media screen and (max-width:500px) {
    	#main .related-entry {
    		position: relative;
    		margin-top: 2.5em;
    	}
    	.related-entry-content {
    		margin-left: 0;
    		margin-top: 4em;
    	}
    	.related-entry h3,
    	.related-entry h3 a {
    		position:	absolute;
    		top: -1.2em;
    		left: 0;
    		width: 98%;
    		height: 1em;
    	}
    	.related-entry h3 a {
    		overflow: hidden;
    	}
    	.related-entry-read {
    		margin-left: 110px;
    	}
    /*ここからボーダー変更*/
    	#main .related-entry:before {
    		position: absolute;
    		top: -3.5em;
    		content: "";
    		width: 90%;
    /*既存のボーダーの装飾*/
    		border-top:solid 1px silver;padding:10px;margin:6px 0;}
    /*元の指定を初期値に変更*/
    article.related-entry{border-top:none;padding:0;margin: 0;}
    h3.related-entry-title{margin:0;background:none;padding:0;border-radius: 0;}
    }
    
    @media screen and (max-width: 359px) {
    	.related-entry .related-entry-snippet {
    		clear: none;
    	}
    }
  • #55977 返信

    pandametal

    かうたっく様
    わざわざありがとうございます。
    (とりあえずそのまま貼り付けて試してみましたが、うまくいきませんでしたが。)
    せっかく多大なヒントを頂いたので、これを元にもう少し研究してみたいと思います。
    わざわざありがとうございました。

    ☆POSIIONとMARGINを使った位置調整は以前やってみたのですが、理由がなんだったか忘れてしまいましたが(ボーダー等に影響があったような?)ので、すぐやめてしまったのでした。

    ────────────────────────────────────────────────────────────────────
    ところで、iPhoneの新型が発表されましたね。
    しかし、やはり画面サイズは320pxのようです。国産スマホメーカーが次々撤退する中、iPhoneの使用率は高まる一方のようにも見えます。
    とすると、もう少なくなったと書きましたが、やはり幅320px対応はまだ無視できないかな、とも思えますね。

  • #55981 返信

    パソ活

    自分のアクセス解析を見た限りですが、横幅320pxのスマホは約14%のシェアという結果になっていました。(タブレットも含めたモバイルアクセスの中の%です)

    375×667 (39.94%) 
    360×640 (31.24%) 
    320×568 (14.06%) ※たぶんここがiPhoneSEとか
    414×736 (6.66%) 
    360×592 (1.48%) 
    これ以下は少ないため省略。

    この結果を見る限り、14%というのは確かに無視していいのかどうか微妙なラインですね。

    ちなみに新型iPhone(8・8Plus・X)は画面サイズ(横幅)320pxではなく、360px・375pxになるようです。
    http://qiita.com/tomohisaota/items/f8857d01f328e34fb551
    pandametalさんがおっしゃる320という数字は320ppiとか解像度の数値を見たりしたんでしょうか。

    おそらく、これから先iPhoneSEの後継になるような小さい画面サイズのiPhoneが出ない限りは、横幅320pxのスマホは少なくなっていくと思います。

  • #55982 返信

    pandametal

    ああ、そうです、そのページを見ていました。ppiですね、iPhone使ったこと無いので、実際にどのような表示になっているのかよく知らないのですよね。ラティーナディスプレイ?なにそれ?という状態で(^^;)

    新型のiPhoneは320pxではないのですね。なら、やはり、これからは320px以下のデバイスは減っていく一方でしょうか。

    (国産のスマホメーカーがどんどん撤退していくのが心配ですが、関係ない話題となってしまいますね。)

  • #55984 返信

    かうたっく

    せっかく多大なヒントを頂いたので、これを元にもう少し研究してみたいと思います。

    好みのとおりになると良いですね^^

    ちなみにこちら#55815は、関連記事だと書いたかなぁ?と思って、再度確認してみました。

    左ビフォー:右アフター
    http://netakiri.net/uploader/src/up0340.png

    Chromeデベロッパーツールの320pxで見ただけなので、不具合もあるかもしれません。

    やはり画面サイズは320pxのようです。国産スマホメーカーが次々撤退する中、iPhoneの使用率は高まる一方のようにも見えます。
    とすると、もう少なくなったと書きましたが、やはり幅320px対応はまだ無視できないかな、とも思えますね。

    たしかに320pxは無視できない状況だと思われます。

    ですがそもそもの話、ビフォーも個人的には違和感なくキレイな表示だと思うのですが。

    不具合があれば困りますけど、好きな形にカスタマイズをしたい。という感覚だったのかと思ってました。

  • #55989 返信
    わいひら
    わいひら
    キーマスター

    ですがそもそもの話、ビフォーも個人的には違和感なくキレイな表示だと思うのですが。

    そうなんです。一応個人的には、Beforeも個人的に320で見やすいようにと作ったつもりではあったんですが^^;
    ただやはり好みあると思うので、変更するには、CSSを上書きしていただくしかないかもしれません。

返信先: 幅の非常に狭いデバイスで関連記事のレイアウトが崩れる
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)