discord風に表示するCSS【ブログデザイン】
こんばんわ！くりぷです！
twitter(@CRYPTANNEWS)では動画とお天気お姉さんとトレードとクソツイとクソツイとクソツイと…って感じでやってますが、
実は、本業ではwebページ作ったりしています（たまに）。
（他にも楽天で服売ったり、イベントのオリジナルTシャツつくったり、看板作ったりメニューデザイン作ったり、デザイン系全般でなんやかんやしてます。）
オフ会Tシャツなど作りたい方がいたらお気軽に声かけてください！
（突然の宣伝）
今日は、最近作ったこれ↑このdiscord風に表示するCSS↑をシェアしようと思ってブログ書きました↑
吹き出しで囲ってLINEで会話してるみたいに〜のdiscord版ってこと？
そそ
LINE風のdiscord風！みたいな！やつ！
LINEってほぼほぼみんな知ってるしみんな使ってるじゃん？
うん
discord使ってる人、界隈以外で見たことある？
ない（即答）
discord風で表示させたい人、おる？
………
おる？
………
……………うん！
そ、それでは紹介していきます！
discord風に表示するCSS[コード]
.★好きなクラス名★:before{
content: "★表示させたいユーザー名★";
font-size:100%;
color:#ff69b4;
font-size:100%;
padding-left:50px;
margin-left:50px;
padding-top:8px;
display:block;
margin: -3px 20px 0 10px;
background: url("★表示させたいアイコン画像のURL★") no-repeat;
background-size: contain;
vertical-align: middle;
}
.★↑上と同じクラス名★ p{
margin-left:60px;
}
じゃん！
★黒い星の中★を自由に変え、追加CSSにコピペしてください。
一度設定すれば、あとははてな記法でクラスを指定して書くだけです。
<div class="cripu”><p>ここにコメントを書くぞい</p></div>
↑これが↓こう
ここにコメントを書くぞい
わぁ〜めっちゃ簡単〜〜
wordpressを使ってる方
はてなブログで書いといてアレですが、wordpressを使ってる方もいますね？
はぁい！✧ヾ(❀╹◡╹)ﾉﾞはいはい！☆｡ヾ(*'∀`*)ﾉ♡*はい！(／≧∇)／＼(∇≦＼)／♪ﾟ+｡:.♡はい！✧.ﾟ٩(๑>◡<๑)۶:.｡♡はい！((ヾ(๑ゝω･)ﾉ♡はああああいっ！(๑´ڡ`๑)
(かわいい)(美少女のやつ)
wordpressで便利な、上記のCSSをショートコード化する方法も紹介します。
wordpress＞テーマの編集＞テーマのための関数(functions.php)
に進んでください。
一番下にある
?>
の前に
function point_★cssで指定したクラス名★( $atts, $content = null ) {
return '<div class="★cssで指定したクラス名★"><p>' . $content . '</p></div>';
}
add_shortcode('★cssで指定したクラス名★', 'point_★cssで指定したクラス名★');
これをコピペしてください。
すると！なんと！
[aichan]ショートコードに変身！[/aichan]
↑これが↓こう
ショートコードに変身！
わぁ〜〜〜〜もっと便利〜〜〜〜〜
おわり
久しぶりにはてなブログで書きましたが、楽しい！！！！
いいですね、はてな。うん。
そしてそして、このブログテーマ、めちゃくちゃ良くないですか？
グラデーションマニアなのでこの色も最高なんですが、
ぶんぶんぷんぶん！！！
ってあちこち動くのがお気に入りです。
せやなありがと〜〜〜〜！
こんだけぶんぶん動くと押したくなるかな〜、って思いきや、
全然そんなことはない。
むしろ逆に押したくないまである。ずっと見てたい。
それがいいンゴねぇ。
最後まで読んでくれてありがとうございます！
これからははてなもゆるく更新するぞい٩( ᐛ )و
足の更新に合わせてインジを分析する【長期足分析】や、各時間足でのインジ価格を一覧にして反発しやすいゾーンを可視化する【インジ価格一覧】などをdiscordチャンネルで流してます！
— くりぷ (@CRYPTANNEWS) November 1, 2018
自分の裁量用に作ったものですが無料開放してるのでよければどうぞ😊https://t.co/DiOi8Ue5CK
平日は毎朝投資ブログ更新してます（真面目なやつ！）
よかったら見てね〜〜
www.cryptannews.com
