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

fontawsome

ピクトグラムとは

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

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

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

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

fontawsomeとは

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

Get 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を使うと、自分で画像を作ったりフリー画像をダウンロードしたりする手間が省けて、とてもお手軽だ。

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

ピクトグラムとは

fontawsomeとは

fontawsomeの読み込み

実装

追加修正

感想

関連

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