![見出し画像](https://assets.st-note.com/production/uploads/images/63777099/rectangle_large_type_2_d7588da0db48f7cca678aa2ec8e47a6b.png?width=1200)
[Shopify]コピペで簡単!タグ検索セクションを追加(Dawn)4/100
こんにちは。まりん(@crowd37cord)です。
あれば便利、タグをポコポコ簡単に挿入できるセクションを作成しました♪
デザインは全部で6種類。
タグをクリックするとタグ名でサイト内検索します。動作確認はこちら
✔︎今回のゴール
![画像1](https://assets.st-note.com/production/uploads/images/63775632/picture_pc_647f6a00faf809261ebf3da8ff695278.jpeg?width=1200)
![画像2](https://assets.st-note.com/production/uploads/images/63775641/picture_pc_3cf26e325f4ab93fab2e07f4187f9698.jpeg?width=1200)
【全6種】
✔︎楕円型
✔︎付箋型
✔︎長方形型
✔︎角が少し丸い長方形
✔︎左端が丸まった付箋っぽいカタチ
✔︎文字だけ
✔︎タグセクションの特徴&使い方
![画像3](https://assets.st-note.com/production/uploads/images/63775750/picture_pc_9f37138c209cab5482cbd07c0bd89c57.jpeg?width=1200)
❶セクションを追加をクリック
❷タグ検索を選択
「タグ検索」は今回のテンプレートを設置すると表示されます。
\タグリストのセクション内を設定していきます/
![画像4](https://assets.st-note.com/production/uploads/images/63775757/picture_pc_7f0696c0400baf055723127d93d6ddf0.jpeg?width=1200)
❸タグの形を選択
![画像6](https://assets.st-note.com/production/uploads/images/63776036/picture_pc_f4439202005594bff1a8f6a96ff93947.jpeg?width=1200)
❹楕円 |両端が丸まってます
❺付箋 |付箋みたいで可愛い
❻長方形 |スタイリッシュな長方形
❼角丸 |角が少し丸まった長方形
❽タグ |タグっぽさ全開
❾文字だけ|背景&枠なし
➓半角カンマ「,」で区切るとポコポコ作れます。
![画像7](https://assets.st-note.com/production/uploads/images/63776078/picture_pc_eab85e12ee8c2757c510f2813442949d.jpeg?width=1200)
\カラー設定も色々/
![画像7](https://assets.st-note.com/production/uploads/images/63776171/picture_pc_535a5895868948a3a0a856de89bae4d8.jpeg?width=1200)
(11)セクション全体の背景カラー
サイトのイメージカラーで設定してね。
(12)タグのカラー
・文字
・タグの枠
・タグ背景
(13)マウスオーバーした時のカラー
・文字
・タグの背景
・透明度
以上で完了です♪
こちらから確認できます。
✔︎設置方法
①管理画面からコード編集>Sectionsで「新しいSection」追加
![画像8](https://assets.st-note.com/production/uploads/images/63776463/picture_pc_e359a595994df91200702940cda4400a.jpeg?width=1200)
セクション名はなんでもOK
今回は、malin-lP-tagsにしてみました。
②Schemaを挿入
{% schema %}
{
"name": "タグリスト",
"settings": [
{
"type": "select",
"id": "lptag_listType",
"options": [
{
"value": "daen",
"label": "楕円"
},
{
"value": "husen",
"label": "付箋"
},
{
"value": "rectangle",
"label": "長方形"
},
{
"value": "kadomaru",
"label": "角丸"
},
{
"value": "tagshape",
"label": "タグ"
},
{
"value": "none",
"label": "文字だけ"
}
],
"default": "daen",
"label": "タグの形"
},
{
"type": "html",
"id": "lptag_list",
"label": "タグ",
"info": "カンマで区切ってください"
},
{
"type": "color",
"id": "lptag_sectionBkColor",
"label": "セクション背景カラー",
"default": "#fff"
},
{
"type": "color",
"id": "lptag_txtColor",
"label": "タグ文字カラー",
"default": "#0063A3 "
},
{
"type": "color",
"id": "lptag_borderColor",
"label": "タグ枠線カラー",
"default": "#0063A3 "
},
{
"type": "color",
"id": "lptag_bkColor",
"label": "タグ背景カラー",
"default": "#fff "
},
{
"type": "paragraph",
"content": "-------マウスオーバー時-------"
},
{
"type": "color",
"id": "lptag_txtHoverColor",
"label": "マウスオーバー時文字カラー",
"default": "#fff "
},
{
"type": "color",
"id": "lptag_bkHoverColor",
"label": "マウスオーバー時背景カラー",
"default": "#0063A3 "
},
{
"type": "range",
"id": "lptag_opacity",
"min": 0,
"max": 1,
"step": 0.1,
"label": "マウスオーバー時透明度",
"default": 0.6
}
],
"presets": [
{
"name": "タグ検索"
}
]
}
{% endschema %}
③HTMLを作成
<div class="malin-tags-{{ section.id }}">
<div class="page-width center">
{% assign tags = section.settings.lptag_list | split: "," %}
<ul>
{% for tag in tags %}
<li><a href="../search?q={{ tag }}">{{ tag }}</a></li>
{% endfor %}
</ul>
</div>
</div>
④最後にCSSの設定。一部ご紹介
.malin-tags-{{ section.id }} a {
font-size: 13px;
text-decoration: none;
padding: 0.3em 0.6em;
color: {{ section.settings.lptag_txtColor }};
{% if section.settings.lptag_listType == "none" %}
border: none;
{% elsif section.settings.lptag_listType == "tagshape" %}
border: none;
display: inline-block;
{% else %}
border: 1px solid {{ section.settings.lptag_borderColor }};
{% endif %}
{% if section.settings.lptag_listType == "none" %}
background-color:none;
{% else %}
background-color:{{ section.settings.lptag_bkColor }};
{% endif %}
{% if section.settings.lptag_listType == "daen" %}
border-radius: 20px;
{% elsif section.settings.lptag_listType == "kadomaru" %}
border-radius: 4px;
{% elsif section.settings.lptag_listType == "tagshape" %}
border-radius: 2em 0 0 2em;
{% endif %}
{% if section.settings.lptag_listType == "husen" %}
border-left: 5px solid {{ section.settings.lptag_borderColor }};
background-color:{{ section.settings.lptag_bkColor }};
{% endif %}
-webkit-transition: .2s;
transition: .2s;
}
あとは保存し完了です。
✔︎コピペで簡単!フルコードはこちら
ここからはCSS含めたフルコードのみのご紹介です。
Dawnテーマ対象です。他のテーマも動作すると思いますが調整は必要かもしれません。
解説などはしておりません。
※返金&サポートはしておりません
ここから先は
4,642字
この記事が気に入ったらサポートをしてみませんか?