
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ランキング
-
HTML文内のコードの切り替え
-
A.htmlの下半分をB.htmlに引用...
-
embedタグでFirefox右クリック禁止
-
Excelで用語辞典を作成するには?
-
コンソールアプリでファイル選...
-
Object Moved This object may ...
-
バージョンのつけ方
-
1年無職の彼氏 別れるべきですか?
-
VBプログラムをEXCEL VBAに移植...
-
全豊田作業責任者
-
地域と言語のオプションをプロ...
-
第二種放射線取扱主任者って。。。
-
winsockへの疑問
-
Java言語を使ったP2Pのチャット...
-
BiilderとD-Show フレームレー...
-
Ryzen 3700(無印)はWin11に対応...
-
printf系の書式「w」ってなに?
-
文系大学生ですが応用情報技術...
-
VB2005の自作ブログラムをWin10...
-
情報処理技術者1種と2種について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個人HPにログイン機能付けられる?
-
よくページが移転しましたを見...
-
seo対策にスタイルシート
-
文字が消える?
-
HTML文内のコードの切り替え
-
HTML 特殊文字の タブ:	...
-
スタイルシートの指定に関して
-
リファラ偽装について少し質問...
-
ムーバブルタイプにおけるSEOに...
-
エラーメッセージ
-
METAタグのrefreshでサイト引越し
-
javascriptによる文字検索
-
携帯のサイトに、パスワードで...
-
ページ内のテキストをスクロー...
-
theadはあまり使わないものです...
-
IEと他のブラウザでの表示の違い
-
自動的に別のページに移動させ...
-
携帯用HTMLで文字の背景色を指...
-
アクセス解析について
-
ロボット巡回対策のMetaタグに...
おすすめ情報
テーマは何をお使いか分からないのですが、こちらのサイトもレイアウトが似ています。
MASK iRacing
https://simracer.tokyo/
どこかにテンプレートがあったりするのでしょうか?
設定を見直したところ、改変することができました!ありがとうございました!