お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

    WordPressのスキルアップはこちら!▶[click]
    いま、どうしてる? 誰でも検索できます

    【WordPress】標準の「最新の投稿」ブロックを|日付-投稿タイトル|で横並びに整形する方法

    WordPress(ワードプレス)
    この記事は約3分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    最新の投稿ブロック

    「最新の投稿」ブロックは、最近の投稿の一覧を表示します。

    この「最新の投稿」ブロックは、抜粋を表示したり、文字数を制限したり。

    カードタイプの表示に切り替えたり・・・

    表示させるカテゴリーを限定したりと、色々と便利に使えます。

    ほかのテーマでも基本は同じ並び順

    テーマを変えても、基本的には「投稿タイトル」「投稿日」「投稿本文」の順番で並びます。

    横並びにしたい・・・

    こんな感じのレイアウトにしたい、と思った時に、解決させる方法です。

    ソースコード

    <ul class="wp-block-latest-posts__list has-dates wp-block-latest-posts"><li><a href="XXXXXXXXXXXXXXXXX">投稿のタイトルが入る</a><time datetime="2012-03-15T15:36:32+09:00" class="wp-block-latest-posts__post-date">2012年3月15日</time></li>
    <li><a href="XXXXXXXXXXXXXXXXX">投稿のタイトルが入る<time datetime="2012-03-15T15:15:12+09:00" class="wp-block-latest-posts__post-date">2012年3月15日</time></li>
    <li><a href="XXXXXXXXXXXXXXXXX">投稿のタイトルが入る<time datetime="2012-03-15T14:41:11+09:00" class="wp-block-latest-posts__post-date">2012年3月15日</time></li>
    
    ・・・
    </ul>

    投稿タイトルのclass名

    liの方にはクラス名が設定されていませんが、ul(リスト全体)の方にクラス名が設定されています。

    <ul class="wp-block-latest-posts__list has-dates wp-block-latest-posts">

    投稿日のclass名

    <time datetime="XXXXXXXXXXXX" class="wp-block-latest-posts__post-date">XXXX年X月XX日</time>

    timeタグとは?

    time要素は、特定の時の区間を表します。 datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。

    https://developer.mozilla.org/ja/docs/Web/HTML/Element/time

    ひとまずdisplay:flexにしてみる

    liになっているので、これをdisplay:flexにして、横並びにしてみる?

    .article ul li {
        display: flex;
    }

    それっぽくなりました(笑)

    まとめ

    まあこれで完成・・・でもよいかと思いましたが、順番が希望と反対なので・・・、これをどうにか並び替えてみます。

    長くなりましたので、続きはまた!

    ご参考ください😃

    Loading
    タイトルとURLをコピーしました