※当サイトにはプロモーションが含まれています。
賢威には、吹出しを簡単に作ることができる「賢威キャラクター」のプラグインがあります。
しかし、ちょっと会話の行間スペースが少し気になります･･･。
今回は、そんな悩みを解決するCSSです。
ワードプレス環境とプラグインのバージョン
自分が使っているテーマとワードプレスの環境は以下の通りです。
テーマ：賢威８
WordPressバージョン：5.8.x
PHPバージョン：7.4.x
サーバー：さくらインターネット
※現在、WP：6.2.x、PHP：8.2.xでも動作しています
プラグイン「Keni Character Plugin」のバージョンは、0.5.1です。
賢威のキャラクター機能の会話の行間を狭くするCSS
賢威キャラクター機能の会話の行間を狭くするHTMLとCSSです。
HTML
<div class="chat-nospace">[ショートコードを記載します]</div>CSS
div.chat-nospace .chat_l,
div.chat-nospace .chat_r {
margin-bottom: 0 !important;
}
/* スマホ表示時 */
@media screen and (max-width: 600px) {
div.chat-nospace .chat_l,
div.chat-nospace .chat_r {
margin-bottom: 8px !important;
}
}このHTMLとCSSの使い方について説明します。
これは、会話の行間をなくしたい時に、テキストモードにして会話のショートコードを<div>タグで囲みます。
これが反映されると次のように表示されます。
にゃのらいと にゃテック、あなたはどうしてにゃテックにゃの？
にゃテック にゃのらいと、後悔しているのにゃ？
にゃのらいと 決して埋められなかった距離が縮まったにゃ！奇跡だにゃ！！
会話と会話の行間が縮まっているのがわかりますでしょうか？
なお、<div>タグで囲うのが面倒な場合、下記のように記載することもできますが１つ問題があります。
.chat_l,
.chat_r {
margin-bottom: 0 !important;
}
@media screen and (max-width: 600px) {
.chat_l,
.chat_r {
margin-bottom: 8px !important;
}
}それは、パソコンやタブレットで見た場合、記事内の文章と吹出しとの行間のスペースがなくなってしまうことです。
にゃのらいと 「本文の記事です。」が近すぎるにゃ
本文の記事です。本文の記事です。本文の記事です。本文の記事です。
上記を見ての通り、デフォルト設定では、この事を考慮してスペースをとる設定をしています。
その為、その意図を残して、会話間の行間を狭くしたい時のみ、HTMLコードを追加する方法を選びました。
どちらか、ご自身にあった方をご選択いただければと思います。
補足：ワードプレスの「追加CSS」の編集箇所について
現在のワードプレステーマにCSSを追加したい場合、左メニューにある、
外観 > カスタマイズ
を選択します。
追加したいCSSを記述します（コピペして貼り付けます）。
「公開」ボタンを押して保存すれば完了です。
※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。
なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。
その際は、強制リロード（ハードリフレッシュ）をしてみてください。
各ブラウザごとの、強制リロードの方法は次の通りです。
| Windows | Mac | |
|---|---|---|
| Google Chrome | 【Ctrl＋F5】 【Ctrl＋Shif＋R】 |
【Command＋Shift＋R】 |
| Microsoft Edge | 【Ctrl＋F5】 【Ctrl＋Shif＋R】 |
【Command＋Shift＋R】 |
| Mozilla Firefox | 【Ctrl＋F5】 【Ctrl＋Shif＋R】 |
【Command＋Shift＋R】 |
| Safari(Mac) | ‐ | 【Command＋Option＋R】 |
強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。
楽天市場の検索結果
1冊ですべて身につくWordPress入門講座 [ Mana ]
![1冊ですべて身につくWordPress入門講座 [ Mana ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/9405/9784815609405_1_4.jpg?_ex=128x128)
2,200円(税込)【送料込】
Mana SBクリエイティブイチサツデスベテミニツクワードプレスニュウモンコウザ マナ 発行年月：2022年03月24日 予約締切日：2022年01月26日 ページ数：344p サイズ：単行本 ISBN：9784815609405 Mana（MANA） 日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作
HTMLサイトをWordPressにする本 [ 久保田 涼子 ]
![HTMLサイトをWordPressにする本 [ 久保田 涼子 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/4214/9784802614214_1_4.jpg?_ex=128x128)
2,640円(税込)【送料込】
久保田 涼子 西原 礼奈 ソシムエイチティーエムエルサイトヲワードプレスニスルホン クボタ リョウコ ニシハラ アヤナ 発行年月：2023年08月29日 予約締切日：2023年06月06日 ページ数：360p サイズ：単行本 ISBN：9784802614214 久保田涼子（クボタリョウコ） 「ワクワクするモノ・時間・場所を生み出す」をテ
今すぐ使えるかんたん WordPress やさしい入門［6.x対応版］ [ 桑名
1,760円(税込)【送料込】
桑名 由美 はつみ 技術評論社イマスグツカエルカンタンワードプレスヤサシイニュウモンロクテンエックスタイオウバン クワナ ユミ ハツミ 発行年月：2023年09月28日 予約締切日：2023年06月02日 ページ数：256p サイズ：単行本 ISBN：9784297136253 桑名由美（クワナユミ） 2023年8月、合同会社ワイズベスト
たった1日で基本が身に付く！ WordPress 超入門 ［改訂2版］ [ 佐々
1,980円(税込)【送料込】
佐々木 恵 リブロワークス 技術評論社タッタイチニチデキホンガミニツクワードプレスチョウニュウモンカイテイニハン ササキ メグミ リブロワークス 発行年月：2022年04月14日 予約締切日：2022年01月05日 ページ数：192p サイズ：単行本 ISBN：9784297126957 佐々木恵（ササキメグミ） 2002年より独学でWe
ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [
3,278円(税込)【送料込】
小川 欣一 穂苅 智哉 ソシムビジネスサイトヲツクッテマナブ ワードプレスノキョウカショ バージョンロクテンエックスタイオウバン オガワ ヨシカズ ホカリ トモヤ 発行年月：2023年05月01日 予約締切日：2023年01月12日 ページ数：436p サイズ：単行本 ISBN：9784802614030 1 開発環境を構築しよう／2 テ
