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

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

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

執筆者:

関連記事

fontawsome

ピクトグラムでアイキャッチfontawsomeで簡単設定 ⇒ トップページの作り込み3

ピクトグラムとは 東京オリンピックの話題でも取り上げられていたが、近年はピクトグラムの重要性は増すばかりだ。 ピクトグラム(英語: pictogram)あるいはピクトグラフ(英語: pictograp …

コンテンツ

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

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

stinger8

wordpessテーマのSTINGER8にしてみた ⇒ 設定その1

STINGER8を導入 このサイトはwordpressで構築している。 数ヶ月間Grapheneテーマを使ってみたのだが、どうも重い気がする。 そこで試しに、国産テーマで人気が高いSTINGERを使っ …

ページで100%幅表示を可能にする ⇒ STINGER8設定その14

100%幅の表示を可能にする STINGER8では100%幅のコンテンツを表示できないので、固定ページは可能になるように設定する。 サイドバーを消し、幅を制限している設定をクリアしていく。 page. …

marquee

marqueeで電光掲示板風に文字を流す ⇒ トップページの作り込み8

marqueeとは marquee(マーキー)はインターネット黎明期にはやったテクニックだ。 電光掲示板のように文字が流れていくテクニックを指す。 ニコニコ動画を想像すれば、分かるだろう。