2024.9.30|テーマをVer4.1.5.8にアップデートしました
アップデート情報

Ver1.2.0リリースのお知らせ

この記事は約5分で読めます。

Ver1.2.0ではユーザーさんのご要望をできる限り反映する形でアップデートしています。テーマのバージョンアップ方法と最新版のテーマファイルについてはこちらのページからご確認ください。

テーブルで作れる比較表ブロックを追加しました

比較表を作るのがお好きな方のためにテーブルで良い感じに作れるブロックを新たに追加しました。(ブロックパーツはACF版の中にあります)

特徴
  • テーブルの作成はビジュアルエディタで
  • ビジュアルエディタなので画像の配置もテキストの装飾も比較的カンタン
  • 横スクロール時の1列目を固定できる
  • 関連アイテムブロックで作る比較表チックなレイアウトも作れる
  • 通常のテーブルには簡易的な絞り込み&並び替え機能も実装できる

ブロックの設定項目

比較表を用意するにあたっていろんな作り方を試しましたが、画像の配置やテキストの装飾などが一番柔軟にできるのがクラシックエディタ内のビジュアルエディタで作るテーブルだったので、テーブルはビジュアルエディタ内で作り、細かいところをカスタムフィールドの項目で設定する形にしています。

見本その1(関連アイテムの比較表チックなテーブル)

上の項目の設定にするとこんな感じの比較表が作れます↓

製品名 VIERA TH-49GX850 VIERA TH-49GX750 VIERA TH-49GX500
メーカー パナソニック パナソニック パナソニック
サイズ 49インチ 49インチ 49インチ
満足度
価格

¥132,800

¥107,800

¥86,634

1インチあたり

¥2,710

¥2,200

¥1,768

見本その2(一般的なテーブル+絞り込み&並び替え)

通常の形式のテーブルです。こちらも設定で横スクロールした時に1列目を固定したり、なんちゃって絞り込み機能も実装できたりします。

製品名 メーカー サイズ 満足度 価格 1インチあたり
VIERA TH-49GX850 パナソニック 49インチ

¥132,800

¥2,710
VIERA TH-49GX750 パナソニック 49インチ

¥107,800

¥2,200
VIERA TH-49GX500 パナソニック 49インチ

¥86,634

¥1,768

見本その1のテーブルレイアウトでも絞り込み&並び替えは実装できますが、対象が列の値となり絞り込んでも意味のないものになってしまうので、絞り込み&並び替えを実装する場合はこの形式のみにしておいたほうが良いと思います。

ショートコードを作りました

関連アイテムブロックの比較表やテーブルで◯Xなどの記号を入れたいというご要望がユーザーさんから頂いたのでショートコードでカンタンに挿入できるようにしました。

また、記号のほか評価数(星マーク)や装飾のコードも合わせて追加しています。

ショートコード 結果
[にじゅうまる]
[まる]
[さんかく]
[ばつ]
[ほし3]
[ほし35]
[ほし4]
[ほし45]
[ほし5]
[赤]テキスト[/赤] 赤文字
[太赤]テキスト[/太赤] 太赤文字
[太]テキスト[/太] 太字
[蛍光]テキスト[/蛍光] マーカー

ショートコードはテーブルでもカスタムフィールドの値の中でもどこでも使えます。

フッターリンクの設定を追加しました

追加した項目
    rn t

  • リンクの開き方(同じウィンドウで開くor新規ウィンドウで開く)
  • rn t

  • ボタンを表示させる位置
  • rn

まんまです。

関連アイテムブロックの比較表に機能を追加しました

全般設定

追加した項目
    rn t

  • 比較表に現在の案件を表示しないようにする設定
  • rn t

  • 1列目の幅を画面幅に合わせて狭くする設定
  • rn

まんまです。

特にスマホで見た時に1列目のテキストが長い場合、テキストが邪魔して肝心のアイテムが見えないというケースがあったので、それを防ぐために「1列目の幅を画面の幅に合わせて狭くする」にチェックを入れておいた方が良いかもしれません。

表示項目

追加した項目

行高さの入力欄(アイキャッチ画像・リンクボタン以外全て)

これまで項目その1~15・追加項目のみが行高さを変更できる設定になっていましたが、アイキャッチ画像とリンクボタン以外の全ての項目に対して行高さを設定できるようにしました。

表示するテキストが短い場合は行高さ「1」でOKですが、テキストが長い場合や◯Xなどを表示するショートコードを入れる場合は2~3以上にしておいた方が良いと思います。

スクロールヒントの設定をできるようにしました

比較表などのテーブルを横スクロールできる状態の時に「スクロールできます」のポップアップ(=スクロールヒント)の表示時間を設定できる項目をテンプレートの共通設定ページに追加しました。

表示時間の設定

-1 ・・・ ずっと表示

0 ・・・ 表示しない

※その他の数字はポップアップが表示されてから非表示になるまでの時間です。

テキストリンクで[URL]のショートコードを使えるようにしました

テキストリンクに[URL]のショートコードを入れると「http」がダブって付く現象が起こっていてリンクが機能していなかったので、[URL]のショートコードでも機能するようにしました。

参考これはリンクテキストです(コンバージョン測定ページ経由でYahooに飛びます)

編集画面

編集画面内ではショートコードの前に「http://」が勝手に付きますが、実際の表示ページでは正常に機能するようになっています。

2019年12月9日追記

WordPressのバージョンアップが原因かどうか分かりませんが、上で説明している「http://」だとショートコードが機能しなくなっているようです。テキストリンク内にショートコードを使う場合は以下のようにショートコードの前に「/(スラッシュ)」を入れるようにしてください。

解析用タグを各ページに追加しました

これまで解析用タグはソースの<head></head>の中だけに設置する項目しかありませんでしたが、<body>の中に設置したいとユーザーさんからご要望がありましたので、各ページの<body>直下にタグを設置できる項目を追加しました。

テンプレートの共通設定

コンバージョン測定ページ

PPC用ページ

タブ付きボックスのデザインを追加しました

アイコンを入れられるようにしました。

タブのテキスト

ここにテキストが入ります。

SANGOのデザインが好きなのでSANGO風のデザインに変換できるようにしました(個人的に使いたかったので)。

MEMO

ここにテキストが入ります。

ご注意!

ここにテキストが入ります。

タイムラインにできるスタイルを追加しました

タイムラインの見本

チキンラーメンの美味しい食べ方

STEP1

フタを開ける

STEP2

お湯を注いで3分待つ

STEP3

美味しくいただく

Cocoonにもタイムラインのブロックがあるんですが、タイムラインを作った後にそれぞれの配置を並び替えることができないので、カンタンに並び替えられるように「Kadence Blocks」のブロックを元にスタイルを設定してタイムライン風にすることにしました。

実はVer1.1.1くらいから実装していたんですが説明が漏れていたので、ついでに紹介しておきます。

作り方はとってもカンタンで、ブロック一覧の中に「Kadence Blocks」がありますので「Row Layout」を選択して、

適当に2カラムのレイアウトを選択、

右サイドバーの一番下に「高度な設定>追加CSSクラス」がありますので、その中に「タイムライン」と入力するだけです。ブロックを選択するとカラムの幅も自由に変えれます。

以上がVer1.2.0のアップデート内容になります。