やってみたこと・変更履歴など

仕様変更 アーカイブページでのカテゴリー表示のスタイルを変更しました 2021.9.15

機能追加 検索結果ページでも上記同様にカテゴリー表示のスタイルを変更しました 2021.11.5

機能追加 個別投稿ページの日付に曜日の表示を追加しました。2022.2.1

仕様変更 VK Filter Search のフォームをコンパクトにしました。2022.6.7

VK Filter Search のフォームをコンパクトにしました

機能追加 アーカイブの先頭にページネーションを追加しました。2023.1.14

仕様変更 ページネーションの前・後ボタンの表示を Font Awesome アイコンに変更しました。2023.1.14

仕様変更 ページネーションのページ番号の表示を四角形から円形に変更しました。2023.1.16

カテゴリーアーカイブページもいろいろとカスタマイズしています。
詳しいカスタマイズ内容についてはこちらをご覧ください

メディアとテキストブロック (WordPress) のカスタマイズ例

WordPress 標準の「メディアとテキスト」ブロックを CSS でカスタマイズして、テキストをずらしてメディアに重ねたデザインにしてみました。

カテゴリー
WordPressカスタマイズ

ページヘッダーに投稿のタイトルを表示するやり方

公開日・更新日・投稿者 をページヘッダーに表示するのはむずかしそうなので断念して、パンくずリストの下に表示してあります。

カテゴリー
Lightning G3カスタマイズ

CSS で縦中横のスタイルを設定するやり方

text-combine-upright プロパティを使って、CSS で縦中横のスタイルを設定できます。

カテゴリー
その他

WordPress で絵文字を無効化したときの動作ってどうなるの?

表示が高速になるように無効化するのがよいという結論に達しました。

カテゴリー
WordPress

ブロックエディタのカラーパレットにカスタム色を追加できるようになった

無料版の Lightning にこの機能を持たせるところにベクトルさんの気前の良さを感じます。

カテゴリー
Lightning G3

スライドショーで画像をじわぁ~っとズームインさせるには

スライドショーにフェード効果を設定し、3枚以上のスライドを設定した上で CSS を追加します。

カテゴリー
Lightning G3カスタマイズ

カテゴリーやタグのタームの区切り文字「、」を表示しないカスタマイズ

フィルターフックを使って「、」を一括で消してしまいますが、カスタム投稿タイプには影響がないようにします。また、記事の後のカテゴリーにもアイコンをつけます。

カテゴリー
WordPressカスタマイズ

VK Filter Search でブロックのラベル、ボタンの文字をカスタマイズ

有料版の VK Filter Search Pro にはブロックのラベルの文字や検索ボタンの文字をかんたんにカスタマイズできる機能がありますが、無料版の VK Filter Search でも手間はかかりますがカスタマイズできそうだったので、やってみました。

カテゴリー
カスタマイズ

アーカイブページでのカテゴリー表示のスタイルを変更しました

カテゴリー名をアイキャッチ画像に重ねて表示していましたが、見づらいので、カードの上にタブ形式で表示するスタイル に変更しました。

カテゴリー
カスタマイズ

VK Filter Search で賃貸物件を並べ替えできるようにしました

並べ替えは家賃が安い順、五十音順、登録が新しい順、ランダムのどれかを選べるようにしてあります。

カテゴリー
カスタマイズその他

グローバルメニューのメニュー項目を三角形にして横幅を小さくした例

ヘッダーロゴ画像とグローバルメニューをページヘッダーに重ねて表示することによりヘッダー部分がコンパクトになっています。メニュー項目を三角形にすると横幅を小さくできるので、項目数が多いときに役立つアイディアです。

カテゴリー
Lightning G3カスタマイズ

カバーブロックに動画を入れて全画面表示している例

カバー画像の最小の高さを 100vh に設定して、メディアに動画を設定してあります。手間はかかりますが、Lightning G3 無料版でもカスタマイズ次第でこのようなレイアウトが可能です。

カテゴリー
その他

Lightning G3 無料版で賃貸物件サイトを作ってみた

Lightning 無料版でもフックを使って賃貸物件検索を実用レベルに仕上げることができますが、トップページへの自動表示はむずかしいです。

カテゴリー
Lightning G3カスタマイズ

投稿や固定ページのページヘッダーの画像を個別に設定するやり方

編集画面で カスタム CSS に行を追加します。Lightning G3 Pro Unit でも投稿の編集画面にはページヘッダー画像設定がありませんので、この記事で紹介したやり方で設定します。

カテゴリー
Lightning G3カスタマイズ

ハンバーガーメニューをパソコンでも使ってみるカスタマイズ 第2弾

【第2弾】パソコン画面でグローバルメニューを使うのを止めて、代わりにモバイルナビ(ハンバーガーボタン)を使うカスタマイズをしてみました。

カテゴリー
Lightning G3カスタマイズ

トップページ(特定のページ)だけヘッダーロゴ画像を変更するやり方

Lightning G3 サイトでフィルターフックを使って、ページによってヘッダーロゴ画像を使い分ける方法を紹介します。

カテゴリー
Lightning G3カスタマイズ

ハンバーガーメニューのボタンをアイコン表示で目立たせるカスタマイズ

デフォルトのハンバーガーボタンのままだと控えめなので、ボタンが目立つように CSS で飲食店向けにカスタマイズして、さらにパソコン、タブレットでも使えるようにしました。ペットサロン向け・カットサロン向けのパターンもあります。

カテゴリー
Lightning G3カスタマイズ

パンくずリストのカスタマイズ+α ②

Lightning のパンくずリストのスタイルを CSS でカスタマイズしてみました。ついでに、グローバルメニューとソーシャルボタンも傾けてデザイン統一を図ってみました。さらにヘッダーの余白をなくしてすっきりさせてみました。

カテゴリー
Lightning G3カスタマイズ

グローバルメニューの項目を丸くしてヘッダーをコンパクトにした例

ヘッダーロゴ画像とグローバルメニューをページヘッダーに重ねて表示することによりヘッダー部分がコンパクトになっています。メニュー項目を丸くしてみました。

カテゴリー
Lightning G3カスタマイズ

テキスト1カラムの投稿リストでカテゴリーを複数表示【ウィジェット使用】

テキスト1カラム(風の見た目)で複数カテゴリーを表示するカスタマイズをしています。

カテゴリー
Lightning G3カスタマイズ