VK Blocks Pro の投稿リストで テキスト1カラム はカテゴリーをひとつしか表示できないので、表示タイプを メディア に設定してテキスト1カラム風の見た目にしてみました。

新着情報

ページヘッダー画像のグラデーション加工例New!!
カテゴリー
カスタマイズ
カルーセルの決定版 - VK Blocks Pro のグリッドカラムによる実装例
カテゴリー
VK Blocks Proカスタマイズ
VK Filter Search Pro のチェックボックスをすべて選択するカスタマイズ例
カテゴリー
その他カスタマイズ
「テキスト1カラム」の投稿リストのカスタマイズ例 (VK Blocks Pro)
カテゴリー
VK Blocks Proカスタマイズ
グローバルメニューをスライドの下に配置したカスタマイズ例⑥
カテゴリー
Lightning G3カスタマイズ
グローバルナビをページヘッダー下部に配置したカスタマイズ例
カテゴリー
Lightning G3カスタマイズ
ヘッダーのボタンをクリックすると検索窓が開くカスタマイズ例
カテゴリー
カスタマイズ
[ 解決済 ] ページ内リンクの動作
カテゴリー
Lightning G3
データベース接続確立エラーが起きています
カテゴリー
その他
グローバルナビメニューのお問い合わせだけスタイルを変えてみました③
カテゴリー
Lightning G3カスタマイズ
アイコンメニュー 横並び・縦並び (VK パターンライブラリ)
カテゴリー
VK Blocks Proその他
商品画像を使用したメガメニューのカスタマイズ事例③
カテゴリー
カスタマイズ
画像とテキストを左右に並べてレイアウトするやり方の比較
カテゴリー
WordPressカスタマイズ
商品画像を使用したメガメニューのカスタマイズ事例②
カテゴリー
カスタマイズ
商品画像を使用したメガメニューのカスタマイズ事例①
カテゴリー
カスタマイズ
開催日を過ぎたイベントを自動的に削除するカスタマイズ
カテゴリー
カスタマイズ
グリッドカラムカードブロックで丸抜き画像に文字を重ねてみた
カテゴリー
VK Blocks Proカスタマイズ
【カスタマイズ例】スライダーで新着投稿をカルーセル表示
カテゴリー
VK Blocks Proカスタマイズ
丸抜き画像に文字を重ねたナビゲーションメニューの例 (カードブロック)
カテゴリー
VK Blocks Proカスタマイズ
[ 解決済 ] VK ボタン の Font Awesome のアイコンを大きくするとアイコンが消える
カテゴリー
VK Blocks Pro

CSS のコードを書くだけでやってみたところ、以下の新着情報のようになりましたが、まだ不完全な部分があります。

  • カテゴリーを色分けできない
    カテゴリーを特定(区別)できるようなクラス名などが出力されないので、どうしようもありません。手詰まりです。
  • カテゴリー名とカテゴリー名の間に 、 が表示されてしまう
    これは JavaScript で消せそうな気がしますが、そこまでやるならフックを使ってなんとかしたいところです。

カテゴリー名を色分けできるやり方を調べて、ウィジェットでやったら こんなかんじ↓ になりました。

その後、フィルターフックを使ってカスタマイズして、以下の記事にある投稿リストのようにカテゴリーの色も反映する文句なしのレスポンシブ対応仕様で実装しました。

テキスト1カラムの投稿リストでカテゴリーを複数表示【完結編】

フィルターフックを使ってカスタマイズして、カテゴリーの色も反映する文句なしのレスポンシブ対応仕様で実装しました。

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

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

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

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

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

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

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

わからないところ、オンラインでお手伝いします

魚沼情報サービスの対馬です
こんにちは、魚沼情報サービスの対馬です。

Lightning およびベクトルのプラグイン VK Blocks、VK Filter Search の設定・カスタマイズでお困りの方のお手伝いを得意としています。

Zoom オンラインレッスン形式でサポートしてお力になります。

* 近くに頼りになるところがない
* わからないところを手伝ってもらいたい
という方はぜひご利用ください。