Warning: Undefined variable $post in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

Warning: Attempt to read property "ID" on null in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

Warning: Undefined array key 2 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 15

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 2 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 27

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

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


Warning: Undefined array key 2 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 15

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 2 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 27

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

ちょっと今回のコードの書き方はいつもと違います‪( ˙꒳​˙ᐢ )

ぼくなりのメンテナンスしやすいコードの書き方に変更しています。

ではさりげないセリフボックスを紹介しますね。

はい!これがそれ!

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

横2列にぶち込んでみた

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

なにこれ、めちゃかわいいですね( ˙꒳​˙ )ww

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

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

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

カスタマイズの準備

HTML(投稿画面)に記入するコード

投稿画面ではオリジナルのショートコードを使います。

CSSをメンテナンスしやすくした分、ショートコードが長めになってしまいました。

セリフボックス(左)

吹き出しボックスよりもさり気ない感じのセリフボックスです。
  
★TEXT★

セリフボックス(右)

吹き出しボックスよりもさり気ない感じのセリフボックスです。
  
★TEXT★

こちらをAddquicktag(プラグイン)に入れておけば簡単に挿入できますね。

MEMO
今回はクラス名をたくさん付けているので、ショートコードが長くなっています。

なんでクラス名をたくさんつけたの?

MENくん
セリフボックスはあとから柔軟に変更できるようにこんな書き方にしました。
くま3号
今回は最初やし、ちょっと詳しく説明するわ

クラス名一覧

sboxセリフボックス共通の設定。
ボックスの形や外・内側の余白を設定しています。
sbox-btmbtmはbottomの短縮です。アイコンが下にくるように設定。次回にsbox-topを使うので、わざわざ設定しておきました。
sbox-leftアイコンが左側にくる設定。
sbox-rightアイコンが右側にくる設定。
sbox-bc◯ボックスの背景色です。bcはbackdround-colorの短縮です。
「◯」の部分は数値を入れて簡単に切り替えれるようにしておくと便利です。
sbox-bdc◯アイコンの枠線の色です。bdcはborder-colorの短縮です。
sbox-img◯アイコンの設定です。

これはすべてぼくがオリジナルで考えた設定です。

カスタマイズをアレンジする人は適当に変更してあげてくださいね。

使用する画像(アイコン)について

50px×50pxよりも大きければ、どんなサイズでもいいですが、正方形の画像にしてください

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

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

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方
追加方法 難しさ
追加CSS
テーマエディター
FTPソフト

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

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

コメントあり

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

コメントなし

/*--------------------------------------
  セリフボックス
--------------------------------------*/
.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;
}
MENくん
CSSめっちゃすっきりーーー!ボックスや枠線の色も変更しやすいように書いておきました

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

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

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

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

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

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

MENくん
はじめてこんなCSSの書き方したよ
くま3号
これめっちゃ大変な書き方やろ?
MENくん
んだ、んだ、一回クラス名バラバラでコードを書いで、そっから共通部分を見つけっとからたいへんやった
くま3号
そか…..

Warning: Undefined array key 2 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 15

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 2 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 27

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33