2015年02月27日


DIV に入れて、ドロップシャドウ( inline-block で、縦のスペースを取り去る方法 )

DIV を普通に使って中にコンテンツを入れると、DIV の横幅は中身の幅に同期しないので、inline-block を指定しました。そのおかげで横幅はぴったりになりましたが、縦の高さが何故か 2px 大きくなるので、line-height: 0px; を指定してみると、見事に綺麗に収まりました。

デモ

ただ、<!DOCTYPE html> で、HTML5 指定している場合に起きるのでこのブログでは必要ありません。

<style>
.shadow_bug {
	display:inline-block; 
	box-shadow: 10px 10px 20px #000;
}

.shadow_div {
	display:inline-block; 
	box-shadow: 10px 10px 20px #000;
	line-height: 0px;
}
</style>

<div class="shadow_bug">
<iframe width="420" height="315" src="https://www.youtube.com/embed/L_QVB4Qdh6o" frameborder="0" allowfullscreen></iframe>
</div>

<br><br><br><br>

<div class="shadow_div">
<iframe width="420" height="315" src="https://www.youtube.com/embed/L_QVB4Qdh6o" frameborder="0" allowfullscreen></iframe>
</div>

関連する Stack Overflow

Why display=inline-block adds uncontrollable vertical margins


posted by at 2015-02-27 00:39 | テクニック | このブログの読者になる | 更新情報をチェックする

2014年11月28日


WEB アーカイブと Google ウェブマスターツール / ペンギンアップデート以来不明なリンク切れエントリが急増


(Panguin Tool ( ペンギン・パンダアップデート影響確認ツール ) | Technology by Barracuda Digital)

気のせいか、この間のペンギンアップデート以来、よく解らないリンク切れのエラーが Google ウェブマスターツールで積み重なって行くのですが、どれも全く意味の無いエントリで、かなり前に公開をやめたブログの記事ばかりです。



しかも、リンク元にはそのリンクは無く、そもそも、リンク元がリンク切れしているものもあります。どうも、Google の解析が失敗しているらしいと思われる現象が他にもあって、JavaScript 内の処理結果を間違って判断しているような形跡もあります。

とは言え、Google に何か言うのはお角違いなので、こちらは対症療法を頑張るしかありません。( 該当する JavaScript は消しました )なので、リンク切れの記事をリニューアルして公開する方向で作業していますが・・・・・

ここで一つ問題が。

Google ウェブマスターツールでは、URL は解るのですがタイトルが解らないのでどの非公開記事なのかわかりません。リンク元にはもう既に無いのですから( 普通はこれで確認しますけれど )

そこで。

WEB アーカイブの出番です。一般のブログであれなんであれ、WEB アーカイブには見事に保存されていました。ほとんど当時のまま表示可能で、タイトルを取得する事は簡単で、そこからブログシステム内の検索で取り出す事ができます。

Wayback Machine - Internet Archive


WEB アーカイブは他にもいろいろ助かっています。

■ 対象サーバーがダウンしていてもダウンロード可能で記事も読める。
■ サイトが閉鎖していても、当時のままのソフトウェアがダウンロードできる。

特に、最近良くフリーフォントの配布先がなくなったりしていた事が多かったので、助かっています。

これは自分のサイトでも言える事で、URL さえどこかに保存できていたら、当時の文章やファイルを手に入れる事ができます。

関連する情報

サイトが閉鎖された Gray Graphics さんのフリーフォント



タグ:google
posted by at 2014-11-28 21:20 | テクニック | このブログの読者になる | 更新情報をチェックする

2011年12月29日


行の最後に画像を配置する為の HTML 記述

想定しているのは、いろいろ文章を書いた後の感情を表現する
顔文字を画像で綺麗に配置しようというものです

これは、PRE 内で使っています

いろいろたくさん記述していますが、ブラウザによって
違う部分を吸収しているものもありますし、画像が透過
ならば、『はんこ』のような使い方も想定しています   
これは、『にこっ』と笑っているつもりです
<pre>
想定しているのは、いろいろ文章を書いた後の感情を表現する
顔文字を画像で綺麗に配置しようというものです

これは、PRE 内で使っています

いろいろたくさん記述していますが、ブラウザによって
違う部分を吸収しているものもありますし、画像が透過
ならば、『はんこ』のような使い方も想定しています   <div style='display:inline;position:relative;vertical-align:top;'><img src="https://lh4.googleusercontent.com/-ZPa1qc-n16o/ToVXVz7nWuI/AAAAAAAADbM/5NqxuDbVAXc/s80/freefont_hanko_ArmedBanana.png" style='position:absolute;left:0px;top:-25px;border:0px' /></div>




これは、『にこっ』と笑っているつもりです<div style='display:inline;position:relative;vertical-align:top;'><img src="https://lh6.googleusercontent.com/-5nb2DVZzHqY/TvvvISq5LEI/AAAAAAAAEIU/bvo9fqq9jnw/s60/_img.png" style='position:absolute;left:20px;top:0px;border:0px' /></div>
</pre>


posted by at 2011-12-29 15:50 | テクニック | このブログの読者になる | 更新情報をチェックする

2011年01月04日


Google ホスティングファイルを使用した jQuery + jQuery ui + datepicker

現場点では、jQuery ui は、Google にあるものが信頼性が高いです。
( jQuery の配布サイトで使用されています )
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<style type="text/css">
.ui-widget {
	font-size:12px;
}
.ui-widget-content .ui-state-default {
	font-weight:bold;
	color:#000;
}
</style>

<script type="text/javascript">
google.load("jquery", "1.4.4");
google.load("jqueryui", "1.8.7"); 
</script>

<div style='height:230px;background-color:#c0c0c0'>
<input type="text" id="datepicker"/>
</div>

<script type="text/javascript">
$( "#datepicker" ).datepicker( {
	closeText: '閉じる',
	prevText: '&#x3c;前',
	nextText: '次&#x3e;',
	currentText: '今日',
	monthNames: ['1月','2月','3月','4月','5月','6月',
	'7月','8月','9月','10月','11月','12月'],
	monthNamesShort: ['1月','2月','3月','4月','5月','6月',
	'7月','8月','9月','10月','11月','12月'],
	dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
	dayNamesShort: ['日','月','火','水','木','金','土'],
	dayNamesMin: ['日','月','火','水','木','金','土'],
	weekHeader: '週',
	dateFormat: 'yy/mm/dd',
	firstDay: 0,
	isRTL: false,
	showMonthAfterYear: true,
	yearSuffix: '年'
} );
</script>

関連する記事

jQuery サイトからダウンロードする ui ライブラリで、スライダーが動きません


posted by at 2011-01-04 21:44 | テクニック | このブログの読者になる | 更新情報をチェックする

2010年11月12日


クッキーにJavaScript(ブックマークレット)でアクセスしてログアウトさせる

単純にログアウトするには、そのページ(またはドメイン)のクッキーを削除するだけで、
方法としては、

IEのクッキーをドメイン単位で削除する方法

Firefox で簡単にクッキーを削除する方法

がありますが、他のブラウザでも専用のクッキーをメンテナンスする機能があります
( IE のみ個別は無理なので特殊な処理で、Firefox にはオリジナルツールもあります )

ただ、良く実行する作業であれば、ブックマークレットとして登録して実行できます。
本来は、サーバーより Set-Cookies で送られるものですが、その代替え処理です。
Set-Cookie

ID=-1; Expires=Wed, 30-Nov-2078 09:20:10 GMT; Path=/ 
PW=""; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/
LK=""; Expires=Wed, 30-Nov-2078 09:20:10 GMT; Path=/
上の値は、あるサービスのログアウトした時に送られた値を、Firebug で取り出した
ものです。このサービスでは、他のサブドメインでもサービスがあるのですが、そちら
ではログアウトが無いので、この処理を実装して試してみたら動作しました。
javascript:document.cookie='ID=-1; Expires=Tue, 29-Nov-2078 09:28:30 GMT; Path=/;';document.cookie='PW=""; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/;';document.cookie='LK=""; Expires=Tue, 29-Nov-2078 09:28:30 GMT; Path=/;';location.reload(true);void(0);
この仕様では、ID に 数字のユーザーID がセットされるのですが、-1 をセットして
ログアウト扱いになるようです。LK と PW は不明ですが、特に変更しなくてもログ
アウトされます。

最後の location.reload(true) でサーバーより再度読み込むのですが、読み込む時の
要求でクッキーが送られます。( void(0); は、ブックマークレット用 )

具体的なクッキーにアクセスする JavaScript のコードは、Javascript cookies
を参照すると良く理解できます。但し、このサンプルでは削除するのに、
1秒過去を利用していますが、サーバから送られるクッキーでは、厳密には
同時刻であるという保証が無いので、明らかな過去が指定されています。
( PW=""; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/ )


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

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

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

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

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


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

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

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

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

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