fireworksで幅100pxぴったりの囲み枠あり画像を作る

ホームページ作成をしていると、サイズを1px単位で指定して、画像を作りたいときがあります。

htmlのwidthやheightで出力時にリサイズすることもできますが、ブラウザによっては画像が潰れます。きれいに表示するには、作成時にぴったりサイズの画像を作るのが確実です。

今回は、fireworksでバナーをつくったのでメモしときます。

バナーの条件

・幅100pxちょうど
・バナーを2pxのボーダーで囲む。ボーダーを含めて100px

fireworksで囲み線をつくるときは、「ストローク」を使います。
100pxの画像を作りたいからといって、画像を100pxちょうどで作るとうまくいきません。
ストロークでつくる囲み枠は元画像に外側に描かれます。したがって100pxの画像を2pxのボーダーで囲うと、合計で104pxの画像になってしまいます。

100pxちょうどにするには、画像サイズを96pxに指定します。
その後、ストロークを3pxに指定すると、画像の左右に2pxずつボーダーが描かれてぴったり100pxとなります。

ストロークは1pxで指定すると、画像の後に隠れて表示されません。したがって、1pxのボーダーを描きたいなら、2px、2pxのボーダーを描きたいなら3pxと、1px分多く指定する必要があります。

リストを横一列に並べた後に、右寄せ

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>

SEO的にいいWordPressのパーマリンク設定

カテゴリ + ポストID。
このサイトでも使用。

/%category%/%post_id%/

外がカリッ中がジュワのたこ焼きを作るのに押さえるべきポイント

 たこ焼き屋さん

先日たこ焼きをしたのでメモ。

目指すは外がカリッ、中がジュワっとしたたこ焼き。
案外うまくいったのでポイントを覚書しておく。

利用した生地は市販のたこ焼き粉の元。タマゴ、水の量もたこ焼き粉の袋裏のレシピどおり。

 
1.鉄板が熱くなるまで生地は入れない

うちのホットプレートは最大温度250度。最大まで上がってから油を敷き、生地を入れる。

 
2.ひっくり返せるようになったら90度だけ回転させる

生地を入れ、タコと具材も入れる。その上からまた生地を足す。
生地のそこが固まりひっくり返せるようになったら、90度だけひっくり返す。できた隙間に生地を足す。そしてこれ以上生地を足さずに丸くさせるのが理想。
うまいたこ焼きは中が空洞らしい(水に浮く)。中の生地を90度回転させて外に出すことで、空洞ができやすくなる。

 
3.表面をカリカリにするため、表面に油を塗る

銀だこの作り方を見るとわかるが、あそこは焼くというより揚げている。表面を揚げるとカリカリのたこ焼きになるため、回転させて丸を作りながら、揚げる。

 
この3点を押さえると満足いくたこ焼きができる。

記事やウィジェット内でPHPを実行するには

記事やウィジェット内でPHPを実行するには、プラグインを使う。

プラグイン名「exec-php」

ダッシュボードからプラグインの新規追加をして有効にすれば完了。

インストール後、記事の投稿画面にexec-phpからのメッセージが表示される。

このメッセージを消すには、ダッシュボードの「ユーザー」→「あなたのプロフィール」を開き、画面一番下「Exec-PHP Settings」項目の「Disable WYSIWYG Conversion Warning 」のチェックが付いてるのを確認して更新する。

スタイルシートの二つ以上のクラスを同時に適用する方法

スタイルシートの二つ以上のクラスを同時に適用するには、次のような感じに記述する。

<div class="one two">

ようは、半角スペースを入れて続けてクラス名を入れれば良い。

3つならこんな感じ。 

 <div class="one two three">

margin-topが効かない件

margin-topが効かなかった。

どうも「マージンの相殺」が起こっているらしい。

マージンの相殺が起こる原因はいろいろあるが、自分のケースは、margin-topを使った<div>を含む親要素に float: left; が使われていたため。

floatを解除しないとmarginが有効にならないようだ。

解決方法として「clearfix」なるものがあるらしい。

ただ、私には理解できなかったため、とりあえずその場しのぎで次の方法でfloatを解除し、事なきを得た。

有効にならないmargin-topの<div>の前に

<div>テキスト</div>

を記述。

スタイルシートには、

 .clear {
 clear: both;
}

と記述。

ようは普通にfloatを解除しただけ。

いずれclearfixを使わなければいけないだろうが、そのときまでこれでいこう。

野本のおぼえ書きを立ち上げた

WEB作成過程で学んだことを忘れないようにメモしておこう。

Hello world!

WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !

31 / 31« 先頭...1020...2728293031