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

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

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, 新着情報
-, ,

執筆者:

関連記事

Evernote

evernoteにwebページをクリッピングする便利な手法

みんな大好きevernote! 数あるクラウドサービスの中でも、特に利用者が多いと思われるのがevernoteだ。 片っ端からメモしていけるので、私はなんでもかんでもブッ込んじゃってる。 Everno …

バッジ

バッジの表示 ⇒ トップページの作り込み10

fontawsomeでお手軽バッジ バッジを使うことは意外と多い。 特にネットショップの場合はランキングを表示することがほとんどで、その順位を表すのにバッジがよく使われる。 今までは画像でバッジを作っ …

ブログの書き方

ブログを書く時の適切な文字数は何文字か

「ブログを書く時の適切な文字数は何文字ですか?」 勉強会で質問され、思わず詰まってしまった。   一般的には400字詰め原稿用紙で何枚、と言う言い方をするので、それからすると800文字とか1 …

365日懸賞

ツイッターで応募できる懸賞企画がスタート

有限会社マップ高知(高知県高知市知寄町1-5-1 電話088-880-0770 FAX088-884-3700 http://www.ewalk.ne.jp/map/)は、2011年3月1日、ツイッタ …

コード表示の最適化 ⇒ STINGER8設定その8

コードが見にくい preタグでコードを表示した時に困るのが、いまいち見づらいことだ。 コードのハイライト表示を導入したことで、多少は見やすくはなっていた。 google code-prettifyでコ …