こんにちは、ブロックテーマを勉強中🔰の魚沼情報サービスの対馬です。
この記事に書いた内容は、プラグイン VK Blocks がインストールされていることが前提になっています。
X-T9 のデフォルトの前の記事・次の記事のリンク
X-T9 のデフォルトの前の記事・次の記事のリンクは Lightning と違って、以下のようにとてもあっさりとしたデザインです。
X-T9 で制作されたサイト事例 を見ると、ほとんどのサイトで前の記事・次の記事のリンクがあっさりとしたデザインになっています。X-T9 に限らず、多くのブロックテーマではこのようになっていますね。
これだと小さくて目立たないので、気づいてもらえないかもしれません。そこで、前の記事・次の記事をカスタマイズしてデザインをいくつか作ってみました。
カスタマイズ例① タイトルと矢印を表示
タイトルを表示するとデフォルトのままよりはかなり見つけてもらいやすくなりますし、矢印があるので前後の記事のリンクであることがわかりやすいですね。
カスタマイズ手順
前の投稿・次の投稿ブロックの設定画面で以下のように設定する。
- タイトルをリンクとして表示する をオンにする。
- 矢印を シェブロン にする。
お好みで以下のように色とタイポグラフィの設定はできますが、私が試行錯誤した結果、ノーコードでカスタマイズできるのはここまででした。
カスタマイズ例② 枠線を表示（難点あり・下記参照）
上記の カスタマイズ例① に枠線を追加しました。
カスタマイズ手順
前の投稿・次の投稿ブロックをグループブロックで囲んで、グループブロックにパディングと枠線を設定します。
カスタマイズ例③ アイコンを表示（難点あり・下記参照）
上記の カスタマイズ例② の矢印の代わりにアイコンを使っています。
色を反転したパターンも可能です。
カスタマイズ手順
グループブロックを横並びにして、アイコンブロックを追加して、横並びブロックとアイコンブロックのスタイルを設定します。
カスタマイズ例④ 画像を表示（難点あり・下記参照）
上記の カスタマイズ例③ のアイコンの代わりに画像を使っています。
カスタマイズ手順
アイコンブロックを削除して、代わりに画像ブロックを追加します。
ノーコードじゃ無理だってことが判明😓
ここまでのデザインはノーコードで作ることができます。ブロックテーマ、すごいですね…
と喜んだのも束の間、以下のようなケースで上記のカスタマイズ例 ②・③・④ に落とし穴があることに気がつきました。
- 先頭の記事が表示されている場合（前の記事へのリンクがない）
- 最後の記事が表示されている場合（次の記事へのリンクがない）
このようなケースでは、リンクが表示されていない場所に、枠・アイコン・画像だけが表示されてしまうんです。
この問題を解決するには CSS を記述する必要がありますが、そこそこめんどくさい CSS になるんですね。
そんな CSS を書くよりも、最初からリンクを CSS でカスタマイズする方が楽だって結論になりました😊
ということで、CSS でカスタマイズした例をいくつか作ってみました。
カスタマイズ例⑤ CSS でカスタマイズ(1)
マウスホバー効果を設定してあります。マウスホバー効果はノーコードというわけにいかないですね😄
カスタマイズ例⑥ CSS でカスタマイズ(2)
ベクトルさんの VK パターンライブラリ にありそうなデザインです😉 編集画面のスタイルでボタンの色を変更できます。
カスタマイズ例⑦ CSS でカスタマイズ(3)
編集画面で ○ の部分のテキストと色を変更できます。マウスホバー時には記事タイトルもこの部分と同じ色になります。
弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。