いろいろな端末の画面サイズを確認する

VIEWPORT RESIZER
ブラウザでPC、ノートブックやスマートフォン、タブレットの縦横それぞれ確認できます。
とてもスマート（使いやすく優れてデザイン）なものです。
是非、ブックマークをお勧めします。

利用方法は簡単で、下記サイトを訪れてブックマークします。
この時にツールバーに入れると便利です。
http://lab.maltewassermann.com/viewport-resizer/

調べたいサイトを表示したら、ブックマークしたVIEWPORT RESIZERをクリックする。
サイトの上に黒いバー表示するのでそれぞれのアイコンをクリックしてサイズを見る。

世界中の多くのクリエーターが利用しています。

ウェブサイトのsidebar《サイドバー》は何のためにあるか？

ウェブサイトの制作において、第二レベル以降ではこのようなレイアウトが広く使われていて、コーラルでもわりと使用頻度の多いレイアウト。

ウェブサイト　レイアウト

ウェブサイトの代表的なレイアウトのひとつ。

「サイドバー」は何のためにあるのか？

基本的には、そのとき表示されているページだけでなく、他のページも見てもらえるようにするための場所、さらに欲張ると、ウェブサイト全体を見てもらう、最も見てほしいページへ訪問者を誘導するためのコンテンツを配置する場所と言える。

ただし、そのサイトの種類（例：ECサイト、ブログ等）によって、入れるコンテンツは異なる。例えば、特定の商品・サービスを紹介するサイトであれば、以下のような内容が考えられる。

  • サイト内各ページのコンテンツ概要およびリンク
    グローバルナビゲーションのみでは伝わり難い各ページの内容が、ぱっと見で分かるように掲載すると効果的
  • 最も見てほしいページへのリンク
    印象的なバナーを使用するなどしてクリック率を高め、サイト内回遊を促す
  • 運営する他のサイトや利用しているSNSにとぶバナー、スポンサーの広告等

WordPressでパーマリンクの設定を変更したら403エラーなとき

WordPressで、設定→パーマリンク設定で設定を変更したら、403エラーで画面が真っ白。こういうのは心臓に悪いですね。今回はCPIのサーバで発生、大丈夫なサーバも有り。

.htaccessに下記の文字列を加えればOK！という内容を掲載していてくれたサイトが閉じてしまったのでここにメモ。

Options +FollowSymLinks

ちなみに、パーマリンク設定で設定を変更して403エラーなときに、.htaccessに追記されていたのは以下の内容。

RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

最終的には、.htaccessの中身を以下のようにすることで解決。

suPHP_ConfigPath /usr/home/サーバ番号/html/　←php.iniの場所
AddHandler x-httpd-php524 .php　←phpのバージョン指定
Options +FollowSymLinks　←手動で追加の一行
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress

ドットから始まるおかしなファイルのくせに（しかもPCで認識されない）、恐るべし、.htaccess。ていうか、何か面倒なことが起こったとき、.htaccessの記述に原因があることが多いような…。

WordPress Twitter Bootstrap 1200pxは幅広すぎると思うとき

WordPressのテーマ「Twitter Bootstrap」は、大きなスクリーンで見たときのデフォルトは1200px。ブログとして使おうとしたらちと広いので調整。

htmlとか/wp-content/themes/bootstrap/css/bootstrap.min.css

このファイルの、727行あたりにある「@media (min-width:1200px)」から始まる記述をエスケープすると、でかいスクリーンでも980pxくらい（恐らく正確には979px）の表示になる模様。

横幅の変更、もっといい方法があったら教えてください。
ちなみに私はこの部分をエスケープしました。


/*@media (min-width:1200px){.row{margin-left:-30px;*zoom:1;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} [class*="span"]{float:left;margin-left:30px;} .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px;} .span12{width:1170px;} .span11{width:1070px;} .span10{width:970px;} .span9{width:870px;} .span8{width:770px;} .span7{width:670px;} .span6{width:570px;} .span5{width:470px;} .span4{width:370px;} .span3{width:270px;} .span2{width:170px;} .span1{width:70px;} .offset12{margin-left:1230px;} .offset11{margin-left:1130px;} .offset10{margin-left:1030px;} .offset9{margin-left:930px;} .offset8{margin-left:830px;} .offset7{margin-left:730px;} .offset6{margin-left:630px;} .offset5{margin-left:530px;} .offset4{margin-left:430px;} .offset3{margin-left:330px;} .offset2{margin-left:230px;} .offset1{margin-left:130px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";} .row-fluid:after{clear:both;} .row-fluid [class*="span"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.564102564%;*margin-left:2.510911074638298%;} .row-fluid [class*="span"]:first-child{margin-left:0;} .row-fluid .span12{width:100%;*width:99.94680851063829%;} .row-fluid .span11{width:91.45299145300001%;*width:91.3997999636383%;} .row-fluid .span10{width:82.905982906%;*width:82.8527914166383%;} .row-fluid .span9{width:74.358974359%;*width:74.30578286963829%;} .row-fluid .span8{width:65.81196581200001%;*width:65.7587743226383%;} .row-fluid .span7{width:57.264957265%;*width:57.2117657756383%;} .row-fluid .span6{width:48.717948718%;*width:48.6647572286383%;} .row-fluid .span5{width:40.170940171000005%;*width:40.117748681638304%;} .row-fluid .span4{width:31.623931624%;*width:31.5707401346383%;} .row-fluid .span3{width:23.076923077%;*width:23.0237315876383%;} .row-fluid .span2{width:14.529914530000001%;*width:14.4767230406383%;} .row-fluid .span1{width:5.982905983%;*width:5.929714493638298%;} input,textarea,.uneditable-input{margin-left:0;} input.span12, textarea.span12, .uneditable-input.span12{width:1160px;} input.span11, textarea.span11, .uneditable-input.span11{width:1060px;} input.span10, textarea.span10, .uneditable-input.span10{width:960px;} input.span9, textarea.span9, .uneditable-input.span9{width:860px;} input.span8, textarea.span8, .uneditable-input.span8{width:760px;} input.span7, textarea.span7, .uneditable-input.span7{width:660px;} input.span6, textarea.span6, .uneditable-input.span6{width:560px;} input.span5, textarea.span5, .uneditable-input.span5{width:460px;} input.span4, textarea.span4, .uneditable-input.span4{width:360px;} input.span3, textarea.span3, .uneditable-input.span3{width:260px;} input.span2, textarea.span2, .uneditable-input.span2{width:160px;} input.span1, textarea.span1, .uneditable-input.span1{width:60px;} .thumbnails{margin-left:-30px;} .thumbnails>li{margin-left:30px;} .row-fluid .thumbnails{margin-left:0;}}*/

マックメールの文字化け

新しいマックにしてメールを使い始めたところWindows XPの方からのメールが文字化けしていた。
検索で調べたところ「かけつけサポート」という方が簡単な方法で対策できる案内をしていました。
http://www.it-a.jp/2011/03/mail-trouble-mac/

ターミナルで下記を入力しリターンをするのみです。

defaults write com.apple.mail NSPreferredMailCharset “ISO-2022-JP”

OS10.8　メールバージョン 6.1

Google Analytics イベントトラッキングを確認

イベントトラッキングを設定して計測しているファイル（PDF、AVI、WMV）のダウンロードクリック数を見るとき。

ログイン → コンテンツ → イベント　で確認。

Google Analyticsのイベントトラッキング

Google Analyticsのイベントトラッキング。この画像をクリックすると拡大画像が見られます。

イベントが複数あれば、「上位のイベント」、「ページ」、「イベントフロー」などそれぞれの項目で詳しい解析が可能。