前回の記事で作成したおススメ記事一覧は、「最新の記事」ブロックで作ったものでした。見た目の変更ができる子のブロックですが、CSSをカスタマイズして独自に作成してみました。

前回の記事

1.ブロックの設定を変更する。

記事編集画面。

「最新の記事」ブロックを選択すると、右側のサイドバーのタブが「ブロック」に代わります。この時の各種設定を以下のようにします。

 「高度な設定」:追加CSSクラスを作成します(今回はis-style-pickup。上手参照)。この操作により、CSSでカスタマイズするときにこのクラスを指定することで、このブロックにだけ外見の変更を適用できます。

 「アイキャッチ画像設定」:画像サイズ→大。画像の位置→左。

2.style.cssに追記する。

1.で指定したCSSクラスを使用して、style.cssに追記していきます。style.cssに追記するときは必ず子テーマを用意しています。子テーマを使用する理由と方法はこちら(準備中)。

/* 背景を白に。画像とタイトルを横並びにする */
.is-style-pickup li{
    width: 100%;
    background-color: #f0f0f0;
}

.is-style-pickup a{
    vertical-align: top; 
    width: 50%;
}

.is-style-pickup .wp-block-latest-posts__featured-image{
    display: inline-block;
    vertical-align: top; 
}

/* 投稿者、投稿日時、抜粋はphpまで変えないといけないのでここでは削除 */
.is-style-pickup .wp-block-latest-posts__post-author {
    display: none;
}

.is-style-pickup time {
    display: none;
}

.is-style-pickup .wp-block-latest-posts__post-excerpt {
    display: none;
}

/* ここから下は画像の編集 */
.wp-block-latest-posts__list.wp-block-latest-posts.is-style-pickup li {
    height: 250px;
}

.wp-block-latest-posts__list.wp-block-latest-posts.is-style-pickup li a {
    display: table-cell; 
    height: 250px;
    font-size: var(--global--font-size-lg);
    vertical-align: middle;
    padding-right: 20px;
    font-weight: bold;
    line-height: 2.0rem;
    letter-spacing: 0.3rem;
}


.is-style-pickup .wp-block-latest-posts__featured-image  {
    overflow: hidden;
    width: 250px;
    height: 100%;
    position: relative;
}

.is-style-pickup .wp-block-latest-posts__featured-image img {
    position: absolute;
    width: auto !important;
    height: auto !important;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

上記のようにCSSを追記すると、以下のようになります!ヘッダー画像と雰囲気に合っている見た目にしました!URL:さいとうのほのぼのブログ – ~ゆっくりゆったりホームページづくり~ (saitokou.com)

CSS編集後の見た目。

まとめ

いかがでしたでしょうか?ブロックの設定もしないといけないところが面倒ではありますが比較的簡単に見た目を変えられたかなと思います!お好みで色やフォントの変更もしてみてください。レスポンシブ対応はまだできてないのでまた次回!

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP