MENU
カテゴリー
アーカイブ
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。

WordPressメディアと文章ブロックでおすすめ記事を目立たせる

こんにちは、ゆるミニマリスト主婦のくうかです。

当サイトはWordPressテーマ「SWELL」を使用しています。

前々から少し気になっていたワードプレスのブロック「メディアと文章」

「メディアと文章」は画像と文章をおしゃれなレイアウトで配置できるので、本来はメディアの紹介のような形で使うものなんだろうと思います。

今回私はトップページのおすすめ記事に使用してみました。
簡単なブロックですが、導入の流れをご紹介します…!

Contents

WordPressメディアと文章ブロックでおすすめ記事を目立たせる

完成形はこのような感じです。

メディアと文章イメージ

SWELLの「投稿リスト」ブロックの左右交互リストと似たような見せ方ができますね。
「カラム」ブロックでも概ね実現できそうですが、ちょっとおしゃれなレイアウトはこのブロック独自かも。

違う部分としては、投稿リストでは記事のアイキャッチ画像と記事の説明文を表示させますが、「メディアと文章」ブロックでは、好きな画像(もしくは動画)と好きな文章で組み合わせることができ、レイアウトも3種類から選択することができます。

くうかのアイコン画像くうか

他より目立たせたい部分に使うと効果的かもしれない!

メディアと文章、使い方の流れ

STEP
「メディアと文章」ブロックを選択する
メディアと文章ブロック選択

選択すると以下のようなブロックが貼り付けられます。

メディア設定

【メディアエリア】と【コンテンツ】に分かれていますね。

STEP
メディアとコンテンツを設定する

アップロードもしくはメディアライブラリから画像を設定します。

メディアの配置

メディアを左右どちらでも配置することができる。(赤丸部分)
真ん中をマウスでドラッグするとメディアとコンテンツの比率を変えることができる。

コンテンツ部分には、どのブロックでも利用することができます。

STEP
レイアウトを決める

ブロックのレイアウトは3種類あります。

1. デフォルト

シンプルにデフォルト。

デフォルトレイアウト
2. カード型

カード型。

カード型レイアウト

わかりづらいですが、影が付いて浮き出ています。

3. ブロークングリッド

ブロークングリッド。

レイアウトブロークングリッド

メディアの上にコンテンツ(文章)が少し重なっているレイアウトですね。
わかりやすく、文章をグループ化し背景を黒くしました。

このレイアウトが気に入って、私はこちらを採用しています。

STEP
メディア設定

設定はあまりないのですが、こちらだけ。

メディアと文章の設定

モバイルでは縦に並べたほうが画像も大きく見えると思います。
「カラム全体を~」の設定は、ONにすると画像が少し大きくなってしまったのでOFFにしています。

モバイル表示の縦と横の比較です。

モバイル縦表示

スマホ縦表示

モバイル横表示

スマホ横表示

縦も横も、見た目はいい感じですね^^

設定は以上で、非常に簡単なブロックとなっています。

SWELLでも機能を組み合わせると良きデザインに♪

見出しブロックを使うと、またちょっと良い感じにカスタマイズできますね♪

最後に

この「メディアと文章」ブロックは、ブログのトップページに他より目立たせたい部分に採用すると、より目を引いて良いかなぁと思いました。

またお風呂でボーっとしている時に思いつきました。笑

これらをブログパーツで作成し、トップページの固定ページから呼び出すようにしました。

くうかのアイコン画像くうか

レイアウトもおしゃれなので、気に入ったらぜひ使ってみてください♪

テーマSWELLで作るトップページ

いくつか使っているブログパーツについて

シンプルライフの参考になる記事をもっと読む(ブログ村)

読んだよ!のクリック嬉しいです…♪

にほんブログ村 にほんブログ村へ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

ピックアップ記事

カテゴリー別の人気記事

コメント

コメントする

CAPTCHA


Contents
閉じる