1月6日

■新しい年になったようですね

あけましておめでとうございます。
今年も良いお年を・・・

じゃなくてよろしくお願いします。

年末の「よいおと・・・」の変換履歴が残っていたせいと思うが、
年末のご挨拶を年始に兼ねるという便利な文言な気がしなくも。

いや、そんな事はないか。

■塩さばの定食がたべたくなったわけ

学校の繋がりで今更ながらにしてLINEを初めてみたのだけど、
Skypeでよくね?という当初の思う通りの。
よくね、というかSkypeの方が使いやすい(見やすい)。

吹き出しとかにしなくていいし、スタンプとかいらないしー
300円とかで売ってるの、自分で描くからむしろ買ってほしいくらいだわw

4e0e80cf7613d6c6c3456990eb9e6119

500円でどうですか、
いや、言い過ぎました350円でいいです、3割引。

メールが面倒だとかいう気持ちはわからくもないけれど、
新しく同じ様なサービスを用意する必要性が??なのだが。
そしてそれが流行るのが更に謎すぎる。

くどいようだけどSkypeでよくね?
同じ用途のためにSkypeとLingerとLINEを使い分けるとか、
面倒くさいったらありゃしない。

んま、ようする企画側からしたら、いままでメッセンジャーを使ったことない人たちに、さも新しい事を初めた様に思わせる、ていう事なんですよね?

どのへんの層がそれに該当していて、その人達の趣向とか感覚とかそいうところから逆算した結果、端末の電話帳を勝手に引っこ抜いてバラまく事を是とする仕様に行き着いたのだと思われる。
乱暴な言い方かもしれないが、結果としてはそれに近い。

メアドを登録しないと使えない不便なキャリアメールに対して、自動で全部やってくれんの?ちょー便利なんだけど~ていう感覚が当たり前な層が少なくないからこそLINEが流行ったわけで、これがSkypeユーザーに対してうちのほうが便利なんです~とアピールしたところで、電話帳勝手に抜くとかキモチ悪いのつかえねーです、で終わりそうなもの。
悪ければ「さすが韓国企業やることがエゲつない」くらいの事いわれて会社が危うくなる事態になってもおかしくなくて、「ユーザーに誤解を与え・・・」みたいな謝罪会見まで添えての不祥事フルコースと紙一重。

手元にある種がどうやったら実になるのか、
季節とか、育て方とか、食べられるのかとか、まぁ色々あるわけですが、
まず種を植える場所を間違えたら、それ以前に芽がでない。

漁師のとこにサバを持って行ってもありがた迷惑どころか「こんな目の死んだ魚もってくんじゃねー」な話なところ、猟師のとこに持っていけば物珍しく夜ごはんのごちそうになるわけですよ。

まぁということですね、つまり。(たぶん

サバを悪くいうつもりはなくて、
むしろサバは大好きです。
マグロよりサバの方が高級魚でもいいくらい。

大根おろしがついてると、気が利いてるなーと思います。

■サイドメニューをゴニョゴニョする

背景は白のままでよくて、左のメニューに季節っぽい色をつける。
あぁそうかそうしよう、それっぽい画像をハイキーにしてみたり。

タイトルのとこも同じ様にした方がいいのか、
あんまりあちこちいじると化粧し過ぎなおねいさんみたいな事になる罠。

すっぴん上等。

うむ。

12月23日

■リンクを無効にする方法

右メニュー

子メニューを作ると、親メニューは子メニューを開くだけの動作が望ましく、
親クリック時に該当箇所にスクロールするのは意図するところではないので、
親のリンクだけを無効にしたいよね、という流れになるわけです。

そこだけCSSを上書きすればという助言を頂いたものの、
その時はなんとなく理解した様でいて、それは眠気による勘違いだったという。

メニューの構造上親にaタグが無いと子が開けないわけで、
つまりボタンをaタグの背景からliの背景にした所で変わらず、
画像リンクにしてもやはり子が開けない事態は避けられない。

「aタグは無効にしたくないが、画面遷移は無効にしたい」
というのが求めるところ。

結局、「css リンク 無効」であっさり調べがついたのだけれど、※
検索の仕方が悪いのか、グーグル先生とは言葉の趣味が合わない様です。

あと、子メニューがありますよ的な下矢印とか付けてあげると、
デザイン的におしゃれな感じになるのかもしれないが、
シーケンス的には親クリック以外に無いわけで無用な気がしなくも。
コンテンツによって子の有り無しが発生するなら矢印必須なのだが。
(オリジナルでは矢印つき)

あれがこれがと付け足していくと、
中途半端にCSS3が混じっていく事になり、後々の災いの素的な匂いがw

1)表示しているページ(About)のリンクを無効にする
→bodyにidをつけてそのページだけCSSを適応
http://coliss.com/articles/build-websites/operation/css/css-tips-pointer-events-current-navigation.html

//HTML
<body id=”about”>
<nav>
<ul>
<li class=”home”><a href=”#”>Home</a></li>
<li class=”about”><a href=”#”>About</a></li>
<li class=”clients”><a href=”#”>Clients</a></li>
<li class=”contact”><a href=”#”>Contact Us</a></li>
</ul>
</nav>

//CSS
#about nav .about > a {
pointer-events: none;
cursor: default;
}

2)任意のページ(Home)のリンクを無効にする
→該当するaにclassつけて「pointer-events: none;」「cursor: default;」をCSSに
http://ja.forums.wordpress.org/topic/12181?replies=22

//HTML
<nav>
<ul>
<li class=”home”><a class=”no-links” href=”#”>Home</a></li>
<li class=”about”><a href=”#”>About</a></li>
<li class=”clients”><a href=”#”>Clients</a></li>
<li class=”contact”><a href=”#”>Contact Us</a></li>
</ul>
</nav>

//CSS
.no-links{
pointer-events: none;
cursor: default;
text-decoration:none;
}

CSS3だからnavないと効かないとかないよね?

※ 追記
2)の方やってみたところ、
リンク無効→クリック出来ない→子メニューが開けなくなり。
navタグがないとやはりだめなのか、別の要因なのか。
1)の方はその挙動で問題ないのだけど。

仕方なく、href=”"を空にしてみたらそれでOKという・・え、それでいいの?
まぁ理屈からしたら当たり前の結果なのだが、
あまりお勧めされる方法ではないのかも。
あぁ、&nbsp;入れとけばいいのか。(違う?

あと、子メニュー開いた状態で親をクリックしたら子が閉じる様にしたい。
JavaScriptを1行足したら出来そうなんだけども。ももっもも。

12月22日

■子メニューをべろろーんって出す方法

jQueryとCSS3を使ったアコーディオンメニュー
http://weboook.blog22.fc2.com/blog-entry-347.html

ボタンを背景画像で済ますならCSS3でなくても良かったりで、
HTMLとCSSの整合が取れるように書き換えて、JavaScriptコピペで動く。
どうせ動かなくてグダグダに無駄な時間を費やすのかとおもいきや、

奇跡の一発起動。

なんとなく理解出来ているという事で。

12月19日

■レイアウトの参考
http://tympanus.net/codrops/category/articles/
http://ronherman.jp/sense/

■bxslider
http://bxslider.com/
http://wp-and.me/bxslider/
スライドショーはとりあえずこれで良さそう
※jQuery-1.6だと動かない。1.83で動作。

http://bxslider.com/options
mode: ‘horizontal’ //スライドのエフェクト ’horizontal’, ‘vertical’, ‘fade’
speed: 500 //スライドのアニメーションの時間
slideMargin: 0 //スライドとスライドのマージン
startSlide: 0 //初めのスライドの指定
randomStart: false //スライドの初めをランダムに
slideSelector: ” //スライドのセレクタを指定
infiniteLoop: true //ループさせるか否か
hideControlOnEnd: false //スライドが最後の時に、次へのリンクを消すか否か
easing: null //イージングの設定※easingのプラグインが必要
captions: false //キャプションの設定
adaptiveHeight: false //スライドの高さが違う場合、それぞれ調節して合わせるかどうか
touchEnabled: true //スワイプできるようにするか否か(スマートフォン)

pager: true //ページャーの有無
buildPager: null //サムネイルページャーの指定

controls: true //次へ、前へ等のコントロールの有無
nextText: ‘Next’ //次へのテキスト
prevText: ‘Prev’ //前へのテキスト
autoControls: false //自動、ストップボタンの有無
startText: ‘Start’ //自動ボタンのテキスト
stopText: ‘Stop’ //ストップボタンのテキスト
auto: false //自動スタート再生さるかいなか
pause: 4000 //スライドの切り替えの間

カルーセルの場合
minSlides: 1 //最低限表示する数
maxSlides: 1 //マックスで表示する数
moveSlides: 0 //スライドをどのくらいの数を動かすか
slideWidth: 0 //ひとつの要素の幅を指定

■つまり遷移過程の装飾
Easing
http://semooh.jp/jquery/cont/doc/easing/
jQuery Easing Plugin (version 1.3)
http://gsgd.co.uk/sandbox/jquery/easing/

「装飾」と変換するのに「曹植」が先頭に来るのは、
あのゲームのせいであろう事は疑う余地がない。
SR曹植

12月11日

■スマホとかタブレットで表示させる

スマホとかタブレットの画面サイズでどう見えるのか、
サーバーにいちいち上げて見るの面倒だなぁとか思っていたら、
「マルチスクリーンプレビュー」ていうど真ん中な機能がDwにあったりして。

グーグル先生に聞く前に、手元にあるものをまず使いこなせ。

PC画面サイズでHeaderを固定にすると、スマホの画面サイズだと隙間が
ヘッダー修正まえ

HeaderをWrapperの外に出せば解決
ヘッダー修正ご

12月10日

■ドロップダウンメニュー

純粋なCSSを持つ、おしゃれなドロップ・ダウン・メニュー!
http://css3menu.com/ja/index.html

子メニュー出すのに便利そうなんだけども、CSS3なのが。
どうせ実装されるならHTML5+CSS3でいいのかもしれないけれども。
ページによって使い分ければいいのか、混在はよろしくないのか。

追記 12/16

CSSだけで作る「多階層」なドロップダウンメニュー
http://weboook.blog22.fc2.com/blog-entry-383.html

これでいいかも。できるだけシンプルな方が。

12月9日

■タグセレクタが正しく表示されない件の顛末

タグセレクタが出ない
#contentsの中のセレクタが表示されない=プロパティ(下段)も表示されない

1)
テーブルを作るときは↓を必ず記述すること。
cellpadding=”0″ cellspacing=”0″
記述しないでセル内のオブジェクトにmarginつけるとDwでタグセレクタがでず、
プロパティの編集(プロパティインスペクタ?)もでない。
テーブルの親(contents)までは出る。

ついでに。↓を記述しないと枠線は消えない。
border=”0″

2)
テキストのインデントは4桁まで。
◯ text-indent: -9999px;
✕ text-indent: -99999px;
5桁にすると1)と同じ現象が起きる。

ちなみにダイアログからは5桁で入力可でそのままCSSに記述される謎仕様。
両方ともHTML/CSSの記述的には問題なく、ブラウザ表示上も問題なし。
が、何が気に入らないのかDwの機嫌を損ねるらしい。
ライブビュー表示にすれば回避出来るのだが、そのデメリットは謎。

Dwのバグの様に見えるが、敢えてそいう仕様にする理由があるのかも。

■id/classの使い分け
idとclassの使い分けは基本的にはどっちでもOK。
同じプロパティを使いまわす場合はclassが便利。

同じid名は1回しか記述できない、プロパティが同じでもダメ。
めんどくさければ全部classでもいいんじゃないのか、とか。

■更新に時間かかるんだけど
サーバーに上げても更新されてない時は強制リロードしてみる
F5:キャシュを読んでからリロード
Ctrl+F5:キャッシュを無視して強制リロード

■覚え書き
1)
フッターの整理
2)
右のメニューが下端で出っ張るのはエレベーターメニューで
http://www.passione-style.com/sample/contents_js/009/#
http://grow.weblike.jp/immature_design/javascript/159.html
3)
Gmenuの番号を1~6で合わせる(photo2がみっつのとこ)
4)
ヘッダーのタイトルにリンク貼る
display:block; ←これ書かないとリンクにならないよ!

12月8日

■ 覚え書き

1)
画像のファイル名を変えた時はhtml/cssの該当箇所も書き直しましょう。
あたりまえな事に気がつかない事が多々。

2)
むっちゃんのメニューがテーブルだった件、
そういえば自分ので実験してたじゃないかという記憶喪失気味な。
リストでもテーブルでもブラウザ表示は全く同じ。もちろんリンクも貼れる。

デザイン的修行につくってみよう、そうしよう。
・ボタンホバー追加
・水色か黄緑のパステル系の色
・フッター追加
・写真とかあればもらう
・なんのお店のだったっけ・・

3)
白だろうと思ったら黒の方が良さそうな、大人寄りの色。
しろ
BgWt
くろ
BgBk

12月3日

いつのまにやら12月、あと3週間かなのだが、
やるきが出ないのが問題すぎる・・・るるるる

top20131202

デザインしないとは言っても何もしなさすぎな点

1)
テスト用のページリンクが足りない
→タイトルを一段あげて上のメニューの並びを増やす

2)
横のメニューが尻切れでバランス悪い
→背景色だけ下まで伸ばす

12/9追記:
背景色だとかdivで囲ってもfixedだと意味が無い。
→エレベーターメニューていうjqueryがよさそう。

3)
スマホ用のレイアウト必要
→横メニューの水平位置を左端からmarginで設定=画面サイズが小さくなると消える

4)
カレンダー毎度変えるのめんどくさい
→PHPで書いて自動月更新&今日に印つける

5)
ヘッダーのタイトルが無味乾燥すぎるw
→季節に応じて先頭にロゴっぽいのいれる

6)
横メニュー改造
→横メニュ(年)の子メニュー(vol.xx)を出すプラグインとか

サイト構成は単純に時系列をメインにした方が手間がかからなくていい。
カテゴリ別の構成もあったほうが。が、しかしめんどう&わかりにくい。

7)
ページ内の移動
→javascriptのアレコレを貼っつけてみる。貼るだけだ。

全部やれ!