Webマーケッター瞳 3rd＠第4話 [Webニュース]
Webマーケッター瞳の第4話が公開にになっています。下記リンクからどうぞ。
Web担当者Forum
http://web-tan.forum.impressrd.jp/e/2012/07/31/12987
ANAのネット戦略 [Webニュース]
ANAのネット戦略が解説されています。基本的なアクセス解析からSNS戦略まで、毎日40万ユーザが訪れるサイトの運営がほのかにわかります。
Bussines Media 誠
http://bizmakoto.jp/makoto/articles/1208/03/news096.html
モバイル・スマホのサイトチェックツール [Webニュース]
PCのバーチャル環境と言えば、IETesterなどがありますが、モバイル・スマホもテスト環境がああります。リンク先で2種類紹介されています。
海外SEO情報ブログ
http://www.suzukikenichi.com/blog/two-tools-useful-for-creating-mobile-websites/
Google・Microsoft・Yahoo四半期決算まとめ [Webニュース]
Q2の四半期決算が出揃いました。ここでは、主要検索エンジンの運営会社Google、Yahoo、Microsoftについて比較してみたいと思います。
【HTML･CSS】ブロック要素とインライン要素 [HTML・CSS]
HTMLにはブロック要素とインライン要素という2つの要素があります。名前はよく聞くけれどなんだかよくわからないという人も多いんじゃないでしょうか。そこで、HTMLの基本であるこの2つの要素についておさらいしてみたいと思います。
【Twitter Bootstrap】変形版タブメニュー [Twitter Bootstrap]
今回はタブメニューの変形版です。通常タブは上部にきますが、上下左右どこにでも配置できます。早速ソース。
<div class="tabbable tabs-below">
<div class="tab-content">
<div class="tab-pane active" id="tab1">中身はここよん</div>
<div class="tab-pane" id="tab2">中身はここだってば</div>
<div class="tab-pane" id="tab3">中身はここだから</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Menu1</a></li>
<li><a href="#tab2" data-toggle="tab">Menu1</a></li>
<li><a href="#tab3" data-toggle="tab">Menu1</a></li>
</ul>
</div>
基本構成は上部タブメニューと一緒です。大枠はDIV要素にtabbableクラス、中にコンテンツを表すDIV要素とメニューを表すUL要素。それぞれ、tab-contentクラスとnav nav-tabsクラスを設定。
タブの位置を替えるには、一箇所だけ変更します。大枠のDIV要素に指定しているクラスにtabs-belowを追加します。実はこれだけです。キャプチャをどうぞ。
タブが下部に移動しているのがわかります。同様に左の時はtabs-leftクラス、右の時はtabs-rightクラスを指定します。こちらもキャプチャをどうぞ。
これだけで上下左右好きなところにタブを持ってくることができます。お手軽ですね。
今回はこれでおしまい。次回はナビバーについてやります。
Googleパンダアップデート実行！影響は！？ [Webニュース]
Googleがパンダアップデートを実行したとのアナウンスが公式サイトであった。毎回のアップデートで右往左往するSEO担当者も多いはず。今回はカンタンにどのような影響がでるかまとめてみたい。
ECサイトに関するものは以下の通り。
- メーカー公式説明文をそのまま使用しないこと
- オリジナルな商品説明文を作成する
- ユニークで役立つコンテンツを
- 海外の通販サイトはどう対応した？
- ユーザーレビューをコンテンツとして取り入れる
SEMリサーチ
http://www.sem-r.com/seo/20120718113324.html
【Twitter Bootstrap】アイコン付きナビリスト [Twitter Bootstrap]
今回は、アイコン付きナビリストです。前回のナビリストにちょこっと付け足すだけでアイコン付きのメニューになります。
<ul class="nav nav-list"> <li class="active"> <a href="#">Home</a> </li> <li><i class="icon-book"></i><a href="#tab1" data-toggle="tab">MENU1</a></li> <li><i class="icon-stop"></i><a href="#tab2" data-toggle="tab">MENU2</a></li> <li><i class="icon-tags"></i><a href="#tab2" data-toggle="tab">MENU3</a></li> <li><i class="icon-heart"></i><a href="#tab2" data-toggle="tab">MENU4</a></li> <li><i class="icon-align-center"></i><a href="#tab2" data-toggle="tab">MENU5</a></li> <li><i class="icon-cog"></i><a href="#tab2" data-toggle="tab">MENU6</a></li> </ul>
ポイント
- <i>タグでアイコンを挿入
- アイコンの種類はクラスで指定
- どんなアイコンがあるかは、Twitter Bootstrapをダウンロードすると含まれているドキュメントからBaseCSSの最下部で確認
以上です。表示は以下のようになります。
メニューの左にアイコンが出ているのがわかりますね。 <i>タグだけで表示できます。
※ダウンロードしたTwitter Bootstrap内にアイコン画像が含まれています。フォルダツリーを変えると表示されませんので、注意です。
以上でアイコン付きナビリストはおしまい。次回は、タブメニューの変形版についてやります。
ロクナナワークショップ Summer Camp2012 [Webニュース]
ロクナナワークショップ「Summer Camp 2012 これからはじめる PC・スマートデバイス対応サイト制作の基本」セミナーイベント開催
記事↓
http://gihyo.jp/design/serial/01/67ws/0088
Firefox 14正式版リリース [Webニュース]
Firefox 14の正式版がリリースされたとのこと。
Google検索の暗号化やOS X Lionでのフルスクリーン表示がある。
記事↓
http://www.itmedia.co.jp/news/articles/1207/18/news026.html
Google Panda？ [Webニュース]
【Twitter Bootstrap】ナビリスト [Twitter Bootstrap]
はい、今回のTwitter Bootstrapはナビリストです。
まず、ソース。
-↓ソース------------------------------------------------------------------------
<ul class="nav nav-list">
<li class="nav-header">
List header
</li>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">MENU1</a>
</li>
<li>
<a href="#">MENU2</a>
</li>
<li>
<a href="#">MENU3</a>
</li>
<li>
<a href="#">MENU4</a>
</li>
</ul>
</div>
-------------------------------------------------------------------------
■ポイント
・全体を、navクラス、nav-listクラスを設定したUL要素で囲う
・ヘッダ(リストのタイトル)はnav-headerクラスを設定
・あとはLIで要素を書く
これだけでデザインされたナビリストができます。
表示は以下のよう。
メニューによっては区切り線を入れたい場合もありますよね。
その場合は以下のようにdividerクラスを設定したLI要素を追加します。
そうすると以下のようになります。
お手軽ですね。
以上で、今回のナビリストは終了です。
次回はアイコン付きのナビリストをやります。
次期OS X Moutain Lion、7月25日リリースか？ [Webニュース]
スマホとフィーチャフォンに最適化したサイトの作り方 [Webニュース]
Googleがスマホとフィーチャフォンに最適化したサイトの作り方を発表しています。
記事↓
http://www.suzukikenichi.com/blog/building-websites-optimized-for-smartphones-and-feature-phones/
米Yahoo!、新CEO就任 [Webニュース]
MS Office一般ユーザ向けプレビュー版、公開 [Webニュース]
MS Officeのプレビュー版が公開。
スレートPCでの操作が可能になったことが特徴とのこと。
記事↓
http://www.forest.impress.co.jp/docs/news/20120717_547136.html
【Twitter Bootstrap】ドロップダウン付きタブメニュー [Twitter Bootstrap]
Twitter Bootstrap、今回はドロップダウンとタブの合わせ技です。
早速ソース。
-↓ソース-------------------------------------------------------------------------------
<ul class="nav nav-tabs">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">MENU0</a></li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>内容はここだよーん</p>
</div>
<div class="tab-pane" id="tab2">
<p>ここですよー。</p>
</div>
<div class="tab-pane" id="tab3">
<p>ここだってばよ。</p>
</div>
</div>
----------------------------------------------------------------------
基本的な構成はタブメニューと同じですね。↓(タブメニューの回)
http://webmaster-road.blog.so-net.ne.jp/2012-07-15-1
さて、ドロップダウンをつけたいので、 LI要素内のA要素に、dropdown-toggleクラスを設定します。
また、 data-toggle="dropdown"の記述を追加します。
あとはdropdown-menuクラスをつけたUL要素内にリストを書くだけです。
表示は以下のようになります。
タブメニューにドロップダウンが追加されているのがわかります。
これもtab-pillsクラスに変えると、以下のように変わります。
これでドロップダウン付きタブメニューはおしまいです。
次回は、 ナビリストをやります。
Facebook新機能「Open Graph」の威力とは [Webニュース]
Facebookに新たな機能「Open Graph」が加わりました。
一から解説しています。
簡単に言うと、「〇〇が△△を□□しました」と動詞の部分が追加できるようになったとのこと。
詳しくは記事をどうぞ。
記事↓
http://ascii.jp/elem/000/000/707/707975/
Ameba、スマートフォン向けサービスを展開へ [Webニュース]
これまでフィーチャフォン中心だったAmebaのサービスを拡大するとのこと。
記事↓
http://www.itmedia.co.jp/news/articles/1207/13/news119.html
三軒向こうは赤の他人 [Webニュース]
Facebookでフレンズの2％しか隣近所の人がいないという事実。
これを解決するために作られたのが、米国の小規模コミュニティー向け掲示板「Topix」。
これはなかなかおもしろい試みですね。
記事↓
http://wired.jp/2012/07/13/neighborhood-social/
クリエイティブ・コモンズ画像検索＠CCFinde [Webニュース]
CCFindeというサービス。
Flickerしか検索できない、メールマガジンの登録必須などの条件はあるようですが。
記事↓
http://www.lifehacker.jp/2012/07/120713ccfindercc.html
【Twitter Bootstrap】スタッカブルタブメニュー [Twitter Bootstrap]
Twitter Bootstrap、今回はスタッカブルタブメニューです。
-↓ソース----------------------------------------------------------------
<ul class="nav nav-tabs nav-stacked">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#tab1" data-toggle="tab">MENU1</a></li>
<li><a href="#tab2" data-toggle="tab">MENU2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>内容はここだよーん</p>
</div>
<div class="tab-pane" id="tab2">
<p>ここですよー。</p>
</div>
<div class="tab-pane" id="tab3">
<p>ここだってばよ。</p>
</div>
</div>
-----------------------------------------------------------------
前回のタブメニューのソースと比較してみてください。↓
http://webmaster-road.blog.so-net.ne.jp/2012-07-15-1
実はUL要素にnav-stackedクラスを追加しただけです。
ちなみにstackとは積み重ねるという意味です。
タブメニューを縦に積み重ねるということですね。
表示は以下のようになります。
また、前回同様、nav-pillsクラスに変更すると以下のように変わります。
以上がスタッカブルタブメニューです。
次回は、ドロップダウン付きタブメニューです。
maru さん
-
nice! 13
記事 204
テーマ パソコン・インターネット
プロフィール
ブログを紹介する
