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

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

CMS css コンテンツ 新着情報

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

投稿日:

ピクトグラムとは

東京オリンピックの話題でも取り上げられていたが、近年はピクトグラムの重要性は増すばかりだ。

ピクトグラム - Wikipediaピクトグラム(英語: pictogram)あるいはピクトグラフ(英語: pictograph)とは、一般に「絵文字」「絵単語」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号(サイン)の一つである。地と図に明度差のある2色を用いて、表したい概念を単純な図として表現する技法が用いられる。

ピクトグラム – Wikipediaから引用

webサイトでも、ピクトグラムでテンポ良くするテクニックは多用されている。

fontawsomeとは

webで利用できるピクトグラムの中で、有名なのがfontawsomeだ。

Font AwesomeGet vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.

Font Awesomeから引用

vector素材なので拡大しても劣化しないし、ダウンロードする必要もないのでお手軽。

無料で使えるものも多い。

fontawsomeの読み込み

fontawsomeを使うのは簡単だ。

まず、cssを読み込む。

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="XXX" crossorigin="anonymous">

今回は動きを付けたいので、追加でこちらのアニメーション用cssも読み込んでおく。

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="XXX" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all">

これで準備完了だ。

fontawsomeのページに戻り、使いたいピクトグラムを選んで「Start Using This Icon」ボタンを押せば、コードが表示される。

これをコピペすれば良い。

実装

今回はピクトグラムを使い、マウスオーバーの時に拡大縮小を繰り返すアニメーションpulseを加えた。


<i class="fas fa-chart-line faa-pulse animated-hover amiens-jisseki"></i>

これでピクトグラムが表示される。

簡単だ。

説明文などを加え、できあがったHTMLがこれ。

<div class="amiens-3s">
<div class="amiens-1060w">
<div>
<h3>実績</h3>
<i class="fas fa-chart-line faa-pulse animated-hover amiens-jisseki"></i>

私たちは、コンサルティング活動を2007年から続けてきました。おかげさまで、多くのクライアント企業からご信頼いただいています。今まで100社以上を指導させて頂いております。売上が50%以上アップした企業様がほとんどで、売上が2倍以上になった企業様も多くあります。その実力は折り紙付きです。

</div>
<div>
<h3>信頼</h3>
<i class="far fa-handshake faa-pulse animated-hover amiens-jisseki"></i>

クライアント企業には、絶大な信頼を頂いています。お取引先様から新規のご紹介を多くいただくことで、営業活動してまいりました。特に広告などを打つこともなく、12年にわたりコンサルタントとして活動してまいりました。この実績と信頼が、私たちの実力の何よりの証拠です。

</div>
<div>
<h3>指導力</h3>
<i class="fas fa-users faa-pulse animated-hover amiens-jisseki"></i>

代表は商店街で、まちづくり活動を20年間にわたって行ってきました。商店街と言えば「隣はライバル」の血で血を洗う仁義なき世界です。そんな商店街で100店舗以上をまとめあげ、アーケードを作ったり共同イベントを開催したりしてきました。理事として、実行部隊として、先頭に立って走ってきたのです。統率力、指導力、実行力は折り紙付きです。

</div>
</div>
</div>

PC表示で最大幅を1060pxに制限するためにdivを加えたりしたので、入れ子が多少ややこしくなっている。

3つのセクションにそれぞれピクトグラムでアイキャッチするようにした。

これだけで随分見やすくなるから、ピクトグラムの威力は絶大だ。

cssはこちら。

.amiens-3s{
background-color: black;
padding: 100px 0;
}
.amiens-3s div div{
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10% 20px;
width: 90%;
margin: 200px auto;
text-align: center;
display: block;
}
.amiens-jisseki,amiens-keiken,amiens-shidoryoku{
font-size: 1000%;
color: #ccc;
}
.amiens-3s i{
width: 100%;
}
.amiens-3s p{
color: #ccc;
}
.amiens-3s h3{
box-sizing: border-box;
border: 1px solid #ccc;
padding: 0.5em;
color: #ccc;

}

タブレット表示になると、3つのセクションを横並びにする。

flexboxの指定をしてやれば、簡単にできる。

@media screen and (min-width: 600px) and (max-width: 961px) {
.amiens-3s{
padding: 0;
}
.amiens-3s div{
display: flex;
}
.amiens-3s div div{
margin: 50px 20px 50px 0;
width: 30%;
padding: 20px;
border: none;
}
.amiens-3s div div:first-child{
margin-left: 20px;
}
.amiens-jisseki,amiens-keiken,amiens-shidoryoku{
font-size: 500%;
color: white;
}
}

横並びにすると外枠のラインがうるさく感じるので、消すことにした。

ピクトグラムも、少し小さめに。

最後に、PC表示の設定をする。

@media screen and (min-width: 960px) {
.amiens-3s div{
display: flex;
}
.amiens-3s div div{
margin: 50px 0 50px 5%;
width: 30%;
border: none;
padding: 20px 0;
}
.amiens-3s div div:first-child{
margin-left: 0;
}
}

PC表示では左右のmarginを0にして、1060px幅いっぱいに表示させた。

追加修正

ここまでやってきて、STINGER8のSNSボックスを見るとtwitteやFacebook、Pocketのアイコンが表示されなくなっていた。

どうも干渉してしまったらしい。

そこでsns-top.phpの該当部分のクラス名を、fa ⇒ fabに変更。

<!--ツイートボタン-->
    <li class="twitter">
        <a onclick="window.open('//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton', '', 'width=500,height=450'); return false;"><i class="fab fa-twitter"></i><span class="snstext <?php echo $plug; ?>">Twitter</span><!--?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()=='0')?'<span class="snstext pcnone" -->Twitter':'<span class="snscount">'.scc_get_share_twitter().'</span>'; ?></a></li>
<!--Facebookボタン-->
    <li class="facebook">
        <a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank"><i class="fab fa-facebook"></i><span class="snstext <?php echo $plug; ?>">Facebook</span>
<!--?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'<span class="snstext pcnone" -->Facebook':'<span class="snscount">'.scc_get_share_facebook().'</span>'; ?></a></li>
<!--ポケットボタン-->
    <li class="pocket">
        <a onclick="window.open('//getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>', '', 'width=500,height=350'); return false;"><i class="fab fa-get-pocket"></i><span class="snstext <?php echo $plug; ?>">Pocket</span><!--?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'<span class="snstext pcnone" -->Pocket':'<span class="snscount">'.scc_get_share_pocket().'</span>'; ?></a></li>

これで、正常に表示されるようになる。

感想

fontawsomeを使うと、自分で画像を作ったりフリー画像をダウンロードしたりする手間が省けて、とてもお手軽だ。

-CMS, css, コンテンツ, 新着情報
-, ,

執筆者:

関連記事

レスポンシブ対応

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

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

ファストエバー

iPhoneの神アプリをおすすめ【2】FastEver

私のiPhoneのホーム画面1画面目に鎮座する神アプリを紹介するシリーズ。 1画面目のヘビーに使い込んでいるiPhoneアプリ 第2回目は、FastEverを紹介する。 FastEver 230円 f …

宮松さん

今日はザッポスの話も聞けるらしいので、楽しみだ

Tポイントは衰退していくのか?

蔦屋書店でカードが使えない!? Tポイントは衰退していくのか?

蔦屋書店でクレジットカードもモバイルTカードも使えない 先日、高知蔦屋書店でランチを食べたのだが、その時に気になったのが支払いにカードが使えないことだ。 高知蔦屋書店 ⇒ 広い店内に多数のテナント 高 …

段組

アイコンを大量に並べる ⇒ トップページの作り込み9

段組数を自動調整させる 過去の実績を表示するのに、fontawsomeを利用し整列させることにした。 fontawsomeの使い方は、以前の手法と同じだ。 ピクトグラムでアイキャッチfontawsom …