人気キーワードの縦位置を横並びにしたい
ワードプレスのSearch Meter プラグインのウィジェットの人気キーワードが縦並びなのでレイアウト変更死体

カスタムCSSに追加
/* 検索キーワードを横並びに*/
#popular_searches-2 ul,#popular_searches-3 ul {
list-style: none;
padding: 0;
margin-top: 10px; /* キーワードの上にマージンを追加 */
display: flex;
flex-wrap: wrap;
}
#popular_searches-2 li,#popular_searches-3 li {
flex: 0 0 auto;
margin-right: 10px; /* 各項目の間隔を調整する場合に適宜変更してください */
}
#popular_searches-2 li a,
#popular_searches-3 li a{
text-decoration: none;
padding: 1px 5px;
background-color: #f0f0f0;
border-radius: 5px;
color: #333;
margin-bottom: 5px;
display: inline-block;
}
#recent_searches-2 ul,
#recent_searches-3 ul{
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
margin-top: 10px; /* キーワードの上にマージンを追加 */
}
#recent_searches-2 li,#recent_searches-3 li{
flex: 0 0 auto;
margin-right: 10px; /* 各項目の間隔を調整する場合に適宜変更してください */
}
#recent_searches-2 li a,
#recent_searches-3 li a{
text-decoration: none;
padding: 1px 5px;
background-color: #f0f0f0;
border-radius: 5px;
color: #333;
margin-bottom: 5px;
display: inline-block;
}
解説
この #popular_searches-2の数字の部分は個々のウィジェットのソースを見て書き換える

今回はついでに最近のキーワードも一緒にレイアウトを変更した。

完成

コメントを残す