■
[後で追記予定]
続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス
- 作者: Steve Souders,武舎広幸,福地太郎,武舎るみ
- 出版社/メーカー: オライリージャパン
- 発売日: 2010/04/10
- メディア: 大型本
- 購入: 20人 クリック: 351回
- この商品を含むブログ (30件) を見る
よかったらこっちも読んでみたい
ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
- 作者: Steve Souders,スティーブサウダーズ,武舎広幸,福地太郎,武舎るみ
- 出版社/メーカー: オライリージャパン
- 発売日: 2008/04/11
- メディア: 大型本
- 購入: 32人 クリック: 676回
- この商品を含むブログ (127件) を見る
逆引きjQueryマニュアル
jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践
- 作者: 西畑一馬,中村享介,徳田和規
- 出版社/メーカー: インプレスジャパン
- 発売日: 2010/12/17
- メディア: 単行本(ソフトカバー)
- 購入: 4人 クリック: 199回
- この商品を含むブログ (10件) を見る
自分みたいに、まだうろ覚えで仕事してる人間には使いやすい。
元々グーグル検索でサンプルページhttps://books.google.co.jp/books?isbn=4844329618
が引っかかって良さそうだと思って調べたら、500円ぐらいで手に入るって理由で手に入れた。
■
[後で追記予定]
ウェブデザイナーというかフロントエンドっぽい仕事をはじめたのでBookoffでいろいろ本を仕入れた。
全部で3000円くらい。
- 作者: jQuery Community Experts,株式会社クイープ
- 出版社/メーカー: オライリージャパン
- 発売日: 2010/08/18
- メディア: 大型本
- 購入: 10人 クリック: 333回
- この商品を含むブログ (40件) を見る
jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)
- 作者: 西畑一馬,鍋坂理恵
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2012/02/02
- メディア: 大型本
- 購入: 7人 クリック: 185回
- この商品を含むブログ (11件) を見る
jQueryデザインブック 仕事で絶対に使うプロのテクニック
- 作者: MdN編集部
- 出版社/メーカー: MdN
- 発売日: 2011/08/25
- メディア: 単行本
- 購入: 3人 クリック: 77回
- この商品を含むブログ (3件) を見る
jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践
- 作者: 西畑一馬,中村享介,徳田和規
- 出版社/メーカー: インプレスジャパン
- 発売日: 2010/12/17
- メディア: 単行本(ソフトカバー)
- 購入: 4人 クリック: 199回
- この商品を含むブログ (10件) を見る
Webデザイナーのための WordPress入門 3.x対応 (Books for Web Creative)
- 作者: 高山一登
- 出版社/メーカー: 技術評論社
- 発売日: 2011/08/31
- メディア: 大型本
- クリック: 24回
- この商品を含むブログを見る
- 作者: たにぐちまこと
- 出版社/メーカー: 毎日コミュニケーションズ
- 発売日: 2010/09/14
- メディア: 単行本(ソフトカバー)
- 購入: 43人 クリック: 1,002回
- この商品を含むブログ (54件) を見る
改訂版出てたりもしてるちょっと古い本ばかりだが、まだ使えるかなと思っている
こなすだけならネットで調べてコピペ組み合わせでその場しのぎできないこともないけど、それじゃあ身に付かないしね
仕事でTIPSもたまったし、そろそろ自分のサイトの方もまたいじりはじめたいのだけれども。
■
またいろいろ勉強中
年始ぐらいからまたindexhibitをさわりはじめたのやったことのメモ。
大したことをやってるわけじゃないがGit Hubとかにコードを保存したほうがいい気がしてる。
ただindexhibit2.0系はシェアウェアなのでライセンス的にどうなんだろとかそういうのもありこのブログにはほとんど該当部分しか書いていない
jQueryとPHPの本しか持っていないのとJSの基本ぐらいは勉強しとこうと思って今日これ買った。まだ序章。
ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)
- 作者: 外村和仁
- 出版社/メーカー: 技術評論社
- 発売日: 2012/11/07
- メディア: 単行本(ソフトカバー)
- 購入: 3人 クリック: 80回
- この商品を含むブログ (6件) を見る
- 作者: 小島まさご
- 出版社/メーカー: ソーテック社
- 発売日: 2011/11/19
- メディア: 単行本
- 購入: 1人 クリック: 10回
- この商品を含むブログ (2件) を見る
終わってからあまり読んでないけどamazonレビューの評判良くないねぇ
[Indexhibit]Pull Down Menuの実装[JS]
Indexhibitには
indexpand http://www.indexhibit.org/plugin/utility/indexpand/というプラグインや
Expanding Menusというプラグインがすでにあるのだが、
マウスホバー時に意図した動作をしてくれなかったので、Webで調べてプラグイン化した。
ほぼコピペに近いけど、Indexhibitのメニュー構造が既にUL ,LIの入れ子構造だったため楽だった。
以前試して失敗したレスポンシブでのハンバーガーメニューとの切り替えなんかもやれる気がする
[plugin.pull_down_menu.php]
<?php /* Plugin Name: Pull-down menu Plugin URI: http://log.hatenadiary.com/ Description: Pull-down menu Version: 1.0 Author: yozhik Author URI: http://log.hatenadiary.com Type: front Hook: pre_load Function: pull_down_menu:go End */ class pull_down_menu { function go() { $OBJ =& get_instance(); // do we need to do a file check for this? $OBJ->page->add_jquery('jquery.pull_down_menu.js', 25); return null; } }
[jquery.pull_down_menu.js]
$(function() { $("#nav li").hover(function() { $(this).children('ul').toggle(); }); });
style.cssに以下を追加
/* pull_down_menu */ #index ul.section li ul{ display: none; }
- 参考にしたサイト
www.finefinefine.jp
www.task-notes.com
www.jquerystudy.info
[Indexhibit]jQuery Cycle2 plugin導入
http://jquery.malsup.com/cycle2/
前ヴァージョンのjQuery Cycleよりも有名じゃないけれど、レスポンシブ対応していたので組み込んでみた。htmlタグ内で設定できるようになった模様。
format.no_thumbs.phpを基に改造してulリストの中に画像が挿入されるようにした。
// images $s .= "<div id='img-container'>\n"; $s .= "<ul class='cycle-slideshow' data-cycle-fx='fade' data-cycle-next='.cycle-slideshow' data-cycle-speed='300' data-cycle-slides='li'>\n"; $s .= ($OBJ->vars->exhibit['placement'] == 0) ? $OBJ->vars->exhibit['content'] . $a : $a . "<div class='cl'><!-- --></div>" . $OBJ->vars->exhibit['content']; $s .= "</ul>\n"; $s .= "</div>\n";
style.cssに以下を追加。
/* Slideshow cycle2 plugin */ .cycle-slideshow { z-index: 1; text-align:center; margin:0 auto; width: 80%;} .cycle-slideshow img { width: 100%; height: auto; } .cycle-slideshow li { display: none } .cycle-slideshow li:first-child { display: block }
具体的には
- メニューとかぶってしまうのを避けるためにz-indexで階層を下げる。
- レスポンシブ対応で画像をウインドウの80%に指定。センタリング。
- liリストの最初のもの以外を非表示にすることで読み込み時に一瞬画像が表示されてしまうのを避ける
■
今後の指針
- トップページの構造を変える
-ツリー構造のメニュータブで子該当ページに移動だったものを
メニュー>小インデックスページ>該当ページ の構成にする
→indexhibitのテンプレート利用でできるはず
- レスポンシブ対応
→レスポンシブメニューのプラグインがindexhibitが吐くリスト構造とあわず上手くうごかないので、ひとまず簡易的にメニューのfloatを利用して、ウインドウサイズでメニューの並びが変わるようにした。
→→Media Queryを使ってスマホ用ではfloatを解除し、縦並びのメニューにしてサイズが大きくなるようにした
- 可能であればプロフィールページはオーバーレイ表示する
→とりあえず colorboxでメニューのaタグリンクを拾うことで実装。外部htmlをアップロードして参照した。
→絶対パスのリンク先をajaxで取得する関係上www付きとwww無しのドメインが同一サーバーと見慣されないためurlによって表示されない事がある。ひとまず.htaccessでwww無しのurlにリダイレクトするようにした。
RewriteEngine On RewriteCond %{HTTP_HOST} ^www\.hogehoge\.com RewriteRule ^(.*) http://hogehoge.com/$1 [R=301,L]
→単純な相対パスだとサイト構造上上手く行かなかったので
{{baseurl}}/hogehoge/
をリンク指定してみたらいけた。
Indexhibit2 構造メモ
http://www.indexhibit.org/tutorials/upgrade/updating-templates-and-exhibit-formats/
Options
>Page options/Template
ページ自体のテンプレート(ガワ。HEAD内 外部CSS,JS追加などはこちらにする。BodyのDIV id=index内部)
>Exhibit Options/Template
画像などの表示方法のテンプレート(BodyのDIV id=exhibit内部)
半年ぶりにいじりはじめたら完全に忘れてた。
Developer Toolメモ
http://news.mynavi.jp/column/wc/011/
- webインスペクタ
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
http://gihyo.jp/dev/serial/01/chrome-extensions/0006
http://trac.webkit.org/wiki/Web%20Inspector%20Update.ja
■
今後参考にしたいサイト
www.fabulosius.de
ソース見るとindexhibitみたいだけど色々仕込んでて凝ってる。
http://danielogorman.comdanielogorman.com
こっちはwordpressっぽい。
ギャラリーがレスポンシブ対応だったりトップページのコンテンツの見せ方が好きかも
http://www.julianzigerli.com/jz/aw/13/lookbook/www.julianzigerli.com
tumblr的みためでなんかかっこいい 。もうちょっと写真大きくしたいだとかいろいろあるけど。
メニュー位置とか構造的に参考にしたい
Indexhibit_V2カスタマイズその3-3
format.no_thumbsにmasonry(とcolorbox)を実装
作りが簡単そうだったformat.no_thumb.phpを素にした。
$a .= ($OBJ->vars->exhibit['titling'] == 1) ? "\n<span class='nothumb'><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' /> <strong>$title</strong> $caption</span>$break\n" : "\n<span class='nothumb'><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' /></span>$break\n";
以上61-62行目付近を以下のように修正した
$a .= ($OBJ->vars->exhibit['titling'] == 1) ? "\n<div class='nothumb'><a class='colorbox' rel='photo' href ='". BASEURL . GIMGS . "/$go[media_file]' ><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' /></a><strong>$title</strong> $caption</div>$break\n" : "\n<div class='nothumb'><a class='colorbox' rel='photo' href ='". BASEURL . GIMGS . "/$go[media_file]' ><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' /></a></div>$break\n";
spanをdivに変えてimgタグをcolorboxのclassを付けたアンカーで囲った形。
index.php
以前書いた内容と同様にtheme内のindex.phpのhead内
<last:page:javascript />
の後に
<script type="text/javascript" src="{{baseurl}}/ndxzsite/js/jquery.masonry.js"></script> <script type="text/javascript" src="{{baseurl}}/ndxzsite/js/jquery.colorbox-min.js"></script> <script> $(document).ready(function(){ $("#img-container a").colorbox({ maxWidth:"100%" , maxHeight:"100%"}); }); </script>
<script> $(window).load(function(){ $('#img-container').masonry({ itemSelector: '.nothumb', isAnimated: true, isFitWidth: true, isRTL: false, gutterWidth: 0, containerStyle: { position: 'relative' }, isResizable: true }); }); </script>
を追加。
またjQuery colorboxのcssファイルを9行目付近に挿入
<link rel="stylesheet" href="{{baseurl}}/ndxzsite/js/colorbox.css" type="text/css" />
*
色々試したけどスクロールの方はまだうまくいってない。