
WordPressでAffinger6を使用しています。
最近よくみかける、トップページで記事がタイル状に並んだレイアウトにしたいのですが、
Affingerの中の設定ではできず、html,css,phpなど新規で作る必要があるようです。
こちらのサイトのようにしたいのですが、
ガジェマガ
https://2week.net/
やり方の説明をしているサイトなどありませんでしょうか?
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
こんばんは
WordPressもAffinger6も存じませんけれど・・・
レイアウトだけに関してのご質問ですよね?
実際がどうなっているのか不明ですので、概念的な話になりますが・・
ご提示のサイトはどちらも、記事を適当な大きさの矩形要素(前者のサイトはdiv要素、後者はa要素)に設定して並べておいて、flexレイアウトにしているだけです。
wrap 可(=複数行に配置)にしておけば、溢れたものは順次次の行に配置されてゆきます。
概念的には、記事の幅を50%にしておけば2列、33%にしておけば3列・・といった具合にレイアウトされます。
(floatと似ていますが、こちらの方がいろいろと便利です)
Affinger6がどのようなものか知りませんので、そちらで設定可能かはわかりませんが、少なくともWordPressなら可能なのではないでしょうか?
具体的な方法としては、以下のような感じです。
https://doku-pro.com/css-tile-layout/
「flexレイアウト」でググってみれば、いろいろな情報が見つかると思います。
同様な方法としては「gridレイアウト」も考えられるところでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページのサイトでhtm...
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
GoogleSearchControlにホームペ...
-
htmlの<input type=”file”>でア...
-
静止画画像をクリックすると音...
-
メモ帳の段落の揃え方
-
css初心者 フレックスボックス...
-
HTML/CSSを使って写真のような...
-
HTMLでクロス抽出したい
-
レスポンシブで困っています・・
-
ホームページの制作について教...
-
テーブルのセルデータを自動改...
-
スマホ(android)のタッチパネ...
-
iPhoneで HTMLファイルを閲覧
-
スマホでHTMLファイルを開いて...
-
<input>のstep属性に違反する入...
-
Dreamweverは今も主流なんです...
-
動画と画像&タイトル2列を横並...
-
完全素人がノーコードWEB制作の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個人HPにログイン機能付けられる?
-
よくページが移転しましたを見...
-
seo対策にスタイルシート
-
文字が消える?
-
HTML文内のコードの切り替え
-
HTML 特殊文字の タブ:	...
-
スタイルシートの指定に関して
-
リファラ偽装について少し質問...
-
ムーバブルタイプにおけるSEOに...
-
エラーメッセージ
-
METAタグのrefreshでサイト引越し
-
javascriptによる文字検索
-
携帯のサイトに、パスワードで...
-
ページ内のテキストをスクロー...
-
theadはあまり使わないものです...
-
IEと他のブラウザでの表示の違い
-
自動的に別のページに移動させ...
-
携帯用HTMLで文字の背景色を指...
-
アクセス解析について
-
ロボット巡回対策のMetaタグに...
おすすめ情報
テーマは何をお使いか分からないのですが、こちらのサイトもレイアウトが似ています。
MASK iRacing
https://simracer.tokyo/
どこかにテンプレートがあったりするのでしょうか?
設定を見直したところ、改変することができました!ありがとうございました!