【Blogger用】目次と会話の吹き出しを作ろう

2022/06/29

ブログのカスタマイズ

t f B! P L
Blogger用

目次を作る


を参考にHTMLを編集しました。
</head>の直前に記載しています。
設定すれば自動で目次を作ってくれるのでおすすめ

問題は<h3>の目次生成がバグってるのか上手く機能しません。
追記でH3増やすと表示されない場合が多々あります。どうしたら良いんだろう・・・
記事を一から書き直すと表示されるので何かのタグが邪魔してるんだろうけど、原因が分かりません。

吹き出し会話を作る

Bloggerで使える「吹き出し」で会話形式の記事を書く方法

Bloggerで使える「吹き出し」で会話形式の記事を書く方法

Bloggerでも使える「吹き出し」を使って会話形式の記事が書けるCSSの導入方法を紹介。コピペでOK。 吹き出しを使って説明している記事は良く見かけていたんですが、あれってはてなブログとかWordPressとかの固有の機能だと思っていました。 楽しそうで良いなぁと羨ましく思っていたんですが、CSSをコピペするだけでBloggerでも簡単に使えることがわかりましたので、ここにメモしておきます。 味気ないブログも一気に華やかになります。記事がよりわかりやすくなりますね。使ってみるととても楽しいです。ぜひ活用してみてください。

を参考にHTMLとCSS編集しました。
</b:skin>の直前に記載しています。
会話を出すにはHTMLを書くしか無くて少し面倒です。
Bloggerの悪いところです。私はコピーしやすいように記事にまとめています。

QooQテーマで読みづらいのを修正

QooQではアイコンと吹き出しが遠くて、会話が読みづらくなっていました。
特にスマホから見るとかなり読みづらい。
こんな感じ。吹き出しが狭くて読みづらいです。
これを直します。

こんな感じに

CSSを編集

 .talk-left{を探して青字を追加します。
float:right;
 position: relative;
 background: #fff;
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-right:15px;    /*アイコンの余白*/
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa;
 margin-bottom: 10px;
 }

 .talk-right{を探して青字を追加します
 .talk-right{
 float:left;
 position: relative;
 background: #fff;
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-left:15px;    /*アイコンの余白*/
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa;
 margin-bottom:10px;
 }

これでアイコンと吹き出しの余白が減って画面を広く使えます。

次にスマホ表示の設定をいじります。
 /*****レスポンシブ設定*****/を探して数値を青字に変更します。
デフォルトは65%です。
 /*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
省略
 .talk-left{
 width: 70%;
 }
省略
 .talk-right{
 width: 70%;
 }
 @media screen and (max-width: 380px){
省略
 .talk-left{
 width: 70%;
 }
省略
  .talk-right{
 width: 70%;
 }

これで終わりです。

下記はテストになります。

会話形式

1ここに左の会話を書く

2ここに左の会話を書く

3ここに左の会話を書く

4ここに左の会話を書く

5ここに左の会話を書く

6ここに左の会話を書く

1ここに右の会話を書く

2ここに右の会話を書く

3ここに右の会話を書く

4ここに右の会話を書く

5ここに右の会話を書く

メモ
940x940 25%
中心点口

りなりあ

L1


L2


L3



L4




L5



てぃも


T1



T2



T3



T4



T5


T6








(C) ARMOR PROJECT/BIRD STUDIO/SQUARE ENIX All Rights Reserved.

QooQ