公式YouTube

ワードプレスのSearch Meter プラグインのウィジェットの人気キーワードのレイアウト変更

人気キーワードの縦位置を横並びにしたい

ワードプレスの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数字の部分は個々のウィジェットのソースを見て書き換える

人気キーワードの場合

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

最近のキーワードの場合

完成

横並びになった

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ド "place_id" の件数: 41