▲PAGE TOP

2014年5月1日木曜日

画像を使わずに自動的に選んだアイコンが表示されるメニューを作る



  1. HTMLテンプレートの<heaer>....</header>の間にタグ(1)を挿入する
  2. アイコンを表示させる場所に<i class="fa ★★★ fa-fw"></i>を挿入する
  3. ★★★部分を表示させたいアイコンNo.に変更する(サンプルタグ参照)
  4. 保存して終了
情報元サイト:http://fortawesome.github.io/Font-Awesome/

アイコンとアイコンNo.の一覧
http://fortawesome.github.io/Font-Awesome/icons/

アイコンをカズタマイズ例(大きさや回転など)
http://fortawesome.github.io/Font-Awesome/examples/

CSSでアイコン色を変更する
<style>
#任意のdiv要素 {
color: 任意の色 ;
}
</style>


タグ(1)
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">


サンプルタグA

<style>
#google-gadgets a {
font-size: 14px ;
color: #ffffff ;
text-decoration: none ;
}
#table-google{
width: 100% ;
background-color: #cc3732 ;
}
#td-google{
width: 100% ;
background-color: #ffffff ;
}
</style>
<p></p>
<div id="google-gadgets">
<table id="table-google" cellpadding=1 cellspacing=1>
<!-- ▼▼ Gmail ▼▼ -->
<tr><td id="td-google"><table id="table-google" cellpadding=5px><tr><td>
<a href="https://mail.google.com" target="_blank">
<i class="fa fa-envelope fa-fw"></i>GMAIL メールを確認する
</a>
</td></tr></table></td></tr>
<!-- ▲▲ Gmail ▲▲ -->
<!-- ▼▼ Calendar ▼▼ -->
<tr><td id="td-google"><table id="table-google" cellpadding=5px><tr><td>
<a href="https://www.google.com/calendar" target="_blank">
<i class="fa fa-calendar fa-fw"></i>Googleカレンダー
</a>
</td></tr></table></td></tr>
<!-- ▲▲ Calendar ▲▲ -->
<!-- ▼▼ maps ▼▼ -->
<tr><td id="td-google"><table id="table-google" cellpadding=5px><tr><td>
<a href="https://maps.google.co.jp/" target="_blank">
<i class="fa fa-map-marker fa-fw"></i>Googleマップ
</a>
</td></tr></table></td></tr>
<!-- ▲▲ maps ▲▲ -->
<!-- ▼▼ drive ▼▼ -->
<tr><td id="td-google"><table id="table-google" cellpadding=5px><tr><td>
<a href="https://drive.google.com/" target="_blank">
<i class="fa fa-cloud-upload fa-fw"></i>Googleドライブ
</a>
</td></tr></table></td></tr>
<!-- ▲▲ drive ▲▲ -->
</table>
</div>

サンプルタグB
<style>
#staffsite-gadgets a {
font-size: 14px ;
color: #ffffff ;
text-decoration: none ;
}
#table-staffsite{
width: 100% ;
background-color: #0078ff ;
}
#td-staffsite{
width: 100% ;
background-color: #ffffff ;
}
#tr-staffsite-title {
width: 100% ;
background-color: #1260b7 ;
}
#font-staffsite-li {
font-size: 12px ;
}
#table-staffsite-li{
width: 100% ;
margin-left: 5px ;
}
</style>
<p></p>
<div id="staffsite-gadgets">
<table id="table-staffsite" cellpadding=1 cellspacing=1>
<tr><td id="td-staffsite">
<table id="table-staffsite" cellpadding=5px>
<!-- ▼▼ Website name ▼▼ -->
<tr id="tr-staffsite-title"><td>
<a href="http://staffonly.★★★★★★.com">
<i class="fa fa-bookmark fa-fw"></i>スタッフ専用サイト
</a>
</td></tr>
<!-- ▲▲ Website Name ▲▲ -->
<tr><td>
<table id="table-staffsite-li" cellpadding=2>
<!-- ▼▼ Post new article ▼▼ -->
<tr><td>
<a href="https://www.blogger.com/blogger.g?blogID=★★★★★★#editor" target="_blank">
<i class="fa fa-pencil fa-fw"></i><font id="font-staffsite-li">新しい記事を投稿する</font>
</a>
</td></tr>
<!-- ▲▲ Post new article ▲▲ -->
<!-- ▼▼ List of all articles ▼▼ -->
<tr><td>
<a href="https://www.blogger.com/blogger.g?blogID=★★★★★★#allposts" target="_blank">
<i class="fa fa-list fa-fw"></i><font id="font-staffsite-li">投稿した記事の一覧を見る</font>
</a>
</td></tr>
<!-- ▲▲ List of all articles ▲▲ -->
<!-- ▼▼ Add entering staffs ▼▼ -->
<tr><td>
<a href="https://www.blogger.com/blogger.g?blogID=★★★★★★#basicsettings" target="_blank">
<i class="fa fa-user fa-fw"></i><font id="font-staffsite-li">閲覧スタッフを追加/削除する</font>
</a>
</td></tr>
<!-- ▲▲ Add entering staffs ▲▲ -->
<!-- ▼▼ Setting ▼▼ -->
<tr><td>
<a href="https://www.blogger.com/blogger.g?blogID=
★★★★★★#overview" target="_blank">
<i class="fa fa-gear fa-fw"></i><font id="font-staffsite-li">管理ページ</font>
</a>
</td></tr>
<!-- ▲▲ Setting ▲▲ -->
</table>
</td></tr>
</table></td></tr>
</table>
</div>











COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)