会話形式の導入と見出しのカスタマイズ

スポンサーリンク

スポンサーリンク

スポンサーリンク

ちょっと!!私のブログの記事どういうことなのよ!?

charlottehibi.hatenadiary.jp

 

どういうことってどういうことなの?

 

f:id:UrushiUshiru:20180416232436j:plain

とぼけないでよ!吹き出しの会話形式が無いから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の取得

f:id:UrushiUshiru:20180417185220j:plain

はてなフォトライフの画像を使用する場合は、使用したい画像のページに移動して、画像の上で「右クリック」⇒「画像のアドレスをコピー」とすると画像のURLが取得できるので、「.クラス名~」の部分の「画像のURL」の所に貼り付けます。

 

コードの貼り付け

f:id:UrushiUshiru:20180416005536j:plain

PC版の場合は、はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に会話形式のCSSコードを貼り付けます。

 

 

<style type="text/css">

会話形式CSS

</style>

スマホ版の場合は、上記のように会話形式CSSを「<style type="text/css">~</style>」で囲ってください。

※レスポンシブデザインを適用してる場合は不要です。

 

f:id:UrushiUshiru:20180416171142j:plain

はてなブログの管理画面にアクセスして「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に「<style type="text/css">~</style>」で囲った会話形式CSSを貼り付けます。

 

会話をさせてみる

 

f:id:UrushiUshiru:20180417000257j:plain

シャルの表情

 

 

<p class="r-fuki sin-oko">ちょっとそこのクソメガネ!!しっかりしなさいよ!!</p>

ちょっとそこのクソメガネ!!しっかりしなさいよ!!

 

<p class="l-fuki sin-sune">むー!な、なによ!もうあんたなんか知らない!!</p>

むー!な、なによ!もうあんたなんか知らない!!

 

 

 

 

f:id:UrushiUshiru:20180416235536j:plain

ユキの表情
<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行目・・・見出しの飛び出した部分の色

#〇〇〇〇〇〇の部分(カラーコード)で色の変更が出来ます。 

 

f:id:UrushiUshiru:20180417190429j:plain

具体的には上の画像の内訳になってます。

 

f:id:UrushiUshiru:20180417190456j:plain

 2行目と9行目の「h3」という数字が見出しの大きさに対応しています。

以下のように数値を変更すればそれぞれの大きさの見出しの設定になります。

  • h3・・・大見出し
  • h4・・・中見出し
  • h5・・・小見出し

 

コードの貼り付け

f:id:UrushiUshiru:20180416005536j:plain

PC版の場合は、はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

「③変更を保存」をクリックして設定を保存します。

 

<style type="text/css">

見出しのCSS

</style>

スマホ版の場合は、上記のように見出しのCSSコードを「<style type="text/css">~</style>」で囲ってください。

 

f:id:UrushiUshiru:20180416171142j:plain

はてなブログの管理画面にアクセスして「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に「<style type="text/css">~</style>」で囲った見出しのCSSコードを貼り付けます。

 「③変更を保存」をクリックして設定を保存します。

※レスポンシブデザインを適用してる場合は不要です。

 

f:id:UrushiUshiru:20180417190626j:plain

これで見出しの設定は完了です!

 

まとめ

 会話形式の設定はこんな感じで設定してます。

導入自体はコピペだけなので簡単ですが、会話形式用のイラストを描くのが一番時間かかるのではないでしょうか?1人1週間近くかかったよ・・・。

え?自分でなんて描かないって?

 

f:id:UrushiUshiru:20180417191644j:plain

アンタのために、会話形式を導入して情緒不安定な感じの記事を訂正してさしあげたわよ!

 

べ、別に感謝してくれたっていいのよ!

 

なんでそんなに偉そうなのよアンタ!!

 

最後まで読んでいただきありがとうございました!