こんにちは、ブロックテーマを勉強中🔰の魚沼情報サービスの対馬です。
この記事に書いた内容は、プラグイン VK Blocks がインストールされていることが前提になっています。
X-T9 のデフォルトの前の記事・次の記事のリンク
X-T9 のデフォルトの前の記事・次の記事のリンクは Lightning と違って、以下のようにとてもあっさりとしたデザインです。
X-T9 で制作されたサイト事例 を見ると、ほとんどのサイトで前の記事・次の記事のリンクがあっさりとしたデザインになっています。X-T9 に限らず、多くのブロックテーマではこのようになっていますね。
これだと小さくて目立たないので、気づいてもらえないかもしれません。そこで、前の記事・次の記事をカスタマイズしてデザインをいくつか作ってみました。
カスタマイズ例① タイトルと矢印を表示
タイトルを表示するとデフォルトのままよりはかなり見つけてもらいやすくなりますし、矢印があるので前後の記事のリンクであることがわかりやすいですね。
カスタマイズ手順
前の投稿・次の投稿ブロックの設定画面で以下のように設定する。
- タイトルをリンクとして表示する をオンにする。
- 矢印を シェブロン にする。

お好みで以下のように色とタイポグラフィの設定はできますが、私が試行錯誤した結果、ノーコードでカスタマイズできるのはここまででした。
カスタマイズ例② 枠線を表示(難点あり・下記参照)
上記の カスタマイズ例① に枠線を追加しました。
カスタマイズ手順
前の投稿・次の投稿ブロックをグループブロックで囲んで、グループブロックにパディングと枠線を設定します。

カスタマイズ例③ アイコンを表示(難点あり・下記参照)
上記の カスタマイズ例② の矢印の代わりにアイコンを使っています。
色を反転したパターンも可能です。
カスタマイズ手順
グループブロックを横並びにして、アイコンブロックを追加して、横並びブロックとアイコンブロックのスタイルを設定します。

カスタマイズ例④ 画像を表示(難点あり・下記参照)
上記の カスタマイズ例③ のアイコンの代わりに画像を使っています。


カスタマイズ手順
アイコンブロックを削除して、代わりに画像ブロックを追加します。

ノーコードじゃ無理だってことが判明😓
ここまでのデザインはノーコードで作ることができます。ブロックテーマ、すごいですね…
と喜んだのも束の間、以下のようなケースで上記のカスタマイズ例 ②・③・④ に落とし穴があることに気がつきました。
- 先頭の記事が表示されている場合(前の記事へのリンクがない)
- 最後の記事が表示されている場合(次の記事へのリンクがない)
このようなケースでは、リンクが表示されていない場所に、枠・アイコン・画像だけが表示されてしまうんです。
この問題を解決するには CSS を記述する必要がありますが、そこそこめんどくさい CSS になるんですね。
そんな CSS を書くよりも、最初からリンクを CSS でカスタマイズする方が楽だって結論になりました😊
ということで、CSS でカスタマイズした例をいくつか作ってみました。
カスタマイズ例⑤ CSS でカスタマイズ(1)
マウスホバー効果を設定してあります。マウスホバー効果はノーコードというわけにいかないですね😄
カスタマイズ例⑥ CSS でカスタマイズ(2)
ベクトルさんの VK パターンライブラリ にありそうなデザインです😉 編集画面のスタイルでボタンの色を変更できます。
カスタマイズ例⑦ CSS でカスタマイズ(3)
編集画面で ○ の部分のテキストと色を変更できます。マウスホバー時には記事タイトルもこの部分と同じ色になります。
弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。
投稿者プロフィール

- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら…という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
WordPress2024年12月13日VK Blocks Pro のカードブロック風のブロックパターン
X-T92024年12月12日X-T9 (ブロックテーマ) の前の記事・次の記事のカスタマイズ
VK Blocks2024年12月5日横スクロールするグローバルナビを X-T9 のサイトに実装する手順