アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css 新着情報

サイドバーメニューの成形(1) ⇒ STINGER8設定その3

投稿日:2019年4月27日 更新日:

人気の投稿のバランスが悪い

テーマをSTINGER8にしたら、jetpackサイドバーウィジットの「人気の投稿とページ」ウィジットがバランスが悪くなった。

css適応前

cssで調整する

まず「人気の投稿」のタイトル部分に黒背景をかける。

せっかくなので、グラデーションにしておいた。


.menu_underh2{
    display:flex;
    align-items: center;
    height:2em;
    margin-top:2em;
    padding-left: 1em;
    font-size:larger !important;
    color:#ddd;
    background:linear-gradient(to right, #000,#777) !important;
    border-left: solid 10px #fc0;
    clear: both;
}

これでいいと思ったのだが、その後やっぱり少し変えることにした。

H2タグを修飾 ⇒ STINGER8設定その7

サムネイル画像が新着投稿に比べ小さすぎるので、同じ大きさにする。

#mybox img{
width:80px;
max-width:80px;
}

テキスト部分の幅を調整する。

ついでに、行間を1行空ける。

#mybox .widgets-list-layout-links{
width: 65%;
}
#mybox li{
margin-top:1em !important;
}

適応後が、この状態。

css整形後

少しましになった。

-CMS, css, 新着情報
-, ,

執筆者:

関連記事

ワードプレス

IEでJavaScriptエラーが出たトラブルシューティング

このブログはwordpressで制作しているのだが、当初よりIEで見るとJavaScriptエラーが出て困っていた。 いろいろバタバタしていてしばらく放置していたのだが、時間がとれたので見直してみた。 …

関連記事

jetpack関連記事の数を増やす  ⇒ STINGER8設定その10

jetpack関連記事は3個 デフォルトでは、jetpackが出力する関連記事は3個だ。 これを6個に増やす。 まずfunctions.phpに、次のコードを追加。 //関連記事数変更 functio …

Googleリアルタイム検索の「上位順の最新情報」にはユーザーのオーソリティが関係している

Amplify’d from www.suzukikenichi.com 「上位順の最新情報」に表示するユーザーは何を基準に選んでいるのだろうかと疑問に思っていたのですが、ツイートしたユーザーの“Au …

iPhone OS 4の「iAd」はモバイル広告を変えるか?

Amplify’d from ascii.jp AppleのiAd広告配信、電通が日本で展開へ iPhone OS 4の「iAd」はモバイル広告を変えるか? アップルが2010年初頭、モバイル広告の米 …

料理の写真を撮る

ソーシャルメディア全盛の今、レストランで写真を撮ることについて考えてみた

あちこちで食事の写真を撮っているのを見かけるようになった Facebookやtwitterが流行している現在、レストランなどに行くと出された料理をスマホで撮影している人をよく見かけるようになった。 ま …