どうもこんにちは、うちのサイトではサムネイル表示の画像リンクにHighSlideを使用してポップアップ表示させています。

こんな奴ですね。

workspace_csp_20130114.png

ただこれの使用方法がちょっと面倒でして、サムネイルのaタグにいくらか記述が必要です。

なので今回はその記述を自動化する方法を紹介します。

とある事情により、日本語英語混在の文で半角スペースを排除する正規表現を探していたんですけど、普通に\sだとすべての半角スペースに一致してしまうため、英文の半角スペースまで一致してしまうんですよね

今回やりたいのはあくまで日本語を含めた文での英文以外の半角スペースを排除することなので上記だとダメダナ(・×・)

というわけでいか試行錯誤の結果

答えだけ知りたけれはCASE4見ればいいよ

最近絵の記事が全くない御堂です。

てめぇ本当に絵描か?

それはさておき、Chromeの未認証サイトを非推奨にする動きが本格的になりまりましたね。

当サイトにも連絡が来てました。

なのでいい機会ですし近々SSLを導入しようと思います。

ただレンタルサーバーの方がHTTP/2に未対応なのでそこの恩恵はまだ無いです(対応予定のアナウンスはあるのでそのうちなると思いますが)

とりあえずはChromeにて『保護されていません』となる対策に収まりますね。

ついでにPHPも7に切り替える予定なのでそちらの面では多少サイトの表示が速くなるかもしれません。

まぁ、この記事を書いてる時点ではまだ作業してないので近々するよという報告だけです。

 

Ps.最近ブログ書かなすぎて文章構成おかしい。……おかしいのは前からか

今までの記事を統合しました。以後はこちらに追記していきます。

MENU

floatの親要素の高さが消失する対処

<div class="hoge">
	<div class="left">左にfloatさせるよー</div>
</div>
.hoge {
	overflow:auto;
}

.left {
	float: left;
}

floatの親要素にoverflow: auto(or hidden);でもふっかける。

ブロック要素での縦に中央表示

要素を縦に中央表示させたくて下記のようにさせると思いますが、実はこれdivやpなどのブロック要素には機能しませんのでその対処。

hoge { vertical-align: middle; }
vertical-align: middleを強制的に機能させる

sample

sample

hoge {
	height: 100px;
	vertical-align: middle;
	display: table-cell;
}

display: table-cellを追加するとvertical-align: middleが機能します。

ただこれには下記のようなデメリットも存在します。

  • すでにdisplay属性を使用してしまっているのでtable-cell以外の値を使用することができない
  • margin属性が機能しないため余白を開けることができない(paddingは内側に余白を設けるため代替にはならない)

まぁどちらも更に一つ階層増やせば対応出来ますが、ソースに無駄が……

 height要素と同じ値のline-heightを設ける

sample

 hoge {
	height: 100px;
	line-height: 100px;
}

heightとline-heightに同じ値をふっかけてやると縦に中央表示されます。

ただしこちらにもデメリットが存在します。

  • 必然的に1行でなければならない

まぁ2行にしたら2つにline-heightがかかってしまいますからね……

※sampleでは元々のCSSファイルの関係上少し別のコードになっています。

heightを指定せずに上下に余白を設ける

sample

sample

hoge {
	padding: 36px 0;
}

上下のpaddingで高さを調整する……というやり方なのですが、marginも機能するし複数行も機能する。中身が動的でない限り最適な気がしなくもないのですがなにせ調整がめんどくさい……

上記のサンプルを見ても分かる通り、中身のフォントサイズやboaderがあるときのその数値を考慮してpaddingの値を入れないといけないので非常にめんどくさいです。

中央寄せで字間を調整している際の注意点

letter-spacingで字間を調整する際に中央寄せや右寄せをしている場合は注意が必要です。

実際にやってみればわかると思いますがletter-spacingのみを指定していると正常には表示されません。

その場合は同様の値をtext-indentに入れてやれば解決します。

ダメな例:左にずれている

ABC

<div style="width: 150px; border: 1px solid #000;">
    <p style="letter-spacing: 1em; text-align: center;">ABC</p>
</div>

良い例:ぴったり真ん中に

ABC

<div style="width: 150px; border: 1px solid #000;">
    <p style="letter-spacing: 1em; text-indent: 1em; text-align: center;">ABC</p>
</div>

要はletter-spacingで字の"後"に余白を入れているので最後の字の後にも余白が入っているため、中央表示させようとするとその余白も幅として認識されるため位置がずれるです。なので文字列の最初にも同じだけの余白を入れて文字列の前後の余白を同じにし位置がずれないようにしているのです。

ページ内リンクでヘッダーに隠れる対処

ヘッダーなどが固定化されている場合、ページ内リンクでリンク先に飛ぶと上部がヘッダーで隠れます。

対処法としてはリンク先のID(css_hoge)に下記のCSSを適用させることで位置をずらすことができます。

[id^="css_"] {
	padding: ヘッダーの縦幅px 0 0;
	margin: -ヘッダーの縦幅px 0 0;
}

freoのページ送りナビゲーションって初期だと前のページと次のページのみなんですよね。

なので自分のところで使っているのを公開しようかと思います。

ちなみに自分の他にも数名の方々が同様にページ送りナビゲーションのテンプレート等を公開しているのでそちらも探してみるといいかもしれませんよ。

表示形式

このブログと同じ形式です。

ダウンロード

DL:page_navi_1.1.2.zip

設置方法

1.page_navi.htmlをheader.html等がある箇所にアップロードする。

2.各htmlのページ送りナビゲーションがある部分を{include file='page_navi.html'}に置き換える。

CSSの一例

/*IEは未対応です*/
.page_number {
	padding: 5px 10px;
	margin: 0;
	text-align: center;
	display: -webkit-box;
	display: -moz-box;
	display: box;
}

.page_number li {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
}

謝辞

freoの作者さん(ないとさん)

素敵なプラグラムを作っていただきありがとうございます。この場を借りて改めて感謝します。

Notes

2014/01/04
ver.1.1.2 カテゴリーページで正常に送れない現象を修正
2013/06/18
ver.1.1.1 管理者権限時に管理画面以外でも管理用ページ送りが機能してしまう現象を修正
2013/01/23
ver.1.1.0 管理画面でも動作するように調整
2013/01/02
ver.1.0.0 webで掲載していたものをテンプレートとして使いやすいように修正して配布形式に変更

archive


×

ログイン