blog/

Blog of Namu Work Studio

名無製作所 : Webデザイン製作日誌

home
2011/12/20

映画 『子どもたちの夏 チェルノブイリと福島』 絶賛上映中

友人が映画を監督しましたのでご紹介。

チェルノブイリと福島の原発と子供たちについてのドキュメンタリーです。
私はまだ観ていないので内容については何とも言えませんが、
ご興味がありましたら是非どうぞ。

現在、銀座シネパトス横浜ニューテアトルで上映中です。
今後、第七藝術劇場(大阪十三)でも順次公開されるようです。

『子どもたちの夏 チェルノブイリと福島』
http://kodomotachi.jp/

 『子どもたちの夏 チェルノブイリと福島』

ちなみに友人の監督とは、本ブログ右カラム下に
バナーが貼ってある「オヤバカちゃん。」の著者の一人です。

Category : Movie

Tag :

2011/10/09

Toots Thielemans

今日、Toots Thielemansのコンサートへ行ってきた。
場所は、すみだトリフォニーホール。

Toots Thielemansは、御年89歳。
パンフレットには、音楽界の人間国宝と書かれていたが、
もう世界遺産クラスだ。
まさか生で聞けるとは思っていなかった。

今回は主に、Blue Note,Cotton Club,すみだの都内3ヶ所で
ライブをする予定のようで、私が知った時点でBlue Noteは完売、
Cotton Clubは、スケジュールが微妙ということで
本日のすみだに行ってきました。

年が年なので、厳しいところもあるだろうと予想して、
実物を拝めるだけでも御の字と予め期待感を低く抑えて座席についた。

現れたTootsは、一人では歩くのが難しいようで、
ドラムのHans Van Oosterhoutが、付き添って
ステージセンターの定位置に着く。

挨拶なしにいきなり演奏が始まって驚いた。
とても89歳とは思えない艶があって、伸びがあって
泣かせるハーモニカだった。

途中、所々でTootsのユーモアのあるMCが入るのだが、
喋りは年相応に少したどたどしく重厚感あるしゃがれ声だった。
それだけに一層演奏時の若さに驚かされた。

ライブ中盤からは、会場は、もうTootsの思いのままで
客に手拍子や歌うことを求め、国宝級が求めるのだから
皆必死でついて行く。
客は、皆ありがたくてしょうがないという感じだった。

Tootsもかなりご機嫌だったようで最後もう終わりということで、
ドラムのHans Van Oosterhoutが、ジャケットを持って
Tootsの付き添いに歩み寄ろうとしたら
まだやるぞと言ってドラムセットに座り直させること数回。
恐らく予定よりも2,3曲多く演奏したんじゃないかと思う。

そしてアンコール。
今回は、ちょっと趣が違ったアンコールだった。
Tootsが、歩くのが難しい状態だったので皆大丈夫かな、
申し訳ないなといった心苦しい感ともっと聞きたい感が、
入り混じったアンコールだった。
Toots達も予定していなかったのかも知れない。
再登場までかなり時間が掛かった。
最近多く見られるアンコールありきではなく
皆が、本当に名残惜しくいつまでも聞きたい感満載のアンコールだった。

そして、最後は皆スタンディングオベーションで感謝を表した。
Tootsも名残惜しそうにステージを後にした。
大変幸せな一夜でした。

贅沢を言えば出来ればもっと近くで、
酒を飲みながら聞きたかった。
欲張り過ぎかもしれない。

Category : Music

Tag :

2011/10/03

WordPress wp_head();

ヘッダーにモバイルなどから編集できるように<?php wp_head(); ?>を
設置するといろいろ余計なものが引っ付いて表示される。

特に下のstyleなどはまったく不要なので表示しないようにする。

<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>

設定方法
ダッシュボード > ユーザー > あなたのプロフィール > 管理バーの表示以下二つともチェックを外した状態にする。

他はfunctions.phpで設定して削除するが、
いろいろなサイトが、教えてくれているのでそちらで確認。

あまり変なものを付けないでほしい。

Category : WordPress

Tag :

2011/10/01

WordPressのサムネール(アイキャッチ)

サムネール(アイキャッチ)の設定ではまってしまったので、
とりあえずの設定方法を覚書。

調べているといろいろな箇所で設定できるようで
全部設定しまうとどれが、効いてて、そう表示されるのか分からなくなった。

できるだけシンプルに設定する方法をと思って下記設定に落ち着く。

1.
functions.phpの最下部に記載

add_theme_support( 'post-thumbnails' );

2.
実際に表示する場所に記載(ループ内)

<?php $title= get_the_title(); the_post_thumbnail("thumbnail", array( 'alt' =>$title, 'title' => $title)); ?>

alt,titleが、画像ファイル名でよければ以下のみでOK
<?php the_post_thumbnail("thumbnail"); ?>

3.
ダッシュボード>設定>メディア で下記設定。
・サムネイルのサイズ = 任意の数値を設定。
・サムネイルを実寸法にトリミングする? = トリミングする場合はチェックを入れる。

この状態でメディア(画像)を読み込むオリジナルサイズの画像が取り込まれ
合わせてと3.で設定したサムネールのサイズにリサイズした画像も自動で作成される。

4.
1.を設定したので投稿、ページ編集画面右カラムに「アイキャッチ」設定欄が表示されている。
ここでサムネール(アイキャッチ)を設定して終了。

今回は、これで設定しましたが、WPのバージョンが変わると機能が強化されたりして
設定を見直さないといけない場合があるようです。因みに今回はバージョン3.2.1でした。

Category : WordPress

Tag :

2011/08/16

ブログをとりあえずHTML5化

本ブログをとりあえずHTML5化してみました。

DOCTYPEや<html>、<head>内などをHTML5仕様に変更。
あと以下のWordPressに関わる変更をちょっとだけ。

1.
<header>内にwp_headによって追加される下記タグを削除。
HTML5では、リンク・リレーションの策定が行われたため。

<link rel=”EditURI” ? /> = 外部編集ツールを使用する際に必要なタグ
<link rel=”wlwmanifest” ? /> = 外部編集ツールを使用する際に必要なタグ
<meta name=”generator” ? /> = WPバージョン情報

対処方法
wp-content/themes/YOUR_THEME/functions.phpに以下を記載

<?php
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_generator');
?>

2.
同じく<header>内のプラグインなどにより記載されているmeta情報を削除。
本ブログでは、「SyntaxHighlighter Evolved」がバージョン情報をmetaで記載しているので
そちらを削除。

対処方法
プラグインphp内の以下をコメントアウト
・63行目、64行目
・569行目のfunction output_header_placeholder()

以上。

ただし、これだけではいろいろな箇所でバリデーションで引っかかります。
特に面倒と思われたのは、rel属性。

HTML4では、あいまいに策定されていたのですが、
HTML5では、それなりに厳格になっているようです。
http://www.w3.org/TR/html5/links.html#linkTypes

WordPressのタグから自動的についてしまう値や
Ajaxなどでも独自の値をつけているものもあるので、
どうしようという感じです。

あとAmazonなどの貼り付けているHTMLも
引っかかってしまいます。

他、sectionやarticle化は今後、ぼちぼち反映していくつもりです。

Category : HTML

Tag :

2011/08/16

CSSセレクタ ブラウザ対応状況など

セレクタ 意味 Lv 種類 ie6 ie7 ie8 FF4-,
C9-,
S5-,
O10-
1 * すべての要素を対象にするセレクタ 2 ユニバーサルセレクタ
2 E E(要素)に対してスタイルを適用 1 タイプセレクタ
3 . class指定 1 classセレクタ
4 # id指定 1 idセレクタ
5 EF Eの子孫要素Fにスタイルを適用 1 子孫セレクタ
6 E>F Eの直接の子要素Fにスタイルを適用 2 子セレクタ ×
7 E+F Eの直後にあるFにスタイルを適用(E,Fは同じ親要素) 2 隣接セレクタ × ×
8 E[att] att属性を持つEにスタイルを適用 2 属性セレクタ ×
9 E[att="val"] valという値のatt属性(のみ)を持つEにスタイルを適用 2 属性セレクタ ×
10 E[att~="val"] valという値を含んでいるatt属性を持つEにスタイルを適用 2 属性セレクタ ×
11 E[att|="en-us"] en(言語)という値のhreflang属性をもつEにスタイルを適用 2 属性セレクタ ×
12 E:first-child 親要素内の最初の子要素Eにスタイルを適用 2 構造擬似クラス ×
13 E:lang(ja) ja(前方一致)のlang属性値を持つEにスタイルを適用 2 言語擬似クラス × ×
14 E:before contentプロパティで指定した内容が指定要素の前に生成。 2 擬似要素 × ×
15 E::before contentプロパティで指定した内容が指定要素の前に生成。 2 擬似要素 × × ×
16 E:after contentプロパティで指定した内容が指定要素の後に生成。 2 擬似要素 × ×
17 E::after contentプロパティで指定した内容が指定要素の後に生成。 2 擬似要素 × × ×
18 E:first-letter Eの最初の1文字にスタイルを適用 1 擬似要素
19 E::first-letter Eの最初の1文字にスタイルを適用 1 擬似要素 × ×
20 E:first-line Eの最初の1行にスタイルを適用 1 擬似要素
21 E::first-line Eの最初の1行にスタイルを適用 1 擬似要素 × ×
22 E[att^="val"] valという値から始まるatt属性を持つEにスタイルを適用 3 属性セレクタ × ×
23 E[att$="val"] valという値で終わるatt属性を持つEにスタイルを適用 3 属性セレクタ × ×
24 E[att*="val"] valという文字列を含むatt属性を持つEにスタイルを適用 3 属性セレクタ × ×
25 E~F E以降にあるFにスタイルを適用(E,Fは同じ親要素) 3 兄弟セレクタ ×
26 E:root 文書内のルート要素であるE要素にスタイルを適用(HTMLの場合はhtml) 3 擬似クラス × × ×
27 E:last-child 親要素内の最後の子要素Eにスタイルを適用 3 擬似クラス × × ×
28 E:only-child 要素内で唯一の子要素Eにスタイルを適用 3 擬似クラス × × ×
29 E:nth-child(n) 親要素内のn番目の子要素Eにスタイルを適用 3 擬似クラス × × ×
30 E:nth-last-child(n) 親要素内の最後から数えてn番目の子要素Eにスタイルを適用 3 擬似クラス × × ×
31 E:first-of-type 親要素内の最初のEにスタイルを適用 3 擬似クラス × × ×
32 E:last-of-type 親要素内の最後のEにスタイルを適用 3 擬似クラス × × ×
33 E:only-of-type Eのみにスタイルを適用 3 擬似クラス × × ×
34 E:nth-of-type(n) 親要素内のn番目のEにスタイルを適用 3 擬似クラス × × ×
35 E:nth-last-of-type(n) 親要素内の最後から数えてn番目のEにスタイルを適用 3 擬似クラス × × ×
36 E:empty テキストも含めて子要素を持たないEにスタイルを適用 3 擬似クラス × × ×
37 E:not(s) sではないセレクタを持つEにスタイルを適用 3 擬似クラス × × ×
38 E:target リンクの飛び先(#で指定された)であるEにスタイルを適用 3 擬似クラス × × ×
39 E:enabled 有効な(:enabled)要素Eにスタイルを適用 3 擬似クラス × × ×
40 E:disabled 無効な(:disabled)要素Eにスタイルを適用 3 擬似クラス × × ×
41 E:checked ラジオボタンまたはチェックボックスがチェックされているEにスタイルを適用 3 擬似クラス × × ×
42 E:link 未訪問のアンカーEにスタイルを適用 1 擬似クラス ×
43 E:visited 訪問済みのアンカーEにスタイルを適用 1 擬似クラス ×
44 E:active アクティブになったEにスタイルを適用 1 擬似クラス ×
45 E:hover カーソルが重なったEにスタイルを適用 1 擬似クラス
46 E:focus タブキーなどでフォーカスされているEにスタイルを適用 2 擬似クラス × ×

各ブラウザ状況は、下記サイトのCSS3 Selectors Testを使用して調べました。(一部除く)
CSS3.info
ieは、IETester使用。


個人用にメモ程度にざっとまとめたものです。
誤りがあるかもしれませんのでご注意ください(ご指摘いただけるとありがたいです)

Category : CSS

Tag :

2011/08/02

previous_posts_link と previous_post_link の違い

previous_posts_link
next_posts_link
こちらは、アーカイブ、カテゴリなどの一覧ページで使用し、
一覧ページごとの前後ページに移動できる。

previous_post_link
next_post_link
こちらは、各投稿ページごとの前後ページに移動。

パラメータの使い方が違うので注意必要。
例)
<?php previous_posts_link(‘&laquo; prev page’); ?>
<?php previous_post_link(‘%link’, ‘&laquo; prev page’, TRUE); ?>

ちょっと触ってないとすぐ忘れてしまうので備忘録。

追記

最新記事を数件表示しているindexページで、
あるカテゴリーを除外するために
query_posts(‘cat=-n’);などを使うと
previous_posts_link、next_posts_linkが
機能しなくなる場合有り。
その際は、query_posts( );ではなく下記を使用すると回避できる。

<?php $paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
query_posts(“cat=-カテゴリID&paged=$paged”); ?>
(query_posts( );と同様にループの前に記載する)

Category : WordPress

Tag :

2011/07/29

jQuery覚え書き 要素の表示位置を取得

offset()

例)
var point = $(“p.fst”).offset();
$(“p.fst”).html(‘left=’ + point.left + ‘,top=’ + point.top);

取得できる値はtopとleft。可視状態にある要素のみ対象。

Category : JavaScript,jQuery

Tag :

2011/07/29

jQuery覚え書き 指定属性の値を取得、変更

attr(name)

値の取得
例)
$”a.othersite”.attr(“herf”)
(要素が指定属性を持っていない場合、関数はundefinedを返す。)

値の変更
例)
$”a.othersite”.attr(“herf”,”http://hoge.com”)

Category : JavaScript,jQuery

Tag :

2011/05/06

「わたしを離さないで」

すべてにおいてタイミングを逸していますが、
とりあえず紹介。

「わたしを離さないで」

映画が公開されていますが、本の方です。
著者は日系イギリス人。
日本での発行は2006年です。
私が読んだのは、今年の正月休みです。

ストーリー自体は難しくありませんが、
ネタばれしてしまうので内容を紹介するのは難しいです。

「受容」「生命」「友情」「反抗」などいろいろ考えさせてくれますが、
暗いお話ではありません。
アマゾンのレビューでも高得点です。
最近、著者が来日されてNHK教育でも特集が放送されたようです。

著者自身、翻訳されることを念頭において執筆されていると
どこかで読んだ記憶がありますが、翻訳家の力量も良いのか
読み心地が良い文章です。

本国イギリスでの評価が高いのですが、
日本的、アジア的なストーリーのように思われ
ヨーロッパで共感?されているのが以外でした。

本でかなりイメージが出来上がってしまったので
映画を見るのを躊躇しています。

とても良い本でした。

Category : Book

Tag :

Search

Information

Category

Archive