TORIYAMA Yuko さん が投稿された Vektor WordPress Solutions Advent Calendar 2021 の記事「子テーマで乗り切れ!WordPressの低予算案件」を参考にして、VK Blocks Pro の投稿リストをインスタグラム風にカスタマイズしてみました。

カスタマイズしていない状態の投稿リスト

CSS

VK Blocks Pro 1.46.0 の便利な新機能「カスタム CSS」

VK Blocks Pro 投稿リストの「テキスト1カラム風」カスタマイズ例

NEWS

投稿タイトルの前に新着表示したカスタマイズ例 (テキスト1カラム)

NEWS

投稿タイトルの前に新着表示したカスタマイズ例 (VK Blocks Pro・カード)

全幅の Outer ブロック・カバーブロックの最大幅を指定する

スクロールに追従するフローティングバナー(半固定バナー)の実装例

スクロールボックスに VK 投稿リストを入れてみた

ヘッダーにコーポレートサイトのロゴ画像を追加したカスタマイズ例

Lightning のグローバルナビのサブメニューの開き方をカスタマイズ

VK Blocks Pro のカードブロックでリンクエリアをカード全体に拡張する

CSS によるページヘッダー画像のグラデーション加工

カルーセルの決定版 - VK Blocks Pro のグリッドカラムによる実装例

表示タイプを カード(インテキスト)にして、カラムを以下のように設定してあります。

カラムの設定

Instagram 風にカスタマイズした投稿リスト

CSS

VK Blocks Pro 1.46.0 の便利な新機能「カスタム CSS」

VK Blocks Pro 投稿リストの「テキスト1カラム風」カスタマイズ例

NEWS

投稿タイトルの前に新着表示したカスタマイズ例 (テキスト1カラム)

NEWS

投稿タイトルの前に新着表示したカスタマイズ例 (VK Blocks Pro・カード)

全幅の Outer ブロック・カバーブロックの最大幅を指定する

スクロールに追従するフローティングバナー(半固定バナー)の実装例

スクロールボックスに VK 投稿リストを入れてみた

ヘッダーにコーポレートサイトのロゴ画像を追加したカスタマイズ例

Lightning のグローバルナビのサブメニューの開き方をカスタマイズ

VK Blocks Pro のカードブロックでリンクエリアをカード全体に拡張する

CSS によるページヘッダー画像のグラデーション加工

カルーセルの決定版 - VK Blocks Pro のグリッドカラムによる実装例

投稿リストブロックの 追加 CSS クラスに insta-like を指定して、以下の CSS でカスタマイズしています。

.insta-like .vk_post .vk_post_imgOuter:before {
  /* アイキャッチ画像を正方形で表示 */
  padding-top: 100%;
}

.insta-like .vk_post {
  margin-left: 3px;
  margin-right: 3px;
}
.insta-like .vk_post.card {
  margin-bottom: 6px;
}

@media (min-width: 768px) {
.insta-like .vk_post {
  margin-left: 10px;
  margin-right: 10px;
}
.insta-like .vk_post.card {
  margin-bottom: 20px;
}
}

.insta-like .card {
  border-radius: 0;
}

.insta-like .card-intext .card-intext-inner .vk_post_body {
  /* 投稿タイトル、日付を非表示 */
  opacity: 0;
  transition: all .5s ease-out;
}
.insta-like .card-intext .card-intext-inner:hover .vk_post_body {
  opacity: 1;
  transition: all .5s ease-out;
}

.insta-like.vk_posts .vk_post-col-xs-4 {
  width: calc(33.3% - 6px);
}
@media (min-width: 576px) {
.insta-like.vk_posts .vk_post-col-sm-4 {
  width: calc(33.3% - 6px);
}
}
@media (min-width: 768px) {
.insta-like.vk_posts .vk_post-col-md-4 {
  width: calc(33.3% - 20px);
}
}
@media (min-width: 992px) {
.insta-like.vk_posts .vk_post-col-lg-3 {
  width: calc(25% - 20px);
}
}
@media (min-width: 1200px) {
.insta-like.vk_posts .vk_post-col-xl-3 {
  width: calc(25% - 20px);
}
}
@media (min-width: 1400px) {
.insta-like.vk_posts .vk_post-col-xxl-3 {
  width: calc(25% - 20px);
}
}

インスタっぽくなるポイントは以下の2つで、それ以外は画像と画像の間のスペースを調整するためのものがほとんどです。

  • 先頭の padding-top: 100%; によりアイキャッチ画像が正方形で表示されます。
    元のカード(インテキスト)の CSS は padding-top: 62%; となっていて、この数値により表示されるアイキャッチ画像の縦横比が決まっています。padding-top を % で指定する場合、親要素の幅が 100% として扱われるためにこのやり方ができるんです。
  • 中央付近の opacity: 0; によりアイキャッチ画像だけが表示されます。

豆知識

padding-top: 62%;62% ってずいぶんと半端な数値になっているなぁ...と感じたのですが、調べてみたところ、古代から人が最も美しいと感じる比率である「黄金比」になっているのだとわかりました。

サイト運営者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

今よりもっといい WordPress サイトにしたいなら G3 Pro Unit がおすすめ

Lightning G3 Pro Pack
ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit は Lightning G3 Pro Pack というパッケージで VK Blocks Pro とセットで販売されています(単体販売はされていません)。このパッケージを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひこのパッケージをお使いになることをおすすめします。