利爺とゆったりアフィリエイト

箇条書きとともに使う画像の表示調整

●リストマーカーの代わりに画像を表示する方法。
●画像を項目の前にポイント（仮想のリストマーカー）として表示して
　その位置を調整する方法を確認してきました。

　
前頁で
画像を表示するためにclassを定義したのが、下記のＣＳＳでしたね。

【参照ＣＳＳ：画像をポイントにするためのclassの定義】


上記のＣＳＳの中で「赤文字」で記入している
marginとpadding
の役割にについては、まだ確認していませんね。

両プロパティの値を入れ変えながら見て行きましょう。

参照ＣＳＳの「class」の定義（青文字）では
list-style:none;
margin-left:0px;
padding-left:0px;
と定義して

●デフォルトで表示されるリストマーカーの非表示。
●表示領域の左ヘリ（縁）からの位置。
●項目と使用する画像の間の空き。

をクリアしています。

このように、
デフォルトでの表示を全てクリアしていますので

リストマーカーの代わりに
使用する画像と箇条書きの項目を表示する位置（場所）を
新たにＣＳＳに定義する必要があります。


画像のプロパティでは

background-image:url('url');
background-repeat:no-repeat;
background-position:left 15%;

画像の呼び出し。
表示の方法。
位置。

をbackgroundで定義しています。

項目と仮想のリストマーカーとして使用する画像は
別個の存在ですので、新たに

項目の位置の定義が必要ですね。


項目の位置の定義には
margin
padding
のプロパティを使います。

【図１：marginとpadding】

　　↑　画像をクリック。元画像が開きます。

「margin」は
記事表示領域、または指定された領域の上下左右の各ヘリからの位置の値を定義します。

左ヘリからの位置は

margin-left:●px;
margin:0px 0px 0px ●px;

どのプロパティの記入形式を使っても同じ意味になります。


「padding」
も位置を取るプロパティですね。

margin　 ＝　ヘリからの距離であるのに対して
padding　＝　テキストの表示領域からヘリに対する距離になります。

このように　marinとpadding　は
同じ位置を取るプロパティでも、その取り方と意味が異なります。

また記入する単位も
「px、pt」などの絶対サイズ、「em、%」のような相対サイズ
のどれでも構いません。

箇条書きで
仮想のリストマーカーとして画像を使う時の　padding　の距離の対象は「画像」になります。

箇条書きの項目とその頭に表示する画像との距離
つまり余白・空きです。


値の「0px」は「余白無し」を意味しますね。

余白無しとは
同じ位置から項目と画像を別々に表示することになりますので

両方が重なった形の表示になります。
　　↓
【表示例�@】

例�@がその見え方です。

画像と箇条書きの項目が重なって表示されますね。

　　　　注１
　　　箇条書きと同時に表示している数字の�@�A�B�C�D�E�Fは
　　　位置を確認しやすいようにメージャーとして表示しています。

　　　このブログの基本書体は12pxですので、ヘリに触れている
　　　�@の左端が0px、�Aの左は12px、�B24pxのように見てください。

　　　　注２
　　　距離と余白の考え方は、行送り（字送り）と行間（字間）の考え方と
　　　同じです。
　　　

■ 記事表示領域のヘリから余白を取る。

【ＣＳＳ】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 0px;
　↓
【表示例�A】
<
「例２」は
ヘリから12px（1文字分）を開けて項目を表示しました。

marginの値は
「0px 0px 0px 12px;」

記事表示領域のヘリから右へ「12px」の位置。
1文字分離れたその位置に「項目と画像」は表示されます。

margin　は各ヘリからの距離になりますので
別々に存在する項目も画像も指定された距離だけ移動します。

padding　の値を
「0px 0px 0px 0px;」
としていますので「項目の表示位置」と「画像の表示位置」は同じ場所になり
重なった表示になります。


■ 項目と画像の間を空ける。

上記「例�A」のpadding　の値を調整します。

【ＣＳＳ】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 12px;
　↓
【表示例�B】


【図２：paddingの余白の取り方�@】

　　↑　画像をクリック。元画像が開きます。

paddingは項目（テキスト）の方から
上下左右のヘリに向かってスペースを取るプロパティでしたね。

この場合は、padding が取る左への余白は
項目の前に画像を用いますので、距離を取る対象は画像になります。

つまり
「項目と画像の間を空ける」と同じ意味です。

padding:0px 0px 0px 12px;
は項目の左の12pxの位置に画像を表示する領域が空きます。

1文字分のスペースが有りますので、重なることなく表示されます。

表示例�Bの形では画像と項目の間に隙間がないので
マーカーの位置としては見た目も窮屈ですね。


■ 項目と画像の間に1文字分の余白を作る。

【ＣＳＳ】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 24px;
　↓
【表示例�C-１】


【図３：paddingの余白の取り方�A】

　　↑　画像をクリック。元画像が開きます。

画像の大きさ(12px)　＋　使用文字１字分（12px）＝　24px
の余白を取り、その後に項目を表示するの形です。

「図３」の例のように、項目から24pxの余白と言うことは

●24pxの全てを余白が占めるのではなく
●頭の12pxの部分に画像が表示されますので

実質的な余白サイズは残りの12pxになります。

margin:･･･12px;
で、記事表示領域の左のへりから12pxの位置を指定。

padding:･･･24px;
で、項目の前に12pxの画像表示部分をつくり、12px(１文字分)を空け
その後ろに箇条書き項目を表示しています。

項目と画像の間に1文字分の余白を空けましたが
1文字分の余白では開き過ぎ

半角（6px）くらいの小さい余白の方が締りがあってスッキリするのでは
と言うときには

画像(＋)半角字分の余白（6px）＝　18px　のサイズ
padding:0px 0px 0px 18px;
のように値を調整します。

　　　　注）
　　　余白サイズは1px単位で調整出来ます。

　　　行並びや文字の間隔（送り）を考え、使用している文字の全角・半角を
　　　基準としたサイズを使用した方が理想的です。


【表示例�A-２】

画像と項目の余白が半分になりましたね。
このくらいの余白が見た目にもスッキリするでしょう。

デザイン的な好みで修正して構いません。


■ ヘリからデフォルトに近い位置を決め、項目と画像を表示する。

margin　　padding
の表示の形式が分かりやすいように、箇条書きの階層構造形で確認します。

【ＣＳＳ】
親項目「那覇市」
margin:0px 0px 0px 36px;
padding:0px 0px 0px 18px;

子項目「人口」
margin:0px 0px 0px 12px;
padding:0px 0px 0px 18px;

　　※階層構造の箇条書きの各classの適用、画像位置の修正は
　　　前頁で確認しています。
↓
【表示例�D】


親項目
margin:0px 0px 0px 36px;
padding:0px 0px 0px 18px;

親項目の那覇市は
記事表示領域の左ヘリからmarginで36px(３文字)寄った位置に項目と画像を表示。
その項目と画像の間はpaddingで「全角＋半角＝1.5(18px)」の空きにしています。

子項目
margin:0px 0px 0px 12px;
padding:0px 0px 0px 18px;

親項目に内包（入り子）されている子項目が
margin: ･ ･ ･ 12px　で取る対象としているヘリは

記事表示領域のヘリからではなく
親の箇条書き項目の領域（この例の薄紅色バックカラーの範囲）がヘリになります。

そのヘリから１文字右の位置（margin:12px）が画像の表示位置
padding:18px（実質6px）の余白を取って項目の表示にしています。

この表示形式の方がデフォルトでの表示位置に近いでしょう。

また
子項目に子項目を対象としたclassを適用させなければ
子項目の位置は親項目で定義したclassの値が継承され適用されます。

●画像表示位置についての注意点と
●階層構造の箇条書きについては

前頁の記事で確認していますので、チェックしておきましょう。


marginとpaddingはブログで画像や文章
あるいは段落、テーブルの作成などで頻繁に使うプロパティで
結構、重宝します。

上手く使うことによって
箇条書きでも思い通りの位置に画像や項目を配置出来るプロパティです。

ブログのレイアウトをきっちりと纏めたり
アフィリエイト用の説明箇条書きを目立たせたい
など、使い方は数多くあります。

使い方をしっかり把握しましょう。

………

記事上段の参照ＣＳＳ
【画像をポイントにするためのclassの定義】には

画像の表示位置を決めるプロパティとして

background-position:
margin:
padding:

の３種類を使っています。

marginn　padding
で位置決めをしているのだから
background-position:
は定義する必要はないのでは

と思えますね。

marginは
画像だけに作用するのではなく「画像と項目を含めた範囲」
つまり「行」の位置決めになります。

例えば
margin:10px 0px 0px 0px;
のようにtopから10pxとして適用した時には「画像と項目を含む行」が
前の行の行送りに10pxを足した位置に移動します。

このブログの例は、行送りは18pxですので
margin:10px 0px 0px 0px;　は

18+10=28px
で、直前の行（上の行）から　28px　の　
位置が、画像と項目を表示する行の位置になります。

marginを上、あるいは下に適用する時には、それらのことを考えて
注意して使いましょう。


margin　padding　backgroundのプロパティを
重複して適用しているように見えますが

各々の役割があり、画像だけの「上下左右」の表示位置を決めるためには
background-position:プロパティが必要になります。

………

箇条書きの「項目」や「画像」の表示位置の調整は、
marginやpaddingの使い方を把握しておけば、比較的に簡単に出来ますので
レイアウトをしっかりと纏めたいときに応用して使い切りましょう。

シリーズでは
「箇条書きの基本（ＣＳＳの定義1）から(定義4)」の確認で
classへの定義とＨＴＭＬでの適用の例をいくつか挙げています。

使用例に伴う「class」を各確認の毎に作成して適用しました。

「class」を数多く作りましたので、ＣＳＳの記述が乱れています。

整理と纏めが必要です。

整理と纏めは「ＣＳＳ」のシリーズで確認します。

---

▲ＨＴＭＬの関連記事
　　　 ブログで使うＨＴＭＬ-目次ｰ
　　　 http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★　　　
　　　　　　
　　　　
……人気ﾌﾞﾛｸﾞﾗﾝｷﾝｸﾞ……

---

画像・アイコンマーカーの表示位置の調整。

箇条書きはデフォルト（初期）値では自動的に
「●　○　■」のリストマーカーが項目の前に表示されます。

デフォルトでのリストマーカーが表示される位置
つまり場所は決まっていますね。

ＣＳＳにclassやid属性を定義して、
使用するリストマーカーの「●」や「○」を、自作した画像やアイコンに変更した場合でも、表示される位置は変わりませんね。


具体的に
●デフォルトで表示されるリストマーカーの位置。
●リストマーカーと項目とはどのような関係にあるか。

確認してみましょう。

�@リストマーカーと項目のデフォルト値での表示。

互いの位置関係を、視覚的に捉えられるように
項目の背景（background）に色を付けて、領域の範囲を調べて見ます。



ページや文章、あるいは文字の背景に画像を使用したり、色を付けるには
background-colorプロパティを使います。
　　
ＣＳＳとＨＴＭＬの関係は過去記事で度々確認しています。

　　　background-colorはＣＳＳプロパティです。
　
　　　例文のように、ＨＴＭＬの構文にＣＳＳプロパティとＨＴＭＬの
　　　タグが混在することは構造的には間違った使い方と言えます。

　　　混在して使用しても表示上はエラーにはなりませんが、
　　　ＨＴＭＬとＣＳＳの概念からしても、両者の意義は異なりますので
　　　意識して使い分け、両方の構造体系とその立場を把握していくように
　　　しましょう。

　　　この章ではＨＴＭＬを確認しつつ、ＣＳＳの流れを掴むために
　　　タグとプロパティの使い分けをしていません。

　　　ＨＴＭＬとＣＳＳの関係を確認する段階で
　　　互いの住み分けをして行きます。
　　　　　　　　　

項目の背景に「薄い紅色」が付きましたね。
その色の付いた範囲が「項目」の領域です。

箇条書きのデフォルト値での
リストマーカーの位置は項目の領域の外側になります。

リストマーカーの表示位置を定義するには
list-style-position:プロパティを使います。

list-style-position:は

の値を取ります。

外側への表示はデフォルト値が「outside」になっていますので、
ＣＳＳに新たに定義する必要はありません。

上記の例【表示�@】のような表示からみても
「リストマーカー」と「項目」は別々に存在することが分かりますね。

別々の存在であることで、リストマーカーの形状を変更したり、
数字や英文字、画像やアイコンに差し替えて表示することが出来ると言えます。


�A リストマーカーを「項目と同じ領域内」に表示。

項目と同じ領域内に表示するプロパティの値は「inside」ですね。


表示例�@と�Aの違いはハッキリしていますね。

�@ではマーカーの位置は「項目の外側」
�Aは「項目と同じ領域内」になっています。

デフォルト(outside)とinsideの両方を並べて
表示パターンを確認してみます。


上段の「outside」では、マーカーの位置が項目の外側
「inside」では項目と同じ領域内に表示されています。

「outside」と「inside」では
項目を表示する領域の範囲は変わらずに、同じ範囲を取っていますが
リストマーカーの位置は移動しています。

過去記事の「箇条書きの基本」でも確認しましたが
項目の表示位置を動かすとリストマーカーの位置も動きますね。



■　画像リストマーカーの表示位置。

リストマーカーを画像やアイコンに差し替えて表示した時
項目の文字のベースラインより、画像やアイコンのベースラインが
少し中央寄りに表示される現象が見られます。

とくに、プラウザのＩＥ（Internet Explorer）を使用している方は
その微妙なズレを経験していると思います。

【画像�@】＝プラウザのＩＥでの見え方

項目の文字のベースラインの位置より、アイコンで表示した
リストマーカーのラインは少し上付きになって揃っていませんね。

　　※Firefoxではラインが揃って表示されます。

使用している「三角形」「ひし形」のアイコンは
ズレを計算して文字より小さいサイズで作りあげています。

それでもアイコンの上部は文字のトップラインより上に出ています。

この様な表示上のほんの僅かなズレは

ウェブデザインを本格的に学んでいる訳でもないので、
それほど気にする問題でもないことですが、なかには

　●どのプラウザでも決まった位置に表示にしたい。
　●マーカーと項目のベースラインをしっかりと揃えたい。
　●ブログのデザインを綺麗に仕上げたい。

と言う考えも有ります。

プロパティの
list-style-position:は
リストマーカーを表示する位置を「外側にする」「内側にする」
の値を指定するだけです。

左右への位置の移動は出来ますが、上下には無理があります。

---

箇条書きで、リストマーカーとして画像やアイコンを表示する
と言うことは

その位置に、画像やアイコンなどのアイテムを
「箇条書きの一部」として表示するという意味ですね。

「箇条書きの一部」としてのリストマーカーだから制約があります。

思いどおりの場所に、自由に表示するには
マーカーを「箇条書きの一部」として捉えるのではなく

「項目の前に表示する画像やアイコン」
つまりポイントとして

「項目とは別の表示」にしたらいいと言うことになりますね。



リストマーカーの表示をしないで
保存してある独自の「画像やアイコン」を、その位置に呼び出して表示したら

見た目は
箇条書きのリストマーカーを表示したのと同じ形になりますね。

独立した画像の表示ですので
上下左右の位置調整は比較的簡単に出来ます。


ＨＴＭＬやＣＳＳは
捉え方を変えたり、組み合わせをしていけばいろいろな形での応用ができます。

ソフトのプログラミングでも、大方は応用が主となっています。


■　項目の頭にリストマーカーの代わりに、
　　ポイントとして「独自の画像やアイコン」を思い通りの位置に表示する。

使用するＣＳＳプロパティは


上記のＩＥでは、リストマーカの位置がズレていましたね。

リストマーカーの代わりにポイントとして用いる画像を
表示するＣＳＳを確認してみましょう。


セレクタの仮のclass名を「samp9 ul」とします。

【画像をポイントにするためのclassの定義】

同時に箇条書きにする第二階層の子項目の定義
class名は「samp10 ul」とします。


画像例の
ＩＥでの見え方のリストマーカーの表示ズレを修正するため

【class定義�@：親項目】【class定義�A：子項目】

でclass定義をしてリストマーカーの代わりに
画像を使用したのが、下記の表示例です。


親項目の「那覇市」、子項目の「人口」の前に表示されている「三角」「ひし型」のアイコンが、ポイントとして使用したマークで、仮想のリストマーカーになります。

見た目は、リストマーカーそのものですね。

親項目の表示領域に薄紅色、子項目には薄青色を付けてみると
薄紅色の親項目の領域は、子項目の領域にまたがって色が乗っています。

子項目は
親項目の「那覇市」の領域に内包されていることが分かりますね。

箇条書き構造は
その下の層（孫項目）次の層を組み立てても親の領域内ということです。

このことは重要な要素の一つで、プロパティとして定義する
background-position:left center;
の値を「center」と定義した時

その位置は
親と子、あるいは孫も含めた親の領域内の上下の中央(center)
と言う意味になりますので
「▲」画像のベースラインは、子や孫まで含めた広い親の領域の中央に来ます。

「center」指定では、リストマーカーの代わりとしては
歪な位置へ表示されますね。

親、子、孫のような階層構造では
画像を置く位置に気を付ける必要があります。


表示例では画像位置の値を「％」にして
background-position:left 15%;
の形式で親項目のトップラインから、15%下げた位置に指定しています。

　※「％」は領域の広さに対する相対値です。
　　この例では、領域は子項目の範囲まで入ります。

　　絶対値の「px」を使って細かい指示をしてもいいでしょう。

親項目、子項目で成り立っている
階層構造における適用例を示しましたが

親だけの項目(ここでは那覇市の項目)
の単独での箇条書きでは、項目領域は親だけの範囲になりますので、

画像位置の値を「無指定」にするか、または値を
background-position:left center;
の形式で領域の中央に指定します。


アイコンが上下の中央に位置していますね。

アイコンが文字より大きい、あるいは極端に小さいサイズを使用している時には上下位置を計算して表示します。

このように
単独の項目と多層の時の「値」の使い方には気を付けましょう。

backgroundには
image の他に
color　 position　 repeat　 attachment(スクロール指定)
の値があります。

ある領域内
たとえばブログの記事領域、テーブルのセルの中、ページを分けるフレームなどに画像を表示する時、 paddingやmarginn と共に頻繁に使用されます。

アフィリエイトなどで、商品画像を貼り込む位置を決めるなど
便利なプロパティです。


---
リストマーカーの代わりに
独自の画像をポイントとして使用するために
ＣＳＳのclassを定義し、表示方法と位置の指定を確認しました。


次回は
今回の「箇条書きでの画像使用」の補遺で
「marginとpadding」を確認します。

---

▲ＨＴＭＬの関連記事
　　　 ブログで使うＨＴＭＬ-目次ｰ
　　　 http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★　　　
　　　　　　
　　　　
……人気ﾌﾞﾛｸﾞﾗﾝｷﾝｸﾞ……

---

>　

ＣＳＳで箇条書きのリストマーカーを画像(アイコン)に変更。

ブログや文章を書くときの［箇条書き］のメリットは

●要点が一目でわかる。
●文章を要約して相手に伝えることができる。
●内容を重要度順に表示できる。

などが上げられますね。

このように

箇条書きは
記事の内容を整理することや伝えたい内容を明確にすること
において有効な手法です。

前回の「箇条書きの基本(ＣＳＳの定義1)」では
●使用するリストマーカーの変更
●多層構造の箇条書きのＨＴＭＬタグ
●各層へのＣＳＳのセレクタの適用
を確認しました。


参照してＣＳＳの「class」や「id」定義
ＨＴＭＬでＣＳＳを適用する方法を覚えましょう。

箇条書きを再度確認します。

【デフォルトでの階層の構造とリストマーカーの表示】


デフォルトでの階層のリストマーカーは上記の表示例のように
第一層は黒丸（●）第二層では白丸（○）が自動的に表示されますね。

前回はＣＳＳに
第一層、第二層にそれぞれプロパティの値の異なったclassを
「samp ul｣「samp2 ul」として定義をして適用した例を確認しました。

classを適用して表示したのが下記の例ですね。


デフォルトと異なっている点は

親の項目のリストマーカーが「■」文字色は青、大きさは少し大きい13px。
子は「○」の替わりに「●」文字は一回り小さい11pxで色は「薄茶」に替わっています。

おもに記事や日記類を中心に展開している一般的なブログでは
箇条書きのリストマーカーはデフォルトで表示される「　●　○　■　」の範囲で十分に対応できますが、

アフィリエイトのためのブログでは

　● 力を入れている商品の項目を他の商品より目立たせたい。
　● 訪問した方に注意を喚起し目を止めさせ、クリック率を高めたい。
　● 独自のリストマーカーを使うことで項目を見やすくして、ビジュアル的に
　　も親しみのもてるブログにしたい。

などの視点からみても
箇条書きのリストマーカーを自分なりに修正したり、アイコンに置き換えたり
することはブログ構成上の重要な要素のひとつだと言えます。

ブログには
人それぞれのいろいろな思い入れや、その人なりのページ構成の考え方
があります。

その思いや考えを反映したブログを構築することが、理想的なページ
表現となり、集客率の高いブログに仕上がっていくと思っています。



■独自のアイコンを使用するため「class」を定義。


リストマーカーに画像やアイコンを使用。

箇条書きの項目のリストマーカーに、
画像やアイコンを指定するＣＳＳセレクタの「プロパティ」と「値」は
list-style-image:url（url）;
ですね。

例題に使用するclass名を「.samp3 ul」としておきます。



　　 注）　　
　　list-style-image:url(url);
　　の赤文字で表示してあるurlは、ブログサービスでアイコンを保存してい
　　る場所のアドレスになりますね。

　　このブログでの、アイコン「 」を保存した場所(アドレス)は

　　list-style-image:url (ｈttp://tosiji-
　　dreamafi.up.seesaa.net/image/画像ファイル名);

　　のurlとなります。

　　各自が利用しているブログサービスの画像の保存や利用方法、
　　保存場所を確認してから記入しましょう
　　

追加したclass「.samp3 ul」をＣＳＳに保存して適用します。

class を適用するためのＨＴＭＬは

＜div class="samp3 ul"＞
　＜ul＞＜li＞〜＜/ul＞
＜/div＞

の形式ですね。


ＣＳＳのclass「.samp3 ul」が適用され、
リストマーカーとして独自のアイコン（シアン色の三画形）が表示されました。


■ 親項目にプロパティを適用したとき、子項目の状態を確認してみましょう。　

親項目に適用したＣＳＳプロパティは、子項目に別のclassの適用がなければ、そのまま親項目のclassが適用され、文字の大きさや色、リストマーカーの形状も同じ「値」を取ります。

下記がその表示例です。


子項目にも親項目のclassが適用され
同じリストマーカー、文字、文字色で表示されますね。

この例から、親と子の関係は、
＜div class="samp3 ul"＞　〜　＜/div＞の適用範囲内にあることが分かりますね。

逆に項目にリストマーカーやアイコンを表示したくないときは、
classのプロパティとその値を

list-style-type:none;
list-style-image:none;

の形式にします。

リストマーカーの表示されない項目になります。


■子項目のリストマーカーを親とは異なるアイコンで表示する。

親と異なる画像を表示するには
ＣＳＳに新しいclassと使用する画像(アイコン)が必要ですね。


ＣＳＳの子項目用のセレクタ「class」を作成します。
class名を「samp4 ul]とします。


保存して適用ですね。

ＣＳＳのclass
「samp3 ul」と「samp4 ul」を同時に記事に適用してみましょう。



子項目のリストマーカー「」は、新しく作成して、ブログにアップロードしています。

過去記事でも確認したように、画像はある程度大きく作成して、小さく表示するのが望ましい使い方です。

第一層の親に「　　　」第二層の子には「　　」
異なる独自のアイコンをリストマーカーとして表示できました。

画像やアイコンを使用するとき

�@画像やアイコンを作成する。
�A利用しているブログサービスにアップロード、保存をする。
�BＣＳＳにclassを定義する。
�CＨＴＭＬ構文にclassを適用するタグを書き込み、画像やアイコンを
　呼び出す。
�D表示

の流れになります。

何度か使っているうちに
ＨＴＭＬとＣＳＳの関係が理解できるようになります。


次回は

●リストマーカーの表示位置の調整。
●リストマーカーの代わりに画像やアイコンを使う。

を確認してみます。

---

▲ＨＴＭＬの関連記事
　　　 ブログで使うＨＴＭＬ-目次ｰ
　　　 http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★　　　
　　　　　　
　　　　
……人気ﾌﾞﾛｸﾞﾗﾝｷﾝｸﾞ……

---