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 | Comment(0) | テクニック | このブログの読者になる | 更新情報をチェックする

2015年02月26日


Seesaa のテンプレートのタイトル部分 ( 2015年2月現在 ) 晴れ

このままですと、改行が入ってしまうので使える事は使えますが、展開された HTML ソースはあまり見栄えは良くありません。
<title>
<% if:page_name eq 'search' %>
  <% keyword %>: 
<% /if %>

<% if:page_name eq 'archive' %>
  <% extra_title_datetime | date_format("%Y年%m月") %> : 
<% else %>
  <% if:extra_title %>
    <% extra_title | remove_emoji %> :
  <% /if %>
<% /if %>

<% if:current_page > 1 %>(
  <% current_page %>) 
<% /if %>

<% blog.title %>
</title>

しかし、タイトルだけでかなりのテンプレート情報が含まれています。少なくとも if 文による HTML の出力についてとても参考になると思います。

まず、通常の記事ページとカテゴリページの場合のタイトルは、extra_title であり、それがある時に extra_title より絵文字を省いて出力しています。

remove_emoji は、記事のテキストエリアで使える絵文字です。結局 img 要素ですが、この記事でもタイトルとして使えています。ですが、title 要素内で使うのはまずいので remove_emoji で削除できるという事です。

この際の |(縦棒)は、いわゆるパイプの役目をして、他の文字列変換に繋げる事ができます。

current_page は、複数ページがある場合、現在が何ページかという数値が入っているので、この例では 2 ページ目以降ではタイトルに ( ページ数 ) が出力されます

※ 昔は、<%- または -%> で前後の改行コードを取り除いていた記憶があるのですが、動作しませんでした。


posted by at 2015-02-26 19:22 | Comment(0) | Seesaa | このブログの読者になる | 更新情報をチェックする

2015年02月22日


超簡単。Panoramio

ブックマークレツトをブラウザに登録
Panoranioサイト用ブックマークレット
Panoramio へ行って好きな画像を表示

ブックマークレットを実行すると、コードを取得するページへ移動するのでそれをブログに貼り付ける。
※ 移動したら、プレビューボタンをクリックしてから、とりあえず『画像サイズで最適化』ボタンをクリックして下さい
<script> 
if ( window[window.location.hostname+'.panoramio'] !== true ) { 
	window[window.location.hostname+'.panoramio'] = true; 
	if ( !window.CPWA ) { 
		document.write("<"+"script src=\"http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja_JP\"></"+"script>"); 
	} 
	(function(){ 
	var str; 
	str=""; 
	str+="<style type=\"text/css\">"; 
	str+=".panoramio-wapi-photo .panoramio-wapi-images {"; 
	str+="	background-color: #ffffff;"; 
	str+="}"; 
	str+="</style>  "; 
	document.write(str); 
	})(); 
} 
</script> 
<div id="p90768"></div> 
<script> 
(function() {  
var wapiblock = document.getElementById('p90768'); 
var myOptions = { 
	'width': 600, 
	'height': 408, 
	'openLinksInNewWindow': true 
}; 
var photoRequestOptions = { 
	ids: [{ 
		'photoId': 90768, 
		'userId': 7 
	}] 
}; 
window[window.location.hostname+'.widget'] = new panoramio.PhotoWidget(wapiblock, photoRequestOptions, myOptions); 
window[window.location.hostname+'.widget'].setPosition(0); 
})();  
</script> 

Cathedral of Segovia
金閣寺




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

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

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

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

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


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

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

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

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

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