松木平さん！
このフキダシ表示はどうして作るんですか？
これは最初しょへさんから「インタビュー記事書くならこちらのサイトを参考に！」って勧められたサイトがフキダシ表示でストレスなく読み進められたので「これだ！」って思ってそこのコードを使って作成しました。
上の2段のフキダシ表示は下記のコードを張り付けるだけで設定できます
<style><!--
/* アイコン付き吹き出し（右側）
*/ .talk11 { margin-bottom: 10px; } .talk11 figure img { width: 100%; height: 100%; border: 2px solid #88bece;
/* 円の線の太さと色の設定 */ border-radius: 50%; margin: 0; } p.talk11-text { margin: 0 0 8px; } p.talk11-text:last-child { margin-bottom: 0px; } .talk11:after,.talk:before { clear: both; content: ""; display: block; } .talk11-img { margin-right: 4px; margin-top: -1px; float: right; width: 70px; height: 70px; } .talk11-txt { position: relative; margin-right: 100px; padding: 0.6em 0.8em 1em 0.8em; border: 3px solid #88bece;
/* 吹き出し線の太さと色の設定 */ background-color: #fff;
/* 吹き出しの背景色
*/ border-radius: 5px;
/* 吹き出しの角の丸み
*/ } .talk11-txt:before { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #88bece;
/* 吹き出しの三角形の設定（色以外の変更は非推奨）
*/ top: 24px; right: -23px; } .talk11-txt:after { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #fff; top: 24px; right: -19px; }
--></style>
<div class="talk11">
<figure class="talk11-img"><img alt="吹き出し右側用のアイコン" src=
"https://cdn.shopify.com/s/files/1/0497/5067/1515/files/hukidashi_k.jpg?v=1678238211"
></figure>
<div class="talk11-txt">
<p class="talk11-text">
<b>松木平さん！</b><br>このフキダシ表示はどうして作るんですか？</p>
</div>
</div>
<style><!--
/* アイコン付き吹き出し（左側） */ .talk10 { margin-bottom: 10px; } .talk10 figure img { width: 100%; height: 100%; border: 2px solid #9ce191;
/* 円の線の太さと色の設定 */ border-radius: 50%; margin: 0; } p.talk10-text { margin: 0 0 8px; } p.talk10-text:last-child { margin-bottom: 0px; } .talk10:after,.talk:before { clear: both; content: ""; display: block; } .talk10-img { margin-left: 4px; margin-top: -1px; float: left; width: 70px; height: 70px; } .talk10-txt { color: #444;
/* 吹き出し内テキストの色
*/ position: relative; margin-left: 100px; padding: 0.6em 0.8em 1em 0.8em; border: 3px solid #9ce191;
/* 吹き出し線の太さと色の設定
*/ background-color: #fff;
/* 吹き出しの背景色 */ border-radius: 5px;
/* 吹き出しの角の丸み
*/ } .talk10-txt:before { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #9ce191;
/* 吹き出しの三角形の設定（色以外の変更は非推奨）
*/ top: 24px; left: -20px; } .talk10-txt:after { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #fff; top: 24px; left: -16px; } -
--></style>
<div class="talk10">
<figure class="talk10-img"><img src=
"https://cdn.shopify.com/s/files/1/0497/5067/1515/files/hukidashi_m.jpg?v=1678237795"
alt="吹き出し左側用のアイコン"></figure>
<div class="talk10-txt">
<p class="talk10-text"
>これは最初しょへさんから<b>「インタビュー記事書くならこちらのサイトを参考に！」</b>って勧められたサイトがフキダシ表示でストレスなく読み進められたので<b>「これだ！」</b>って思ってそこのコードを使って作成しました。
</p>
</div>
</div>
こんな感じです。実際のページは下の画像をクリック▼
素敵！(笑)
これはShopifyでアプリなくてもできますか？
私、PC苦手なので、手取り足取り教えて下さい。
アプリなくても出来ますよ！上の表示はShopifyの固定ページの作成で作りました
詳細ご説明しますね。
Shopifyのストアページ
オンラインストア⇒ページ
新規ページ作成
記事部分の表示をHTMLに変える
コードをコピペで完成
「エディタを表示する」
と出来上がってます。
画像の設定や文章の書き替え方を詳しく教えて下さい。
詳しく説明しますね！
コードの上半分が右側からのフキダシ
下半分が左側からのフキダシ
となっています。
左右それぞれの画像の設定方法は次の通りです。
左右の画像は先にCanva等で作っておいて下さいね。
Shopifyストアページの
コンテンツ⇒ファイル
ファイルをアップロード
「リンク」ボタンからリンクを取得します。ボタンクリックするだけでコピーされます
赤字のところを先程のコピーしたURLで書き換えます
これは右側ですが、同じように左側も書き換えます。
最後にフキダシ内の文章の書き替え方法ですね。
コードの青字になっているところが文章ですので、そこを書き換えれば良いわけです。
太字とかも指定できますか？
改行 <br>
<br><br>で二行改行
太字 <b> と </b> で囲む
上の二つのコードだけ知ってれば、太字・改行ができます
他にもコードを知ってれば色々な設定出来るのでしょうが、私にはこれが精一杯(笑)
松木平さん！
今日はありがとうございました！
フキダシを使った記事です参考になれば幸いです
記事へは画像をクリック
うちはPageflyというアプリをページ作成に使ってます。
これなら割と簡単に作業ができます。
一度作ってしまえば
コピー＋修正で続ければ簡単です。