可変型2段カラムに苦戦してみた

実は、3日ほど前ゲッソリするほど、苦戦してたのって、
可変型2段カラムだったりして。
しかも、普段そんなにWebの仕事に時間をかけられなくて、
(一カ所でグラフィックの仕事もしてて、そっちがメインになってしまっていて、
印刷物の仕事どか!って盛られた合間にやってるから)
めんどくさかったらテーブルでさくっと組んじゃうことが多かったんだけど、
可変にしたかったり、
あとは100ページ似たようなページを作らないといけないってのがあって、
あんまりお粗末なものをつくると後で自分で修正するの億劫だわ…とか(笑)
というか、しっかりCSSで組んじゃった方が、
デザイン変更したくなったときもあっさりできるしね。
可変じゃないやつはあっさりできたんだけど、
可変にしようとするとカラム落ちがする。
へっぽこすぎて泣いた(*ノ_<*) 次回のときの自分用メモも兼ねて、 そんなときに役に立ちそうなリンクをペタペタしていく。 うさうさんが、まさに参考にしたページ 2カラムリキッドレイアウトのCSSサンプルソース|floatレイアウトサンプルソース
CSSによる2カラム(2段組)レイアウト【CSSによる段組(マルチカラム)レイアウト講座】
さっきみつけたら、むしろ1から読んだ方が良さそうなページ(笑)
法則51 2カラムの可変レイアウトにはネガティブマージンを使用する【クリエイターが身につけておくべき新・100の法則】
実は、作っていたページが
ページ自体(緑の枠)も2段カラムでメニューメイン部分は固定のメインは可変、
さらにその中にボックス(ピンクの枠)があってそこも固定と可変があるという構造でして。

ほぼ上のサイトのまま大きさとかは変えていれたら、
・ボックスの下に謎の余白
・iPadでみたときの幅だと、子ボックスが右がキレてる(´・ω・`)
この辺りは、やっぱり工夫が必要だったかも。
★ボックスの下に謎の余白
これは、ボックスの中のwropperのCSSとこに、

overflow:hidden

を入れる。
レスポンシブデザインで右側に謎の空白ができたときの解決策 | koukiTips
このページじゃないんだけど似たようなことを書いてあるページを見つけたんだよね。
理由は書いてあったような書いてなかったようなだけど、
とりあえず解決したのでいいかなと思う(笑)
★iPadでみたときの幅だと、子ボックスの右が切れてる
・まずは右のmarginを調節する
・次に、タブレットなどの場合のコンテンツをメタで指定してしまう。
どうしてもアメブロの制限でここには書けなかったので、
(全角にしてみるとかも試したけど全然書けなかった)
いちおう、これのことね。
マルチデバイス対応方法(viewport,CSSの出し分け)をまとめてみた | NEZU.log
もうこれの初期横幅を指定しまえ!作戦。
iPadの場合は拡大した場合も読み込んだ時の横幅のままなので、
とりあえずレイアウト崩れは防げそうなきがしてる。
Androidのチェックはまだだけど。
そんなこんなで、ある程度形になったので、あといくつかパーツを作ったら量産だわーーー。

macのローカルでphpを表示確認したい!

グラフィックの仕事の方が多い、へっぽこウェブデザイナーですが、
なんかついにPHPもある程度使わないとキツいかも。。。
実は、前に一度ちょこっとはPHPを使ったページを作ったことがあったんだけど、
そのときは、別に外部ファイルの読み込みとか特になかったから、
htmlで作って表示確認だけして、サーバーに上げて動作確認みたいな方法を
とっていたのだけど、
今回は、むしろ外部ファイルをいくつか読み込ませるためにPHPを使いたい!
ということで、いちいちテストサーバーにあげるのめんどうくさいよ(´・ω・`)
ってことで、どうにかこうにかPHPをローカルで見れない物かな~と思った次第でして。


★MacにApasheが標準搭載されてる!?
このあたりのサイトを見てみたら、
Mac OS X MavericksにApacheとPHPをインストールしてWebアプリの開発環境を作ってみる | 美徳という名の背徳
色々調べてみて、MacにはApacheがプリインストールされてるから、
ターミナルでApacheをスタートさせるだけでいいらしい。

$ sudo apachectl start

とタイプすればスタートするし、

$ sudo apachectl stop

とタイプすれば止まる
なんてかいてあったんだけど、
私のMacBook AirにはどうもApacheが入っていないらしく
not found的なメッセージを返してくる…。
マジカヨ(゚Д゚..)


★ MAMPなるソフトがあるらしい
ってことで、次に調べたら、
MAMPのインストール for Mac | 独学!未経験からWebデザイナーになる!!
をみて、MAMPをインストールしてみようかな…と、、、思ったけど、
FREE版はたぶん、15日限定?
(まぁそれでも作業は終わりそうだけど)
そして、有料版は5000円越え!って、、、サーバーにアップすればみれるものに、
お金なんて払ってられない。


★ XAMPPなるソフトもあるらしい
で、、、さらに調べたら
XAMPP for Macというのもあるらしい。
ということで、こっちをインストール。
普通にインストールパッケージになっているし、無償でお財布にやさしい。
詳しくは、インストール方法が現在とは異なっているけど、
この辺りをよんでもらったら良いのかなって思う。
MacにXAMPPをインストールしてPHPを実行するところまでのメモ | Time to live forever
基本的には↑を読んでもらえればいいと思うのだけど、
注意点としては、PORT:80を開けておかなければいけないから、
スカイプとかを常時立ち上げている場合は、
一度落とす必要があるらしい。
(↑のサイトで読んだのかと思ったら、なぜか無かったけど。。。どこで読んだのだろうか。
インストールする前に読んだから、普通に落としてから使い始めたんだけど、
実際に試しにスカイプを立ち上げてPHPを開こうとしたけれど、ソースコードしか表示されなかった。)
都度使う部分しか調べないからへっぽこなのは重々承知なんだけど、
PHPちゃんと勉強してみようかなぁ。

macのメールでniftyのimapを使いたいんですが。

★うさうさん的覚え書きです。
最近、いかがわしーーーーーーーいかんじの迷惑メールが、
メインで使っているniftyのメールに届くようになった。
前までこなかったのに朝昼晩3回同じ内容を送りつけてくるとかとかまじでうざい。
(違う内容でもいやだけどw)
初の迷惑メールフィルターの設定をniftyでしようと開いたら、
なにぃぃぃぃいつのまにかimap対応になってる!
月額使用料はかかるけど(-_-;)
ということで、imapの設定をすることにしてみた。
というのも、
設定する直前のスクリーンショットを取り忘れたので、
かなり前のだけど、
うさうさんのiPhoneをスクリーンショットでとるとね、

これまた、仕事上案外スクリーンショットを取って、
操作説明資料を作成をしたりもするのだけど、
いかにもメールを読んでない無精者っぽすぎる…orz
(これとか、かなり前だからまだ少なくて、直近ではそろそろ未読が1000行きそうなかんじだった)
いや、、、実際のところ、
日頃Mac×2台、iPhone、iPadを使っていて、
どれでも同じメールを読めるようにしているから、
実際のところ、案外どれかでは読んでいるんだけど、
きたときに手元にあった端末で読んでいるから全部に未読がたまっていく。
(Faceb○okとかTwitt○rとかAmazonとかのメールを除けば。。。
楽天のメールに至っては、メーラーにすら登録していない隔離アドレスで受信しているわけだけど。)
で、、、IMAPなメールなら、
どれか一つの端末で見れば他の全ての端末も既読になるのだけど、
POPだと、一つ一つの端末でみないと駄目みたいな。
そんなメンドクサイこともしたくないから、放置してたわけなのだけど、
突然うざいくらいに来るように迷惑メールのフィルタリング設定ついでに、
こちらも設定してみることに。
…が、、、iPhoneとiPadは1発でできたんだけど、
Mac×2台がすんなりできなかった
Σ(´ロ`lll

色々調べてみた結果、、、
オンライン状態で、設定をしようとすると、
Macちゃんがいきなりネットから設定を読み込んで
「ああ、POPのこれでいいのよね~」
ってかんじで、pop.nifty.comに自動でつないじゃうわけよ。。。
そこを一ひねりして、
敢えてWi-Fiを使っている方はWi-Fiを切る、
有線でつないでいるかたは、線を抜いてからの設定なら、
Macちゃんが、
「ねーねーそれってPOPなの?IMAPなの?それ以外?」
みたいなかんじできいてくるので、それで設定できまつ。
ポート番号とかは、公式どおりで良いかと。

IMAPパスの接頭辞は、メールをこのアカウントから送ろうとしたら、勝手に入った。
どうでもいいけど、imapにしたら、
フラグマークから、迷惑メール指定ができるようになったのはとってもGOOD

(そもそも、ことの始まりは突然くるようになった迷惑メールだっただけに。)
モザイクかけてるけど、コレ自体は原因の迷惑メールじゃないけどね。
原因の迷惑メールはもっと、いかがわしいやつ(-_-;)
実は、すっごい盲点的にたぶんiPod touchを使ってた頃、
gmailがimap対応になる前に設定したやつも、
すさまじい未読を放っていたので、それもついでにimapに設定。
独自ドメインで運用しているメールとかは、
POPにしかできないけど、そんなに来ないから、OK。
未読が一桁っていいw

iPhoneでドコモメールを使ったり、Wi-fiモデルのiPadでauメールを使ったり。

うさうさんね、ケータイはドコモのガラケー(P05-C)とiPhone5を持っていて、
もちろん、それぞれ電話番号と、メールアドレスが付与されているわけだけど、
正直ケータイのキャリアメールって、この1年ほとんど使ってないのよ。
最近連絡取り合っている人は、ほぼSkypeかFacebookかTwitterでメッセージを
飛ばしてくることがそもそも多いし、そうじゃなくても、
Mac2台、iPhone、iPad全部にくるPCメールが便利な訳で。
それでも、ドコモの方は10年以上変えてないから、
たまーーーーに学生時代の友達とか懐かしい人から連絡があるから、
とりあえず、3日に1回くらいはチェックするんだけど。(すくないw)
で、、、ドコモにメールが来たのをみても、
微妙に「お」の段とかだと5回ボタン押さないといけないの
すげーーーーメンドクサイなぁと思ってたわけだけど。
せめて、qwertyキーボードで打ちたいの。
$うさうさん(3ω3)的徒然日記。
qwertyキーボードってこういうのね。
ちなみに、去年の年末に契約したauのezwebのメールは、
ほとんど誰にも教えていないので、
妹が送ってくるのと、パソコンメールから送って、
(ドコモよりは見るって理由でw)
はじかれたときだけ、再送するのにつかってまつ。
でも、どの端末でも受け取れる、
1台しか受け取れないとかマジで不便なんですけど。
ってことで、とりあえず、複数台で受け取れるように試みてみる。
★まずは、iPhone、iPadでドコモのメールを受け取る編。

まぁ、あっちこっちのサイトで、やり方は書いてあるんだけど、ガラケーを使ってる前提で。
(スマホを使っている場合はまた別らしい。)
1.my docomoのアカウントを作る。前に作った覚えがあっても、IDもパスワードも覚えてねーよって人は、新規で作るにしたら良いです。
2.契約変更ページから、imode.netを申し込み(月額210円)
3.iPhoneアプリのiMocoをapp storeからインストール(450円)
4.my docomoで設定した、IDとパスワードを入力
ってことで、いきなり、660円かかったりするけど、
(さらに月額210円)
使うならまぁいいかなと。
使わなかったら、imode.netは解約するけど。
iMocoから使える絵文字の一覧はコチラ
まだ、ちゃんと使ってみたわけじゃないけど、
私はとりあえず、iPhoneから、最低限返信さえできればOKなので、いいと思う。
ドコモのケータイもSuicaを使っているって言うのが解約できない大きな理由なので、
普通に持ち歩いてはいるから、届くのが不安定とかいいんだ。別に。
★Wi-fiモデルのiPadでezwebのメールを送受信したい
正直これは、手順もなにも、
「iPadをiPhoneでデザリングした状態で」っていうのが味噌なだけで
(なんとなく、試してみたら出来ちゃった的な)
iPhoneにezwebのプロファイルをダウンロードするのと同じ全く手順。
公式をみれば良いのでやり方は割愛。
これで、日頃持ち歩いてる、iPhoneとiPadで両方で、
auとdocomoのメールが送受信できるようになるし、
キャリアメールもちょっとは使うようになるのかなぁ。


本気でどうでも、いいけど、
私のiPhone、基本ネット周りのことしかしてなくて、
通話が無料になる、数少ないauを使っているのを知っている、
最近会った友人1人と妹と母にしか、教えてないので、
Phoneじゃ全然ない(爆)(爆)
きっと「i」なんだと思う(謎)
電話は基本ドコモの方へーーーーなんだなぁ。
バッテリー的にもそれが正解以外の何者でもないんだけど。

bxsliderがIEで動かないときのチェックポイント。

うさうさんの自分用覚え書きもかねてます。。。
パソコンだけでなく、スマホでも動いて、
IEもOKのハズ…なjQueryスライダー
bxslider.com ※外部サイト
なんですが、safari(Mac/iPad/iPhone)、Firefox(Mac/Win)、Chrome(Mac/Win)OKときて、、、
例によって
IEでうごかねーーーーーー
ってあたりで、悩んでますた。
もうね、この件で、何度IE爆発しろって思ったか。
(正直IE6もあれだけど、、、9ですら…(´・ω・`))
うさうさん的には、Windowsユーザーの皆様も、
FireFoxまたはChrome推奨です。
最近印刷物の仕事ばっかりで、WebとかCSSとか
あんまりやってなかっただけに余計キツかったw
さてさて、本題。
うさうさんは、基本的に、上の大元のリンクと
このサイトを参考に、作っていて、
SUPER CHEMICAL:
jQuery 簡単かつ高性能なスライダー【bxslider】の設置
– Divスライド系の中では一番のオススメです。

とりあえず、動かないときの対処法として、


1 

$(document).ready(function(){

jQuery(document).ready(function($){

に変えてみる


2 オプションの最後のカンマはかならず取る。

speed: 7000,
pause: 5000,
controls: false,
auto: true,
pager: false

参考サイト
雑草空間:
jQuery が IE でうごかねぇーーー、って思ったので、メモっとく。


それでも、うごかなかったわけですが、、、
コレで動きました(爆)
3 IDとかclass名を間違えない(爆)(爆)(爆)
マジでバカみたいですが、これですた。
しかもIE以外はなんか動いちゃったからたちが悪い。
なんかわかんないけど、htmlのところのスライダー適用分の、
divをね、

div class="bx"
※半角の<>がつくんだけどpreとかcodeのタグを入れてもアメブロでは無視されるっぽいので、省いてます。

って書いちゃってたのよ。
コレでもsafariとか、Firefoxでは動いちゃうからわかんなかった。

div class="bxslider"

にしたら、普通に動いたってばよ(´・ω・`)
そもそもね、1ページにコールの部分で、

jQuery(document).ready(function($){
$('#slider1').bxSlider({

って書いてて、スライドさせたい画像を<div id=”slider1″>では囲ってるから、
全然気に止めてなかった。
正直、いるのかどうかわからんけど
div id=”slider1を囲っていた、div class=”bx”をdiv class=”bxslider”に変えたら動きますた。
本当にこれが原因なのかわかんないのだけど、
原稿が出るのが遅かったのもあって、半月悪戦苦闘して
(これだけやってたわけじゃなくて、中途半端な時間を利用して戦ってたんだけどw)、
なんかこれを変えたらOKだったのでメモ。


◆後日談◆
その後、どの段階でコピーしたかわかんない同じ構成の別ページも
うごいてなーーーーいってことに気づいたんだけど、
もしかして、ヘッダー部分の呼び出し部分が原因って可能性もなきにしもあらず。。。(爆)
ただね、何がイヤって、そのヘッダーだのクラスだの直す前から
safari、firefox、ChromeではMac同様に、WindowsでもIE以外は動いてるわけよ(;´Д`)

<script type="text/javascript" src="./lib/jquery.bxslider.js" charset="utf-8"></script>
※半角の<>とかがつくんだけどpreとかcodeのタグを入れてもアメブロでは無視されてエラーがでるっぽいので所々全角になってます。

かしらんね。もうわかんね。
動いたからいいってことにしてる。


◆後日談の後日談◆
もうね、テキトーすぎて恥ずかし過ぎるこの記事に毎日結構沢山の人が来て頂いて、恐縮するばかりです。
(消そうか悩むレベルで。結局何が原因だったのか核心をもっていえてないしw)
他の要素としては、jQueryのバージョンでひっかかっていたりとかするみたいですよ。
ってこわけで、リンクを貼って頂いてるブログにリンク張り返しちゃう(笑)
jQueryスライドショー「bxSlider」がIEで動かない場合の対処法 | いわしブログ
IE11 bxsliderが動かない : 小之介コーディングメモ
実は貼っていただいたお二方とも、jQueryのバージョンが問題で、
1.8.2にしたら動いたみたいです。
ちなみに、、、うさうさんが管理しているサイトは、どのヴァージョンが張ってるのかみたら、
1.7.2と、1.8.2をダブルではってありました。
どのタイミングで2つにしたかは謎(爆)(爆)(爆)
ご参考まで!

MacでWindowsのブラウザー確認がしたい!

うさうさん、、、へっぽこながらも、ウェブデザイナーもしています。
が、、、基本的にMac使いのうさうさんにとって、
とても頭の痛い問題が、IE(Internet Explorer)対応。
しかも、Appleマシーンだと、表示確認すらままならない!
と、、、思って、
基本は実機を借りてのチェックが多かったんだけど、
良いアプリがあった。
その名も
Sause.app
$うさうさん(3ω3)的徒然日記。
Windowsの場合、無料で100ページまでみれるっぽい。(斜め読みしかしてないけどたぶん。)
その他の料金設定はコチラ
使い方は簡単。
表示確認したい、OSとブラウザを選んで
$うさうさん(3ω3)的徒然日記。
URLを入れて、
$うさうさん(3ω3)的徒然日記。
待つだけw
(ちょっと反応が遅いのは仕方ないね。とくにポインターの動きがとっても鈍い。
ただ、実機をそれぞれ電源いれて…とかもろもろ考えるとこれでも決してすっごい遅いわけでもないかもという考え方もできるかも。あくまでも表示確認用という趣き。)
例えば、このブログをWindowsXPのIE6で見た場合。
$うさうさん(3ω3)的徒然日記。
うさうさんは日頃Mac版のSafariで見てる訳だけど、Windowsだと文字がカクカクっとしてるなーとかわかるわけです。
(ただ、さすがアメーバなので、レイアウトが崩れてないんだけど、
IEだけ、実際はなんでこうなった!?級のレイアウト崩れがしょっちゅうある。)
$うさうさん(3ω3)的徒然日記。
まぁ、、、実際にチェックしたサイトはこれじゃないんだけど、
思ったよりもちゃんと表示されてるっぽくて一安心。
ただ、jQueryやっぱ動いてなかった(ノД`)
IE的に正しいプログラムがしてあるならjQueryとかJavascriptも
遅いながらもこのアプリでちゃんと動きます。
前はブラウザー上でスクリーンショットを撮ってくれる的なので、
結構チェックしていたんだけど、
これだと、jQueryが動いてるとか動いてないとかもよく解るのが良いね。

ブログ用プラグインいろいろ。

なにげに6日間、美容院の仕事自体は予定があって振替てお休みなんだけど、、、なんか美容院のブログのアクセスアップとか楽しくなっちゃって、
うっかり仕事でやっているアメブロをいじり倒してみたり。。。
こういうのって日進月歩で1年たつと新しいサービスが増えるから、結局その都度やってくしかないんだよね。
まぁ、仕事中にやるほどでもないしね。
今後も自分の別ブログとかでつかってみようと思うブログ用プラグインの覚え書き。
なお、PC版のみだよーー。
http://www.linkwithin.com/learn
関連記事を出すための海外のプラグインなんだけど、派手派手しいバナーとか抜きに
シンプルにテキストで「You may also like those stories」ってでてくるだけなので、美観をそこねません
。あとは、自分のところの該当記事の画像とタイトルをいくつだすか選ぶだけ。
英語だけど、たぶん難しくはない。
アメブロにGoogle +1ボタンやfacebook「いいね!」ボタンなどをまとめて設置する方法
起業家・Webクリエイター☆菊地翼さんの記事から。このブログは必要なさすぎて設置してないんだけど、FACE BOOKのいいねボタンとか個人的には大好きなEVERNOTEのボタンとかを追加するプラグイン。サーバーは容易する必要あるけど、なかなか「いいね!」色々探してみたけど、自分的にはこれが一番よかったw
Twitterウィジェット
色々あるけど、とりあえず本家のやつ。
twitter2mixi
TwitterのつぶやきをMixiボイスやアメーバなうに転送。
あとは、アクセスアップにすげーーーシンプルな方法だけど、こんな方法もあるかも。。。
1。カテゴリーをしっかりわけておく
2。わけたカテゴリーのところをクリック。表示されたURLがそのカテゴリーのURLなので、、、
3。そのカテゴリーの記事を書いたときに、そのURLでリンクを貼ってその名前を「●●の記事一覧」にしておく。基本的にブログの記事内のリンクが一番押されやすいからねー(^^;パソコンで見てればなんでもいいけど、モバイルとかスマホだと記事は記事しかでてこないし。
一覧を記事でつくってもいいけど、ちゃんとカテゴリーわけされてるなら、一番ラクw
まぁ、、、このブログは、、、どうでもいいつぶやきなので、一つもやってないけど(笑)
複眼RSS
http://fukuganrss.blog27.fc2.com/

ケータイサイトをすげー簡単にスマホ対応させる。

うさうさん用覚え書き。
<へっど>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=2″>
↑一番はじめの<を半角に直す。
</へっど>
★ケータイサイトをテーブルの幅240を土台にして作っている場合作っている場合、このメタタグ無しだと、iPhone等のちょっと大きめディスプレイのスマートフォンなどでみたときに、最初の表示画面がかなり縮小されて表示されるけど、このメタタグを入れると、デバイスの幅で表示される。
Before
$うさうさん(3ω3)的徒然日記。
After
$うさうさん(3ω3)的徒然日記。
画像が携帯用に240幅だとガビガビなのは仕方ないね~
iPhone/iPodTouchの場合はよ小幅が320なので、両端が40ピクセルづつ空いて表示されるけど、まぁ、、、許せるレベル。
実際のところ土台のテーブルを320幅で設定してもケータイでは問題なく表示されるから、そうすれば背景色を変えているような部分はちゃんと前画面で表示されるけど、240合わせで作ったサイトだとなんか間抜けな表示になったりするから、自分的には240のままでいいw
ホントは320幅用に別に作るのが一番だけど。