マルニのなかまたちを紹介♪
パッケージやホームページ内で泳いでることがあるから見つけてみてね!
![](http://maru2.co.jp/wp-content/uploads/2023/06/konoshirokun.png)
このしろくん
大浜漁港生まれ。マルニ育ち。
毎日元気に跳ね回るパワフル魚。
妹のこはだちゃんに頭が上がらない。
こはだちゃん
このしろくんの妹。
しっかり者でやさしい女の子。
川でのんびり泳いでる姿が人気。
![](https://maru2.co.jp/wp-content/uploads/2023/11/kohadachan_03.png)
◎このしろくん左位置・全体左寄せVer.
カラム(2カラム囲っているところ)に「speecharea」クラスを設定。
「モバイルでは縦に並べる」はOFFに。背景色は入れないこと。
セリフの段落ブロックに「right」クラスを設定する。
※注意
・画像サイズは200px固定。
・このしろくん後ろと吹き出しの背景色はCSSで決め打ちしているので、変更したい場合はstyle.cssを調整
![](http://maru2.co.jp/wp-content/uploads/2023/10/konoshirokun_left.png)
このしろくんをよろしくね!
みんなに魚のおいしさを知ってほしいな!
・・のようなセリフを入れられます
◎このしろくん左位置・全体右寄せVer.
カラム(2カラム囲っているところ)に「speecharea」クラスと「justify-end」クラスを設定。
「モバイルでは縦に並べる」はOFFに。背景色は入れないこと。
セリフの段落ブロックに「left」クラスを設定する。
※注意
・画像サイズは200px固定。
・このしろくん後ろと吹き出しの背景色はCSSで決め打ちしているので、変更したい場合はstyle.cssを調整
このしろくんをよろしくね!
みんなに魚のおいしさを知ってほしいな!
・・のようなセリフを入れられます
![](http://maru2.co.jp/wp-content/uploads/2023/10/konoshirokun_right.png)
◎吹き出しパターンの使い方
吹き出しパターンはデフォルト以外に1~4用意しています。
パターン1を使いたいときは、カラム(2カラム囲っているところ)に「speecharea」クラスとは別に「ptn1」を追加で設定してください。
書き方例:speecharea ptn1
パターン2~4は「ptn1」の1の部分を対応する数字に変更してください。
吹き出しパターン1
![](https://maru2.co.jp/wp-content/uploads/2023/10/kohadachan_202.jpg)
こはだちゃんをよろしくね!
みんなに魚のおいしさを知ってほしいな!
・・のようなセリフを入れられます
こはだちゃんをよろしくね!
みんなに魚のおいしさを知ってほしいな!
・・のようなセリフを入れられます
![](https://maru2.co.jp/wp-content/uploads/2023/10/kohadachan_202.jpg)
吹き出しパターン2
![](https://maru2.co.jp/wp-content/uploads/2023/10/kohadachan_202.jpg)
こはだちゃんをよろしくね!
みんなに魚のおいしさを知ってほしいな!
・・のようなセリフを入れられます
こはだちゃんをよろしくね!
みんなに魚のおいしさを知ってほしいな!
・・のようなセリフを入れられます
![](https://maru2.co.jp/wp-content/uploads/2023/10/kohadachan_202.jpg)
吹き出しパターン3
![](https://maru2.co.jp/wp-content/uploads/2023/10/kohadachan_202.jpg)
こはだちゃんをよろしくね!
みんなに魚のおいしさを知ってほしいな!
・・のようなセリフを入れられます
こはだちゃんをよろしくね!
みんなに魚のおいしさを知ってほしいな!
・・のようなセリフを入れられます
![](https://maru2.co.jp/wp-content/uploads/2023/10/kohadachan_202.jpg)
吹き出しパターン4
![](https://maru2.co.jp/wp-content/uploads/2023/10/kohadachan_202.jpg)
こはだちゃんをよろしくね!
みんなに魚のおいしさを知ってほしいな!
・・のようなセリフを入れられます
こはだちゃんをよろしくね!
みんなに魚のおいしさを知ってほしいな!
・・のようなセリフを入れられます
![](https://maru2.co.jp/wp-content/uploads/2023/10/kohadachan_202.jpg)
![](https://maru2.co.jp/wp-content/uploads/2023/10/kohadachan_202.jpg)
パターン4はピンク背景色も用意しています。
使う場合は「ptn4」クラスに追加で「bg-pink」を設定してください。
![](https://maru2.co.jp/wp-content/uploads/2023/10/kohadachan_202.jpg)
パターン4は空色背景色も用意しています。
使う場合は「ptn4」クラスに追加で「bg-skyblue」を設定してください。