投稿者「kid」のアーカイブ

いまさらwordpress導入 (XAMPPの設定方法)

XAMPPをローカル環境に構築し、wordpressを構築する

詳細なやり方は『ローカル環境 XAMPP』などで検索してキャプチャ付きのブログでも見てください。
ただしXAMPPのサイトがリニューアルされ『http://localhost/xampp/』や『http://localhost/security/splash.php』が見つかりません。
そのあたりを簡単に説明します。
されに過去に書かれた説明はwordpressの日本語化を指南してくれますが、「WordPress4.0」からはダッシュボードからボタン一発です。
現状(wordpress-4.3.1)では以下の方法が簡単です。

1.XAMPPのダウンロード

開発環境にあわせて下記よりダウンロードしてください。
XAMPP Installers and Downloads

2.wordpressもインストールしましょう

Bitnami for XAMPP
動画があります。特に迷わず「Recommended」されているバージョンでいいです。

3.PCを再起動してXAMPPを使用し、wordpressのダッシュボードを見てみましょう。

インストール直後は「Apache」「MySQL」のエラーが出がちです。一旦、PCを再起動してからテストしましょう。

  1. XAMPPを起動し、「Apache」と「MySQL」の『Start』ボタンをクリック
    エラーの場合は下部に赤文字でエラー内容がでたり、Moduleの背景色が緑色にならなかったりします。
  2. XAMPPがStartできたらローカル環境のwordpressにログインしましょう
    wordpressダッシュボード
  3. 日本語化はwordpressのメニュー「setting」からできます。
    日本語用のwordpressをダウンロードしてくる必要はなくなりました。languageを変更すると日本語のwordpressをインストールしてくれます。
    サイトの言語を変更すると『4.3.1–en_US』が『4.3.1–ja』に変わります。
  4. wordpressのテーマはローカル環境だとXAMPPの配下にあります。
    C:\xampp\apps\wordpress\htdocs\wp-content\themes
    ここの中で作られます。新しいテーマはこの中に突っ込めばok。

という感じです。

詳細なセキュリティ設定などをするにはphpMyAdminとか必要なんでしょうけど、とりあえずの設定はこれで作っていけます。

XMLHttpRequestでのAjaxでIE11に対応するために

IE11でのxml読み込み時にIE10以前と動作が変わっているようで、
これまでの分岐がうまくいかなくなっていた。

とりあえず、下記の3つを調査。
・window.XMLHttpRequest
・typeof document.documentElement.style.msInterpolationMode != “undefined”
・window.ActiveXObject

IE6 IE7 IE8 IE9 IE10 IE11 FireFox chrome Safari
window.XMLHttpRequest
document.documentElement.style.msInterpolationMode
window.ActiveXObject

※OSはそれぞれ、windows XP、Vista、7、8、8.1、Macで調査
ブラウザごとのOSによる違いはありませんでした。

結果は上記の通り。
IE11からはwindow.ActiveXObjectで分岐できるようです。

ちなみにUAは
if(ua.indexOf(“trident”)!=-1 && eval(ua.substr(ua.indexOf(“rv:”,0)+3,2))>=11 )
でok。

tumblrのまとめ、『セブンカフェの様子』がおもしろい!

明和電機さんがツイートしているところから発見したんですが、
『セブンカフェの様子』という写真まとめがとってもおもしろいです。

このまとめは何かと言いますと、
最近氷がないため売り切れとなっている店舗も出ている、
セブンイレブンに置いてあるコーヒー抽出器の写真がまとめてあるんです。

どこが面白いって?
各店舗迷わないような自家製の工夫がおもしろいのですよ。
これこそUIでUXの集積です。
デザイナーこそみなきゃダメです。
近所のおじいちゃん、おばあちゃん、旦那様、奥様などなど老若男女がどこに迷うのかよく分かる。

では、しかと見よ↓↓↓
#セブンカフェの様子

ワイヤーフレーム模写の100本ノック!

おもしろそうだったのでノってみることに。

■伸び盛りのWebディレクターに勧めたい「ワイヤーフレーム模写」
http://irritantis.info/2012/04/wireframe_training/

バぁーっとワイヤーフレームを書きながら、
「ほぅほぅ」とうなずいたり、
「へぇー」と感心したことを書き込む感じです。

トップページ + キーページのワイヤーを書くのは
慣れないと時間かかりますね。
目指せ100本です。

IE6用にリセットcssに入れておくといいもの

1.li要素に display: inline を指定する
http://d.hatena.ne.jp/grandVin/20090207/1234031192

2.ほかは共通でこんな感じ
—————————–

/*reset*/
body{
padding:0;
margin:0;
height:100%;
}
*{
line-height:130%;
font-family:Arial, sans-serif;
}
ol,ul,li {
margin:0;
padding:0;
list-style:none;
}
h1,h2,h3,h4,h5,form,p {
margin:0;
padding:0;
font-size:100%;
font-weight:normal;
}
img{
border:none;
}
—————————-

3.filterがかからない時は
http://blog.nomadscafe.jp/archives/000402.html

.inlineFilter{
*display:inline-block;/*IE6,7*/
_display:inline-block;/*IE6*/
*display:block;/*IE7*/
}

 

リセットをメモしておきたいがための記事でした。

スマホサイトでよく使う > を右端にいれたリスト

思いつきでcss3で再現してみたけど、
やっぱりIEではバージョン古いと出ないのがリンクの役割を果たしていないと思い断念。

background: no-repeat right url(img.png),linear-gradient(to bottom, #7ad362 0%, #59ab42 100%);

グラデーションは背景色ではなく画像として認識されていて、
css3では1つの要素に画像が2つ読み込める。
これを利用して右端の > 画像とグラデーションをaタグのみに適応してみました。

結果、
適応してみましたが、レスポンシブサイトであったためIEでも見たい、
さらにAndroidのバグ対応のためaタグのblock要素内にはdivタグを追加するので、
aタグにグラデーションを、divタグに画像を設置する普通な仕様となりました。

はたらきたい展

20130610-010254.jpg

はたらきたい展に行ってきました。
糸井重里さんのほぼ日の企画展です。

はたらきたいという本はとっても良い本なので働いている人もこれから働く人も読んで欲しいです。

そして、展示の最後にはこんな言葉が。
明日も頑張ってはたらこう!!

20130610-010811.jpg

Corona

Corona2

 

今日はコロナです。

一瞬、本物か?と思うくらい商品の説明がないです。
文章1枚で終了。コロナなんて知ってるだろ?というある意味エゴです。
NYのタイムズスクエアに広告あるのをテレビでみたのに。

代わりにNaverまとめにリンクしたり、
音楽を再生してムード作りに一役買ってみたり。
ちょっと想定外すぎです。いいんでしょうか?

海外系ビールシリーズもこれにて終了。

GUINNESS

Guinness

前回のバドワイザーに引き続き、
今日はギネスです。

ギネスさんはFlashでしたー。
が、スマホ対策というかFlashなしでも全然動きます。

そして、ギネスは飲食店内でもそうですが、
本当に見せ方が上手ですね。
その片鱗がAdsGalleryとしてみれます。

少し気になったのはメニューの数について。
いくつあるのかわからないというのが、
こういったサイトについては沢山あるという意味でいいんでしょうが、
一般的なサイトについてはマイナスに転じやすいですね。

また、h2レベルの見出しとパンくずがセンター寄せになっているのも独特ですね。
ロゴとナビとコンテンツのバランスを見てこうしたんでしょうが、なかなかできないですね。
慣れないものを見せて納得させられることもすごいです!