<< 2015年01月 | TOP | 2015年03月 >>

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

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

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

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

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

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


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

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


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

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

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>


この記述は、以下の場所で使用します