こういうヴォーカルいいよなあ。ここがサイト?
男性ヴォーカルものといえば、これすごく好き。
Omar S – Set It Out
こういうヴォーカルいいよなあ。ここがサイト?
男性ヴォーカルものといえば、これすごく好き。
Omar S – Set It Out
WordPress 3 の新機能のカスタムメニューに対応させる方法を調べた。複数のメニューを入れることを前提で。
対応させるにはサイドバーウィジェットの仕組みと同じ感じで、テンプレートと functions.php に記述が必要。
テンプレート内のどこかにひとつめ
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary')); ?>
テンプレート内のどこかにふたつめ
<?php wp_nav_menu( array( 'container_class' => 'menu-footer', 'theme_location' => 'secondary')); ?>
上のテンプレートの theme_location
の値は、そこにどのメニューを呼び出すかの指定で、 functions.php のregister_nav_menus
のキーの部分に対応。
//add_theme_support('menus'); register_nav_menus( array( 'primary' => 'ヘッダーに入ります', 'secondary' => 'フッターにに入ります' ));
functions.php の register_nav_menus
の 「ヘッダーに入ります」は管理画面で表示されるメニューの場所の説明。add_theme_support('menu')
は、register_nav_menus()
を書く場合には必要ないということで調べていない。
グローバルナビゲーションなどに使ったりするのなら、メニューごとに CSS を書くことになるのだけど、テンプレートで container_id, container_class, menu_class などを指定していても、ユーザーが設定からカスタムメニューを指定した場合と、指定しない状態(fallback_cb
のデフォルトの wp_page_menu
によりページ一覧が出る)で id・class が付いたり付かなかったり、どの html タグに class がつくのかが変わる。
テンプレートで container_class
に YYYY を指定した場合、管理画面で設定したメニュー名前をXXXXとするとこうなった。
container_class の指定無し |
'container_class' => 'YYY' |
|
---|---|---|
カスタムメニューを指定無し | <div class="menu"><ul><li ... |
<div class="menu"><ul><li ... |
カスタムメニューを指定有り | <div class="menu-XXX-container"><ul id="menu-XXX" class="menu"><li ... |
<div class="YYY"><ul id="menu-XXX" class="menu"><li ... |
XXXX はユーザが管理画面で命名するので、テーマ側ではどんな名前になるのかはわからない。
container_class
を指定しても付いたり、まったく付かなかったりする。class="menu"
も div
に付いたり、ul
に付いたりする。Twenty Ten を見ると、さらに外側の div
を使って、container_class がある場合とない場合をそれぞれ指定している。
#access .menu-header, div.menu { font-size: 13px; margin-left: 12px; width: 928px; } #access .menu-header ul, div.menu ul { list-style: none; margin: 0; }
自分以外が使うテーマや、一般公開するようなテーマでは、カスタムメニューを指定してあったりなかったりする場合に対応しないとならないのでややこしい。
2011-01-11T13:00:31.209Z 追記
自分で読み返してもわけがわからないので少し書き直しました。
日記やメモばかりで、記事というようなものはないけど、WordPress で投稿単位で CSS をあてるテスト。
記事の個別ページを見てください。
印刷物のデザインの影響を受けた Web デザインとか、個別にディレクションされた記事とか流行ってるようなので。
技術的には、WordPress のテーマで対応させて、カスタムフィールドに書いた CSS をテーマで <haed >
に 流し込もうかと考えたけど、探したらそれを出来るプラグインがあったので導入。個別記事ごとに CSS の入力、適用が出来るようになる。
記事個別のページで CSS が挿入されるので、トップページやアーカイブページでは他と同じフォーマットで表示される。
プラグインでの対応だけでは、記事で body
の背景色を白にした場合、黒にした場合など、テーマのデザインへの影響が把握しきれないので、デザイン・CSS 的に対応を考えられたテーマも必要そう。デザインでは色、質感、レイアウトの対応。CSS で言えば値の明示と inherit
や transparent
などの使い分けが必要。
サイトを通して共通のヘッダ、フッタはアイデンティティを示しつつも、個別の記事のデザインの邪魔や影響を考えたものがいいのかな。
フィードに流れるような本文の部分のテキストや画像だけが情報ではなくて、サイトのデザイン、レイアウトも含めて情報だと考えたいし、単純に言えば、楽しいことは楽しい感じで伝えたいし、うんざりした日にはそんな感じが記事に出たっていいんじゃないかと思う。
CakePHP で出力される html の head に JavaScript を書き込む方法。
コントローラで Javascript ヘルパーを追加。
var helpers = array('Javascript');
ビューテンプレートで JavaScript を出力 (レイアウトに $scripts_for_layout
が必要)
$code = 'window.alert("foo");';
$javascript->codeBlock($code, array("inline" => false));
※20100825 "inline" => false
の場合は値を返すわけではないので、 echo いらないですね。
960 Grid System の 960.css で設定されているクラスをまとめてみる。
class | 内容 |
---|---|
.container_12, .container_16 | 全体を囲む。コンテナ。 |
.grid_1 … .grid_X | グリッドX個分の幅。左右にマージンが10px。 |
.prefix_1 … .prefix_X | 左 padding をグリッドX個分。 |
.suffix_1 … .suffix_X | 右 padding をグリッドX個分。 |
.push_1 … .push_X | グリッドX個分右にずらす。(position: relative と left をプラス方向に指定) |
.pull_1 … .pull_X | グリッドX個分左にずらす。(position: relative と left をマイナス方向に指定) |
.alpha | 左マージン0 |
.omega | 右マージン0 |
.clear | フロートのクリア |
.clearfix | clearfix |
コマンドの実行結果に置き換わる。
$ echo 'test' > $(date +%Y%m%d-%H%M).txt
$ echo 'test' > `date +%Y%m%d-%H%M`.txt
$()
を知らなかった。
アドレス画像と言えばいいのか、バナーといえばいいのか、E-Mail Icon Generator で、メールアドレスを画像化したものを作ってみた。
こちらの Gmail Signature Generator はデザインのバリエーションが多い。
http://www.hrykozw.com/ が白紙だったのでリンクなど載せてみた。記念にスクリーンショット!
Twitter とか Flickr とかブログとか、いろいろな使っているサービスのアップデートをまとめたいけど、アーカイブさせたいよなぁ、と思うと JS で API やフィードを読み込むだけではなく、フィードで取ってきて貯めたりしないとならなかったりするので、それはまた今度に。
Cookie を簡単に扱えるようにする jQuery のプラグインの jQuery Cookie Plugin のメモ。
値の設定
$.cookie("name", "value");
$.cookie("name","value", { expires: 7 }); // 有効期限7日
値の取得
$.cookie("name");
Cookie の削除
$.cookie("name", null);
サンプルだとこんな書き方で名前とオプションを変数に入れてる。
var COOKIE_NAME = 'test_cookie';
var options = { path: '/', expires: 10 };
$.cookie(COOKIE_NAME, 'test', options);
jQuery 版の Lightbox 系スクリプトの Slimbox 2 は、付属のスクリプトを使うと、 Flickr の写真のページへリンクが張られた写真の表示も出来るので使い方を。Slimbox 2 v2.04と jQuery v1.4.2で確認。
slimbox-2.04/extra/flickr.js
が Flickr からの埋め込み写真を Slimbox 2 で表示させるためのスクリプト。flickr.js
のコメントによると、
rel="lightbox"
は追加しなくていいtitle
か、画像の alt
をタイトルとして表示するとのこと。
slimbox2.js
など通常読み込むファイルに加えて、flickr.js
も読み込む。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<script type="text/javascript" src="js/flickr.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
不要なら、 slimbox2.js
の
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
の所のロード処理を削除しても問題ない。
html は、Flickr の Shere this で取れる html のままでいい。
<a href="http://www.flickr.com/photos/51979237@N04/4868471305/" title="20100808_01 by hrykozw, on Flickr"><img src="http://farm5.static.flickr.com/4121/4868471305_f93510149e_s.jpg" width="75" height="75" alt="20100808_01" /></a>
<a href="http://www.flickr.com/photos/51979237@N04/4869085578/" title="20100808_02 by hrykozw, on Flickr"><img src="http://farm5.static.flickr.com/4119/4869085578_290e7d675d_s.jpg" width="75" height="75" alt="20100808_02" /></a>
リンクに ref="lightbox"
を入れなくていいということだけど、入れても効かないので、写真を複数のグループには出来なかった。