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

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

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

執筆者:

関連記事

before

カテゴリーのデザイン-サイドバーメニューの成形(3) ⇒ STINGER8設定その5

カテゴリーが長すぎる サイドバーのカテゴリーだが、項目数が多すぎて縦にやたら長くなってしまう。 そこで、第一階層をリストにして第二階層はボタンにして並べることにした。 まず、第二階層をボタン化 .ca …

フェイスブック

Facebookページのiframe化にチャレンジ

Facebookでビジネスをするのに欠かせない独自タブを作るには、従来はstaticFBMLを使ってきた。 これはこれで簡便で使いやすかったのだが、3/10で使用できなくなる。 これからはstatic …

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

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

ブラウザスピード対決:IE 9 Beta、Firefox 4 Beta、Chrome(Crankshaft)、Opera 11 Beta

Amplify’d from www.lifehacker.jp ■起動および読&#1241 …

cssアニメーション

cssのanimationで文字に変化を付ける ⇒ トップページの作り込み1

animationとは cssのanimationを使うことで簡単に動きを付けられる。 animationプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめ …