#0007 WpTHK カスタマイズ・ウィジェット『最近の投稿』を変更してみる
記事にするのに簡単そうなところからということで、サイドバーのウィジェット『最近の投稿』をカスタマイズしてみます。
予定としては、ショートタグやテーマそのもののカスタマイズ記事も書きたいなぁと思っていますので、よろしくお願いします。ショートタグで簡単なところでは、この文章でも行っている字下げですね。もともとは項目番号のついた見出しを左側いっぱいいっぱいにして、コンテンツをインデントするのが見てて感じが良いと思いましたので、この辺はちょっと ひと手間かけています。
| 1. | 対象のタグと属性を確認する |
<div id="side">
～ (省略) ～
<div id="recent-posts-2" class="widget widget_recent_entries">
<h3 class="side-title">最近の投稿</h3>
<ul>
<li><a href="～～～">テスト書き込み xxxaaa 999999</a></li>
<li><a href="～～～">テスト書き込み xxxaaa 888888</a></li>
<li><a href="～～～">テスト書き込み xxxaaa 777777</a></li>
<li><a href="～～～">テスト書き込み xxxaaa 666666</a></li>
<li><a href="～～～">テスト書き込み xxxaaa 555555555555</a></li>
</ul>
</div>
対象部分のタグを抜き出すと上のような感じになります。順番を端折ってスタイルシートの設定に進みます。chrome で対象項目の設定を確認すると次のようになってました。ブラウザだけででこういうのがすぐにわかるというのが最大のヒントになっています。
| 2. | スタイルシートを追加する |
上のスナップショットから、『最近の投稿』のタイトル箇所は #side h3というセレクタが使われており、ついでにフォントサイズやら背景色やらマージンやらパディングやらが設定されていることがわかります。ということで、パパッと以下の css を組み立てて、子テーマの style.css (あるいは add-header.php)に貼り付けます。(wordpress 管理画面左側サイドメニュー内の WpTHK メニュー内の『子テーマの編集』 画面を開くと、style.css 編集画面が出てきますので、そこに貼り付けて保存すればOKです。
#side #recent-posts-2 h3.side-title
{ margin:3px 0;
border:0;
padding:2px 6px 0;
font-size:14px;
font-size:1.4rem;
line-height:1.6em;
border-radius: 3px;
background-color:yellow;
}
上の css では #side h3 以外にも、セレクタを追加していますが、その理由はというと「既存と同じレベルのセレクタを設定した場合、今回の追加したほうが使われるかそれとも既存のほうが使われるかが不明」というルールがあるためです。実際には出現順などの理由によるわけですが、出来上がりのシステムだとその順序を調べるのも手間がかかりすぎるということですね。
| 3. | リスト項目にもスタイルシートを追加する |
次にリスト項目です。以下の css を style.css に貼り付けます。
#side div[id^=”recent-posts-2″] ul
{ padding-left:1.6em;
}
#side div[id^=”recent-posts-2″] ul li
{ text-indent:0em;
padding-left:0em;
list-style-type: square;
font-size:12px;
font-size:1.2rem;
line-height:1.6em;
position: relative;
}
ブログを再表示すると以下のように変わります。
上のはタイ語ブログで使っている マーカーになります。タイでは3000円程度のスマホが多く使われてまして、あまり凝ったことをやると遅くてブログが見れないという現状があります。バンコクでは iphone を使っているタイ人の方も多いのですが、タイ語ブログのほうにはアメリカはともかくとして、タイの田舎だとかラオスだとかロシアだとかから見に来てくれているようなので、そういう事情に対応しています。
こちら tenki.club はそういうのを気にする必要もないため、ちょっと凝ったマーカーにしてあります
#side div[id^=”recent-posts-“] ul li
{
padding-left:2em;
margin-bottom:5px;
font-size:12px;
font-size:1.2rem;
line-height:1.4rem;
position: relative;
}
div[id^=”recent-posts-“] ul li::after
{
display: block;content: ”;position: absolute;
top: 5px;
left: 1em;
width: 6px;
height: 6px;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div[id^=”recent-posts-“] ul li::before
{
display: block;content: ”;position: absolute;
top: 8px;
left: 0.975em;
width: 8px;
height: 1px;
background-color: #666;
}
矢印アイコンはここのサイト を参考にしました。
他に以下のサイトも参考にしています。
意外と知らない!?CSSセレクタ20個のおさらい
CSSが効かないときの優先順位チェック(3)～点数計算編
(CM) Amazon タイムセール・在庫一層セール実施中！
(CM) Amazon
これから開催予定の数量限定タイムセール(プライム会員はすぐに購入できます！)
wrote by tasa.