サイト運営WordPressを触っていると、画像を横並びに並べたいと思うときがあります。画像を横並びに並べるにはどうしたら良いのでしょうか。その方法とその応用例を記します。方法の限界も示します。完成形の提示グダグダいう前に完成形をお見せします。これはEUの2大国(ドイツとフランス)の首都のシンボルを並べたものです。左がベルリンのブランデンブルク門、右がパリのエトワール凱旋門(いわば凱旋門)です。この2枚の画像の隙間を若干とっていますが、その隙間を狭くすることもできます。これに対して、写真に説明を入れたくなることもあるでしょう。ドイツフランスまた、2行×2列の4枚の画像を並べたい場合もありましょう。2枚の画像は左がオーストリアのシュテファン寺院、右がハンガリーのブダペストの市街地(王宮の丘から眺めたもの)です。この画像からはリンクを貼っています。景色が気になった人はクリックしてみてください。このような完成系に持っていくのに必要な考えかたを記しましょう。CSSのFlexboxという考えかた以上のような画像の横並びはCSSにFlexboxという概念を導入すると簡単に実現できます。復習のために、基本からおさらいしましょう。WordPressは以下の要素から成り立っています。各自でCSSとPHPをいじって1つのサイトを作り上げるのは難しいので、これら3つをパッケージして操作を容易にしたのがWordPressです。ここで私はわかったような文章を書いていますが、WordPressでCSSとPHPでどのような動きをしているのかはそこまで理解してません(WordPressのサイトを構築して2年でようやくわかってきた段階です)。ここで、画像を横並びに並べるのは、レイアウトを整えることですから、CSSが関係すると推定できます(そしてその推定は正しいです)。CSSでは多くの装飾が可能です。やりようによっては、アニメーションも実現できます。アニメーションのような高度な表現はセンスが必要ですので、センスのない私が運営している弊サイトには導入しませんが、ここで述べたいのは、CSSではそこまで高度な表現が可能ということです。現在のCSSではページ全体のレイアウトを決めることも可能です。Flexboxでは、左から(あるいは右から、中央寄せ)要素を並べます。要素とはこのページの例でいうと、ブランデンブルク門の画像や凱旋門の画像のことです。横(場合によっては縦)という1方向に進みますので、1次元レイアウトと呼ばれます。そのため、Flexboxでは画像を横並びに並べることができます。画像を横2行、縦2列の合計4枚並べる場合は、横並びを2回繰り返すだけです。以上の基本を頭に入れて、実際のコードを提示いたします。基本:実際のコード実際のコードを提示する前に重要なことを思い出しましょう!そう、レイアウトを整えるCSSと実際の要素(ここでは外国の写真)を記すHTMLは別ものであるということです。そのため、レイアウトをCSSで整えて、実際の要素をHTML(投稿ページや固定ページ)に記します。画像を横並びにしたい箇所はごく一部です。そのため、一部のみに適用したいclassをCSSであらかじめ設定しておき、HTMLでそのclassを呼び出すということをします。言っている意味がわからない?こう言いかえましょう。CSSで「横並びにするためのおまじない」を書いておき、通常はそのおまじないは封印します。投稿ページや固定ページの横並びにしたい箇所に「おまじないを封印する呪文」を書くということです。CSSで以下のように記述します(WordPressでは追加CSSに記せば問題ありません)。.flex-containnerや.flex-itemというのはclassの名称です。別にほかの単語でも構いません。47%;}2行目の記述で横並びにしていて、3行目で均等割りにしています。5行目で子要素(本記事の例えでは4枚の風景写真)のサイズを規定しています。50%以下では横に2枚、33.3%以下では横に3枚、25%以下では横に4枚、...となります。ここで47%と書いていますが、余ったスペースは余白になります。例示では47%なので、余白が若干生まれます。50%とすると余白がなくなります。投稿ページ(なり固定ページ)にclassを呼び出します。class="flex-item">要素2</div></dl>ここで要素1、要素2にご自身で希望する写真を挿入します。ここでは要素を写真としましたが、CSSでの装飾した文字列などもかまいません。奇数枚の写真のレイアウトの場合は?ここで、要素は空白でも構いません。写真を横2列に並べている場合、写真が奇数枚だったらどうでしょうか。最後の行は写真が1枚しかなく、レイアウトが維持できません。そのような場合は、要素2に空白を入れます。すると、左詰めになります。リンクは?キャプションは?リンクを挿入するのは難しいことではありません。画像にリンクを挿入することはいくらでもできます。横並びになったことを確認して、その要素にリンクを挿入するだけです。このように「困難を分割する」という考えは重要です。キャプションは要素1を写真+文字にするだけです。ドイツの画像+ドイツという文字列の場合は、写真の下にドイツという文字列を入れるだけです。場所によってレイアウトを微調整したい!場所によってレイアウトを調整したいこともあるでしょう。ある箇所は余白あり、ある場所は余白なしという具合にです。そのように微妙にレイアウトが異なる場合は、作りたいレイアウトによって、classを複数個作成します。本記事で示した余白ありバージョンと余白なしバージョンでは、子要素を47%と50%と作り分けています。本記事を見ていただければわかりますが、同じ記事に複数のレイアウトが混在することも可能です。本方法の欠点(FlexBoxの限界)本記事の方法の欠点は、Flexboxでは画面サイズに応じて2次元に変わるレイアウトには対応できないことです。パソコンでは3列表示、モバイルでは2列表示に写真を表示するとなると、1次元でのレイアウトではなく、2次元のレイアウトです。Gridという概念を導入します(※)。1の要素があっても問題ありませんし(モバイル2列、パソコン3列の場合、7つの要素があると余り1の要素があっても上手に処理される)、そこまで難しい作業ではありません。※新たに記事を執筆いたしました。Grid利用)で触れています。逆に、モバイルで1列、パソコンで2列というのは可能です。この場合、モバイルでもパソコンでも1次元で処理できるからです。以下の書籍を頼りに弊サイトにこのようなレイアウトを導入いたしました。書籍で勉強すると「検索しようとしなかったが、重要である概念」を学ぶことができますので、有意義です。tc1151234関連記事HTMLサイトマップをプラグインなしで表示する方法(子カテゴリも階層で表示)WordPressで構築するサイトで意外と重要なのが、読者に見せる記事一覧(htmlサイトマップ)。高度なものを構築するのは大変です。プラグインなしでかつ子カテゴリごとに表示させる方法を示します。Grid利用)サイトを作っていて画像を横並びにしたいことはありましょう。単純な横並びであれば単純な手法で解決しますが、ちょっと高度なことをやろうとすると、別の手法を採用する必要があります。そんな方法をまとめました。記事を読むサイドバーにきれいにタグを表示する方法(simplicity2)ワードプレス(wordpress)でブログを運営していて思うのが、タグを適切に表示させて閲覧されるかたの利便性を向上させたい、というものです。その方法を簡単にまとめているサイトがあまりありませんでしたので、その方法をまとめました。ここでは、タグを表示させる方法も含めて紹介します。SEOの対策も示しています。記事を読むトップページリニューアル(固定ページ化)とその効果(simplicity2)多くのブログは新着記事が表示されます。そのようなページでは訪問した際に使いにくいです。そこで、各カテゴリの紹介などを盛り込んだ「わかりやすい」ページにしました。その方法と効果を詳細に解説します。記事を読むブログにおける内部リンクの最適化とその効果ブログにとって、内部リンクの整備は重要な意味を持ちます。弊ブログでは気になったところから、内部リンクを整備しています。その効果はどの程度なのでしょうか。結果を数字で示すサイトは数少ないため、弊ブログの記述は貴重な存在です。コメントをキャンセル名前の入力は必須(ハンドルネーム等可能)ですが、メールアドレスの入力は任意です。メールアドレスを公開することはありません。名前メールサイト上に表示された文字を入力してください。Δサイト内検索はこちらtwitterやっていますtwitterもやっています。サイトに書くまでもない内容など、サイトとは一味ちがう内容をお楽しみいただけます。最近のコメントピーナッツバター2023/5/14常磐線から新宿への路:山手貨物線と常磐線の直結を考える山手貨物線との分岐部で立体交差は必要ないのではないか?品鶴線では上りだけで最大毎時20本近い電車を捌いているが、蛇窪の分岐部は平面交差である。あれば蛇窪より本数が少ないと見込まれる田端付近の分岐部も...tc11512342023/5/8山手線(ダイヤパターン紹介)ラベルの塔さま、コメントありがとうございます。確かに乗り降りの速度は下がっている点は否定できません。ラッシュ時の混雑が緩和し、良くも悪くも以前よりも緊張感なく乗り降りできるようになりまし...tc11512342023/5/8上野東京ラインについて考える~東京駅改良と改良ダイヤの基本とくめいさま、コメントありがとうございます。新幹線の配線の方が深刻だよ。tc11512342023/3/23東急直通開始時の相鉄のダイヤを解析きくなちゃんさま、コメントありがとうございます。仕様が異なるのですか...。