当たり前だけどこんな風に出来無いわけですよね

$("this ul").addClass("hogehoge");

childrenを使うといいみたい。

$(this).children("ul")

親にはparent

$(this).parent()

参考 / まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法[リライト版]

宿題
ひろし+すみれのliからから友蔵+こたけのliを指定するにはどうしたらいいんだろうか。

<h1>さくら家</h1>
<ul>
<li><span class="name">友蔵+こたけ</span>
<ul>
<li><span class="name">ひろし+すみれ</span>
<ul>
<li class="name">さきこ</li>
<li class="name">まるこ</li>
</ul>
</li>
</ul>
</li>
</ul>

を追加するとふきだしを消せるみたい。

そのまま

大きな地図で見る

iframeに&iwloc=Bを追加

大きな地図で見る

以前は、ふきだしを消してソースをコピペしたら非表示になってたのにねぇ。

[編集] – [コンテンツに応じて拡大・縮小]Ctrl+Alt+Shift+C
スマートオブジェクトには使えない

上で使ったアルファチャンネルは
クイック選択ツールで選択範囲を作って
[設定範囲] – [設定範囲を保存]から作成

参考adobe help

Adobe Photoshop CS5 * コンテンツに応じた拡大・縮小

でもってその値にantialiased;を指定すると
他のブラウザと同じような細さになるようなならないような。

確認用スクリーンショット

確認用ページ

※safariで見ないと意味ないよ。
-webkit-font-smoothingでsafariの文字の太さを他のブラウザと合わせる。

プロパティと値

-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

noneを指定したら、それ以降が激しく文字化けしたので
確認用ページから外した。

参考にしたサイト /

Maxvoltar – -webkit-font-smoothing

サイトのフォルダを一発で開く。

ローカルファイルのところを[右クリック - エクスプローラー]

クロークを使って、putやgetしないファイルを設定する

DreamweaverのFTPて便利。
ちょっと触るだけのサイトのファイルを、面倒臭がって適当にゲットしたら余計なファイルまで関連ファイルとしてダウンロード開始しちゃっていつまでもサーバーと通信中ですが終わらない事がある。

ファイルの所を右クリックするか、サイト定義のクロークで
putやgetから除外するファイルを決められる。
クロークを使用可能と次で終わるファイルをクロークにチェックを入れて、拡張子を追加。

.fla .psd

拡張子 半角ブランク 拡張子で追加してくみたい。

クロークに設定された拡張子は見た目が変わる。

imgフォルダにぶっこまれた大量のpdfを誤ってダウンロードしなくて済むハズ。

最近更新したファイル

ローカルファイルの右クリックして [選択 - 最近修正されたファイル]

日付指定でファイルを選択出来る。

テキストをタグで囲む

テキストを選択してCtrl+Tで囲める
zen-codingのCtrl+Hの劣化版みたいな機能だけど、zen-codingが入ってない場合は便利。

あれ、gifが動かない。

何か思いついたら随時追加。

デュアルブラシ、ブラシのマスクみたいでオモロイです。
けどそうそう毎回いじったりしなさそうなのでメモ。

その前に、カスタムしたブラシを保存する方法を覚えておく

新規ブラシを作成のアイコンをクリックして、名前をつけて保存。

新しいブラシを登録するのは[編集] – [ブラシを定義]の方

ブラシ先端のシェイプの設定
ソフト円ブラシ175pxをベースにした

シェイプの設定
ジッターを上げた、予想がつかない

散布の設定
離れないような感じに

デュアルブラシの設定
チョークを175pxで、ソフト円ブラシにマスクが掛かったみたいじゃない？

カラーの設定
揺らいで欲しかったから、気持ちやんわり。

ウェットエッジ、滑らかさにチェック。

もう少し着色してみる、テクスチャは後から付けたほうがいいのかな？

ファイル:Olympic flag.svg – Wikipedia

このシンボルマークのように線が絡むリングというか円というか輪を描く方法を考えてみたけど、どうも効率が悪い方法しか思いつかなかった。
慣れてる人にはどうって事ないんだろうなぁ。

以下その効率の悪い描き方

塗りなし線ありの適当な円を描く

線を塗にする

オブジェクト – パス – パスのアウトラインを実行

塗りになった

もう一回線を引く

このまま線を追加すると、なぜか線の位置を変更出来なかったので
一回複合パスを解除して

[パスファインダ - 中マド]で再度複合パス

線の位置を選べるようになった(何が違うんだろう？

もう一度オブジェクト – パス – パスのアウトラインを実行して線を塗りに変更する。

あとは並べて分解して着色

適当に配置

[パスファインダ - 分割]でバラバラにして

着色

まだまだ着色、ここらへんの効率が悪い、どうにかならないかな。

完成

複合パスを分解して複合パスに戻すと、線の位置を選択できるようになるとか謎だけどイラレ面白いなー

だってテクスチャ開始位置がテクスチャを適用した矩形の左上からではなく、キャンバスの左上からで、矩形を生成した瞬間からは矩形を移動させても固定される。
まるで、矩形がテクスチャのマスクのような挙動をする。

例えば、こんなテクスチャを作った。

5pxのグリッド背景。

キャンバスの適当な位置に、矩形を作成して先程のテクスチャを適用する。

拡大してみると。

ズレてる。

選択ツールで掴んで移動してみる。

ズレたまま動く。

何やってんの?左上からリピートして下さいよ。

最初からキャンバスのx:0，y:0に作成しろって事なのかしら。

とりあえず修正する方法

拡大縮小ツールかCtrl+Tで矩形を変形。

左と上にラインが出現した、ここで変形を確定すれば完了。

本当に矩形がテクスチャのマスクのようだ。
変形中だけリンクが外れる感じ。

うちが知らないだけでもっと簡単にテクスチャの開始位置を変更する方法があるんでしょうか?

ハイパスでシャープみたいな効果を出す時は、オーバーレイとセットで使う。

少々ピントの甘い画像や、縮小加工した後には、シャープを軽くかけてる事かと思いますが(決め付け)、アンシャープマスクの代わりにハイパスを使うと、キレと存在感が増します。

そこで実際どう違うのか?どれくらい違うのか?をちゃんと見比べてみたくなったので、ハイパスとアンシャープマスクそれぞれ数パターン書き出してみました。

フィルタの設定

アンシャープマスク
( [フィルタ] – [シャープ] – [アンシャープマスク] ) /
量170% – 半径1.0px の決め打ちで、半径を変化させた。

ハイパス
( [フィルタ] – [その他] – [ハイパス] ) /
レイヤーを複製し、上レイヤーにハイパスを適用して描画モードをオーバーレイに。

sample1

sample2

(画像にもよるけど)ハイパスだと半径2~4くらいがいいかな?って感じでした。
あとkは、アンシャープマスクは全体的にシャープになるけど、ハイパスは部分的にシャープになる感じ。
ハイパスをかけたレイヤーの透明度を変えたり、灰色で塗ったりして調整も出来る。

シャープ関係ないけど半径10~20あたりも好きだなー。

ところでハイパスとはどういったもフィルタなのか?
adobeヘルプの説明だと
Adobe Photoshop CS4 * その他のフィルタ

ハイパス
カラーが極端に変化している部分で指定した半径内のエッジのディテールを保持し、それ以外の部分についてはエッジのディテールを抑えます。 半径に 0.1 ピクセルを指定すると、エッジのピクセルだけが保持されます。 ハイパスフィルタは、線数の少ないディテールを画像から削除して、ぼかし（ガウス）フィルタとは逆の効果を加えます。

XP
[スタート] – [すべてのプログラム]のプログラムの上で右クリック
[名前順で並び替え]

Vista / 7
最初から自動的に名前順で並び替える設定になってるらしい。

明示的

inputのidとlabelのforを揃える / IE6でも使える。

<input type="radio" name="gender" id="m" value="男" />
<label for="m">男</label>
<input type="radio" name="gender" id="f" value="女" />
<label for="f">女</label>

暗示的

inputをlabelで包む / IE6が対応してない。

<label>
<input type="radio" name="gender" id="m" value="男" />男
</label>
<label>
<input type="radio" name="gender" id="s" value="女" />女
</label>

同じグループなのでname=”gender”は一緒。

動作サンプル｜label for id

結局は、IE6が暗示的に結びつけられたlabelに対応してないから、記述の多い明示的な使い方をするしかなかったんですよね。
でも、もうそろそろ良いですよね。

formに必要なidとnameはDOCTYPEによって変わってくるみたい。

けどHTML4.01とXHTML1.0はとりあえず併記しておけば問題ないようだ
XHTML1.1は普段から使わないけど、formにnameを使わなければ問題ないぽい。
HTML5はどうなんだろう。

キーマップを変更するアプリ
常駐しない / フリーウェア

• KeyCtrl
• KeySwap for XP

常駐する / シェアウェア / MMOでも使えたりする

• keylay21

app keyの位置にaltを割り当ててるので
photoshopのピクセル等倍(ctrl+alt+Num0)とか
windowsのタスクマネージャー(ctrl+alt+del)とか
右手で楽チンに押せます。
無変換をNum0にすれば左手だけでピクセル等倍が出来るのでマウスを離さなくて済むけど何故か反応がイマイチなので右手でやってしまう。

以前は調子にのってwinキーや無変換、変換、カタカナ・ひらがなを全部spaceにしてたりもしたけど今はやってないです。

CapsLockがONになっていないかチェック。
なっていたらOFFに。

スマートオブジェクトに変換

[レイヤー] – [スマートオブジェクト] – [スマートオブジェクトに変換]
[レイヤー右クリック - スマートオブジェクトに変換]

一発だ。

レイヤーの描画モード：覆い焼きカラー

フォルダの描画モード：覆い焼きカラー

レイヤーの描画モード：覆い焼きカラー｜高度な合成変更

フォルダの描画モード：覆い焼きカラー｜高度な合成変更

ちなみに、[透明シェイプレイヤー]のチェックボックスの位置は、レイヤースタイル – レイヤー効果：カスタムのところ。

レイヤー効果を使って、グラデーションとか着色とか境界線とか描くと
いくらでも変更が効くし、なにしろお手軽で便利。
けどレイヤー効果にはフィルタが掛からない。

どうにかならないかなー？と試してみた。

結論から言うと、「レイヤースタイルをレイヤーに変換してそれにフィルタを適用」で代替にならないかな？
レイヤー効果の再利用性というのか非破壊性というのかそうゆうのは失われるけど、レイヤー効果を別の方法で作るよりは簡単。

なんでレイヤー効果にフィルタを使いたくなったかっていると
レイヤースタイルのグラデーションにガウス(ぼかし)を掛けたくなったから。

そんなん普段は新規レイヤー(ctrl+shift+n)作って好きなグラデーションで塗れば済むわけで、そうしてるけど、レイヤースタイルのグラデーションの位置とピッタリ一緒にするのって中々面倒くさかったりする(やり方やコツがあるのかもしれないけど、あいにく知らない)。

たとえば、400pxのカンバスに半径180pxの円を線幅20pxで描いて、それにガウス(ぼかし)を掛けたい時

うちが使う方法だと
半径180pxと半径160pxの円のカスタムシェイプ（じゃなくてもいいけど）を描く
大きい方のレイヤーをctrl+クリック(選択範囲作成)
続けて小さい方をctrl+alt+クリック(選択範囲削除)で選択範囲を作成して塗りつぶす。

それか半径180pxの円と半径160pxのシェイプで中マドにする。

そこから「ガウス(ぼかし)」をかけてました。

最初の円を、レイヤー効果の境界線で用意してあったとして
レイヤースタイルにフィルタが掛かるならそのまま「ガウス(ぼかし)」で済むけど、出来ない(やり方がわからない)。
だからわざわざ別の方法で作り直してフィルタをかける。
これがちょっと面倒くさい。
ってあれ、最初のお題目に話が戻った。

えーっとそれで
いままでレイヤー効果は全部、レイヤーを右クリックして「レイヤー効果」から選んでいたんだけど、別の場所からもレイヤー効果を掛けられる事に今さっき気づきました。

どこかというと上部ツールバー？の「レイヤー – レイヤースタイル – レイヤー効果」から

そしてその中にはレイヤーを右クリックした時とはちょっと違うものがあったんです
レイヤー – レイヤースタイル – レイヤーを作成(R)
これやると、どんなレイヤーが作成されるかっていうと、レイヤー効果がレイヤーになる。

半径180pxのカスタムシェイプにレイヤー効果で20pxの境界線を線の位置内側に設定してあるレイヤーを作成すると

これ境界線の位置が中央だと境界線だけのレイヤーが出来るのに内側と外側にしておくと、一発では出来ない。
いまいちまだ挙動がわからない。
中央だとちょっと使いづらいんだよなー。

でもとりあえず元となったカスタムシェイプ(画像でいったら下側のレイヤー)で選択範囲を作って、上のレイヤーを選択してctrl+Jすれば完成。

([追記]
:before 擬似要素 / :after 擬似要素でつくる画像を使わないふきだしの作り方はこちら

こことか

こことか

以下その説明。

動作確認用ページと素材

まず仕組みから

こうゆうイメージで作るとして

トンガリ部分は透過gifで作成しておく。

トンガリ部分をどの要素に持ってくるかが問題になると思うけど、今回は下の部分（青いエリア）の背景に配置した。
html的を色分けするとこんな風に。

例えば下の文章をふきだしにする場合

にんげんだもの - 320

「にんげんだもの」が赤エリアで「320」が青エリア。

htmlはこんな風にdlでマークアップした。

<dl>
<dd><p>にんげんだもの</p></dd>
<dt>320</dt>
</dl>

cssで必要な記述はこんな感じ？
用意しておいた尖がり部分の画像を「320」の背景にして、positionを使ってマイナス方向にずらす。

*{
	padding:0;
	margin:0;
}
dd{
	background:#d8d8d8;/*背景色*/
	border:2px solid #808080;/*線の色*/
}
dt{
	position:relative;
	top:-2px;/*ddのborder分、今回は線幅2で作ったので-2px上へ*/
	background:url(トンガリ画像.gif) no-repeat;
	padding-top:1em;
}

動作確認用ページと素材

多機能過ぎるCKEditorですが、ダウンロードしただけだとアップロード機能が有効になってない。
それを有効にするには？って話です。

ckfinderてのも必要です。

ダウンロードはこちらから
ckeditor
ckfinder

ファイルブラウザ/アップローダについて（英語）

ckfinder\_samples\js\ckeditor.html

を参考にしろと書いてあるようなので参考にしたものを以下のページにアップしました。

下準備
ckfinderのconfig.php
32行目近辺の return false;をtrueに
55行目近辺の $baseUrl = ‘/ckfinder/userfiles/’;お好みで

アップロード先のフォルダはckfinder/ckfinder.jsの中で指定してるようなので
.htmlみたいな言葉で検索してurlのところを変更

http://sakurachiro.com/_exercise/javascript/cke/

CKEditor For WordPress

WordPressのプラグインが出てた。
http://wordpress.org/extend/plugins/ckeditor-for-wordpress/

わかりづらくなってきたなーと感じたのでいざ改造してみようとしたら、これが結構思い通りにいかなかったというお話。

色々失敗したのだけれど、とりあえずそれはおいておいて。

まず検索。
カテゴリー一覧のページはarchive.phpを優先的に呼び出すらしいので
index.phpをベースにarchive.phpを作成。

• the_title(); で、記事のタイトル
• the_content(); で、記事の本文

今回は各記事のタイトルだけほしいのでthe_title();を使う。

1.なるべく1ページにまとめて表示させたいので、デフォルトの1ページに表示させる記事数を以下の記述で無効にさせる。

query_posts($query_string."&showposts=-1");

<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
<?php endwhile; endif; ?>

2.どのカテゴリーを吐き出してるかわかりやすくしたいので以下を追加

<?php single_cat_title(); ?>

ついでにh2でくるんでおく

<h2><?php single_cat_title(); ?></h2>
<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
<?php endwhile; endif; ?>

3.カテゴリー内の記事の数を表示させたい、ここでハマる。
以下ごり押しで

//記事の数をカウント
<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $mk_count++; ?>
<?php endwhile;endif; ?>
//吐き出す
<?php echo $mk_count; ?>

//記事の数をカウント
<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $mk_count++; ?>
<?php endwhile;endif; ?>

<h2><?php single_cat_title(); ?> <span>( <?php echo $mk_count; ?> )</span></h2>
<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
<?php endwhile; endif; ?>

記事を格納してる配列がどこか（何か）わかれば、それのlengthを参照して簡単にカテゴリ内記事数がわかりそうなんだけど、、、

4.次は

• 投稿日時「the_time()」
• カテゴリが複数にまたがってる時があるのでカテゴリ表示「the_category(‘, ‘);」
• あと最後に編集した時間（よく追記するので）「the_modified_date();」

を表示させる。

<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $mk_count++; ?>
<?php endwhile;endif; ?>

<h2><?php single_cat_title(); ?> <span>( <?php echo $mk_count; ?> )</span></h2>
<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
//記事の情報
初回:<?php the_time('Y年n月j日') ?>/
最終更新:<?php the_modified_date('Y年n月j日') ?>/
<?php the_category(', '); ?>

<?php endwhile; endif; ?>

5.これで欲しい情報はそろったので
あとは適当にマークアップして、cssで見た目を整えてみる。

以下カテゴリーの数を取り出すのに失敗した方法

<?php $cat = get_the_category(); $cat = $cat[0]; {
	wp_list_categories("include=$cat->cat_ID&show_count=1&title_li=&style=none&echo=0");
} ?>

get_the_category()でカテゴリのIDを取得して
wp_list_categoriesのincludeにぶち込む
wp_list_categoriesそのままだとliに包まれたり、カテゴリ名を表示されるので
show_count=1&title_li=&style=none&echo=0で色々解除

でもbrだけがどうしてもついてきちゃう。
wp-includesのclasses.phpを編集すればそれもどうにかなるみたいだけど
そこに手を加えたくないのでこの案はボツにしました。

たとえば以下のような配置をしたくなる時があります

上記画像は、横幅380pxの親ブロックの中に、横幅120pxのサムネイル画像を均等配置で3個入れてあります。
のでサムネイル毎の間隔は10pxかな。

そしてそれをコーディングする時、いままではこんな感じで書いてたとします
html部分

<dl>
<dt><img src="メイン画像までのパス" alt="メイン画像" /></dt>
<dd>
<ul>
<li><img src="サムネイルまでのパス" alt="サムネイル" /></li>
<li><img src="サムネイルまでのパス" alt="サムネイル" /></li>
<li class="last"><img src="サムネイルまでのパス" alt="サムネイル" /></li>
</ul>
</dd>
</dl>

css部分（余計な指定はすでにリセットしてあるとして）

dl{
width:380px;
}
dt{
margin-bottom:10px;
}
li{
float:left;
display:inline;
margin-right:10px;
}
li.last{
margin-right:0;
}

こんな感じで、liの最後に適当なclassをつけてmarginをリセットしてたんですよ。
これだと余計なclassをhtmlに書かなきゃならなくて、美しくないし面倒だなぁと思いながらも。

しかしさっきおや？と思ったわけです
右にmarginをとっていたけど、これ左にしたらどうだろう？と発想を変えてcssを

ul{
margin-left:-10px;
}
li{
float:left;
display:inline;
margin-left:10px;
}

こうしてみたら
.lastが必要なくなったアアアア

って話。