ブログ練習帳スクリーンショット

スクリーンショット

Dream Weaverでブラウザチェック用の設定ができない！

Dream Weaverでブラウザチェックするとき、F12を押すと、すぐにブラウザが立ち上がってくれます。ちょこちょこチェックしないと、驚きの結末が満載な見習としては、便利な機能です。ちょっとコードを修正するとF5とF12を押すクセがついてきました。ブラウザとしてなにを立ち上げるかはお好みで決められますぅ。

普段は、この機能で立ち上がるブラウザをIEとFire Foxに指定しています。ちょっと再設定の必要が出たので、この設定をしなおしました。

あれー、なぜか一つ目のブラウザしか、指定できないというワナにはまってしまいました。

ちなみに、環境はDream WeaverCS.5です。
って、そんな高度な違いがでるような間違いじゃないですね。こりゃ。

環境設定画面

原因は、とってもオマヌケでした。環境設定画面で、この図のように、プライマリにはIEが設定してありました。で、セカンダリを設定しようとしたとき、この画面の「初期設定」の「セカンダリブラウザー」へチェックを入れて、それから「編集」をクリックして、IEをFire Foxに指定しなおして…。とやっていました。

このやり方だと、何回やり直しても、1つしかブラウザを設定することはできません。

ということで、正しいやり方は…。

まず、「編集」から「環境設定」へと進みます。

ブラウザでプレビューを開きます。初期設定を見ると、プライマリブラウザーとしてIEが立ち上がる設定がしてあります。上にあるブラウザーの「＋」を押します。

この画面で、Fire Foxを指定します。セカンダリブラウザーにチェックを入れ、「参照」からFire Foxの実行ファイルがある場所を探していきます。ただ、こういうダウンロードしたプログラムは、どこにおいたか忘れてしまったり、どこにあるのかなぁと考えてしまうことが少なくないですが、デスクトップなどにそのショートカットが作成してあれば、そのショートカットを参照から選んでやっても、きっちり設定できます。

これでOKをクリックすると、環境設定の画面に戻ります。ブラウザーのところにIEとFire Foxのふたつがならんでます。プライマリに設定したIEはF12で、セカンダリに設定したFire Foxはctrl＋F12で起動します。

やったー、でけた。

と喜ぶのも、つかの間。立ち上がったFire Foxでのブラウザチェックでの結果を見て、ボーゼンとする見習です…。

2012年1月2日1:41 AM| カテゴリー：スクリーンショット,見習い奮闘記| コメント (0)

Word Pressのウィジェット、検索ボックスを追加する

Word Pressでブログを書くようになって、まだ日は浅いですが、少しずつ記事が溜まってきました。分からないことがいっぱいだから、メモることがいっぱい。当初の目的、「仕事場で、前に調べたことを、もう一度調べるのは時間がもったいないので、メモとしてブログ書いちゃえ」からすると、ちょっと不便になってきました。

使い勝手には、それなりに問題があるようですが、ないよりはイイじゃんという見習は、とりあえず、Word Pressのウィジェットですぐに使える検索ボックスを入れてみることにしました。

管理者の権限でログインして、「外観」の「ウィジェット」画面を開き、サイドバーのところに「検索」をドラックして移動させるだけ。基本はこれだけです。

検索ボックスが表示されたが…

ただ、これだけだと、悲しいまでにレイアウトが崩れてます。いきなり、ボックスがはみ出してるし、「検索」「検索」ってちょっとクドイ。ここだけ何とかしたいです。

先ほどドラックしたサイドバー内にある「検索」の▼をクリックすると、「タイトル」という項目があるので、ここに「サイト内を検索してみる」と入力し、「保存」をクリックします。

上部のサイドバーとスタイルは統一された

これで、他のサイドバーの項目と同じようなレイアウトで「サイト内を検索してみる」が記述されます。

ここで出力されるXHTMLを見ると

XHTML

<li id="search-4" class="widget widget_search"><h2 class="widgettitle">サイト内を検索してみる</h2>

<form role="search" method="get" id="searchform" action="https://pc.beginners-luck.net/pcwp/" >

<div><label class="screen-reader-text" for="s">検索:</label>

<input type="text" value="CSS" name="s" id="s" />

<input type="submit" id="searchsubmit" value="検索" />

</div>

</form></li>

とあります。

CSS

div#sidebar li.widget_search label.screen-reader-text {

display:none;

}

とすることで、ラベルの「検索」という文字を消すことができます。

また、検索ボックスが横にはみ出ているので、これを縮めたいですが、ここではinputに幅を指定すると、「検索」ボタンまで同じ長さになってしまいます。

[属性名="属性値"]を追加記載すると、属性名と属性値が一致したときのみCSSが適用されるので、

CSS

div#sidebar li.widget_search input[type="text"]{

width:95%;

}

とします。

最後にinput同士の間隔を整えると、

CSS

div#sidebar li.widget_search input {

margin:5px auto;

}

検索ボックスのスタイルも、一応それなりにキレイ

なんかそれなりになりました。

Word Pressのお勉強だと思ってましたが、CSSの指定方法で、属性名や属性値も使う方法を始めて使い、ちょっとカンドーな見習です。

ちなみに

CSS

div#sidebar li.widget_search input[type] {

margin:5px auto;

}

と記述しても、同じ結果になります。[属性名]という記述方法だと、その属性名と一致したものに適用されるので、属性値がtextもsubmitも含まれるからです。

2011年12月8日3:25 PM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)

Fire WorksでPhotoshopライブ効果をいくつも使う

Fire WorksのPhotoshopライブ効果って、よくお世話になります。文字を装飾したり、けっこうワンタッチでキレイに加工できます。

Fire WorksのPhotoshopライブ効果画面

1つのオブジェクトに、たくさんの効果を設定できますが、1つの効果を何度も繰り返しつけることはできないです。

たとえば、あるテキストに、線の効果をつけて、ドロップシャドウをつけて…とやるのはOKです。でも、1つのテキストに何回も線の効果をつけることはできません。

でも、グループ化をしてやると、それが可能になります。グループ化というと、複数のオブジェクトを1つのオブジェクトとしてまとめ上げて作業するときに使いますが、べつに1つのオブジェクトを単体でグループ化しても、できちゃいます。

ということで、こんなの作ってみました。

Bのしましま

まず、普通にBというテキストを入力し、そのテキストに線の効果を指定します。

テキストを入力後、Photoshopライブ効果の線を設定

このままだと、もう一回り外に線の効果をつけることはできません。が、このBというテキストのみを選択した状態で、グループ化のボタンを押すと（もしくはctrlとG)、B単体でグループ化され、先ほど設定したはずのPhotoshopライブ効果のところの設定が消えています。でも、テキスト自体には、先ほど設定した白い線は残っています。