web-dev-qa-db-ja.com

ブログのレイアウト-レスポンシブな画像グリッドの配置

私はカテゴリブログレイアウトを使用して、それをオーバーライドし、記事を指す記事のイントロ画像の周りにリンクをラップします。

ここで、 here を確認できるように、応答性の高い画像グリッドの配置を実現したいと思います。これは、CSSを使用して実現できます。

しかし、どのCSSファイルを編集する必要があるのか​​、またはどのように機能させるのかわかりません。

誰かがこれを達成する方法と、CSSクラスの外観に関するヒントを知っていますか？

私はJoomla 3.3.6とAfterburner2テンプレートをガントリフレームワークで使用しています。

解決策をありがとう...（評価しましたが、担当者が足りません）読んだ後、もう一度試してみたところ、メニュー項目の設定で列数を変更できることに気付きました。これは、blog.php全体をオーバーライドするよりもはるかに直感的に見えます。列の数をblog.phpに静的に書き込むと、非常に柔軟性がなくなります！？

そのアプローチでは、イントロテキストが常に表示されるという問題がありました。また、記事またはメニューの[イントロテキストを表示]オプションを[非表示]に設定した場合。そこで、記事の冒頭に「more」を設定し、その後に記事のテキストを設定します。 「もっと読む」私も非表示に設定しました。だから私のカテゴリーのブログのサイトでは、画像しか見ていません。 4つの画像がある1つの行。

しかし、別の問題が発生します。

1）少し小さくしたいので、画像間の間隔を変更できませんでした。

2）1つの行に2つの画像のみが表示されるようにページの幅を狭くすると、それらは正確に並んでいません。右のものは左のものより少し下です。

最初はそれが正しい使い方だと思いましたが、しばらくするとまた確信が持てませんでした。

これは良い方法ですか（CSSオーバーライドなどで保存します）、または別のアプローチから始めて、blog.phpを編集する必要があります（最初は編集したかったのですが、方法はわかりません） blog.phpのパーツを3列または4列のレイアウトに変更するには）!?

joomla-3.xoverridescontentgantry
5
oodoloo

Joomlaでは、通常、同じ（または類似の）結果を得る方法がいくつかあります。

ブログのレイアウトを使用する代わりに、 RokSprocket を試してみることをお勧めします。これは無料のJoomlaモジュールであり、コンテンツ（記事）をいくつかの方法で表示し、ブログのレイアウトと同様に、カテゴリーでフィルターすることができます。設定では、イントロテキストを非表示にしたり、列数を設定したり、画像のサイズを変更したりできます。さらに、readmoreリンクは、デフォルトのブログレイアウトと同じように記事を表示します。いくつかのアイデアについては、デモをご覧ください。

あなたのケースでは、「グリッド」レイアウトまたは「モザイク」レイアウトが機能する可能性があると思います。それは、実際にモジュールを構成する方法に依存します。

Grids Layout example

記事にモジュールを表示するには、空の記事を作成し、コンテンツに{loadposition YourModulePosition}と入力します。次に、RokSprocketモジュールをYourModulePositionに公開します。 （または@FFrewinのソリューションをご覧ください （この投稿内 ）。

3
johanpw

Afterburner 2はガントリフレームワークに基づいているため、/public_html/templates/rt_afterburner2/cssでカスタムCSSを追加できます。ファイルがまだ存在しない場合は、作成する必要がある場合があります。

CSSでメディアクエリを使用して、（たとえば）画面の幅に応じて列数を変えることができます。

/public_html/templates/rt_afterburner2/less/mediaqueries.lessのテンプレートに含まれているメディアクエリファイルから関連する行を抽出すると、次のような画面幅ごとにレスポンシブレイアウトを作成するための出発点としてスケルトンを提供できます。

@media only screen and (min-width: 1200px) {
  /* four columns */
  .columns {float: left; width: 25%;}
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
  /* four columns */
  .columns {float: left; width: 25%;}
}

@media (min-width: 768px) and (max-width: 959px) {
  /* three columns */
  .columns {float: left; width: 33%;}
}

@media (max-width: 767px) {
  /* two columns */
  .columns {float: left; width: 50%;}
}

@media only screen and (max-width: 480px) {
  /* one column */
  .columns {float: left; width: 100%;}
}

Gantryレスポンシブグリッドシステムの詳細については、 http://www.gantry-framework.org/documentation/joomla/advanced/sensitive_grid_system.md を参照してください。

2
Neil Robertson

これは自己宣伝と見なすことができるため、許可されているかどうかは不明です。そうでない場合は、申し訳ありませんが、必要に応じて編集してください。

リンクしたビジュアルは、私の新しい商用テンプレート Fotofit からのものです。コアコンテンツとオーバーライド、CSSのみを使用してレイアウトとスタイルを実現しているため、100％カスタマイズ可能です。また、これまでに作成された最速のJoomlaテンプレートでもあります。

デモサイトでは、サードパーティの拡張機能を使用していません。画像グリッドは注目のカテゴリビューです。 「リンクされた見出し」オプションが有効な場合、イントロ画像も記事にリンクされます。

何よりも、現在販売されており、1日の終わりまで50％オフです。チェックアウト時に割引が自動的に適用されます。

1
Seth Warburton