2024.05.28

Shopifyのブログ見出しにアイコンをつけよう【DAWN】

にゃん花子

記事内に商品プロモーションを含む場合があります

Dawnのブログ見出しに、可愛いアイコンをつけてみるにゃん

Dawnのブログの見出しを、h2〜h6の見出し箇所のみ、オリジナルのアイコンを使ってアレンジします。

cssを使い慣れている人であれば、任意のcssクラスを追加するなどで対応できます。
もしblog運用者がhtmlやcssコードに不慣れな場合は、見出しを指定するだけで任意のスタイルが適応されるので、運用負荷軽減にもなりますよ。

このblogでわかること

Shopifyのブログ見出しを、変更する方法
アイコン付き見出しのCSS
メモ書きに使える囲み線のあるcss

出来上がりのイメージ
それぞれのCSSソース
ShopifyのblogにCSSスタイルを追加する方法
1. shopifyでblogの見出しに適応する

Google広告

出来上がりのイメージ

このような形で、見出しそれぞれにオリジナルのアイコンを付与できます。

アイコンの大きさは、100px*100pxの正方形のpng画像を使用しています。h1〜指定が可能ですので、blog運用時の目次の取り扱いなどに合わせて、変更してください。

それぞれのCSSソース

アイコン付き見出し

h2、h3で使用しているアイコン付きの見出しのcssです。
アイコン画像については、あらかじめShopifyの「コンテンツ」＞「ファイル」にアップロードしておきましょう。

h2は元々、ボーダーラインのスタイルがありますので、そちらを無効化し、新しいスタイルを適応しています。
（backgroundの画像ファイルを、先ほどアップロードしたアイコン画像のURLを指定します）
(アイコンサイズは、background-sizeで調整しています）

1.article-template__content.page-width.page-width--narrow.rte h2 {
2    color: #000;
3    border-bottom: none;
4    font-weight: initial;
5}
6.article-template__content.page-width.page-width--narrow.rte h2 {
7    background: transparent url(https://cdn.shopify.com/s/files/1/0719/4833/7436/files/oke.png?v=1716858508) no-repeat left center;
8    text-decoration: 1px underline wavy #000000;
9    text-underline-offset: 8px;
10    padding: 5px 0 0 43px;
11    min-height: 34px;
12    background-size: 35px 35px;
13    line-height: 2em;
14    margin: 0 0 5px;
15    margin-bottom: 10px;
16    margin-top: 20px;
17    text-align: left;
18    letter-spacing: .14em;
19}

h3は、元々は左側にボーダーのあるスタイルとなっているため、そちらを無効化して、アイコンを設定しています。
（backgroundの画像ファイルを、先ほどアップロードしたアイコン画像のURLを指定します）
(アイコンサイズは、background-sizeで調整しています）

1  .article-template__content.page-width.page-width--narrow.rte h3 {
2   border-left: none; 
3  }
4.article-template__content.page-width.page-width--narrow.rte h3{
5    background: transparent url(https://cdn.shopify.com/s/files/1/0719/4833/7436/files/bable.png?v=1716858507) no-repeat left center;
6    padding: 5px 0 0 43px;
7    min-height: 34px;
8    margin-bottom: 10px;
9    background-size: 35px 35px;
10    display: block;
11    font-size: 16px;
12    line-height: 1.6em;
13  }

下線がウェーブ

h2で使用している下線にウェーブを使用しています。スッキリ見せたい場合は、borderの方がおすすめです。

ウェーブの指定箇所だけ抜き出します。

1   text-decoration: 1px underline wavy #000000;

線で囲むメモ要素

メモやポイントなどの扱いで、少し区切りをつけたい場合などに利用できます。
（backgroundの画像ファイルを、先ほどアップロードしたアイコン画像のURLを指定します）
(アイコンサイズは、background-sizeで調整しています）

1.article-template__content.page-width.page-width--narrow.rte h5{
2    background: transparent url(https://cdn.shopify.com/s/files/1/0719/4833/7436/files/sentakubasami.png?v=1716858507) no-repeat left center;
3    padding: 13px 0 10px 43px;
4    min-height: 34px;
5    margin-bottom: 10px;
6    background-size: 35px 35px;
7    display: block;
8    font-size: initial;
9    border: 1px solid;
10  }

ShopifyのblogにCSSスタイルを追加する方法

それでは、cssをShopify上に追加していきます。

まずは「オンライン」＞「テーマ」＞「コードを編集」の画面を表示し、セクション > 「新しいセクションを追加する」をクリックします。
任意の名前を入力して「liquidファイル」を作成しましょう。

liquidの追加画面が表示されますので、先ほどのcssを追加していきます。
liquidファイルを追加する際は、一定のルールがあるため、こちらにも参考ソースをご紹介しておきます。

1
2{% schema %}
3
4  {
5
6    "name": "コラム用CSS-見出し用追加",
7
8    "settings": [
9
10    ],
11
12    "presets": [
13
14      {
15
16        "name": "コラム用CSS-見出し用追加"
17
18      }
19
20    ]
21
22  }
23
24{% endschema %}
25
26{%- style -%}
27.article-template__content.page-width.page-width--narrow.rte h2 {
28    color: #000;
29    border-bottom: none;
30    font-weight: initial;
31}
32.article-template__content.page-width.page-width--narrow.rte h2 {
33    background: transparent url(https://cdn.shopify.com/s/files/1/0719/4833/7436/files/oke.png?v=1716858508) no-repeat left center;
34    text-decoration: 1px underline wavy #000000;
35    text-underline-offset: 8px;
36    padding: 5px 0 0 43px;
37    min-height: 34px;
38    background-size: 35px 35px;
39    line-height: 2em;
40    margin: 0 0 5px;
41    margin-bottom: 10px;
42    margin-top: 20px;
43    text-align: left;
44    letter-spacing: .14em;
45}
46
47.article-template__content.page-width.page-width--narrow.rte h3 {
48   border-left: none; 
49  }
50.article-template__content.page-width.page-width--narrow.rte h3{
51    background: transparent url(https://cdn.shopify.com/s/files/1/0719/4833/7436/files/bable.png?v=1716858507) no-repeat left center;
52    padding: 5px 0 0 43px;
53    min-height: 34px;
54    margin-bottom: 10px;
55    background-size: 35px 35px;
56    display: block;
57    font-size: 16px;
58    line-height: 1.6em;
59  }
60.article-template__content.page-width.page-width--narrow.rte h5{
61    background: transparent url(https://cdn.shopify.com/s/files/1/0719/4833/7436/files/sentakubasami.png?v=1716858507) no-repeat left center;
62    padding: 13px 0 10px 43px;
63    min-height: 34px;
64    margin-bottom: 10px;
65    background-size: 35px 35px;
66    display: block;
67    font-size: initial;
68    border: 1px solid;
69  }
70  
71{%- endstyle -%}
72
73{% javascript %}
74
75{% endjavascript %}

schemaの箇所のnameは、この後カスタマイズ画面で表示される名前になります。わかりやすい名前をつけておきましょう！

shopifyでblogの見出しに適応する

「オンライン」＞「テーマ」＞「カスタマイズ」を表示し、「ブログ記事」を選択します。

cssのスタイルを追加するテンプレート名をチェックします。
最初は「デフォルトの記事」のみある状態です。必要に応じて新しい「テンプレートを作成」してください。

テンプレートが表示されたら、「テンプレート」> 「セクションを追加」から、先ほど作成したliquidファイルを選択します（※schemaで設定した名前が選択肢として表示されるはずです）

追加されたら、保存をおして、見出しが適用されているか確認しましょう！

#css

Google広告

ABOUT ME

Shopifyのブログ見出しにアイコンをつけよう【DAWN】

出来上がりのイメージ

それぞれのCSSソース

アイコン付き見出し

下線がウェーブ

線で囲むメモ要素

ShopifyのblogにCSSスタイルを追加する方法

shopifyでblogの見出しに適応する

Shopify有償・有料テーマを日本語化する方法

【Shopify】告知バーをカスタマイズしよう

Shopify に AdobeFontsを読み込む方法

Shopify翻訳アプリ【Translate & Adapt】使い方と翻訳範囲の注意点

コピペでOK！Shopifyにバナー横並びで表示する方法【独自セクション追加】【DAWN】

商品のキャッチコピーを、商品ページとコレクションに表示しよう【DAWN】