css一覧

WordPress、Simplicity2、テーブルの枠線を消す方法

今回は、WordPress、Simplicity2を使っていて枠線を消す指定をしても消えない場合の消し方です。

 

WordPress、Simplicity2、テーブルの枠線を消す方法
サンプル1
<table border=”0″ width=”300″>
<tbody>
<tr>
<td>サンプル1</td>
</tr>
</tbody>
</table>

上記の様に「border=”0″」を指定してテーブルを作成しても枠線が消えない場合でも枠線を消す方法をご紹介します。

 

サンプル2
<table border=”0″ width=”300″>
<tbody>
<tr>
<td style=”border:none;”>サンプル2</td>
</tr>
</tbody>
</table>

サンプル2の様に、tdタグに「style=”border:none;”」を追加する事で枠線が消えます。


WordPress、Simplicity2、サイドバートップに広告を設定すると「広告のラベル」が表示されない?

下記の動作環境で広告設定をサイドバートップにすると通常表示される「スポンサーリンク」が表示されません。

動作環境
Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。

これは、Simplicityの仕様で表示されないようになっているようです。

表示させる設定として、

外観 → テーマの編集 → Simplicity2 child: スタイルシート (style.css)

style.cssに追加で下記の一行を書き込めば、表示されるようになります。

#sidebar .ad-space .ad-label{ display:block; }


WordPress、Simplicity2、記事間に線を引く

関連記事の記事間、人気記事の記事間に線を引く方法

動作環境
Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。
WordPress Popular Postsのインストール。(バージョン 3.3.4:人気記事表示のプラグイン)

外観 → テーマの編集 → Simplicity2 child: スタイルシート (style.css)

 

style.cssに追加で書き込めば、設定が反映されます。

/* 関連記事の記事間に線を引く */
#main .related-entry {
border-bottom: 5px dotted #a9b1fc;
padding-bottom: 15px;
}

 

/* 人気記事の記事間に線を引く */
.wpp-list li {
border-bottom: 5px dotted #a9b1fc;
padding-bottom: 10px;
}

 

「dotted」の部分を変更すると線の種類が変わります。

solid:1本線
double:2本線
dotted:点線
dashed:破線

 

「#a9b1fc」の部分を変更すると線の色が変わります。

#ff0000 #cc0000 #990000
#00ff00 #00cc00 #009900
#ffff00 #cccc00 #999900
#660000 #0000ff #0000cc
#000099 #ff00ff #cc00cc
#990099 #00ffff #00cccc
#009999 #000000 #666666
#999999 #cccccc #ffffff

 

「border-bottom: 5px」の数字の部分を変更すると線の太さが変わります。

dotted:点線:1px
dotted:点線:2px
dotted:点線:3px
dotted:点線:4px
dotted:点線:5px
dotted:点線:6px
dotted:点線:7px
dotted:点線:8px
dotted:点線:9px
dotted:点線:10px

 

「padding-bottom: 10px;」の数字の部分を変更すると文字と線の間の余白が変わります。

文字と線の間の余白が「5px」です。
文字と線の間の余白が「10px」です。
文字と線の間の余白が「15px」です。
文字と線の間の余白が「20px」です。
文字と線の間の余白が「25px」です。

WordPress、Simplicity2、スタイルシートの設定

動作環境
Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。

外観 → テーマの編集 → Simplicity2 child: スタイルシート (style.css)

style.cssに追加で書き込めば、設定が反映されます。

参考
/* サイドバーウィジェットの見出し書式を設定する */
#sidebar .widget_title{
font-size: 16px;
background-color: #f6f6f6;
border-left: 8px solid #a9b1fc;
margin: 5px;
padding: 5px;
}

参考
/* 投稿、固定ページタイトルの見出し書式を設定する */
.article h1{
font-size: 28px;
}

参考サイト
Simplicity
HTMLクイックリファレンス


スポンサーリンク
Sponsered Link
Sponsered Link