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

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

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, コンテンツ, 新着情報
-, ,

執筆者:

関連記事

MacBook Pro with Retina Display

MacBook Pro with Retina Displayを設定した3日の戦い

MacBook Pro with Retina Display MacBook Pro with Retina Displayを購入した。 macでは実に4年ぶりとなるリプレイスで、今回初めてtime …

Format Link

引用を効率化するため拡張機能Format Linkをgoogle Chromeに入れる ⇒ STINGER8設定その7

他のサイトからの引用の仕方 ブログを書く時に、他のサイトから引用することは多い。 この時に気をつけるべきなのは、SEO的な視点だ。 引用する時にblockquoteタグを使わないと、googleからマ …

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

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

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

HDMIケーブル

HDMIケーブルにて価格破壊を考える

11月の話で恐縮だが、テレビを買った。 ご多分に漏れず、エコポイントを意識して駆け込みで購入したのだ。 ところが、その時点でテレビの納期が1ヶ月先とのこと。 そりゃあないでしょ! という気持ちになった …

foursquare

foursquareのiPhoneアプリからfacebookにポストできなくなったよ

位置情報サービスとして多くの利用者が使っているfoursquareだが、1ヶ月前くらいからfacebookにポストできなくなった。 いろいろ試してみると、どうやら認証方式が変わったのに自動対応していな …