Jimdo Journey

 <style type="text/css">
/*<![CDATA[*/
/* ショップ紹介のカード型と吹き出し */
.shop-info-box {
    background-color: #fff;
    border: 1px solid #eee;
    margin: 30px 0 5px 0;
    padding: 30px !important;
    position: relative;
}
.shop-info-box:before{
    background-color: #ef768d;
    border-radius: 5px;
    color: #fff;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f138  Shop info'; /* ここでテキスト変更 f138はfontawesomeのコード*/
    padding: 5px 20px !important;
    position: absolute;
    left: 30px;
    top: -15px;
}
.shop-info-box:after{
    border-top: 12px solid #ef768d;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    content: '';
    position: absolute;
    top: 15px;
    left: 45px;
}
.shop-info-box h2 {
    text-align: left !important;
    font-size: 24px !important;
}

/*]]>*/
</style>

カラムの前に下記を追加

<div class="custom-hook" data-class-name="shop-info-box" data-target-position="next">

</div>

<div class="custom-hook" data-class-name="shop-info-box" data-target-position="next">
</div> 

ciao left

係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。

係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。


<style type="text/css">
/*<![CDATA[*/
/* リード文のボックス */
.blue-text-box {
    background-color: #fff;
    border: 5px solid #eeeeee;
    margin: 10px 0;
    padding: 20px !important;
    position: relative;
    z-index: 0;
}
.blue-text-box:before {
    border-top: 5px solid #1ba9e1;
    border-left: 5px solid #1ba9e1;
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 20px;
    height: 20px;
    z-index: 1;
} /*]]>*/ </style>

カラムの前に下記を追加

<div class="custom-hook" data-class-name="blue-text-box" data-target-position="next">
</div>

係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。

シンプルにテキストのhtmlに記述してもなる

<div class="blue-text-box">
<p>係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。</p>
</div>

係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。

色を変えただけのバージョン カラムの前に下記を追加

<div class="custom-hook" data-class-name="blue-text-box" data-target-position="next">
</div> 

 <style type="text/css">
/*<![CDATA[*/
/* リード文のボックス */
.red-text-box {
    background-color: #fff;
    border: 5px solid #eeeeee;
    margin: 10px 0;
    padding: 20px !important;
    position: relative;
    z-index: 0;
}
.red-text-box:before {
    border-top: 5px solid #EF768D;
    border-left: 5px solid #EF768D;
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 20px;
    height: 20px;
    z-index: 1;
}
/*]]>*/
</style>

係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。

シンプルにテキストのhtmlに記述してもなる

<div class="red-text-box">
<p>係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。</p>
</div>

係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。