ちょっと！！私のブログの記事どういうことなのよ！？
charlottehibi.hatenadiary.jp
どういうことってどういうことなの？
とぼけないでよ！吹き出しの会話形式が無いから1人3役で情緒不安定な記事書いてるみたいになっちゃってるじゃない！！
1人3役で情緒不安定な記事書いてるのは今に限ったことじゃないんですが・・・
あんたの頭がおかしいっていう事実について言ってるんじゃないの！
会話形式を導入しなさいって言ってるの！！
え～面倒くさいなあ・・・
会話形式無かった全く意味の分からないブログになるじゃない！！さっさと導入しろ！！
会話形式の導入
以下のサイトを参考に導入していきます。
www.notitle-weblog.com
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
参考サイトのCSSコードから「.クラス名～」の部分を変更します。
.sin-no::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323190307.jpg);}
.sin-sune::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323210816.jpg);}
.sin-sune2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323190129.jpg);}
.sin-oko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184420.jpg);}
.sin-gekioko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184854.jpg);}
.sin-ai::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184903.jpg);}
.sin-ai2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184407.jpg);}
.sin-koma::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184415.jpg);}
.sin-kuya::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184839.jpg);}
.sin-kuya2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184401.jpg);}
.sin-hazu::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184407.jpg);}
.sin-akire::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184859.jpg);}
.sin-akire2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184903.jpg);}
.sin-egao::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323184847.jpg);}
.yuki-no::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180415/20180415170452.jpg);}
.yuki-egao::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180415/20180415171224.jpg);}
.yuki-egao2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180415/20180415171219.jpg);}
.yuki-oko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180415/20180415170502.jpg);}
.yuki-gekioko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180415/20180415171237.jpg);}
.yuki-kamu::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180415/20180415170456.jpg);}
.yuki-yoro::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180415/20180415170443.jpg);}
.yuki-koma::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180415/20180415171229.jpg);}
.yuki-haji::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180415/20180415172517.jpg);}
.yuki-bk::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180415/20180415170447.jpg);}
具体的には上記のように変更してます。
クラス名は「キャラ ー表情」のような命名規則になってます。
1キャラにたくさんの表情パターンがありますからね、どのキャラにどの表情させるか分かりやすいようにこのような命名規則にしてます。
画像のURLの取得
はてなフォトライフの画像を使用する場合は、使用したい画像のページに移動して、画像の上で「右クリック」⇒「画像のアドレスをコピー」とすると画像のURLが取得できるので、「.クラス名～」の部分の「画像のURL」の所に貼り付けます。
コードの貼り付け
PC版の場合は、はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に会話形式のCSSコードを貼り付けます。
<style type="text/css">
会話形式CSS
</style>
スマホ版の場合は、上記のように会話形式CSSを「<style type="text/css">～</style>」で囲ってください。
※レスポンシブデザインを適用してる場合は不要です。
はてなブログの管理画面にアクセスして「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に「<style type="text/css">～</style>」で囲った会話形式CSSを貼り付けます。
会話をさせてみる
シャルの表情
<p class="r-fuki sin-oko">ちょっとそこのクソメガネ！！しっかりしなさいよ！！</p>
ちょっとそこのクソメガネ！！しっかりしなさいよ！！
<p class="l-fuki sin-sune">むー！な、なによ！もうあんたなんか知らない！！</p>
むー！な、なによ！もうあんたなんか知らない！！
ユキの表情
<p class="r-fuki yuki-oko">腹黒って誰に向かって言ってるんですか？漆さん？</p>
腹黒って誰に向かって言ってるんですか？漆さん？
<p class="l-fuki yuki-kamu">私を侮辱しといて精神崩壊だけで済むと思わない方がいいですよ？</p>
私を侮辱しといて精神崩壊だけで済むと思わない方がいいですよ？
ちなみに、怒りのクラス名の命名規則は以下のネタを参考にしております。
5年前の古いネタですが、これに勝る怒りの6段活用は無いでござるよ。
dic.pixiv.net
見出し
以下のサイトを参考にしてブログの見出しをカスタマイズします。
www.notitle-weblog.com
.entry-content h3 {
position: relative;
color: #332b00;
padding: 8px 12px;
background-color: #ffd700;
border-radius: 6px;
}
.entry-content h3::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #ffd700;
content: '';
}
上記は、参考サイトの「見出しタイプ6」のコードです。
以下のような設定になってます。
- 4行目・・・文字の色
- 6行目・・・見出しの色
- 18行目・・・見出しの飛び出した部分の色
※#〇〇〇〇〇〇の部分（カラーコード）で色の変更が出来ます。
具体的には上の画像の内訳になってます。
2行目と9行目の「h3」という数字が見出しの大きさに対応しています。
以下のように数値を変更すればそれぞれの大きさの見出しの設定になります。
- h3・・・大見出し
- h4・・・中見出し
- h5・・・小見出し
貼り付け
PC版の場合は、はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。
「③変更を保存」をクリックして設定を保存します。
<style type="text/css">
見出しのCSS
</style>
スマホ版の場合は、上記のように見出しのCSSコードを「<style type="text/css">～</style>」で囲ってください。
はてなブログの管理画面にアクセスして「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に「<style type="text/css">～</style>」で囲った見出しのCSSコードを貼り付けます。
「③変更を保存」をクリックして設定を保存します。
※レスポンシブデザインを適用してる場合は不要です。
これで見出しの設定は完了です！
まとめ
会話形式の設定はこんな感じで設定してます。
導入自体はコピペだけなので簡単ですが、会話形式用のイラストを描くのが一番時間かかるのではないでしょうか？1人1週間近くかかったよ・・・。
え？自分でなんて描かないって？
アンタのために、会話形式を導入して情緒不安定な感じの記事を訂正してさしあげたわよ！
べ、別に感謝してくれたっていいのよ！
なんでそんなに偉そうなのよアンタ！！
最後まで読んでいただきありがとうございました！
