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

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に限った話じゃないですけどね。TinyMCE4を実装しているところならなんでもいい話なんですけどね。

当サイトもTinyMCE3.xからTinyMCE4.xに切り替えたんですけど、これCDN対応してたんですね。なので嬉々としてCDNで導入したのですが……

『テーマの変更方法がわからん!』

いや、うん、普通に導入した場合は

theme: "modern",
skin: "hoge",

でいいんですよ。ええ、ちゃんとskinsフォルダに格納していればこれで読み込まれますので。でもCDNの場合は当たり前ですが向こうのディレクトリを見に行ってしまうので見つかるわけないんですよ。404エラー

なのでCDNでの導入時は下記のように自分のサイトの方を参照させないとダメっぽいです。

theme: "modern",
skin_url: "http://host.domain/hoge",

絶対パスで書いてますけど、たぶん相対パスでも参照できると思います。確認はしていませんが。

実はこれ、偶然見つけただけなんですよね。だって検索してもそれっぽいこと書いてあるところなかったんですもの。

というか探し方が悪いのかテーマ配布しているサイトさん少なく無いですか? まぁなければ作るだけなのでいいんですけど……

freo1.10来ましたね。

それはそうと、freoってなんだかインフォメーション機能使いづらくありません?

特定のページでしか使用できませんし。

一応有志で任意のページに表示させるプラグインを作ってくださっている方がいますが、あれだとhtmlタグが機能しませんし(´・ω・`)

ちなみに既存のインフォメーション機能がhtmlタグ機能するのかは覚えてません(オイ

というわけで任意のページにhtmlタグ機能したまま擬似インフォメーションを表示させる方法でも書いておきます。

(基本的にはphpでいうinclude。やってることはjQueryの.load機能で他のhtmlを読み込ませているだけ)

下準備

インフォメーション等で使用したい内容を記述したページを作成。

ページID等は好きなように。

ここでは仮にexample_idとします。

その際に取得する際の位置情報になりますので、表示する範囲を<div id="hoge"></div>で必ず囲んでください。(複数可能)

ローカルファイルでの作業

管理メニューへ編集ページヘのリンクを作成

templates/internals/admin/header.html内の<h2>管理メニュー</h2>以下の任意の箇所に下記を追記。

<h3>インフォメーション</h3>
<ul>
	<li><a href="{$freo.core.http_file}/admin/page_form?id=example_id">エグザンプルID</a></li>
</ul>
擬似インフォメーション内容の表示

templates/内のheader.htmlまたはutility.html等の表示させたい箇所に以下を追記。

<div id="hoge"><p>Now Loading...</p></div>
<script type="text/javascript">
	$('div#hoge').load('/example_id #example_hoge');
</script>

これでページの内容だけが任意の箇所に表示されます。

簡単な説明ですが、1行目で読み込んだものを配置する場所を作成。2~4行目でhttp://host.jp/example_id内のid="example_hoge"を1行目で作成したid="hoge"に読み込み。これは別にexample.htmlなどのファイルでも平気です。

ともあれここまで書いてあれですが、自分はやはり0から作れないくせに1を1.1にする事が多いなぁとつくづく残念にorz

※追記

検索などでページが表示されてほしくない場合は、css3の下記をcssに適応させればいいかと思います。

※テンプレートによって多少変化しますが大筋はこんな感じです。(liなどでlist-style-typeを指定した場合は……ちょっと対処法探しておきます)

.page_child a[href*="example_id"] {display:none;}

 ※更に追記

たとえば『読み込み元のページでJavaScriptを動作させているが、読み込んだページの部分だけJavaScriptが動作しない』という自体が発生することが有りますが、これは.loadが画面の読み込みが終わった時に発生するので必然的にJavaScriptの実行はそれ以前になるため実行後の読み込んだページには機能しないことが原因です。

対処としては読み込んだページでも実行したい処理を以下のように書き換えて.loadと同じく画面の読み込みが終わったあとに処理するようにすればいいのです。(なので処理を記述する場所は.loadよりも下にする必要があります)

$(function() {処理内容});

$(window).load(function() {処理内容});

Notes

2014/05/03
更に追記
2012/10/16
記述内容整理
2012/10/04
加筆・修正(一部の処理を変更)
2012/10/03
加筆
2012/10/01
エントリー

久しぶりの御堂です。

突然ですが液タブを買い替えました。

今までCintiq 24HDを使用していたのですが先日Cintiq 22HD touchを購入し24HDのほうはヤフオクに落としました。

と言うのも、24HDを2年ほど使用していましたがどうやら自分にはあまりにも大きすぎたようで視点移動やら腕の移動やらが辛いなという事実を実感し始めてました。というわけで思い切って22HDを購入。ちなみにタッチ付きにしたのはVAIO Duo 13で描いてた時にタッチもいいなと思ったからで、まぁ使わなくても切ればいいだけですし。

そして現在の作業環境はこんな感じ

2014032001.png

そして22HDTをメイン机に設置したためFS2332は押入れ行きになりました。サブディスプレイは以前SX2262Wのままです。あとはこの充電用コード類(iPhone、iPad、VITA、モバイルバッテリー)をどうにかできればすっきりするかなぁ。一応Anker 25W 5ポート USB急速充電器(日本語公式サイトには商品ページがなかった)で出しているからこれ以上同しようもないっちゃないのですが……

そして恐らく理想の液タブのサイズは17インチの16:10ですね。

あと液タブの下の隙間を更に削減できれば……(椅子をもう少し高くできれば問題ないのですが)

22HDTの使用感に関しては24HDとあまり変わらないかな。ただトラックパッドの反応が悪い気がするのと、ジェスチャーを細かく設定できないのが辛いかも。3本タップで中ボタンとか2本スライドでスペース長押しとかそういう設定ができたらもっと便利かなぁと思いますけど、そういうソフトとかどっかにないですかね(ワコムのにはなかった(´・ω・`)

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


×

ログイン