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

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

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設定その11

ロゴを表示する STINGER8にして、アミアンインターナショナルのロゴが表示されなくなった。 これは少々まずい。 そこで、背景画像として表示させるようにした。 スマートフォン スマートフォンでは、現 …

ページで100%幅表示を可能にする ⇒ STINGER8設定その14

100%幅の表示を可能にする STINGER8では100%幅のコンテンツを表示できないので、固定ページは可能になるように設定する。 サイドバーを消し、幅を制限している設定をクリアしていく。 page. …

ワードプレス

IEでJavaScriptエラーが出たトラブルシューティング

このブログはwordpressで制作しているのだが、当初よりIEで見るとJavaScriptエラーが出て困っていた。 いろいろバタバタしていてしばらく放置していたのだが、時間がとれたので見直してみた。 …

H2タグ

H2タグを修飾 ⇒ STINGER8設定その9

H2タグの設定 サイドバーのデザイン設定はひとまず終えたので、コンテンツエリアの設定を始める。 まず気になっていたのが、H2のバランスが悪いことだ。 STINGER8のデフォルトでは、上下にsolid …

iphone4s

Siriちゃんで話題沸騰のiOS5.1の本当のキモはバッテリーの長寿命化だった

iOSが5.1にアップデートされたのが3月8日。 それからというもの、iPhone4Sユーザーの間ではもっぱらSiriの日本語化の話題で持ちきりだった。 今まで英語、フランス語、ドイツ語でしか使えなか …