tips タグの付けられた記事

『ペイントツールSAI 』 ver.1.0 を使用した、2009年版の制作過程を解説しています。
塗りながらの作成のため未完成です。メイキングで気分転換しつつがんばります (`・ω・´)ー３

ショートカットキー設定

一つ一つの手間は小さくとも、積み重なれば大きなストレスになってしまうもの。
こだわる点へは惜しまず、それ以外ではいかに楽をするか！いかにメンドくささを回避するか！

そんなときに便利なのが『ショートカットキー設定』です。

デジタルお絵描きさんは Ctrl ＋ Z 上が左手の定位置ですが、右手を描画に専念させるため『ショートカットキー設定』を駆使、もっと左手を有効に使いたいと思います。

: 鉛筆ツールをダブルクリックします。
: ショートカットキー欄に任意のキーを設定します。
自分が判りやすいものを、と Brush の『 B 』としました。

使用頻度の高いツールをすべて設定し、以下のようになりました。

ショートカットキー設定
ツール	キー	由来
	B	Brush
	P	Paint
	E	Eraser
	S	選択
	L	Loop
	A	Auto
	M	Move

これで、描画を中断 → ツールボックスへカーソルを移動 → ツールをクリック → キャンバスへカーソルを移動 → 描画 という手間が、左手でキーを押下するだけ！になりました。たったこれだけで、かなり効率が良くなります。

また、

: メニューバー → その他 → ショートカットキー設定 から、他にもさまざまな設定が出来ます。

わたしの場合の一例は以下のとおりです。

ショートカットキー設定
キー	作業	由来
D	選択領域表示	選択領域の解除キーに似せて
N	新規レイヤー	New
F2	レイヤー名変更	Windows 仕様
-	描画色 / 透明色切り替え
Shift ＋ Ctrl ＋ I	選択領域の反転	Photoshop 仕様

また、デフォルトで設定されているもので使用頻度の高いものは以下のとおりです。

ショートカットキー設定
キー	作業
PageUp	拡大
PageDown	縮小
End	時計回り回転
Home	位置リセット
Delete	反時計回り回転
H	左右反転
Ctrl ＋ A	全て選択
Ctrl ＋ C	コピー
Ctrl ＋ D	選択領域の解除
Ctrl ＋ E	下のレイヤーと結合 / レイヤーセットを結合
Ctrl ＋ F	レイヤーを塗り潰す
Ctrl ＋ N	新規キャンバス
Ctrl ＋ O	キャンバスを開く
Ctrl ＋ S	キャンバスを保存
Ctrl ＋ V	貼り付け
Ctrl ＋ W	閉じる
Ctrl ＋ X	切り取り
Ctrl ＋ Y	やり直し
Ctrl ＋ Z	元に戻す

これらのショートカットキーを使用するか否かで効率もストレスも随分違います。
デフォルトキーを覚えるも良し、使いやすいようカスタムするも良し、ご存知でなかった方は是非お試しください。

Before

: わたしも以前は 100% 幅のリキッドデザイン（可変幅）を採用していました。
画面全体を有効に活用出来、横スクロールも出ない、俺最高！と。

ところがあるとき、「ブラウザを最大化すると広がりすぎて見にくい」とのご指摘があり、その当時は「見にくいならウインドウ幅調節すれば良くね？そのためのリキッドなんだから」と、特に問題視していませんでした。わたしも最大化して見てはいますが、常にサイドバーを表示しているため、そう広すぎるとは思わなかったので。

しかし、［ウインドウ幅をそれぞれのサイトに合わせて調節しながら見る］ことと［横スクロールバーが表示される］、どちらも［普段の環境で快適に見られないことに対するストレス］という点において同列のものだと気付いたのです。

100% 幅の可変デザインの問題点は理解したものの、かといって固定幅は小さい画面に合わせると大きい画面で余白がありすぎて不恰好になってしまうし･･････という訳で出した結論は、

要素の幅の最小値と最大値を指定する CSS プロパティ［ min-width ］［ max-width ］
上記に対応していない IE6 には IE 独自のダイナミックプロパティ［ expression ］

これらを採用する、というものです。

After

わたしのサイトはイラストサイトなので、展示するイラストの横幅の最大値（ 600px ）を基準にします。余白は左右 30px ずつ取り、ボーダーは 6px ずつ加えました。

モダンブラウザ用 CSS

div.sample {
	border-left  : 6px solid #E5E5E5;
	border-right : 6px solid #E5E5E5;
	min-width    : 660px;
	max-width    : 900px;
	width        : 82%; }

最小幅は 672px （ 600px ＋余白 60px ＋ボーダー 12px ）
最大幅は 912px （ 840px ＋余白 60px ＋ボーダー 12px ）
その中間では、ブラウザの表示領域の 82% の幅にする

IE6 用 CSS

* html div.sample {
	width : expression(document.body.clientWidth < 691? "671px" : document.body.clientWidth > 832? "812px" : "auto"); /* IE */ }

ブラウザの表示領域が 691px 以下の場合は 671px に
ブラウザの表示領域が 832px 以上の場合は 812px にする

ここで注意しておかなければならないのは、< 691? "671px" と > 832? "812px" を、< 671? "671px" > 812? "812px" のように 同値にしてはいけない ということ。幅を変えるたびにブラウザが落ちて危険です。なんというブラクラ。少し余白を設けるように、数値に余裕を持たせてください。

参考リンク

イラストサイトである以上、イラストの最大幅よりも小さな表示領域の場合は横スクロールバーが出てしまうのは必至、と割り切りました。 max-width が min-width と ~~140px~~ 240px しか違わないのは、［広すぎても読みにくい］ということから自分が読みやすいと感じる値を算出した結果です。

最小値と最大値に迷っている方は、BROWSIZE.ORG でご自身のサイトの閲覧者の実状を研究してみてはいかがでしょうか。サイトの方向性によって結果がガラリと変わってくるので、他のサイトでの解析結果が必ずしも当てはまるとは限りません。

追記

min と max の差が僅かしかない。意味が無いような･･････。

はてなブックマーク - リキッドデザイン問題は max-width と IE6 用 expression で解決 - eclucifer blog

その［僅かな差］で横スクロールバーが出る Web デザインになったりするので、［僅かな差］というのは重要な問題。と思ったけれど、考えてみれば［ max ］なのだからもう少し広げても良い気がする･･････という訳で、100px 広げてみました。

おまけ

当サイトにおける過去一ヶ月のブラウザ利用状況（ Google Analytics 調べ）は以下のとおりです。

ブラウザ利用状況
Internet Explorer バージョン別利用状況

まだまだ IE 独断場といった感じ。やっと IE7 が IE6 を追い抜いたばかりですが、来年の今頃、遅くても再来年には IE6 への対応に一手間掛けずに済みそうな伸びではあります。やはり同梱のブラウザは強いですね。

画面解像度: ちなみに画面解像度の結果はこのとおり。横幅だけでなく、縦幅も考えさせられる感じ。ヘッダを大きくしすぎて肝心のコンテンツがスクロールしないと見えない、というサイトも結構あったりしますね。

『 HTML 実体参照変換ツールで楽々実体参照』に頂いた「 WordPress に実体参照変換プラグインが欲しい」というコメントを見て、そういえば応用出来そうなものがあったようなと eclucifer bookmark » WordPress を探してみましたら、ありました！

WordPress の投稿画面にクイックタグボタンを追加するプラグイン『 AddQuicktags 』 - ミblog

本来はタグ補完用に使うものですけれど、クイック的な意味でいろいろな用途に応用出来そうです。

使い方

『 AddQuicktag 』プラグインをダウンロード
解凍したフォルダをまるごと wp-content/plugins にアップロード
プラグイン管理画面にある『 AddQuicktag 』を［使用する］で有効化

『 AddQuicktag 』プラグインの設定画面を開きます。
［ラベル名］には自分が判りやすいものを入力します。
例では［ < ］［ > ］補完のクイックタグを作成するため、［ <> ］としました。
［開始タグ］には［ < ］と、
［終了タグ］には［ > ］と入力します。
［更新］ボタンを押して設定完了です。

新規投稿作成画面にクイックタグが追加されました。

作成した［ <> ］タグをクリックすると、本文に［ < ］と入力され、［ <> ］タグの表示が［ /<> ］に変わります。

もう一度［ /<> ］をクリックすると、本文に［ > ］と入力され、タグの表示が［ <> ］に戻ります。

変換するものが多い場合は『蓄々 HTML 実体参照変換ツール』にコピペした方が楽かもしれませんが、少ない場合や外部サイトを開く手間が面倒な場合に活躍しそうです。

コメントアウト tips

<!--
コメント
-->

前述の例のようにコメントが複数行に渡る場合はもちろんのこと、

<!--リストここから-->
<ul>
    <li>丸</li>
    <li>三角</li>
    <li>四角</li>
</ul>
<!--リストここまで-->

コメントだけの行の場合も、

<!--リストここから--><ul>
    <li>丸</li>
    <li>三角</li>
    <li>四角</li>
</ul>

コメントが先頭の場合でも、

<p><!--コメント--></p>

このように P 要素が自動挿入され、結果、意図しない表示になってしまいます。
これでは一見コメントアウト出来ないように思えますが、

<ul><!--リストここから-->
    <li>丸</li>
    <li>三角</li>
    <li>四角</li>
</ul><!--リストここまで-->

開始タグもしくは終了タグのすぐ後ろに挿入すれば回避出来ます。

その他の方法

そもそも意図しない P 要素自体を挿入させない

wp-includes/default-filters.php の108行目（ ver.2.5.1 ）にある

add_filter('the_content', 'wpautop');

を以下のようにコメントアウトすると、P 要素が自動挿入されなくなります。

// add_filter('the_content', 'wpautop');

P 要素の自動挿入を無効化するプラグイン『 Disable wpautop 』

プラグインの『 Disable wpautop 』を使用して、自動挿入される P 要素を無効化する方法もあります。詳しい解説は TechGaga の『 WordPress の p タグ自動追加をオフにするプラグイン: Disable wpautop 』をご覧ください。

お役立ち

スレッド

2008年10月16日に、レスの上限数が50件に制限されました。

50件に達したあとは、スレ主だけが一度だけ投稿することが出来ます。 cite: Twitter / drawr
絵を描いている途中で50件に達してしまっても、投稿が失敗することはありません。 cite: Twitter / drawr

eclucifer

01 ショートカットキー設定

ショートカットキー設定

関連エントリー

リキッドデザイン問題は max-width と IE6 用 expression で解決

Before

After

追記

おまけ

WordPress のクイックタグ追加プラグインで楽々実体参照

使い方

関連エントリー

WordPress の本文内でコメントアウトすると、P要素が自動挿入される件。

コメントアウト tips

その他の方法

関連エントリー

drawr に関するまとめ

お役立ち

スレッド

関連エントリー

Tag Cloud

Category

Recent Entry

RSS Feeds

Partner's site

eclucifer

01 ショートカットキー設定

ショートカットキー設定

関連エントリー

リキッドデザイン問題は max-width と IE6 用 expression で解決

Before

After

追記

おまけ

WordPress のクイックタグ追加プラグインで楽々実体参照

使い方

関連エントリー

WordPress の本文内でコメントアウトすると、P要素が自動挿入される件。

コメントアウト tips

その他の方法

関連エントリー

drawr に関するまとめ

お役立ち

スレッド

関連エントリー

Tag Cloud

Category

Recent Entry

RSS Feeds

Search

Partner's site