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

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

17件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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を上書きしていただくしかないかもしれません。

17件の返信スレッドを表示中
返信先: 幅の非常に狭いデバイスで関連記事のレイアウトが崩れるで#55989に返信
あなたの情報:




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