ホームページ作成をしていると、サイズを１px単位で指定して、画像を作りたいときがあります。
htmlのwidthやheightで出力時にリサイズすることもできますが、ブラウザによっては画像が潰れます。きれいに表示するには、作成時にぴったりサイズの画像を作るのが確実です。
今回は、fireworksでバナーをつくったのでメモしときます。
バナーの条件
・幅100pxちょうど
・バナーを2pxのボーダーで囲む。ボーダーを含めて100px
fireworksで囲み線をつくるときは、「ストローク」を使います。
100pxの画像を作りたいからといって、画像を100pxちょうどで作るとうまくいきません。
ストロークでつくる囲み枠は元画像に外側に描かれます。したがって100pxの画像を2pxのボーダーで囲うと、合計で104pxの画像になってしまいます。
100pxちょうどにするには、画像サイズを96pxに指定します。
その後、ストロークを3pxに指定すると、画像の左右に2pxずつボーダーが描かれてぴったり100pxとなります。
ストロークは1pxで指定すると、画像の後に隠れて表示されません。したがって、1pxのボーダーを描きたいなら、2px、2pxのボーダーを描きたいなら3pxと、1px分多く指定する必要があります。
カテゴリー：fireworks
text-align:right;が効かず左よせになる。
答え 次のように変更する。
<div style="text-align:right;">
<ul>
<li style="float:left;">リスト</li>
<li style="float:left;">リスト</li>
<li style="float:left;">リスト</li>
</ul>
</div>
↓↓↓
<ul style="float:right;">
<li style="float:left;">リスト1</li>
<li style="float:left;">リスト2</li>
<li style="float:left;">リスト4</li>
</ul>
カテゴリー：css
カテゴリ ＋ ポストID。
このサイトでも使用。
/%category%/%post_id%/
カテゴリー：wordpress
先日たこ焼きをしたのでメモ。
目指すは外がカリッ、中がジュワっとしたたこ焼き。
案外うまくいったのでポイントを覚書しておく。
利用した生地は市販のたこ焼き粉の元。タマゴ、水の量もたこ焼き粉の袋裏のレシピどおり。
１．鉄板が熱くなるまで生地は入れない
うちのホットプレートは最大温度２５０度。最大まで上がってから油を敷き、生地を入れる。
２．ひっくり返せるようになったら９０度だけ回転させる
生地を入れ、タコと具材も入れる。その上からまた生地を足す。
生地のそこが固まりひっくり返せるようになったら、９０度だけひっくり返す。できた隙間に生地を足す。そしてこれ以上生地を足さずに丸くさせるのが理想。
うまいたこ焼きは中が空洞らしい（水に浮く）。中の生地を９０度回転させて外に出すことで、空洞ができやすくなる。
３．表面をカリカリにするため、表面に油を塗る
銀だこの作り方を見るとわかるが、あそこは焼くというより揚げている。表面を揚げるとカリカリのたこ焼きになるため、回転させて丸を作りながら、揚げる。
この３点を押さえると満足いくたこ焼きができる。
カテゴリー：料理
記事やウィジェット内でPHPを実行するには、プラグインを使う。
プラグイン名「exec-php」
ダッシュボードからプラグインの新規追加をして有効にすれば完了。
インストール後、記事の投稿画面にexec-phpからのメッセージが表示される。
このメッセージを消すには、ダッシュボードの「ユーザー」→「あなたのプロフィール」を開き、画面一番下「Exec-PHP Settings」項目の「Disable WYSIWYG Conversion Warning 」のチェックが付いてるのを確認して更新する。
カテゴリー：wordpress
スタイルシートの二つ以上のクラスを同時に適用するには、次のような感じに記述する。
<div class="one two">
ようは、半角スペースを入れて続けてクラス名を入れれば良い。
３つならこんな感じ。
<div class="one two three">
カテゴリー：css
margin-topが効かなかった。
どうも「マージンの相殺」が起こっているらしい。
マージンの相殺が起こる原因はいろいろあるが、自分のケースは、margin-topを使った<div>を含む親要素に float: left; が使われていたため。
floatを解除しないとmarginが有効にならないようだ。
解決方法として「clearfix」なるものがあるらしい。
ただ、私には理解できなかったため、とりあえずその場しのぎで次の方法でfloatを解除し、事なきを得た。
有効にならないmargin-topの<div>の前に
<div>テキスト</div>
を記述。
スタイルシートには、
.clear {
clear: both;
}
と記述。
ようは普通にfloatを解除しただけ。
いずれclearfixを使わなければいけないだろうが、そのときまでこれでいこう。
カテゴリー：css
WEB作成過程で学んだことを忘れないようにメモしておこう。
カテゴリー：未分類
WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !
カテゴリー：未分類
