「こんなお悩みありませんか?」ブロックについて
<!--▼▼▼▼▼ここから「こんなお悩みありませんか?」-->
<section class="bg1 bg-pattern1 arrow">
<h2 class="c">こんなお悩みありませんか?<span>Do you have any of these problems?</span></h2>
<div class="list-grid1">
<div class="list bg-black up">
<figure class="icon"><img src="images/icon1.png" alt=""></figure>
<h4 class="kazari">デザインが古くて、<span class="color-check">他社と比べて見劣り</span>している…</h4>
<p>サイト制作からもう15年。自分で見ていてもさすがに古さを実感するようになった。サイトが古い事でかえってマイナスイメージなのでは。</p>
<span class="num">01</span>
</div>
<div class="list bg-black up">
<figure class="icon"><img src="images/icon2.png" alt=""></figure>
<h4 class="kazari"><span class="color-check">予算内</span>で、どこまで実現できるのか不安…</h4>
<p>予算が限られているのでサイト制作をしてくれる業者が見つかるか不安。最初だけ安く提示されて後で高額請求などもよく聞くし…。</p>
<span class="num">02</span>
</div>
<div class="list bg-black up">
<figure class="icon"><img src="images/icon3.png" alt=""></figure>
<h4 class="kazari">売上につながる<span class="color-check">サイト運営のアドバイス</span>が欲しい…</h4>
<p>リニューアルするだけじゃなく、その後のステップアップのサポートもしてくれるような業者を見つけたい。</p>
<span class="num">03</span>
</div>
</div>
<!--/.list-grid1-->
</section>
<!--▲▲▲▲▲ここまで「こんなお悩みありませんか?」-->
3カラムのスタイルは
cssフォルダのstyle.cssから「list-grid1」でテキスト検索してみて下さい。詳しい解説もあります。
<section class="bg1 bg-pattern1 arrow">について
「bg1」と「bg-pattern1」と「arrow」の3つのclassが指定されており、それぞれstyle.cssで検索すると設定内容がわかります。
「bg1」は背景色と文字色の単色での指定。「bg-pattern1」は背景の格子柄のパターン(bg_pattern1.png)の読み込み。「arrow」はセクション下部が三角形になるようなスタイルです。それぞれ独立して使う事もできます。(パターンはベースになる色次第で見づらい場合もあり)
bg1のみの場合
bg1 + pattern1の場合
bg1 + pattern1 + arrowの場合
<div class="list bg-black up">について
これも3つのclassが指定されています。
通常はlistのみでOKですが、このブロックではlistの背景色をbg-blackで黒にし、さらに下からフェードしてくるアニメーションをupスタイルで指定しています。
配布のタイプ
<div class="list bg-black up">
bg-blackを抜いた場合
<div class="list up">
bg-blackとupを抜いた場合
つまり、listのみの場合です。
<div class="list">
さらに、外側ブロックがbg1である場合にアイコンの色合いがグレースケールになるようにもなっています。
以下はbg1が「ない」場合です。本来のアイコン色になります。
3カラムボックスの左上に入っている01〜03のナンバー
<span class="num">01</span>
<span class="num">02</span>
<span class="num">03</span>
の部分がそれぞれ該当します。
不要なら削除すればOKですし、他の文字列にしたいならhtml側を直接書き換えて下さい。
3カラムボックス内の見出し(h4)の左上の引用符
タイトル左上の引用符
<h4 class="kazari">
のclassが該当箇所です。飾りを入れたくなければ、
<h4>
にすればOKです。
この引用符自体を別の記号にしたければ、
.list-grid1 .list h4.kazari::before {
の1行目のcontentの「“」部分を書き換えて下さい。