Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › 幅の非常に狭いデバイスで関連記事のレイアウトが崩れる
-
投稿者投稿
-
-
pandametalゲスト
特に不具合という事ではなく、仕様だと思いますが、一点気がついたので。
モバイル表示で、幅の狭いデバイス(320px)にすると、関連記事部分の抜粋がサムネイルの下に回り込んでしまいますね。あと記事タイトルもサムネイルの下部に広がってしまう(文字は重ならない)ようです。(記事タイトルの背景に色をつけると重なって見える)。これはトップページのエントリーカード表示でもなるようです。
※Google Chromeのデベロッパーツールのスマホ表示で確認しています、iPhone4や5を選ぶとなりますね。実際のiPhoneでどうなるかは持っていないので確認していません。
構造的な修正が必要だろうと思いますが、そもそも今時幅320px以下のデバイスもないだろうから、修正の必要はないかも知れませんが。
だからなんだと言う話でスミマセンが。
-
わいひらキーマスター
それはおそらく、仕様通りに表示されて、そのようになっているんだと思います。
こんな感じの表示なら、仕様です。
詳しくはこちら。
Simplicity2.1.0で追加したPCとモバイルの中間デザインについて下に回り込ませない方法だと、横幅が狭くなりすぎて読みづらく、縦にもスペースをとるので、そのようにしたんだと思います。
おっしゃるように、いずれにせよ、今は320端末を使用している人も少ないと思うので、どちらの表示でも問題ないのかなと思います。
※320端末で画像を下に回り込ませない表示にするなら、画像を小さくする必要が出てくるという難点もあるので。 -
pandametalゲスト
これ、構造的な問題なので改造は簡単ではないと思いますが
例えば記事タイトルに非常に長い文章を入れた場合に、サムネイルの横から始まってサムネが終わったところでサムネの下側に回り込むようになりますが
抜粋部分はそうならずにブロックごと横か下、と言う風になってしまいますね。
タイトルと同じように横から回り込んで下側に、という風になるといいなと思ったのですが、簡単ではないと思いますし、それほど重要な話でもないので、まぁいいですよね(^^;)
要望として、記事タイトルをサムネの上側に表示したい、と言う希望はあるのですが、(サムネをタイトル行の下、抜粋はサムネの横というように)まだWordPressとSimplicityについてちゃんと理解していない部分が多いので、いずれ研究課題と考えております。
-
Akiraゲスト
構造的な問題なので改造は簡単ではないと思いますが
何も構造的な問題はありません。
抜粋部分はそうならずにブロックごと横か下、と言う風になってしまいますね。タイトルと同じように横から回り込んで下側に、という風になるといいなと思ったのですが
CSSを変更されればいいのではないでしょうか。
例えば下記のCSSを書くことで、画面幅359px未満で抜粋部分が記事タイトル下からサムネイルの下に回り込みます。
@media screen and (max-width: 359px) { .related-entry .related-entry-snippet { clear: none; } }
-
わいひらキーマスター
これ、構造的な問題なので改造は簡単ではないと思いますが
構造的な問題ではなくて、仕様です。
改造も、Akiraさんが言及されているように、CSSで比較的簡単に(PHPを使用せずに)できます。 -
かうたっくゲスト
こんばんは
幅の狭いデバイス(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の指定方法を変更すれば対応できそうですので、試してください
-
かうたっくゲスト
(文字は重ならない)ようです。
に関してですが、
line-height: 110%;
の指定があるので重なりません、てな感じです。 -
かうたっくゲスト
要望として、記事タイトルをサムネの上側に表示したい、と言う希望はあるのですが、(サムネをタイトル行の下、抜粋はサムネの横というように)
CSSだけでも行ける気もします
画像サイズも決まってる状態でのこと。と思われますから。抜粋文に、関しては
また下へ回り込まないように、指定する必要はありそうですね。。実際やってませんが…やってみる時間あれば試してください^^
今、引用の項目が気になったもので。。
-
pandametalゲスト
みなさんありがとうございます。
とりあえず、幅の狭いデバイスの件は置いといてエントリーカードをこのようなレイアウトにしたいのですが、SCCだけで可能なのですか?
いくつか試してみたのですが、うまく行きませんでした
てっきり領域の並べ替えが必要=構造の改造が必要なのかと思ったのですが
Attachments:
-
かうたっくゲスト
今も前回の回答も
構造を確認してませんけど、CSSだけでもそのようにするのは可能です。
スタイルの状況によって面倒か簡単かはありますけど(*^^*)
-
わいひらキーマスター
僕も可能か不可能かで言えば、可能のような気もします。
ただ、モバイル環境も含めて正常表示させるには、難しい可能性もあります。
詳しくは、実際のページのURLを提示していただいて、設定状態を見せていただかないと何とも言えないかもしれません。 -
pandametalゲスト
ページはここですが
http://pandametal.xsrv.jp/wp/
すみません、実現できておらず、標準の状態に戻してあるので、ページを見てもらっても意味がないですね
もう少し、構造の理解が進めばなんとかする方法も思いつくかも知れません。どうしてもそうしないと困るという状態でもないので、将来の課題ということで、ゆっくり研究していきたいと思います。
ありがとうございました。 -
かうたっくゲスト
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; } }
-
pandametalゲスト
かうたっく様
わざわざありがとうございます。
(とりあえずそのまま貼り付けて試してみましたが、うまくいきませんでしたが。)
せっかく多大なヒントを頂いたので、これを元にもう少し研究してみたいと思います。
わざわざありがとうございました。☆POSIIONとMARGINを使った位置調整は以前やってみたのですが、理由がなんだったか忘れてしまいましたが(ボーダー等に影響があったような?)ので、すぐやめてしまったのでした。
────────────────────────────────────────────────────────────────────
ところで、iPhoneの新型が発表されましたね。
しかし、やはり画面サイズは320pxのようです。国産スマホメーカーが次々撤退する中、iPhoneの使用率は高まる一方のようにも見えます。
とすると、もう少なくなったと書きましたが、やはり幅320px対応はまだ無視できないかな、とも思えますね。 -
パソ活ゲスト
自分のアクセス解析を見た限りですが、横幅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のスマホは少なくなっていくと思います。
-
pandametalゲスト
ああ、そうです、そのページを見ていました。ppiですね、iPhone使ったこと無いので、実際にどのような表示になっているのかよく知らないのですよね。ラティーナディスプレイ?なにそれ?という状態で(^^;)
新型のiPhoneは320pxではないのですね。なら、やはり、これからは320px以下のデバイスは減っていく一方でしょうか。
(国産のスマホメーカーがどんどん撤退していくのが心配ですが、関係ない話題となってしまいますね。)
-
かうたっくゲスト
せっかく多大なヒントを頂いたので、これを元にもう少し研究してみたいと思います。
好みのとおりになると良いですね^^
ちなみにこちら#55815は、関連記事だと書いたかなぁ?と思って、再度確認してみました。
左ビフォー:右アフター
http://netakiri.net/uploader/src/up0340.pngChromeデベロッパーツールの320pxで見ただけなので、不具合もあるかもしれません。
やはり画面サイズは320pxのようです。国産スマホメーカーが次々撤退する中、iPhoneの使用率は高まる一方のようにも見えます。
とすると、もう少なくなったと書きましたが、やはり幅320px対応はまだ無視できないかな、とも思えますね。たしかに320pxは無視できない状況だと思われます。
ですがそもそもの話、ビフォーも個人的には違和感なくキレイな表示だと思うのですが。
不具合があれば困りますけど、好きな形にカスタマイズをしたい。という感覚だったのかと思ってました。
-
わいひらキーマスター
ですがそもそもの話、ビフォーも個人的には違和感なくキレイな表示だと思うのですが。
そうなんです。一応個人的には、Beforeも個人的に320で見やすいようにと作ったつもりではあったんですが^^;
ただやはり好みあると思うので、変更するには、CSSを上書きしていただくしかないかもしれません。
-
-
投稿者投稿