[Shopify] ブログサイドバーにプロフィール画像を追加する

今回は以前作成したブログサイドバーにプロフォールを追加していきます。

（以前作成したブログサイドバー）

https://ec-penguin.com/blogs/shopify/sidebar-categories-archives

こちらのブログサイドバーに『プロフィール』部分を追加していきます。これで、どのような人がブログを書いているのか分かるようになりますね！

イメージとしては、このようなプロフィールが出来上がるはずです。

↓↓↓

(見出しはスタイル当てているので全く同じにはなりませんがご了承を...)

それではさっそくプロフィールを作成しましょう。

プロフィール用のコードを作成する

まずプロフィールの元となるコードを貼り付けます。

これが元になるコードです。

編集する場所は3つ。

1. プロフィール用画像URL
2. 自分のプロフィール文章
3. 詳しいプロフィールページリンクURL

です。

Shopifyのファイルから画像をアップロードする

 次に管理画面→設定→ファイルから画像をアップロードしましょう。

アップロードするとURLが取得できますので、そちらのURLを先ほどの"1.プロフィール用画像URL"部分に貼り付けます。

これでプロフィール画像が設定できました！

プロフィール詳細を記入する

次にプロフィール文を記載していきましょう。

上記のコードの

"沖縄からShopify情報を発信しているフロントエンドエンジニアのGuinです。"

の部分がプロフィール文として表示されます。

なので、上記を消去して、ご自身のプロフィール文に差し替えてください。ブログを見に来てくださる人が必ず目にする部分（特にPCは必ず目に付く）だと思いますので、できるだけ詳しく書いていきましょう。

私もあとでプロフィール文は書き直します、、

プロフィール文を改行させたい

プロフィール文が長くなってくると、改行させたい場合がでてくると思います。その際は<br>というタグを改行させたい部分に挿入すれば改行できます。

上記のコードでもいくつか<br>が入っていますね。

プロフィールページへのリンク

最後にプロフィールページへのリンクを作成します。

これはプロフィールページのリンクを取得し、"3.詳しいプロフィールページリンクURL"部分に貼り付けるだけです。

以上で全体のコードをみてみるとこのようになっています。

ちなみに、下部スタイルタグの中のbackground-color, colorの部分で色を変えられます。

新規スニペットを作成して埋め込む

そして、上記コードをコピペし、新規スニペットを作成しましょう。

新規スニペットの作成方法は下記セクションの作成方法とほとんど同じなので、ご参考までに。

https://ec-penguin.com/blogs/shopify/introduction-to-sections

ちなみに新規snippetsの名前は”sidebar-profile.liquid”としました。

そして、埋め込みたい場所に

を記述すると無事プロフィールが表示されたと思います！

Shopifyブログのサイドバーにプロフィール画像を追加する　まとめ

 以上、いかがだったでしょうか。

プロフィールページ自体は作成してあったのですが、各記事ごとに簡単なプロフィールを作成したいなぁと思っていたので、大満足の結果となりました。

まだスタイル調整や、プロフィール文の修正も必要かなと感じているのですが、ちょっとずつ完成形に近づけていくタイプのブログなので良しとしてしまいます。

Shopifyで同じようにブログを書いていく仲間も増えていってTwitterなどで将来繋がれたら嬉しいです。

それでは、本日も良い1日を！