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

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

CMS css 新着情報

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

投稿日:2019年5月3日 更新日:

H2タグの設定

サイドバーのデザイン設定はひとまず終えたので、コンテンツエリアの設定を始める。

まず気になっていたのが、H2のバランスが悪いことだ。

STINGER8のデフォルトでは、上下にsolidの1pxがひかれ薄い背景色がかかった形式になっているが、これを変える。

h2{
border-left: solid 10px #fc0;
box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
background: url("https://amiens.jp/wp-content/uploads/2019/05/h2back.jpg");
margin-top: 5em;
color: white;
}

大分好みの感じになった。

サイドバーを再設定

こうなると、以前設定したサイドバーのデザインも合わせたくなる。

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

同様のデザインに変更する。


h2,.menu_underh2{
    border-left: solid 10px #fc0;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
    background: url("https://amiens.jp/wp-content/uploads/2019/05/h2back.jpg");
    margin-top: 5em;
    padding: 0.5em 2em 0.5em 1em;
    color: white;
    clear: both;
    font-size: 18px !important;
}

これでよし。

-CMS, css, 新着情報
-

執筆者:

関連記事

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

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

レスポンシブ対応

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

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

HDMIケーブル

HDMIケーブルにて価格破壊を考える

11月の話で恐縮だが、テレビを買った。 ご多分に漏れず、エコポイントを意識して駆け込みで購入したのだ。 ところが、その時点でテレビの納期が1ヶ月先とのこと。 そりゃあないでしょ! という気持ちになった …

ツイッターvsフェイスブック

facebookにtwitterを連動させることは禁じ手なのか?

最近爆発的に普及してきたソーシャルメディア。 私もfacebook、twitter、mixi、GREE、myspaceなど、いろいろなSNSを利用している。 しかしそれぞれのSNSで個別に発言していく …

code-prettify

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

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