Hoda Blog Toolkit — 使い方

English

Hoda Blog Toolkit は、オンラインストアのブログページをテーマアプリブロックで拡張する、HodaPress の Shopify アプリです。アプリブロックに対応した Online Store 2.0 テーマ（Dawn や Horizon など）向けです。

インストール

Shopify App Store のアプリページを開き、インストール をクリックします。
表示された権限を確認して承認します。
インストール後、Shopify 管理画面のアプリ一覧から Hoda Blog Toolkit を開きます。

※ このアプリは基本的にすべてテーマエディターで動作します。管理画面で設定する項目等はございません。

テーマアプリブロックの追加

① Shopify 管理画面で オンラインストア → テーマ を開きます。

② 利用中のテーマで カスタマイズ をクリックします。

③ 編集するページを開き、セクションを追加 > アプリ から Hoda Blog Toolkit のブロックを選択します。

一覧系ブロック（ブログリスト・ブログカード・プリセットデザイン）は、トップページやブログ一覧など、各種ページに追加できます。
記事系ブロック（パンくず・タイトル・メタ情報・コンテンツ・目次・記事ナビ）は、テーマエディターで 「ブログ記事」テンプレート を開いたときに追加できます。

④ 追加後はドラッグアンドドロップで並び順を変更することができます

リスト系のブログのカスタマイズ方法

ブログリスト

「ブログリスト」では、日本のコーポレーションサイトのお知らせのようにリスト形式で、ブログ記事一覧を表示することができます。

カスタマイズできる項目

ブログ : 対象のShopifyブログを指定します
表示件数 : 1~20までの記事の表示件数を調整できます
見出しを表示 : リスト上の見出しテキストの表示ON/OFF
見出しテキスト :「見出しを表示」がONになっている場合、ここに入力したテキストが表示されます
日付を表示 : 日付表示ON/OFF
日付形式 : 10種類の表記から選択できます。（日本表記にも対応）
タグを表示 : タグ表示ON/OFF
レイアウト : 次の3種類から選べます
- 1行（タグをタイトルの前）
- 1行（タグをタイトルの後）
- 2行（日付・タグを上に表示）
一覧リンクを表示 : 一覧リンク表示ON/OFF
リンクテキスト :「一覧リンクを表示」がONになっている場合、ここに入力したテキストが表示されます

レイアウト

最大幅（PC） : 0 で全幅になります
最大幅（スマホ） : 0 で全幅になります
配置
ベース文字サイズ : 文字が小さいと思ったら調整できます

デザイン

文字色
リンク色
タグ背景色
タグ文字色
日付の背景色
日付の文字色
日付の角丸 : 0px だと角ばった状態、値を上げると丸くなります
タイトルホバー : 4種類から選択可能（フェードのみ／下線・即時／下線・左から伸びる／下線・中央から伸びる）
セクション上下余白
項目上下余白
項目間の余白

ブログカード

「ブログカード」では、カード形式のブログ記事一覧を表示できます。デザインを細かくカスタマイズできるのが特徴です。

カスタマイズできる項目

ブログ : 対象のShopifyブログを指定します
表示件数 : 1~20までの記事の表示件数を調整できます
見出しを表示 : リスト上の見出しテキストの表示ON/OFF
見出しテキスト :「見出しを表示」がONになっている場合、ここに入力したテキストが表示されます
日付を表示 : 日付表示ON/OFF
日付形式 : 10種類の表記から選択できます。（日本表記にも対応）
タグを表示 : タグ表示ON/OFF
タグの位置 : 「タイトルの上（日付の右）」または「タイトルの下」から選択できます
デフォルトサムネイル : 記事にサムネイルがない場合に、ここで設定したサムネイルを表示できます

レイアウト

最大幅（PC） : 0 で全幅になります
最大幅（スマホ） : 0 で全幅になります
カラム数（PC）:パソコン時の列数です。モバイルでは1列となります
カード間の余白
カード文字エリアの内側余白

デザイン

サムネイル高さ比率 : 画像の縦横比を、幅に対する高さの割合（%）で指定します（計算は「高さ ÷ 幅 × 100」）。調整範囲は 25〜125% です。
- 16:9 → 56%（初期値）
- 4:3 → 75%
- 参考: 3:2 ≈ 67%／1:1 = 100%／21:9 ≈ 43%
カードの角丸
カードの影
ベース文字サイズ
文字色
タグ背景色
タグ文字色
カード文字エリアの背景色
カード枠線の色
カード枠線の太さ

プリセットデザイン

「プリセットデザイン」では、次の 8種類 のスタイルプリセットから選択できます。

余白付き画像カード
画像オーバーレイ
バッジタグ付きカード
バッジタグ付きカード（左下）
枠なしミニマル
メタ情報上配置
横並び（画像右）
横並び（画像左）

ブログ・表示件数・日付・サムネイル高さ比率・カラム数など、ブログカードと共通する項目もあります。一方で、抜粋の表示、タグの表示モード、お知らせ一覧リンクのスタイル、カラーモードなどはプリセット側の特徴です。カードの角丸・影・枠線などの細かい見た目調整は「ブログカード」向けです。

「カラーモード」からダークモードに切り替えることも可能です。自動的にダークモードにマッチしたデザインに切り替わります。

ブログ記事で使えるブロック

これらのブロックはテーマエディターの「ブログ記事」のテンプレート編集時に選択することができます。

記事パンくずリスト

BreadcrumbList スキーマに対応したパンくずリストを表示できます

カスタマイズできる項目

ホームを表示
ホームの表示名
ブログ名を表示
現在の記事を表示
ホームアイコンを表示
区切り : シェブロン／スラッシュ／矢印／カスタムテキストから選べます。カスタムテキストでは任意の文字を区切りとして使えます

デザイン

カラム内の配置
フォントサイズ
文字色
リンク色
現在ページの色
区切りの色
項目間隔
上余白
下余白
BreadcrumbList スキーマを有効化 : ONにすると、スキーマ対応となります

記事タイトル

ブログ記事のタイトルの装飾ができます。

既存のデフォルトのタイトルがあると二重で表示されてしまうので、Shopifyデフォルトのタイトルは非表示にしてください。

カスタマイズできる項目

上余白
下余白
フォント
文字サイズ
文字の太さ
文字色
マーカー式下線
マーカー色

記事メタ情報

記事の日付、ブログ種類、タグ、著者を表示できます。プリセットから選んだ上でカスタマイズできます。

カスタマイズできる項目

デザインプリセット
日付を表示
日付形式
ブログ（カテゴリー）を表示
ブログページへリンク
タグを表示
タグをタグページへリンク
ラベルを表示
著者を表示

レイアウト

最大幅（PC）
最大幅（スマホ）
上余白
下余白
カラム間隔
カラム内の配置

スタイル

文字色
ラベル・アイコン色
フォントサイズ
タグ背景色
タグ文字色

記事コンテンツ

ブログ記事本文の装飾が可能になります。読了時間の表示のほか、本文・見出し（H2・H3）・引用・表・リンク・リストの見た目をテーマエディターから調整できます。

既存のデフォルトのコンテンツがあると二重で表示されてしまうので、Shopifyデフォルトのコンテンツは非表示にしてください。

自動目次

見出しに反応して自動的に表示される目次（TOC）を設定できます。

記事コンテンツ ブロックと併用し、本文に見出し（H2〜）があることを確認してください。目次だけを追加しても、対象の見出しがなければ表示されません。

スタイルプリセット
タイトルを表示
タイトルテキスト
対象の深さ : どこまでの見出しを表示するかを選択

レイアウト

最大幅（PC）
最大幅（スマホ）
上余白
下余白
2カラム表示
スムーズスクロール : ONにすると、目次をクリックするとスムーズに対象見出しにジャンプできます
スクロールオフセット : 固定ヘッダーなどがあり、上から余白を取ってジャンプしたい時は値を入れます。

デザイン

文字色
リンク色
アクセント色

記事ナビ（前後）

カスタマイズ

前の記事ラベルを表示
前の記事ラベル
次の記事ラベルを表示
次の記事ラベル
ラベルの位置
ラベルの文字サイズ
ラベルの色
ラベルとカードの間隔
スタイルプリセット
カラーモード : ストアが黒系のデザインの場合は、ダークモードが最適です
日付を表示
タグの表示
抜粋を表示
抜粋の文字数
日付形式
デフォルトサムネイル : 記事にサムネイルがない場合に、ここで設定したサムネイルを表示できます
サムネイル高さ比率 : ブログカードと同様、16:9 は 56%、4:3 は 75% が目安です

背景色の変更方法

セクション自体の背景色の変更はサポートしていません。

もしセクションの背景色を変更したい場合は、Shopify テーマエディターの カスタム CSS をご利用ください。クラス名はテーマによって異なるため、エディター側の案内に合わせてセレクタを指定してください。

例

.section-xxxxx {
  background-color: #000;
}