表示タイプ「テキスト1カラム」のカスタマイズについて

VK Blocks Pro の投稿リストブロックの表示タイプ「テキスト1カラム」をカスタマイズして、投稿タイトルの前に New!! を表示してみます。

表示タイプ「カード」で同様のこと(投稿タイトルの前に新着表示)を行ったカスタマイズ例は こちら です。

表示タイプ「カード」だと投稿タイトルを書き換えるフィルターフックが用意されているので上記のようにカスタマイズできましたが、「テキスト1カラム」はフィルターフックで部分的にカスタマイズすることができません。

そこで、CSS を使ってカスタマイズしてみたのが、↓ こちらです。

2022年11月23日VK Blocks Pro

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

2022年11月9日VK Blocks Pro

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

2022年11月8日VK Blocks Pro

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

2022年11月5日VK Blocks Pro

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

2022年11月5日VK Blocks Pro

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

2022年10月23日Lightning G3

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

カスタマイズのための CSS

上記のように投稿リストをカスタマイズするための CSS は以下の通りです。

.vk_posts .postListText_title {
    /*  投稿タイトル と New!! の順番を入れ替え */
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
}

.vk_post_title_new {
    /* 余白を調整 */
    margin-left: unset;
    margin-right: 0.4em;
}

上記の例以外にもカスタマイズ内容によっては、こちらの記事 に載せてある例のようにフィルターフックを使わずに CSS で対応可能なケースも多くありますが、CSS で対応できない場合は最終手段としてフィルターフック vk_post_view を使ってまるごと書き換えるやり方になります。

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

関連記事

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

テキスト1カラムの投稿リストをフィルターフック vk_post_view を使ってまるごと書き換えたカスタマイズ例です。まるごと書き換えていますので、正確には「テキスト1カラ…

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

フィルターフックを使って、投稿タイトルの前に New!! を表示するように VK Blocks Pro の投稿リスト(表示タイプ:カード)をカスタマイズしました。

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

カスタマイズは主に CSS で行い、スマホ対応もしてあります。カスタマイズ例によっては jQuery 等を組み合わせて実装してあります。

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

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
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 とセットで販売されています(単体販売はされていません)。このパッケージを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひこのパッケージをお使いになることをおすすめします。