💰ポイントカード



LINEアイコンの追加

投稿者 : 雑居ビル管理人 on

完成系はこんな感じ

 

参考サイト 

Debutではないので位置などは多少違うものの大まかには合っていて、config/settings_schema.jsonとsettings_data の編集まではOK

(この時点で恐らくカスタマイズ画面に、SNSのライン項目が登場してるはず?なのでLINEプロフィールリンクを入力)

 

★別作業として サイトにSNSアイコンの設置
元々SNSアイコンがメニューバーに埋め込まれていたので、sidebar liquidに他のSNSリンクもあったけど、footerに移動したかったので全てsections/footer.liquidにコピー
PCでの中央寄せができてない...わからず放置中
参考サイト 

またこのままだとLINEはサイト上に表示されていないので、↑のsections/footer.liquidに

{% if settings.social_line_link != blank %}
<li>
<a href="{{ settings.social_line_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'LINE' }}">
{% include 'icon-line' %}
<span class="icon__fallback-text">LINE</span>
</a>
</li>
{% endif %}
を追加しておく★

 

話は戻り
LINEアイコンを追加 からが少し違って

>>今回はFont AwesomeというWebアイコンフォントサービスからLINE アイコンの SVGをダウンロードしました。
ダウンロードしたSVGファイルは 、既に存在する他のソーシャルメディアアイコン同様、snippets/ ディレクトリに保存します。ファイル名は他と合わせて icon-line.liquid とします。
SVGファイルの svg要素を、他の svg ファイル同様に以下のように編集します。
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-line" viewBox="0 0 448 512">

ここまでやると入力したLINEプロフィールには飛べるものの、アイコン画像が透明状態で見えない...


そこでこれに加えて、引用サイト(↑LINEアイコン)に飛んでSVGコードをコピー、icon line liquidに追加した
<svg xmlns="http://www.w3.org/2000/svg" ~省略~ 34.9-81.5z"/></svg>

↑これがあることでうまくアイコン画像がサイト上に反映された
ただ、元々記載されていたSVGコードを削除すると消えてしまったので両方残した

0件のコメント

コメントを残す