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

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

CMS css コンテンツ 新着情報

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

投稿日:

段組数を自動調整させる

過去の実績を表示するのに、fontawsomeを利用し整列させることにした。

fontawsomeの使い方は、以前の手法と同じだ。

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

ピクトグラム表示の際はスマートフォン表示では1つ、タブレット表示の時は3つを横並びにして表示させたためcssで段組をコントロールした。

今回はピクトグラムの幅は固定し、画面幅に合わせて段組数を自動調整させる。

fontawsomeの読み込み

HTMLはこうした。

<div id="amiens-13" class="amiens-black">
<div class="amiens-1060w">
<h2>過去の実績</h2>
<div id="amiens-13-01">
<div><i class="fas fa-search-dollar faa-pulse animated-hover"></i>

マーケティング

</div>
<div><i class="far fa-file-word faa-pulse animated-hover"></i>

レポート作成

</div>
<div><i class="far fa-envelope-open faa-pulse animated-hover"></i>

メールマガジン

</div>
<div><i class="far fa-paper-plane faa-pulse animated-hover"></i>

ステップメール

</div>
<div><i class="fas fa-bullhorn animated-hover"></i>

プロモーション

</div>
<div><i class="fas fa-ad faa-pulse animated-hover"></i>

adwords設定

</div>
<div><i class="fas fa-trophy animated-hover"></i>

コンテスト申請

</div>
<div><i class="fas fa-edit animated-hover"></i>

コピーライティング

</div>
<div><i class="fas fa-book-reader animated-hover"></i>

プレスリリース

</div>
<div><i class="fas fa-user-friends animated-hover"></i>

コンサルティング

</div>
<div><i class="far fa-trash-alt animated-hover"></i>

5S指導

</div>
<div><i class="fas fa-check-double animated-hover"></i>

GTD指導

</div>
<div><i class="fas fa-sort-alpha-down faa-pulse animated-hover"></i>

SEO

</div>
<div><i class="fas fa-user-check faa-pulse animated-hover"></i>

UX、UI構築

</div>
<div><i class="fas fa-mobile-alt faa-pulse animated-hover"></i>

スマートフォン対応

</div>
<div><i class="fas fa-map faa-pulse animated-hover"></i>

カスタマージャーニーマップ

</div>
<div><i class="fas fa-microphone-alt animated-hover"></i>

セミナー講師

</div>
<div><i class="fab fa-cc-paypal faa-pulse animated-hover"></i>

決済導入

</div>
<div><i class="fab fa-wordpress-simple faa-pulse animated-hover"></i>

wordpress構築

</div>
<div><i class="fas fa-key faa-pulse animated-hover"></i>

Microsoft Access構築

</div>
<div><i class="fas fa-database faa-pulse animated-hover"></i>

mySQL構築

</div>
<div><i class="fas fa-folder-open faa-pulse animated-hover"></i>

filemaker構築

</div>
<div><i class="far fa-file-excel faa-pulse animated-hover"></i>

データ分析

</div>
<div><i class="fas fa-store faa-pulse animated-hover"></i>

ショップ運営

</div>
<div><i class="fas fa-people-carry faa-pulse animated-hover"></i>

通販支援

</div>
<div><i class="fas fa-shopping-cart faa-pulse animated-hover"></i>

サイト制作

</div>
<div><i class="far fa-file-alt faa-pulse animated-hover"></i>

LPO

</div>
<div><i class="fas fa-user-secret faa-pulse animated-hover"></i>

GDPR対応

</div>
<div><i class="fas fa-camera faa-pulse animated-hover"></i>

写真撮影

</div>
<div><i class="fab fa-adobe faa-pulse animated-hover"></i>

画像加工

</div>
<div><i class="far fa-images faa-pulse animated-hover"></i>

バナー制作

</div>
<div><i class="far fa-file-video faa-pulse animated-hover"></i>

動画制作

</div>
<div><i class="far fa-file-audio faa-pulse animated-hover"></i>

ジングル制作

</div>
<div><i class="fas fa-server faa-pulse animated-hover"></i>

サーバー管理

</div>
<div><i class="fas fa-network-wired faa-pulse animated-hover"></i>

LAN設定

</div>
<div><i class="fas fa-cogs faa-pulse animated-hover"></i>

PC設定

</div>
<div><i class="fas fa-shield-alt faa-pulse animated-hover"></i>

セキュリティーアップデート

</div>
<div><i class="fab fa-php faa-pulse animated-hover"></i>

php開発

</div>
<div><i class="far fa-gem faa-pulse animated-hover"></i>

perl開発

</div>
<div><i class="fab fa-js faa-pulse animated-hover"></i>

javascript開発

</div>
<div><i class="fas fa-cart-arrow-down faa-pulse animated-hover"></i>

カートシステム構築

</div>
<div><i class="fab fa-internet-explorer faa-pulse animated-hover"></i>

ブラウザ動作確認

</div>
<div><i class="fab fa-facebook-square faa-pulse animated-hover"></i>

Facebook

</div>
<div><i class="fab fa-twitter-square faa-pulse animated-hover"></i>

twitter

</div>
<div><i class="fab fa-instagram faa-pulse animated-hover"></i>

instagram

</div>
<div><i class="fab fa-pinterest-square faa-pulse animated-hover"></i>

pinterest

</div>
<div><i class="fab fa-line faa-pulse animated-hover"></i>

LINE

</div>
<div><i class="fab fa-youtube-square faa-pulse animated-hover"></i>

youtube

</div>
<div><i class="fas fa-home faa-pulse animated-hover"></i>

自社ドメイン店舗

</div>
<div><i class="fas fa-registered faa-pulse animated-hover"></i>

楽天市場

</div>
<div><i class="fab fa-amazon faa-pulse animated-hover"></i>

amazon

</div>
<div><i class="fab fa-yahoo faa-pulse animated-hover"></i>

Yahoo!ショッピング

</div>
<div><i class="fab fa-ebay faa-pulse animated-hover"></i>

Qoo10

</div>
<div><i class="fab fa-weebly faa-pulse animated-hover"></i>

Wowma!

</div>
<div><i class="fas fa-anchor faa-pulse animated-hover"></i>

越境EC

</div>
</div>
<div class="amiens-600w">

ネットショップ運営に必要な全てのスキルに精通。

7年間実際にネットショップを経営した経験を活かし、100社以上に実務レベルの細かい指導をしてきました。指導を受けた企業から、厚い信頼を頂いています。経験と実績で、貴社ショップの売上アップにつなげます。

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

ピクトグラムのブロックを囲むwrapperを作るのがポイント。

このブロックに、flexboxを指定する。

#amiens-13{
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin-left: -5px;
}
#amiens-13 i{
font-size: 250%;
display: block;
padding-top: 10px;
}
#amiens-13-01 div{
box-sizing: border-box;
flex: auto;
border: 1px solid #444;
border-radius: 10px;
width: 107px;
margin: 0 0 10px 3px;
text-align: center;
display: inline-block;
vertical-align: top;
color: #aaa;
}
#amiens-13-01 div p{
padding: 0 3px 5px;
font-size: smaller;
}

自動的に段組が決定され、幅一杯に並んで表示されるようになる。

これでいいだろう。

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

執筆者:

関連記事

コード表示の最適化 ⇒ STINGER8設定その8

コードが見にくい preタグでコードを表示した時に困るのが、いまいち見づらいことだ。 コードのハイライト表示を導入したことで、多少は見やすくはなっていた。 google code-prettifyでコ …

ソーシャルリンク

ソーシャルアイコン追加-サイドバーメニューの成形(2) ⇒ STINGER8設定その4

ソーシャルアイコン追加 Facebookなどをやっていると、ホームページから誘導したくなる。 そこでリンク用のアイコンを表示させることにした。 いわいるソーシャルアイコンというやつだ。 随分前にホーム …

中小機構セミナー

高松でセミナー講師として8月7日登壇します

下記要領で開催されるセミナーの講師として、登壇することとなりました。 GMOメイクショップ株式会社代表取締役社長の向畑憲良様と一緒にお話しさせていただきます。 今回はまだネットショップをオープンしてい …

ビール券をプレゼント

ビール券が当たる!QUOカードも当たる!応募はフォロー&ツイートするだけ。簡単応募の365日懸賞、好評開催中。

ビール券をプレゼント ビール券を2枚組にして2名様にプレゼント★グイッと飲んじゃってくださいねw★応募はフォロー&ツイートするだけ。twitterで簡単に応募できます #365kD9YX #3 …

css適応前

サイドバーメニューの成形(1) ⇒ STINGER8設定その3

人気の投稿のバランスが悪い テーマをSTINGER8にしたら、jetpackサイドバーウィジットの「人気の投稿とページ」ウィジットがバランスが悪くなった。 cssで調整する まず「人気の投稿」のタイト …