SANGOのさりげないセリフボックス|上バージョン

このページのカスタマイズをする前に、必ずこちらの記事を読んでください。

SANGOのさりげないセリフボックス|下バージョンSANGOのさりげないセリフボックス|下バージョン

コードを少し追加するだけで、色々とアレンジすることができます。

たとえば上に

吹き出しボックスよりもさり気ない感じのセリフボックスです。文字が多く書けるのでいい感じかもしれませんね(笑)
吹き出しボックスよりもさり気ない感じのセリフボックスです。文字が多く書けるのでいい感じかもしれませんね(笑)

位置も思うがまま

吹き出しボックスよりもさり気ない感じのセリフボックスです。文字が多く書けるのでいい感じかもしれませんね(笑)

そして真ん中にもできちゃう

吹き出しボックスよりもさり気ない感じのセリフボックスです。文字が多く書けるのでいい感じかもしれませんね(笑)

めっちゃ簡単に変更できます。

カスタマイズは自己責任でやろう

自己責任の意味がわからない方初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズの準備

HTML(投稿画面)

/* 左上 */
★TEXT★

/* 右上 */

★TEXT★

/* 真ん中上 */

★TEXT★

3つ全部のコードを書きました。

使うやつをコピってください。

よくわからないよって方は前の記事をもう一度読んでくださいね♪

SANGOのさりげないセリフボックス|下バージョンSANGOのさりげないセリフボックス|下バージョン

詳しく説明しています。

おすすめは追加CSSからコードを追加する方法です。

はじめてカスタマイズする方は、こちらの記事を読んでくださいね。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

追加方法 難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

この画像には alt 属性が指定されておらず、ファイル名は kopinosikata.png です

コメントあり

/*--------------------------------------
  ★
--------------------------------------*/
.
}

コメントなし

/*--------------------------------------
  セリフボックス 追加
--------------------------------------*/
.sbox-top:after {
    top: -25px;
}
.sbox-center:after {
    left: calc(50% - 25px);
}

前の記事のコードにこれを追加してください。

これだけで、上に持っていったり真ん中に持っていくことができます。

/*--------------------------------------
  セリフボックス
--------------------------------------*/
.sbox {
    margin: 2em 0;
    border-radius: 20px;
    position: relative;
    padding: 25px 1em;
}
.sbox:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: contain;
    border: 1px solid;
}
.sbox-btm:after {
    bottom: -25px;
}
.sbox-right:after {
    transform: rotate(10deg);
    right: -10px;
}
.sbox-left:after {
    transform: rotate(-10deg);
    left: -10px;
}
.sbox-img1:after {
    background-image: url(★画像URL★);
}
.sbox-img2:after {
    background-image: url(★画像URL★);
}
.sbox-bc1 {
    background: #f4f4f4;
}
.sbox-bc2 {
    background: #fff5e7;
}
.sbox-bdc1:after {
    border-color: #f4f4f4;
}
.sbox-bdc2:after {
    border-color: #c19763;
}

確認する際は必ずキャッシュを削除してから見てください

確認方法
「Ctrl」+「F5」(キャッシュ削除)

カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

カスタマイズはキャッシュ削除をマスターしてからです

まとめ・感想・雑談・こだわり

MENくん
今回の追加コードが少ないのは、CSSの書き方を変更したからだよ
くま3号
見ればわかる
MENくん
ショートコード部分をちょこっと変更するだけで、アイコンや色、位置なんかも変更できるんだ!
くま3号
見ればわかる

コメントを残す

メールアドレスが公開されることはありません。