Forum
J! JAPAN TOP
ようこそ, ゲスト
ユーザ名: パスワード: 自動ログイン

トピック: 記事内のclassの使い方について質問があります

記事内のclassの使い方について質問があります 1 年 9 ヶ月 ago #5026

  • hitoridake
  • hitoridake さんのアバター
  • Offline
  • Senior Boarder
  • 投稿数: 48
  • カルマ: 0
Joomla Joomla! 3.4.8を使用しています。日本語化もしております。

テンプレートにはJOOMLARTのpurity_IIIというものを使用しております。

purity_IIIを使用するにあたってT3 Frameworkもインストールしております。

また

モジュールでroksprocketというものを使用しております。

この「29」という記事を観ていただきたいのですが

test.shaberizon.jp/index.php/ja/category...1-26-10-39-42/65-029

この記事は

<div style="overflow: hidden;">

<div class="col-md-6" style="padding-bottom: 32767px; margin-bottom: -32767px;">

画像

</div>

<div class="col-md-6" style="background-color: #ffffff; padding: 10px; padding-bottom: 32767px; margin-bottom: -32767px;">

テキスト

</div>

</div>

という感じで書いております。

パソコンで見る限り私の理想とするレイアウトなのですが

スマホ等、横幅の解像度が狭くなりレスポンシブウェブデザインが機能すると

テキストのstyleで指定した背景色の白色の横幅が、画像の横幅よりはみ出てしまい、残念な気持ちになります。

なので

このように書き直しました

<div style="overflow: hidden;">

<div class="col-md-6" style="padding-bottom: 32767px; margin-bottom: -32767px;padding-right: 0px;padding-left: 0px;">

画像

</div>

<div class="col-md-6" style="background-color: #ffffff; padding: 10px; padding-bottom: 32767px; margin-bottom: -32767px;">

テキスト

</div>

</div>

画像のところのStyleにpadding-right: 0px;padding-left: 0px;を付け加えたワケですが

結果、このようになりました。

test.shaberizon.jp/index.php/ja/category...1-26-10-39-58/69-031

悪くはないのですが

できれば画像とテキストの背景色「白色」との間に余白が欲しいです。

なので

私の希望なのですが

横幅の解像度が広いパソコン等で観ているときは画像の両脇に余白があり

スマホ等、横幅の解像度が狭い時は画像の両脇の余白が無効になる(もしくは、テキストの背景色「白色」の幅が上の画像と同じになる)

という方法のアドバイスをいただきたく

投稿させていただきました。


アドバイスをいただけると助かります

よろしくお願いいたします。
最終編集: 1 年 9 ヶ月 ago : hitoridake.
ゲストの書き込みは許可されていません。

記事内のclassの使い方について質問があります 1 年 9 ヶ月 ago #5027

  • siraisi
  • siraisi さんのアバター
  • Offline
  • Platinum Boarder
  • 投稿数: 457
  • 感謝を受け取りました 45
  • カルマ: 32
template.css 1427行目

article img, .article-intro img {
display: block;
height: auto;
max-width: 100%;
}

max-width: 100%を変更してみてはいかがでしょうか。
mail: このメールアドレスはスパムボットから保護されています。閲覧するにはJavaScriptを有効にする必要があります。
ゲストの書き込みは許可されていません。
次のユーザが感謝しました: hitoridake

記事内のclassの使い方について質問があります 1 年 9 ヶ月 ago #5028

  • hitoridake
  • hitoridake さんのアバター
  • Offline
  • Senior Boarder
  • 投稿数: 48
  • カルマ: 0
siraisiさま

アドバイスありがとうございます

99%に変更してみたところ
パソコンなど横幅の解像度があるディスプレイでの表示に関しては完璧なのですが
スマホなど横幅の解像度が狭いディスプレイでブロックが縦に表示される場合
テキストの背景色「白色」よりも画像が狭く表示されてしまいました。

スマホ等で画像が表示される場合は、max-width: 100%に戻るのが希望なのですが
難しそうですねえ。

とはいえ
siraisiさまのアドバイスのおかげで場所が絞れてきたので
その行の付近を探してみます。

もしまたアドバイスがありましたら
よろしくお願いいたします。
ゲストの書き込みは許可されていません。

記事内のclassの使い方について質問があります 1 年 9 ヶ月 ago #5029

  • hitoridake
  • hitoridake さんのアバター
  • Offline
  • Senior Boarder
  • 投稿数: 48
  • カルマ: 0
追記させていただきます

こちらに書いてある技は今回の問題に応用可能でしょうか?

itstudio.co/2015/04/10/3832/

もし応用できる技だとしたら
CSSにどのように書き込めば良いかアドバイスいただけると助かります。

私の方でも挑戦してみます。

template.css の最後の行にでもこのまま追加すれば大丈夫ですかね?
ゲストの書き込みは許可されていません。

記事内のclassの使い方について質問があります 1 年 9 ヶ月 ago #5030

  • hitoridake
  • hitoridake さんのアバター
  • Offline
  • Senior Boarder
  • 投稿数: 48
  • カルマ: 0
少しだけ原因は見えてきました

背景色「白色」はpaddingで指定した余白も塗られていることが原因のようです。

なので

テキストのところのdivの

padding: 10px



padding-top: 10px

に変え

margin-left 15px;

margin-right 15px;

を加えればOKな気がするんですけど

それをやると横に並ぶレイアウトが崩れ縦に並んでしまいます。

しかしスマホでみると横幅ピッタリなので

凄く正しい方向に進んでいる気がするのですが

なにか、記述に間違い等があり

パソコン上でのレイアウトを崩しているようです。

引き続き、調査してみます。

なにかアドバイス有りましたら、よろしくお願いいたします
ゲストの書き込みは許可されていません。

記事内のclassの使い方について質問があります 1 年 9 ヶ月 ago #5031

  • siraisi
  • siraisi さんのアバター
  • Offline
  • Platinum Boarder
  • 投稿数: 457
  • 感謝を受け取りました 45
  • カルマ: 32
今、閲覧してますが、PC、スマートフォンともレイアウトは良いようですが、いかがですか。

基本的に、フリーのテンプレートは、大雑把の作成してますので、個人での改造が必要ですね。有料テンプレートでも改造が必要になってきます。ある程度のCSSやその他諸々の知識が必要になってきます。頑張ってください。また、質問がありましたらご遠慮なくどうぞ!!
mail: このメールアドレスはスパムボットから保護されています。閲覧するにはJavaScriptを有効にする必要があります。
ゲストの書き込みは許可されていません。
次のユーザが感謝しました: hitoridake

記事内のclassの使い方について質問があります 1 年 9 ヶ月 ago #5032

  • hitoridake
  • hitoridake さんのアバター
  • Offline
  • Senior Boarder
  • 投稿数: 48
  • カルマ: 0
siraisiさま

アドバイスを活かすことができず
申し訳ありませんでした。

今回の問題は
背景色を白以外、記事を書く部分とその他の部分の背景色を別の色にすることで生じたことでした。
色々調べてみたのですが、自分の知識不足もあって上手くいかず
デフォルトの白でいくことにしました。

有料のテンプレートは検討したのですが
なかなか良いものが見つからず
今回のように何かあった場合、英語が解らないので有料であることが活かしきれず
ゼロからオリジナルで作ってもらう予算もなく
応用がききそうな今回のテンプレートを選びましたが
応用がいろいろききそうな分
siraisiさまのおっしゃる通り、しっかり勉強しないといけない部分が多くなりますね。

今回、上手くいかなかったことで
次回質問させていただくのも
申し訳ないなあ、と考えていたので
siraisiさまのお気遣い
大変うれしいです。

また何かありましたら
よろしくお願いいたします。
最終編集: 1 年 9 ヶ月 ago : hitoridake.
ゲストの書き込みは許可されていません。