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

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

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

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

はい!これがそれ!

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

横2列にぶち込んでみた

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

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


カスタマイズについては

  1. カスタマイズするための準備
  2. カスタマイズに必要なCSSコード
  3. まとめ

の順に説明していきます。

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

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらの記事に目を通してもらえると嬉しいです( ˶ˆ꒳ˆ˵ )

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

カスタマイズの準備

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

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

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

セリフボックス(左)

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

セリフボックス(右)

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

こちらを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よりも大きければ、どんなサイズでもいいですが、正方形の画像にしてください

3つのCSSコード追加方法

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

テーマをカスタマイズする際には3つの方法があります。

はじめてカスタマイズする方におすすめなのが追加CSSです。

初心者におすすめのカスタマイズ方法

追加CSSを使ったカスタマイズ方法については、こちらの記事で詳しく解説しています。

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

CSSコードの追加 for クラシックエディタ

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

コメントあり

コメントなし

MENくん
CSSめっちゃすっきりーーー!ボックスや枠線の色も変更しやすいように書いておきました

ちゃんと反映されているか確認

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

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

キャッシュを削除

コントロールキー(Ctrl)」と「F5」をキャッシュを削除したいページで同時に押します。スマホの場合はAndroidとiPhoneでやり方が違います。詳しくはこちらのページで見てください。

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

カスタマイズをもっとやりたい方

こんなカスタマイズじゃ満足できない!!そんな方に是非見て欲しい記事がこちらです。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~
MENくん

現在は50を超えるカスタマイズが紹介されており、病的なページになります。

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

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

くまさんからのお願い

ぼくのカスタマイズコードをそのまま(またはほとんど)コピーしてそれをブログで記事にされるのは、あまり嬉しくないです‪( ˙꒳​˙ᐢ )No!

MENくん

あれ!?この記事、、、ぼくが書いたコードかなりコピペして紹介してる!

くま3号

ちょっとこれは、、、複雑な気持ちやな

ぼくはカスタマイズコードを1から書いています。

一部、参考にしたカスタマイズ記事があれば必ずリンクを貼るようにしています。

そこんところをちょっと考慮してもらえると嬉しいです( ˶ˆ꒳ˆ˵ )

コメント( ˶ˆ꒳ˆ˵ )

avatar