SQLの窓

2013年02月09日


CSS で画像が立ってるような影を付けて、画像の角は丸くしておく




プエルト アルカディア (トリップアドバイザー提供)
一般的なテストとして、外部の画像を使用しています。

影用の DIV を定義する

本体の DIV は見えていませんが、好きな形状で位置決めする為に、position:absolute で、z-index:-2 を指定して作成しています。これによって、幅や位置が自由に設定可能になります。

また、プレースホルダとして position:relative の DIV の中に定義する必要があります。

画像は通常の画像

position:absolute の DIV は、画像のスペースを無視して描画されるので、画像側は特に気にせず角を丸くする CSS と、影を表示する為のスペースとして margin-left:80px を指定しています。

角を丸くする border-radius は、代表的な5つのブラウザで動作しています。
transform のみ各ブラウザ用の指定 box-shadow は そのままで全て適用されましたが、transform はまだこのような指定が必要なようです。
<style type="text/css">
#shadow001 {
	left:28px;
	top:225px;
	width:556px;
	height: 90px;
	z-index: -2;

	box-shadow: -70px 100px 8px rgba(0, 0, 0, 0.4);

	-webkit-transform:skew(40deg);
	-ms-transform:skew(40deg);
	-o-transform:skew(40deg);
	transform:skew(40deg);
}

#img001 {
	margin-left:80px;
	border-radius: 10px;
}

</style>
<div style='position:relative;'>
<img id="img001" alt="" src="http://media-cdn.tripadvisor.com/media/photo-s/01/45/9b/57/puerto-alcudia.jpg" />
<div id="shadow001" style='position:absolute;'></div>
</div>
<br />
<a href="http://www.tripadvisor.jp/Tourism-g580312-Port_d_Alcudia_Majorca_Balearic_Islands-Vacations.html">プエルト アルカディア</a> (トリップアドバイザー提供)

確実に動作確認する為に、画像に対する自動的な描画になっいませんが、JavaScript を使えばある程度自動的にはできると思います。

参考にしたのは、CSS drop-shadows without images – Nicolas Gallagherデモページです。

説明読んでも解りづらいです。それほどデモは複雑に感じたので、開発者ツールで適用されている CSS をすこしづづ解除して動作を確認して再現しました。
この画像は、クリックすると拡大されます
posted by lightbox at 2013-02-09 17:55 | CSS3 | このブログの読者になる | 更新情報をチェックする

2013年02月08日


CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い


pre {
	white-space: pre;
	white-space: pre-wrap;
/*	white-space: pre-line; */
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
}
PRE 要素内では、改行コードが改行として表現されます。しかし、white-space の pre-line を指定すると『連続する半角スペース・タブ・改行を、1つの半角スペースとして表示』するので、連続する二行の改行が存在する場合どうなるか・・・という事なんですが。

Google Chrome をメインに使っていたので

これで何が問題なのか気が付かなかったのですが、Google Chrome ですと、改行の数がそのままになって、Firefox だと、改行がなくなるようなのです。で、IE はと言うと、Google Chrome に近い結果なのですが、他のパターンだと Firefox と似ている・・・という良く解らない事実に遭遇してしまいました。

結果的に、それぞれレイアウトが違う

もともとは、pre 内の文字列を自動改行する為に使った CSS の一部だったのですが、全てのブラウザで確認しなかった為にかなり長い間放置していた事になります。

PRE で改行を含めて文字列を配置しておくと、自分にとってはいろいろいい事があるので、昔から使っていたのですが(自分で改行位置を決めていた)、スマホに対応するのに『自動改行』が必要になりました。で、インターネットで調べて Google Chrome でテストしてうまくいったのでそのまま・・・という事です。

※ DIV 内で改行を BR にまかせている場合は発生しないと思います。



posted by lightbox at 2013-02-08 23:27 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2013年02月05日


Windows7 : VBScriptで、コントロールパネル内のエントリの実行

Windows7 で実行して確認しました。Windows XP 以前では少し違っていたのですが、当時のコードを Windows7 で実行すると動かなかったので再度テストしました。
' Windows7 での実行サンプル

Set objShell = CreateObject("Shell.Application")

' All Control Panel Items
ControlPanel = "::{21EC2020-3AEA-1069-A2DD-08002B30309D}"

' コントロールパネルをあらわすフォルダ
Set objFolder = objShell.NameSpace(ControlPanel)

' オブジェクトが正常に取得できた場合
if not objFolder is nothing then
	' フォルダの中のアイテムコレクションを取得
	Set objFolderItems = objFolder.Items
	For I = 0 to objFolderItems.Count - 1
		' 一覧の中から特定のエントリを対象とする
		if objFolderItems.item(I).Name = "日付と時刻" then
			' 実行は以下で確認しています
			objFolderItems.item(I).InvokeVerb()
			Exit For
		end if
	Next
end if


'電源オプション
'通知領域アイコン
'NVIDIA コントロール パネル
'タスク バーと [スタート] メニュー
'資格情報マネージャー
'既定のプログラム
'RemoteApp とデスクトップ接続
'Windows Update
'デスクトップ ガジェット
'Windows ファイアウォール
'電話とモデム
'Java
'音声認識
'ユーザー アカウント
'地域と言語
'ホームグループ
'マウス
'フォルダー オプション
'キーボード
'デバイス マネージャー
'Windows CardSpace
'パフォーマンスの情報とツール
'プログラムと機能
'インデックスのオプション
'ネットワークと共有センター
'保護者による制限
'自動再生
'同期センター
'回復
'インターネット オプション
'デバイスとプリンター
'色の管理
'バックアップと復元
'システム
'アクション センター
'フォント
'Windows Anytime Upgrade
'ディスプレイ
'トラブルシューティング
'はじめに
'管理ツール
'コンピューターの簡単操作センター
'Windows Defender
'日付と時刻
'位置センサーとその他のセンサー
'個人設定
'サウンド
'Realtek HD オーディオマネージャ
'DirectX
'メール
'Adobe Gamma
'Flash Player

Shell Objects for Scripting and Microsoft Visual Basic (Windows)


タグ:VBScript SHELL
posted by lightbox at 2013-02-05 14:54 | VBS + Shell | このブログの読者になる | 更新情報をチェックする

2013年02月03日


Seesaaブログでは最大で5つのブログを作成することが可能です

昔は 100 まで作成できていたのですが、現在は 5 つになっています
2012年4月のリニューアル以前に既にブログを5つ以上作成されている方につきましては、ブログは消えることはございませんが、リニューアル以降ブログを作成することができなくなります。
※新規に作成する際エラーが表示されます。
昔のヘルプはまだありますが、こんな感じでした。 複数のブログが作成できて、広告も出ずに、携帯やスマホも対応されていて無料で他社のアフィリエイトを自由に使えるブログはそうそう無いはずです。 テンプレートのカスタマイズについて ただ、以前あったテンプレートに関するリファレンスがなくなってしまっており、その方面には触れないようにされているようです。 よって、世の中の情報は古いものばかりですが、今のところ仕様変更がされている様子も無いので以下のような参考になるサイトもあります。 XHTMLとSeesaa独自タグ|スタイルシート(CSS)遊びのブログ ※ このあたりは全て自己責任ですが、ちょっと知っているとかなり得をする場合もあります。 Seesaa : 記事の投稿者に、記事編集用のダイレクトリンクを作成して、日付フォーマットに『年月日』を追加する ▲ この例では、ブログの記事から管理画面のその記事へ直接移動する方法を紹介しています。( 但し事前にログインしてそのブログの管理画面を開いておく必要があります ) 運用にあたって、知っておいたほうが良い事があります。 アクセス解析/ユーザ属性タブの『不明』エントリについて これらは一般のアクセスでは無いので、アクセスとしてはカウントしないで読む必要があります。実際のビューは、ユーザ属性タブの『合計-不明』だと考えるのがいいと思います。 ブログ設定の『最新の情報に更新』ボタン これはとても重要なボタンです。Seesaa のブログでの記事を含めた見た目の変更は、必ずしも即座にブログ全体に反映されない場合があります。酷い時は、ページを進める時に記事が飛んでしまう事もあります。そういう時は、このボタンを使う事によってほぼ完全に更新が行きわたるはずです。時々そういう状態に気が付いたら使うようにして、もし頻繁に起こるようでしたら、ブログを更新した後には使うようにするといいと思います。 独自ドメインが使える 普通、専用のドメインでは無く所有しているドメインのサブドメインを使うと思うので、以下にその例へのリンクを貼っておきます。 さくらインターネットで取得したドメインを使用して、そのサブドメインを Seesaa に設定する ※ 実際、Seesaa でいくつかサブドメインに割り当てています。 Seesaa の説明ページはこちらになります エクスポート とても使いやすく、ある程度一括でできるので、バックアップとして定期的に利用する事をおすすめします。 禁止ワードの設定 コメントを解放している場合は、必ず設定しておいたほうがいいと思います。『承認後表示』にしておけば問題無いですが、それだとコメントしてもらえるチャンスが減る事になるでしょう。少なくとも、コメントがあったらメールで連絡が来るようにはしておかないと、スパムでコメント欄が酷い事になります 補足 カテゴリは 100 個までです。 以下は、ブログ自身が100個作れるころに作ったまとめなので少し古いかしれませんが参考までに ひとつのアカウントで『5つ』作れる Seesaa ブログ - NAVER まとめ ※ 今ですと、知識さえあれば Tumblr がとても良い情報発信のツールとなると思います。 関連する技術的な記事 VBScript で Seesaaブログへ禁止ワード一括登録( アップロード ) Seesaa ブログのエクスポートを呼び出して全てをバックアップするスクリプト Seesaa の記事カテゴリをソートする IE 拡張
posted by lightbox at 2013-02-03 00:12 | 記録 | このブログの読者になる | 更新情報をチェックする

2013年02月02日


Google Chrome を一旦削除してやっと正常になった症状

誰もがなるような事では無いと思いますが、『おっかしいなぁ・・・』なんて場合は思い切っていったん削除するといいと思います
( ちなみに、こないだ iPhoneのTwitter のアプリも固まってしまったので一旦削除しました )

自分に起きていた症状

いずれもある日突然起こります。

1) コンボボックスの行間隔が異常に広くなる

2) YouTube の埋め込み動画の再生時にコントロール部分が乱れて崩れる

3) Tumblr の HTML 編集画面のスクロールの自由がきかない




※ 削除する前にブックマークは保存しましょう。
※ 登録している拡張機能の一覧を作っておきましょう


タグ:トラブル
posted by lightbox at 2013-02-02 23:10 | Google Chrome | このブログの読者になる | 更新情報をチェックする

Android : 画面定義で、Incorrect line ending: found carriage return (\r) without corresponding newline (\n)

原因は特定できていませんが、android - Incorrect line ending: found carriage return (\r) without corresponding newline (\n) - Stack Overflow で書かれている対処方法の

CTRL+SHIFT+F
( ソースを整形 ) 

を実行して保存すると、エラーが無くなりました。後は、通常に実行可能でした。

※ 出先の PC でフォルダごと保存したものを、自宅でインポートして発生しています。


posted by lightbox at 2013-02-02 22:21 | Android | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり