IT企業の強みが伝わるサイトで採用力アップ
ベンチャー企業らしい先進的なデザインと、技術力が伝わるコンテンツ作りが秀逸でした。特に開発事例や技術ブログの構成は期待以上。リニューアル後、エンジニアの応募が3倍に増え、採用コストの削減にも繋がっています。
株式会社〇〇 代表取締役 中村様
ベンチャー企業らしい先進的なデザインと、技術力が伝わるコンテンツ作りが秀逸でした。特に開発事例や技術ブログの構成は期待以上。リニューアル後、エンジニアの応募が3倍に増え、採用コストの削減にも繋がっています。
株式会社〇〇 代表取締役 中村様
女性社員が多い当社の魅力を、スタッフインタビューや福利厚生の紹介で上手く表現していただきました。社員からも『会社の良さが伝わる』と好評です。求人応募も増え、特に女性エンジニアからの問い合わせが着実に増えています。
株式会社〇〇 代表取締役 吉田様
写真の見せ方や色使いなど、カフェの雰囲気を完璧に表現していただき感動しました。予約システムの導入後は電話対応が減り、スタッフの負担も軽減。SNSとの連携で若い層の集客も好調で、休日は予約でほぼ満席になっています。
〇〇 Cafe オーナー 木村様
<!--▼▼▼▼▼ここから「お客様の声」--> <section class="bg3 bg-pattern3" id="koe"> <h2 class="c">お客様の声<span>Customer Testimonials</span></h2> <div class="list-normal1"> <div class="list up"> <figure><img src="images/photo1.jpg" alt=""></figure> <div class="text"> <h4>IT企業の強みが伝わるサイトで採用力アップ</h4> <p>ベンチャー企業らしい先進的なデザインと、技術力が伝わるコンテンツ作りが秀逸でした。特に開発事例や技術ブログの構成は期待以上。リニューアル後、エンジニアの応募が3倍に増え、採用コストの削減にも繋がっています。</p> <p class="name">株式会社〇〇 代表取締役 中村様</p> </div> </div> <div class="list up reverse"> <figure><img src="images/photo2.jpg" alt=""></figure> <div class="text"> <h4>社員の魅力が伝わるサイトで会社の雰囲気が一新</h4> <p>女性社員が多い当社の魅力を、スタッフインタビューや福利厚生の紹介で上手く表現していただきました。社員からも『会社の良さが伝わる』と好評です。求人応募も増え、特に女性エンジニアからの問い合わせが着実に増えています。</p> <p class="name">株式会社〇〇 代表取締役 吉田様</p> </div> </div> <div class="list up"> <figure><img src="images/photo3.jpg" alt=""></figure> <div class="text"> <h4>インスタ映えするカフェの世界観をサイトでも表現</h4> <p>写真の見せ方や色使いなど、カフェの雰囲気を完璧に表現していただき感動しました。予約システムの導入後は電話対応が減り、スタッフの負担も軽減。SNSとの連携で若い層の集客も好調で、休日は予約でほぼ満席になっています。</p> <p class="name">〇〇 Cafe オーナー 木村様</p> </div> </div> </div> <!--/.list-normal1--> <div class="r"><p class="btn1"><a href="#" class="inline-block">もっと見る</a></p></div> </section> <!--▲▲▲▲▲ここまで「お客様の声」-->
cssフォルダのstyle.cssから「list-normal1」でテキスト検索してみて下さい。詳しい解説もあります。
「bg3」と「bg-pattern3」の2つのclassが指定されており、それぞれstyle.cssで検索すると設定内容がわかります。
「bg3」は背景色だけ指定されているスタイル。「bg-pattern3」は背景の格子柄のパターン(bg_pattern3.png)の読み込みです。
idはメニューのリンク先の目印です。
メニュー側は、
<a href="#koe">お客様の声</a>
になっています。
トップページ以外からトップページに戻るリンクだと、別ページへのリンクになるので
<a href="index.html#koe">お客様の声</a>
と書きます。
「list」と「up」の2つのclassがついています。
本来はlistのみでOKですが、下からフェードしてくるupスタイルもつけています。
upがないと以下のように最初から表示された状態になります。upは汎用スタイルなので色々な所で使えます。
ベンチャー企業らしい先進的なデザインと、技術力が伝わるコンテンツ作りが秀逸でした。特に開発事例や技術ブログの構成は期待以上。リニューアル後、エンジニアの応募が3倍に増え、採用コストの削減にも繋がっています。
株式会社〇〇 代表取締役 中村様
通常は、<div class="list up">のみでいいのですが、画像とテキストブロックの左右を入れ替えたい場合にreverseを追加します。
お好みで入れ替えれられるようにclassで指定するようにしました。
女性社員が多い当社の魅力を、スタッフインタビューや福利厚生の紹介で上手く表現していただきました。社員からも『会社の良さが伝わる』と好評です。求人応募も増え、特に女性エンジニアからの問い合わせが着実に増えています。
株式会社〇〇 代表取締役 吉田様
classのつけかたで色々なボタンになります。お好みで。
矢印アイコンはFont Awesomeを使用しています。詳しくはmanual.htmlをお読み下さい。
実際にアイコンを指定している箇所は、style.cssの、
.btn1 a::after {
の中にあるc「content」の行です。