WordressテーマTwentyTwelveで表の縦線が表示されない

Wordressの標準テーマの1つであるTwentyTwelveは、シンプルで使い勝手のいいテーマファイルだと思います。

表(テーブル)を作成しても、シンプルなCSSによりキレイに表示されます。

ただ、確かにTwentyTwelveの表には縦線がありません

海外製のテーマは、表は横線だけのものが多いのですが、TwentyTwelveもこのパターンです。

011

縦線を引きたければテーマファイルを編集するしかありませんが、少々技術的なハードルが高いです。

テーマファイルの中のスタイルシートを編集するのですが、スタイルシートは少々間違って変更をしてもホームページが表示されなくなってしまうことはありません。

ただ、あまり気楽に考えずに多少は覚悟してから作業してください。

なお、分かる方は、あらかじめスタイルシートファイル「style.css」という名前のファイルをご自身のPCにバックアップしておくといいです。

おかしくなってしまった場合に、そのバックアップでサーバーのファイルを上書きしてしまえばいいからです。

バックアップや上書き(リストア)は、FTPソフトを使って行いますが、こちらの動画にも説明がありますので参考にしてください。

[su_youtube url=”https://www.youtube.com/embed/Q4ED1So7D8g”]

では、具体的なスタイルシート変更の仕方をご紹介します。

まず、管理画面の外観ーテーマ編集に入ります。

そして、スタイルシート(style.css)が開きますので、Ctrl+Fで「entry-content td」という文字を検索して以下の行を探してください。

だいたい、950行目ぐらいにあります。

.entry-content td,
.comment-content td {
border-top: 1px solid #ededed;
padding: 6px 10px 6px 0;
}

この箇所を変更しますが、border-topと上だけになって上だけに線を引くことになっているのを、boderにすることですべての枠(上下左右)に線を引くように変えます。

次に、paddingの左側が0なのですが、このままでは左の線に文字がピタッと付いてしまいますので間隔を空けるため値を0から6pxに変更します。

以下の様に変更することになります。

.entry-content td,
.comment-content td {
border: 1px solid #ededed;
padding: 6px 10px 6px 6px;
}

終わりましたら、「ファイルを更新」をクリックします。

表のあるページをF5キーなどで”更新”してもらえば、表に縦線が引かれているはずです。

なお、今回の設定では、タグとしてthは使わずにtdだけにしてください。

thを使う場合は、更にCSSの設定が必要になりますが今回はその説明については割愛しました。

Follow me!