Shopify ブログ記事をカスタマイズするアプリについて調べてみた
はじめに
今回は、Shopify ブログ記事をカスタマイズする方法を調べました。
1 つ目は、コーディングでブログ記事をカスタマイズする方法
2 つ目は、アプリを用いてブログ記事をカスタマイズする方法
それでは、それぞれの方法について詳しく解説していきます。
ブログ記事をカスタマイズするには
Shopify において、ブログ記事をカスタマイズするとは、以下の画像のようにブログ記事に装飾することを指します。
ブログ記事をカスタマイズすることで、ブログ記事のデザイン性を高めることができます。
ブログ記事をカスタマイズするためには、以下の知識が必要です。
- Shopify 管理画面の操作方法
- HTML および CSS に関する知識
- Liquid テンプレート言語に関する知識
これらの知識を駆使することで、効果的にブログ記事をカスタマイズすることが可能です。
コーディングでブログ記事をカスタマイズする方法
まずは、コーディングで作成する方法について解説していきます。
「オンラインストア > テーマ > 三点リーダー > コードを編集」をクリックしてください。
以下の画面が表示されます。
「sections」フォルダの「main-article.liquid」を開いてください。
ブログ記事のコンテンツは、article-template__content クラスが付与されている div タグ配下に表示されます。
style タグの中に以下の css を記載します。
.article-template__content h2 {
/*線の種類（二重線）太さ 色*/
border-bottom: double 5px #FFC778;
}
以下のようにブログ記事の h2 タグが装飾されていれば OK です。
それでは次に、アプリでブログ記事をカスタマイズする方法について解説していきます。
アプリでブログ記事をカスタマイズする方法
今回紹介するアプリは、「シンプルブログ記事カスタマイズ｜お手軽ブログテンプレート」です。
以下の記事を参考にしています。
シンプルブログ記事カスタマイズ｜お手軽ブログテンプレート
「シンプルブログ記事カスタマイズ｜お手軽ブログテンプレート」は、ストアにノーコードでブログ記事カスタマイズ機能を導入できるアプリです。
▼「シンプルブログ記事カスタマイズ｜お手軽ブログテンプレート」｜アプリストア
「シンプルブログ記事カスタマイズ｜お手軽ブログテンプレート」を利用することで、豊富な見出しデザインが実現可能です。
「シンプルブログ記事カスタマイズ｜お手軽ブログテンプレート」を利用することで、ブログ記事をさまざまなデザインにカスタマイズできます。
アプリのインストール
それでは、実際にアプリのインストールを行なっていきましょう。
ストア管理画面左下の「設定」をクリックします。
ストアの管理画面の「アプリと販売チャネル」画面に表示されている「Shopify App Store」をクリックして、Shopify App Store に移動してください。
検索窓に、「シンプルブログ記事カスタマイズ｜お手軽ブログテンプレート」と入力してください。以下の画像のアプリをクリックしてください。
「インストール」ボタンをクリックして、ストアにアプリを追加しましょう。マーチャント用のアカウント（実際に物販などで運用しているアカウント）ですと、月額$3.99 でご利用いただけます。インストール後、7 日間は無料でご利用いただけます。
インストール後、以下の管理画面が表示されます。
見た目のカスタマイズ
見た目のカスタマイズを行います。以下の画像は、編集できる箇所を表しています。
目次の見出し 1 のデザインを変更できます。見出し 1〜6 まで変更ができます。
箇条書きリストのデザインが変更できます。
番号付きリストのデザインが変更できます。
引用のデザインが変更できます。
アクセントの色 1 が変更できます。
アクセントの色 2 が変更できます。
背景色が変更できます。
線の色を変更できます。
終わりに
今回は、Shopify ブログ記事をカスタマイズする方法を解説しました。
今回紹介したアプリは以下のリンクからインストールできます。
▼「シンプルブログ記事カスタマイズ｜お手軽ブログテンプレート」｜アプリストア
最後まで読んでいただきありがとうございました！
Discussion