この記事はアフィリエイト広告を利用しています。

Lightning のデフォルトのアーカイブページ

Lightning (無料版) のデフォルトのアーカイブページをパソコンで表示すると、以下のようにひとつひとつの記事が大きなスペースを使ってレイアウトされています。

抜粋が長い場合や、表示する項目をカスタマイズして追加したい場合はこれくらいあっていいのですが、そうでない場合はもうちょっとコンパクトにしたくなることもあると思います。

Lightning のデフォルトのアーカイブページ

アーカイブページを2カラムでコンパクトに

この記事では、アーカイブページを以下のように2カラムでコンパクトに表示するカスタマイズのやり方を紹介しています。

Lightning のアーカイブページを2カラムにカスタマイズ

カスタマイズ手順

以下の CSS を追加すると上記のようなアーカイブページにすることができます。

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

/* アイキャッチ画像のサイズを小さく */
.vk_post .media-img {
    width: max(25%, 125px);
}

@media (min-width: 992px) {
  /* PC では2カラムで表示 */
  .post-list.vk_posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 0px;
  }
  /* 2つめの記事に上ボーダーを表示 */
  .main-section>.vk_posts>.media.vk_post-col-sm-12:nth-child(2) {
    border-top: 1px solid var(--vk-color-border-hr,#e5e5e5);
  }
}

もっといろいろカスタマイズしたい場合は...

この手のカスタマイズがお好きな方はご参考にどうぞ。そうでない方におすすめなのが Lightning G3 Pro Unit !!

Lightning G3 Pro Unit をインストールすれば CSS を書く手間をかけなくても表示タイプをいろいろある中から選べて、画面幅ごとにカラム数の指定ができます。表示したい項目も選べるので、

  • アーカイブページの表示にこだわりたい
  • でもコードを書くのは苦手

という方には Lightning G3 Pro Unit がおすすめです。入手方法はこの記事の最後に書いてあります。

Lightning G3 Pro Unit のアーカイブページ設定画面
Lightning G3 Pro Unit の設定画面
Lightning G3 Pro Unit のアーカイブページ設定画面
Lightning G3 Pro Unit の設定画面

スマホでの表示

上記のコードはシンプルですが、スマホでの見え方も考慮してあります。← max(25%, 125px); の部分
スマホで表示すると以下のように変わります。

カスタマイズ前

カスタマイズ前

カスタマイズ後

カスタマイズ後

アイキャッチ画像を正方形にして余白部分を活用しています。

弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

Lightning G3 Pro Unit の入手方法

Lightning G3 Pro Unit は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。

投稿者プロフィール

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

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

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

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

また、制作業者様、デザイナー様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

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

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

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

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

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り(無料)を提示させていただきます。