0
1

More than 3 years have passed since last update.

wordpressで作成したHPのテーブル内の改行をきれいにする方法

Last updated at Posted at 2020-11-12

解決したい課題

以下のように表示されており、汚い。

・仕事の範囲が不明確な場合や変更が多く発生しても周囲と良好な
コミュニケーションを取れる

以下のように、改行された先頭文字は"・"の一文字を開けて(字下げして)表示されてほしい。かつ、固定ではなくてサイズによって可変にしたい。

・仕事の範囲が不明確な場合や変更が多く発生しても周囲と良好な
 コミュニケーションを取れる

結論

"・"はちょっと太くなっちゃいますが、<ul>タグを使用すれば良い。

  • 仕事の範囲が不明確な場合や変更が多く発生しても周囲と良好なコミュニケーションを取れる

悩み抜いた過程

どのファイルを編集するの?

そもそも、wordpressのcssは複数箇所に分かれているため初心者は迷う。。。
wordpressでのhtmlとcssの関係、どこを編集すればよいのかはこちら

そのファイルのどこをどう編集するの?

ここが今回の難関。
テーブル内であることを無視すれば、以下のような方法で解決可能。
・【CSS】2行目以降を1文字下げる[text-indent]の使い方。
https://on-ze.com/archives/323

・【css】文章中に改行がある時に、行頭を揃える小ワザ
https://nodoame.net/archives/1888

→ただ、これだと2行目移行がすべて1文字下がっちゃうんです、、、。今回は2行目だけ("・"から続く文章だけ)下げたいんです。。。

テーブルの中身じゃなければそれぞれ<p>タグで囲ってやったりすればいいのですが、今回はテーブルの中身なんですよ。。。
やってる人全然いなくて困りました。

発想を変えてみる

ここまでは、"2行目をどうずらすか?"という発想で調査していた。
発想を変えて、"どうきれいに箇条書するか?"と考えてみた。

すると、、、<ul>タグと<li>タグで表記しちゃえばテーブルの中だろうときれいに表示されてくれるのでは?
と気づく。

<p class="s_title">経験・スキル</p>
<table>
<tbody>
<tr><th>求めるスキル</th><td class="txt" data-label="内容">
<ul>
<li>コミュニケーション能力
<li>事務処理能力
</ul>
【歓迎スキル】
<ul>
<li>秘書経験
<li>秘書検定取得
</ul>
</td></tr>
<tr><th>求める人物像</th><td class="txt" data-label="内容">
<ul>
<li>仕事の範囲が不明確な場合や変更が多く発生しても周囲と良好なコミュニケーションを取れる
~以下略~

小言

そもそも"・"を直打ちするのがちょっとナンセンスなのかも。
<ul><li>を使いましょう。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1