1月6日

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

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

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

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

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

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

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

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

4e0e80cf7613d6c6c3456990eb9e6119

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

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

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

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

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

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

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

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

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

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

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

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

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

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

すっぴん上等。

うむ。

12月25日

■最後の審判

の抗弁(という名の言い訳

デザインができない=やらない、という事で早々に見切りをつけたわけで、
CSSなんていらないんじゃね?ていうレベルなのは否定のしようもなく。

なのでどこを工夫しましたとか、技術的にどうだとか言うネタもなく、
サイトの趣旨を説明しただけで済ませ、というかそれしか選択肢がない。

「発表が短い」

と言われてしまうのも致し方ないのです。

シンプル・イズ・ベストは意図するところであり、
デザインしない事がデザインなのであるが、しかし。

判決主文(原文まま

1)画像をダウンロードできるようになれば
2)ワードプレスはシンプルでなくてもよいかと
3)何か他の要素が欲しい
4)海外向けということで、日本人の私には何がこれというのがわからなかった
5)発表が短い
6)Gnavに現在位置がわかる表示がほしい
7)いまいち何のページなのか分かりづらい
8)好きな写真に好きな月のカレンダー機能はぜひ実装してほしい
9)ちょっと重い?
10)ページ遷移が分かりづらいかな

現状、「4)他の要素が~」の以前に目次しかない本と同じ状態なわけで、
つまり要素(コンテンツ)自体がそもそも存在していないがために、
「7)何のページなのか~」という審判を下されるに至る。
「4)海外向けの~」おそらく同じ理由によると推測される。

「9)ちょっと重い?」は画像のせいだが、このままでいいかと言えば要改善。
800*400でも36枚も貼っているわけで、まぁ仕方なの無いところ。
画像でYCC420は破綻が目に見えているが、YCC422でどこまで圧縮できるか。
PsだとJpeg品質?5~8がYCC422だった記憶。

「6)Gnavに現在~」「10)ページ遷移が~」は、余計なものを残しているため。
Phpto/Calendar/Blog/Aboutの4つにすれば解決、のはず。

「2)ワードプレスは~」についてはメモ書きなのでテンプレのまま。
本体との統一性も踏まえて、不釣合いなデザインにするより現状が適当。

「1)画像をダウンロード~」については画像を用意するという難関が。
貼ってる画像があるじゃないのという至極当然な問に対しては、
あれは諸々外に出すものとしては妥当でない環境で生成されているがため、
と何を仰ってるのアナタ?な答えになるのだが、まぁ平たくいうとですね、
「躾のなってない娘を嫁に出すなんてできなくってよ」ていうことなのね。

・・・まるで意味がわかりませんね、えぇ。
も少し解りやすく言うと、キャバクラのおねいさんに昼間お会いしたらアナタ誰?
な事態になるのとやや近い現象かもしれません。

別の機会にしましょうか。

で、「8)好きな写真に~」も要因が絡んでくるわけですが、
作るだけなら問題ないしどこかのタイミングで組み込んで見ようかと思います。
とりあえずは今日の日付にカレンダーが自動的にめくれる仕組みを。

書いたの読めないんじゃ・・・と心配するほどの字面なわたくしですが、
他の人のを見るに似たようなもので安心したり。(ごめんなさい

人妻のサドル200個盗んだ男 常にニット帽で礼儀正しかった
http://zasshi.news.yahoo.co.jp/article?a=20131225-00000004-pseven-soci

匂いでわかるとか、逮捕する方のお役に立てそうな気がするのだがw

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月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のアレコレを貼っつけてみる。貼るだけだ。

全部やれ!