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

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

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

執筆者:

関連記事

H2タグ

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

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

Mavericksにアップデートすると空き容量が増える?

Mavericksにアップデートした Mac OS X の新しいバージョン「Mavericks」が出てからというもの、アップデートするべきか悩むことが多かった。 本来であればコンサルタントという立場も …

中小機構セミナー

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

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

ワードプレス

wordpressでedit.phpとplugins.phpが真っ白になるトラブル

「投稿」を表示しようとしても画面が真っ白になるトラブルが発生するようになった。edit.phpとplugins.phpでエラーが発生しているっぽい。手動で再度wordpressを全ファイルアップロード。結果、正常動作するようになった。

ツイッターvsフェイスブック

facebookにtwitterを連動させることは禁じ手なのか?

最近爆発的に普及してきたソーシャルメディア。 私もfacebook、twitter、mixi、GREE、myspaceなど、いろいろなSNSを利用している。 しかしそれぞれのSNSで個別に発言していく …