サイトデザイン一新

 

wordpressにはテーマという機能があって
見た目を簡単に変更(カスタマイズ)することができます。

こんにちは、久々の更新作業で緊張気味のイガジーです。

時代はレスポンシブル、即ちパソコンやスマホなどの
画面サイズに合わせてレイアウトを変えるデザインが
主流になっています。

色々なwordpressテーマがありますが、gush2という
テーマを使用させて頂くことにしました。
「好きなだけカスタマイズして使ってね」という
コンセプト、イイですね。無料なのもイイ!

3カラムから2カラムになり、文字が全体的に
大きくなりました。最近は3カラムは流行らない
ようです。

css の変更で少しトラブりました。
<table>タグで、枠ありと枠なしを使い
わけたいことがよくありますよね。

クラスを作って、.t0 は枠無し、.t1 は枠ありと
することにすると

table.t0 {
/* 枠なし */
    border-collapse: collapse; 
    table-layout:auto;
}
table.t0 td {
    border: none;
    text-align:left;
    padding: 2px;
}
table.t1{
/* 枠有り */
    border-collapse: collapse; 
    table-layout:auto;
    border: solid 2px #888;
    margin: 0 4px;
}
table.t1 td {
    border: solid 2px #888;
    text-align: left;
    padding: 2px 8px;
}

みたいな感じになります。

「table.t0 td」は table.t0 に属する td に
対して有効、つまり .t0 ではない table には
影響を与えません。

table には td の他に th もあるので

table.t1 th,td {
    border: solid 2px #888;
    text-align: left;
    padding: 2px 8px;
}

と書いたら、クラス指定をしていない
td 全てが影響を受けて、枠ありになって
しまいました。

はい、そうですね、

table.t1 th,
table.t1 td {
    border: solid 2px #888;
    text-align: left;
    padding: 2px 8px;
}

と書かないといけないのでした。
分かってしまえば、なぁんだ。ですが、うっかり
間違えやすいところだと思います。

p.s.
テーマ変更に伴いレイアウト崩れが起きている
可能性もあるので、お気づきのことがありましたら
コメント頂ければ幸いです。

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。