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

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

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

執筆者:

関連記事

code-prettify

google code-prettifyでコード表示をハイライト(動作しないので焦るが解決済み) ⇒ STINGER8設定その2

google code-prettifyを導入 設定その1の記事内で、コードを記載した。 wordpessテーマのSTINGER8にしてみた ⇒ 設定その1 これを見てみると、preタグで囲んだだけだ …

料理の写真を撮る

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

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

domo Todo+

iPhoneの神アプリをおすすめ【3】domo Todo+

私のiPhoneのホーム画面1画面目に鎮座する神アプリを紹介するシリーズ。 1画面目のヘビーに使い込んでいるiPhoneアプリ 第3回目は、domo Todo+を紹介する。 domo Todo+ do …

レスポンシブ対応

メニューとフッターのレスポンシブ対応css装飾 ⇒ STINGER8設定その12

見出しと同じイメージを使う H2タグの装飾とイメージを同じにするため、メインメニューとフッターの背景画像を設定する。 H2タグを修飾 ⇒ STINGER8設定その9 最初は単純に背景画像を設定するだけ …

コンテンツ

説明文の加筆 ⇒ トップページの作り込み6

コンテンツを増やす コンテンツを加える。 600px幅で表示。 <div id=”amiens-05″ class=”amiens-black”> <div class=”amien …