IE8のドキュメントモードやブラウザモードについて
先日ローカル環境で作成していたwebページを社内のファイルサーバ（？）にアップしたら、なぜかサーバ上のページだけ表示が崩れるという事があった。
観覧に使用していたのはIE8だったが、どうやらIE8の互換表示によるものだったらしいので自分用に調べた。
参考
ブラウザの表示はドキュメントモードで決まる
ドキュメントモードとは、ページのレンダリング方法（HTMLやCSSの解釈方法）をIEのどのバージョンの方法でやるか指定するもの。
IE8のドキュメントモードは「Quirk」、「IE7標準」、「IE8標準」の3つがある。
各ドキュメントモードの意味は以下の通り。
| ドキュメントモード | 解釈方法 |
|---|---|
| Quirk | IE5のレンダリング方法を使う。互換モード |
| Internet Explorer 7 標準 | IE7のレンダリング方法を使う |
| Internet Explorer 8 標準 | IE8のレンダリング方法を使う |
IEのバージョンごとにレンダリング方法が異なるので、自分の意図するドキュメントモードで表示されなかった場合（たとえばIE8用に作ったサイトがIE5仕様で表示された場合）私のようにぐぬぬう！ってなるようだ。
今観覧しているページがどのドキュメントモードで表示されているかは[F12]キーを押して開発者ツールウィンドウを表示すると、メニュー部分に「ドキュメントモード」という欄があるのでそこを確認する。
ドキュメントモードの指定方法
解決策から先に書くが、ページ作成者側でドキュメントモードを指定するにはmetaタグを使えばよい（他の方法は参考サイトを参照）。
このmetaタグはlink要素などより下の行に記述した場合動作しないので注意（title要素や他のmeta要素よりは下でもよい）
<head> <meta http-equiv="X-UA-Compatible" content="IE=互換モード" /> <!-- ここから下にtitleとか --> </head>
上の「互換モード」でドキュメントモードを指定するわけだが、指定する互換モードによってはDOCTYPE宣言の影響をうける事がある。
具体的にはDOCTYPE宣言の内容により「古いブラウザ用」「標準仕様」の2つの状態に判断され、それぞれに対応したドキュメントモードが設定される。
- HTML3.0以下用のDOCTYPE宣言が書かれている
- HTML4.0FramesetとHTML4.0TransitionalでDTDのURLが書かれていない
- そもそもDOCTYPE宣言が書かれていない
上記のDOCTYPE宣言の場合は「古いブラウザ用」と判定される。それ以外は「標準仕様」となる。
それを踏まえて互換モードとそれに対応するドキュメントモードの一覧を示す。
| 互換モード | 適用されるドキュメントモード | DOCTYPE宣言の影響 |
|---|---|---|
| EmulateIE8 | 「古いブラウザ用」の時Quirkモード、「標準仕様」の時IE8標準モード | 受ける |
| EmulateIE7 | 「古いブラウザ用」の時Quirkモード、「標準仕様」の時IE7標準モード | 受ける |
| IE8 | IE8標準モード | 受けない |
| IE7 | IE7標準モード | 受けない |
| IE5 | Quirkモード | 受けない |
| edge | 使ってるブラウザで使用できる最新のバージョンでの標準モード（IE8ならIE8標準） | 受けない |
たとえばIE8標準モードで表示してほしいなら以下のように書く
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />
X-UA-Compatibleを指定していない場合は？
metaタグで互換モードの指定が行われていなかった場合、DOCTYPE宣言より「古いブラウザ用」と判定されたらQuirkモードで表示、「標準仕様」と判定されたらIE8標準モードで表示される。普通ならこれで問題ないはず。
ただし、この時「互換表示」という状態になるとIE8標準モードで表示されなくなってしまう。
私が引っかかっていたのはこれでした。
ブラウザモードと互換表示
IE8にはドキュメントモードの別にブラウザモードという設定がある。[F12]キーで表示される開発者ツールを見ると、ドキュメントモードの左にあるのがそれ。
ブラウザモードは「IE7」「IE8」と「IE8互換表示」の3つがある。
ブラウザモードによってユーザーエージェント、条件付コメント（[if IE 6 ]みたいなやつ）、そしてデフォルトのドキュメントモードが指定される。
たとえIE8を使っていてもブラウザモードがIE7になっていたら、UAはIE7になり、[if IE 7 ]の条件付コメントには引っかかり、デフォルトのドキュメントモードはIE7標準モードになる。
ここでやっと出てくるのが「IE8互換表示」というブラウザモードである。これが「互換表示の状態」にあたる。
互換表示状態になると先ほど出てきた「互換モード」がEmulate IE7になってしまう。つまりDOCTYPE宣言の判定の結果「古いブラウザ用」の時Quirkモード、「標準仕様」の時IE7標準モードで表示されるようになる。
互換表示になる条件と互換表示にしない方法
IE8標準モードで表示されているサイト（たとえばギャラリー – ストリートビュー – Google マップ）では、アドレスバーの右に紙が破れたような縁起悪いボタンがある。
このボタンを押すとそのサイトでのブラウザモードが「IE8互換表示」になる（もう一度ボタンを押さない限りそのサイトは次回以降も互換表示される）。
このような互換表示を避けたいならX-UA-Compatibleのmetaタグ等で互換モードを明示的に指定してしまえばよい。こうすれば互換表示ボタンも表示されない。
互換モードを指定していない場合は以下の状態で互換表示に切り替わってしまう。
- ユーザが互換表示ボタンを押す（ユーザの互換表示リストに載っている）
- サイトがマイクロソフトの互換表示一覧DBに登録されている
- サイトがイントラネット上にあり、イントラネットサイトを互換表示する設定になっている
- すべてのサイトを互換表示する設定になっている
これに関する設定はIE8のメニューの[ツール]→[互換表示設定]で確認できる。
（下図の番号はリストの番号に対応）
ユーザが互換表示ボタンを押す（ユーザの互換表示リストに載っている）
互換表示ボタンを押して互換表示設定の「互換表示に追加したWebサイト」にサイトを登録した状態である。
互換表示設定でリストを編集するか、そのサイトで互換表示ボタンを再度押せば解除できる
すべてのサイトを互換表示する設定になっている
そのまんまである。
補色のRGB値を計算する
色彩の知識は皆無なので詳細は良く知らんのだけど、補色のRGB値算出方法を探していたらIllustratorの補色の計算方法が載ってたのでメモ
補色の説明
下図みたいなRGBカラーの輪を作った時、その色の対角線上にある色が補色になる。
組み合わせるとちょっといい感じになる
Illustrator流補色計算
Illustratorの補色機能では次のように計算しているらしい
現在のカラーの RGB 値のうち最大と最小の値が合計され、その値から各構成要素の値を引いて、新しい RGB 値が生成されます。
Adobe Illustrator CS4 * カラーの反転色または補色への変更
この方法で下図のような黄色（R:255,G:216,B:31）の補色を求めてみる。
まずRGBの最大値はRの255、最小値はBの31なので、この合計値（xとする）は286になる。
このxから各値を引けば良いので、この色の補色のRGB値は以下のようになる。
R: 286 - 255 = 31
G: 286 - 216 = 70
B: 286 - 31 = 255
Illustrator流の計算では黄色（R:255,G:216,B:31）の補色は青（R:31,G:70,B:255）になった。
なお元色のRGB値に同じ値が複数含まれて居る場合（255,255,19とか）でも、値のみに注目して最大値と最小値を探せばよい。
まとめ
- R,G,Bの値のうち最大値と最小値を探す
- 最大値と最小値を加算する（この結果をxとする）
- xから元のRGB値をそれぞれ引く
ユーザCSSでpixivの特定ユーザの画像を非表示にするナンチャッテNG機能
2013/2/9：pixivの改装にあわせてユーザスクリプトを修正
pixivではユーザの投稿した画像のURLにユーザIDが含まれているので、CSSで特定ユーザのイラストを非表示にすることができます
大量に登録するにはあまり効率よくないと思います。
Firefox3.6での動作を確認しています。
@-moz-document domain("www.pixiv.net") {
img[src*="/ユーザID/"] , /*複数指定する場合はカンマ（,）で区切る*/
img[src*="/ユーザID/"] ,
img[src*="/ユーザID/"] /*最後の行にはカンマをつけない*/
{
display: none !important;
}
}上記コードの「ユーザID」の部分に非表示にしたいユーザのユーザIDを書けばOK
カンマで区切れば複数指定できます
ユーザIDを調べるにはそのユーザのスタックフィードのURLを見るのが手っ取り早いと思います
pixiv公式アカウントの場合なら
http://www.pixiv.net/stacc/pixiv
というURLですが、このURLのstacc/より右の英数字がユーザIDです
この例なら「pixiv」がユーザIDになります
指定するときはimg[src*="/pixiv/"]のように必ずユーザIDの両端に/をつけてください
つけないと意図しないユーザを非表示にしてしまう可能性があります
img[src*="/pixiv/"]は「URLに『/pixiv/』を含む画像を対象にする」という意味なので
img[src*="pixiv"]とした場合URLに『pixiv』を含む画像が対象になり、恐らく全てのユーザの画像が見えなくなると思います
私は一々スタックフィード見たりするのがめんどくさいので、下記のユーザスクリプトで、プロフ画像下部にユーザIDが表示されるようにしています。
もっといい方法があると思うんですが、Javascriptは良くわからず
// ==UserScript==
// @name pixiv
// @namespace test
// @include http://www.pixiv.net/*
// @grant none
// ==/UserScript==
//プロフィール画像を取得
var getID = document.getElementsByClassName('user-image')[0];
//画像srcを抽出
var userID = getID.src;
//画像がデフォルトか判定
if (userID == "http://source.pixiv.net/source/images/no_profile.png"){
//スタックフィードのリンクを取得
//ユーザメニュー内の4番目のリンクURLを取得
getID = document.getElementsByClassName('tabs')[0].getElementsByTagName('a')[3];
//リンクからURLを取得
userID = getID.href;
//URLからIDを抽出
var SrcNum =userID.indexOf("/stacc/");//切り取り開始位置特定
userID = userID.slice(SrcNum + 7);//切り取り実行
}else{
//画像がデフォルトでないなら画像srcを使う
var SrcNum =userID.indexOf("/profile/");
userID = userID.slice(SrcNum + 9);
SrcNum =userID.indexOf("/");
userID = userID.slice(0,SrcNum);
}
//cssを追加 11/7/14 ADD
userID= " img[src*=\"/" + userID +"/\"],";
//テキストエリアを作成
var CopyID = document.createElement("input");
CopyID.type="text";
//ユーザIDを表示
CopyID.value= userID;
CopyID.setAttribute("onclick", "CopyID.select();");
//テキストエリアを挿入
var objBody = document.getElementsByClassName('user-relation');
var title_node = objBody[0];
title_node.appendChild(CopyID);
WordPressのdefaultテーマを改造してコメント欄を作る：後編（コメント一覧のカスタマイズ）
前編：WordPressのdefaultテーマを改造してコメント欄を作る：前編（準備と入力欄） - 残像ブログ
前編で改造したcomments.phpで、コメント一覧の出力をしていたwp_list_comments()の改造を行う
wp_list_comments()について
wp_list_comments()はデフォルトのままだと下記のようなHTMLを生成する。
このHTMLはwp-includes/comment-template.phpのWalker_Commentクラスのstart_el()メソッドに記述された内容から出力されている。
<li class="comment even thread-even depth-1" id="comment-2"> <div id="div-comment-2" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">名前</cite> <span class="says">より:</span> </div> <div class="comment-meta commentmetadata"> <a href="http://localhost/blog/memo/246.html/comment-page-1#comment-2"> 2011年7月31日 8:36 PM</a> </div> <p>コメント本文</p> <div class="reply"> <a class='comment-reply-link' href='/blog/memo/246.html?replytocom=2#respond' onclick='return addComment.moveForm("div-comment-2", "2", "respond", "246")'>返信</a> </div> </div>
このHTMLを図にすると下図のようになる
引数によってliをdivにする('style=div'）などの変更はできるが、名前をコメント本文の後に持ってくるなどの変更は引数では指定できないので、細かく変えたい場合はfunctions.phpを使う。
functions.phpに出力コードをコピー
wp_list_comments()の出力内容が記述してあるstart_el()メソッドの最初の方に下記のようなコードがある
if ( !empty($args['callback']) ) {
call_user_func($args['callback'], $comment, $args, $depth);
return;
}wp_list_comments()にcallback関数が設定してあれば、callback関数の方を実行してメソッドを抜ける感じの内容っぽい。
なのでwp_list_comments()の引数にcallback関数を設定して、functions.phpにcallback関数の内容を書きます。
wp_list_comments()にcallback関数を設定
comments.phpのwp_list_comments()の引数を書き換える。関数名は任意に考えてよい。
<?php wp_list_comments('type=comment&callback=関数名'); ?>
functions.phpに関数を作り、start_el()のcallback読み込み以降のコード（$GLOBALS['comment'] = $comment;からメソッドの終わりまで）をコピーする。
関数名はwp_list_comments()で指定したものと同じにする。
function 関数名($comment, $args, $depth){
$GLOBALS['comment'] = $comment;
extract($args, EXTR_SKIP);
（略）
</div>
<?php endif; ?>
}
callback関数を改造
あとはfunctions.phpにコピーしたコードを好みに合わせて改造すればよい。
投稿者名表示部
<div class="comment-author vcard">
<?php if ($args['avatar_size'] != 0) echo get_avatar( $comment, $args['avatar_size'] ); ?>
<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
</div>div内1行目でアバターの処理、2行目で投稿者名を表示している。
「%s」が投稿者名、「says:」の部分は日本語環境だと「より：」にあたる。
承認待ち時表示部
<?php if ($comment->comment_approved == '0') : ?> <em class="comment-awaiting-moderation"><?php _e('Your comment is awaiting moderation.') ?></em> <br /> <?php endif; ?>
コメントの承認待ち時に表示される部分。
comment_approvedにはコメントの承認状態が記録されている（DBのwp_commentsテーブルのフィールド）これが"0"だと承認待ち、"1"だと承認済みになる。（参照：データベース構造 - WordPress Codex 日本語版）
承認待ちの場合、承認待ちである旨のメッセージ（Your comment is awaiting moderation.）を表示する。
投稿日時表示部
<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"> <?php /* translators: 1: date, 2: time */ printf( __('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),' ','' ); ?> </div>
投稿日時を表示してコメントのパーマリンクをしている。
「%1$s」が投稿日時（get_comment_date()）、「%2$s」が投稿時間（get_comment_time()）になる。
デフォルトだと「2011年7月31日 11:36 PM」と表示されるが、書式を変更したい場合は各関数の引数に書式を指定する（参照：日付と時刻の書式 - WordPress Codex 日本語版）
編集権限がある場合のみedit_comment_link()によりコメント編集リンクが出力される（(Edit)）
WordPressのdefaultテーマを改造してコメント欄を作る：前編（準備と入力欄）
サイトのコメント欄を改修したので忘れないうちにメモする。長くなったので前後編。
コメント周りはなんかよくわからないので不安な感じである。
今回は上図（わかりにくい）のような返信をつけられるタイプのコメント欄を作成する。
主な目的は下記2点
- defaultテーマ（バージョン1.6）のcomments.phpを改造して自分用コメント欄を作る
- コメント欄に返信機能を追加する（返信は入れ子で表示）
後編でやること（コメント一覧のカスタマイズ）
- functions.phpにカスタムコメント一覧を書く
ダッシュボードでの設定
ダッシュボードで[設定]→[ディスカッション]からコメント関係の設定ができる。
「他のコメント設定」の「コメントをn 階層までのスレッド (入れ子) 形式にする」にチェックをいれる。
今回は入れ子の階層は3階層に設定した。
テンプレートの編集
返信用jsの読み込みコードを追加
返信機能を実装するには専用のjavascriptを読み込む必要があるので、下記コードをheader.phpのwp_head();より上に追加
（22/08/31追記：コードを読み込まなくても返信自体はできるみたい。読み込まなかった場合、返信する時のコメント入力欄の自動移動が行われなくなるっぽい）
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
is_singular()は固定ページ、個別記事ページ、添付ファイルページのいずれかを判定する条件分岐タグ（条件分岐タグ - WordPress Codex 日本語版）
comments.phpを用意
ベースにdefaultテーマ（バージョン1.6）のcomments.phpを使うので、wp-content/themes/defaultのcomments.phpを自分のテーマのファイルにコピーする。
defaultテーマは翻訳を前提でつくられているので、comments.phpだけをコピーすると見出しなどの文言が英語で表示されてしまう（多分）。
defaultテーマに入っているja.moを一緒にコピーしてくれば日本語になるが、今回は自分用として作るのでcomments.phpの文言を直接日本語になおす作業を行う。
comments.phpの改造（コメント一覧部分）
20〜46行目のif区内は投稿されたコメントの一覧表示をする部分になる。
コメントの一覧自体の改造は後編で行うので、ここでは見出しのみ変更する。
21行目：コメント一覧の見出し
<h3 id="comments"> <?php comments_number(__('No Responses', 'kubrick'), __('One Response', 'kubrick'), __('% Responses', 'kubrick'));?> <?php printf(__('to “%s”', 'kubrick'), the_title('', '', false)); ?> </h3>
comments_number()は投稿されたコメントの数により表示する文言を切り替える。（コメントなし、コメントが1つ、コメントが2つ以上）（テンプレートタグ/comments number - WordPress Codex 日本語版）
__('hoge', 'kubrick')という書式は翻訳の為のものなので、自分用のテーマなら__()の部分を丸々''で囲った文字列に書き換えてしまってよさそう（WordPressのdefaultテーマに出てくる__（アンダーバー2つ）の表記について - 残像ブログ
comments.phpの改造（コメント入力覧部分）
49〜96のif区内はコメントの入力欄を表示する部分になる。
65行目の分岐により、非ログイン時のみ名前・mail・webサイト入力欄が表示される
53行目：コメント入力覧の見出し
<h3><?php comment_form_title( __('Leave a Reply', 'kubrick'), __('Leave a Reply for %s' , 'kubrick') ); ?></h3>
comment_form_title()はコメント返信モード（各コメントの「返信」リンクをクリックした状態）か否かによって表示を変える（第1引数が返信モード時の表示）。
この表示の切り替えはjavascriptが無効の場合にのみ行われる。
javascriptが有効になっている場合はコメント入力欄そのものが返信対象コメントの真下に移動する。無効の場合はコメント入力欄が移動しないので、返信中なのか違うのかわかるように見出しの表示を切り替える。
56行目：返信キャンセルのリンク
<small><?php cancel_comment_reply_link() ?></small>
返信モードの時にのみ表示される。
引数に文字列を指定するとその文字列がリンクテキストになる。指定しないと「返信をキャンセル」と表示する。
60行目：ログイン必須時の警告文
ディスカッション設定で「ユーザー登録してログインしたユーザーのみコメントをつけられるようにする 」にチェックを入れている場合、ログインしていないと表示される。
67行目：ログイン時の名前表示
<p><?php printf(__('Logged in as <a href="%1$s">%2$s</a>.', 'kubrick'), get_option('siteurl') . '/wp-admin/profile.php', $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out of this account', 'kubrick'); ?>"><?php _e('Log out »', 'kubrick'); ?></a></p>
ログインした状態だと名前とログアウト用のリンクが表示される。
printf()内の「%1$s」がダッシュボードのプロフィールページへのリンク。「%2$s」がユーザ名となる。
72,75,78,86行目：各入力欄のラベルと送信ボタン
<label for="author"><small><?php _e('Name', 'kubrick'); ?> <?php if ($req) _e("(required)", "kubrick"); ?></small></label></p>「if ($req)〜」の部分は、ディスカッション設定で「名前とメールアドレスの入力を必須にする」にチェックをした場合表示される。
WordPressのdefaultテーマに出てくる__（アンダーバー2つ）の表記について
defaultテーマのcomments.phpの25行目あたりに
<?php comments_number(__('No Responses', 'kubrick'), __('One Response', 'kubrick'), __('% Responses', 'kubrick')); ?>
という表記があり、「この引数の書き方はなんだ？」と思ったのでメモ
参考
WordPress › フォーラム » テーマ「default」内に有る、kubrick.pot 等の役割に関して
Gettextによるウェブアプリケーションの国際化と地域化 （1/4）：CodeZine
言語のローカライズ（翻訳？）の為の物
WordPressはGettextという文字列ローカライズ用のフレームワークを使っているそうです。__()って表記はその為のものらしい。
defaltテーマのフォルダの中に入ってる以下の3ファイルはGettextに関連したファイルです。
- kubrick.pot
- ja.po
- ja.mo
このGettextの仕組は以下のようになっています。
- phpコードに翻訳文字列を特定する文字列idを記述する
- 訳を記述する為のテンプレートファイル（pot形式）を生成する
- 翻訳者がテンプレートをコピーして翻訳を記述する（po形式）
- poファイルからmoファイルを生成（訳はこのファイルから読み込まれる）
こうする事によって、開発者と翻訳者の作業を分けることができるとか
1.phpコードに翻訳文字列を特定する文字列idを記述する
<?php comments_number(__('No Responses', 'kubrick'), __('One Response', 'kubrick'), __('% Responses', 'kubrick')); ?>
（このcomments_number()というテンプレートタグは、記事のコメント数を数えて、その数により表示する文字列を指定できる。引数1はコメントなしの場合、引数2はコメントが1つの場合、引数3はコメントが2つ以上の場合）
コードの「No Responses」「One Response」「% Responses」が文字列idです。文字列idは翻訳した文字列を挿入したい場所に記述します。
後の「kubrick」は翻訳ファイルを読み込むためのものらしいけど良くわからん。
2.訳を記述する為のテンプレートファイル（pot形式）を生成する
生成作業については略
生成されたpot形式のファイル（defaltテーマではkubrick.pot）は以下のようになっています（kubrick.potの245〜255行）
#: comments.php:21 msgid "No Responses" msgstr "" #: comments.php:21 msgid "One Response" msgstr "" #: comments.php:21 msgid "% Responses" msgstr ""
「No Responses」「One Response」「% Responses」の文字列idが指定されていますが、テンプレートなので翻訳を記述するmsgstrの部分は空です。
3.翻訳者がテンプレートをコピーして翻訳を記述する（po形式）
翻訳者は2のkubrick.potをコピーしてja.poファイルを作り、そこに訳を記述していきます（ja.poの245〜255行）。
#: comments.php:21 msgid "No Responses" msgstr "コメント / トラックバックはありません" #: comments.php:21 msgid "One Response" msgstr "コメント / トラックバック1件" #: comments.php:21 msgid "% Responses" msgstr "コメント / トラックバック%件"
先ほどは空だったmsgstrに訳が記述されています。
（「% Responses」の訳にある%マークはcomments_numberでコメント数を表示させる為の物）
Photoshopでのペンツールの使い方メモ（フキダシの作成）
こんな感じのフキダシをパスで作ろうとして「どうすればいいんだっけ」ってなったので忘れないようにメモ
Photoshopは良くわからんのでいつも以上にトチ狂った事書いてるかもしれないけどメモ
ここで使ってるのはCS2です
目次
- 各部名称
- ツールの切り替え
- 叫び吹き出しの描き方
- 作ったパスをシェイプとして保存する
- 吹き出しシェイプの使い方例
プロフェッショナルな参考サイト
各部名称
ツールの切り替え
ペンツール時にAltとかShift押してる間はツール切り替えられる
| キー | ツール | 備考 |
| Alt |  アンカーポイントの切り替えツール |
 アンカーポイント上だとこれ |
| Ctrl |   パス選択ツール／パスコンポーネント選択ツール |
どちらか最後に使った方になる。パス選択ツール（白い方）を良く使う |
叫び吹き出しの描き方
描き始める前に、オプションバー（メニューバーの下のバー）でパス状態になっているか確認する。
左端のシェイプレイヤーになっていると描いてる最中に色がついたりして個人的に見づらい
アンカーポイントの切り替えツール（Altを押す）で方向線（ハンドル）を動かすと、真っ直ぐな方向線がぺキッと折れるので、これを吹き出しの内側まで曲げる。
同様にアンカーポイント作成＋方向線曲げを繰り返す。
アンカーポイント自体を動かしたい時は、Ctrlを押しながら（）アンカーポイントをドラッグすればいい。
最初のアンカーポイントまでパスを繋げて（
カーソルがこんな風になる）出来上がり。
冒頭の吹き出しのパスはこんな感じになっている。
まとめると
曲線の中に角を混ぜたい時は方向線を曲げちゃえばいい
予断だが、逆に角を曲線にしたい場合は、Altを押しながら（）アンカーポイントをドラッグすると、方向線がニュッと現れる。
作ったパスをシェイプとして保存する
せっかく作ったパスなんだから保存しておいて使いまわしたい
パスパネルで作成したパスを選択。この状態でメニューの[編集]→[カスタムシェイプを定義]を選択。
ダイアログが出るので好きな名前をつけてOKを押下する。
カスタムシェイプツールでシェイプの一覧を見てみると、今作成したカスタムシェイプが追加されている。
右上の横向き▲をクリックしてポップアップメニューから「シェイプを保存」を選択すれば、cshファイルとしてエクスポートできる。
ただし、現在のカスタムシェイプ一覧にあるシェイプはセットで一緒に保存されてしまうみたいなので、不要なシェイプはAltキーを押しながらクリックして削除する（既に保存済みのシェイプなら、この一覧で削除しても再度読み込めばいいので気にしない）
保存したシェイプセットを読み込みたいときは、先ほどのポップアップメニューから「シェイプの読み込み」を選ぶと、一覧にシェイプのセットが追加される。
「シェイプの置き換え」を選ぶと、一覧が選択したシェイプのセットのみに書き換えられる。
吹き出しシェイプの使い方例
使い方というか枠のつけ方で、これは色々な方法があると思うのだが、私はレイヤスタイルの「境界線」で設定している（線の変更も楽だし、台詞部分の背景透過有無も調節が楽だから）。
このとき位置パラメータは「中央」にする。
「外側」にするとなんか角が丸いようなボヤっとしたようになってかっこ悪い。
「内側」にするとちょっと尖りすぎてるように見える（場合によってはこれでもいいかもしれない）。
