kazumich.log

kazumich.log

ココ Windows IE でレイアウトが崩れてますね

この記事は公開日より年以上経過しています

情報が古くなっている可能性がありますのでご注意ください。

昨日は、CSS Naked Day という事で、ちょっとだけコードを見直ししたのですが、久しぶりに Windows IE で確認してみると恥ずかしい状態だった事に気がつきました。ちょっと反省しております。

まぁ、仕事では Windows IE の確認は外せないのですが、私の個人サイトという事でサボっておりました。 今晩くらいに少し修正しようかと思います。

更新

Facebookでシェアする Xでシェアする LINEでシェアする

シェアする

Recommendation

a-blog cms で会員制コンテンツを作り、ログイン前はモザイク画像でチラ見せする実装を解説

これは a-blog cms Advent Calendar 2021 の 8日目の記事です。 今回は、タイトルのように a-blog cms で会員制コンテンツを作り、ログイン前はモザイク画像でチラ見せする実装を解説 します。 最初は CSS の image-rendering: pixelated; だけ紹介するブログを書こうと思っていたのですが、a-blog cms の Advent Calendar っぽくしてみました。 ablogcms.io を利用して実際に実装してみると、予想してなかった部分も出てきましたので私自身が実装前に気づいていなかった注意点も併せてお伝えします。（実装にかかった時間は 53分でした。） 会員制コンテンツは「シークレットブログ」で用意する a-blog cms で権限分けするためには、ブログを分ける対応を行います。 今回は http://localhost/ に設置している CMS に会員制コンテンツ部分は 子ブログhttp://localhost/member/ を用意します。 親子ブログのカテゴリーを共通化する a-blog cms の設定には、グローバル化 という 親ブログ の設定で 子ブログ でも利用可能にする設定がいろいろあります。今回は「採用情報」のカテゴリーについて グローバル にチェック をつけます。 これで、ブログ毎にカテゴリーを設定することなく、子ブログ側でも「採用情報」のカテゴリーが利用できるようになります。 テスト用のエントリーを作成 CMS のテストをする際にはデータが無いと正常に動いているか分からないのでデータを作りましょう。 表示用のテンプレートのファイルを作る前にデータの準備が大切です。 作成するのは、子ブログ「会員制コンテンツ」にカテゴリー「採用情報」で、自由にエントリーを作成します。ステータスは「公開」にしておいても一般の方にはアクセスすることができない状態です。 表示用のモジュールの設定をする 今回の表示用のモジュールは Entry_Summary id="summary_index" になります。モジュールID設定から該当の設定を表示させます。 条件設定 この条件設定での設定箇所は 2つあります。 最初は、子ブログでも利用できるようにするために、カテゴリーと同様に グローバル化 を行います。 2つ目は階層の設定です。 親ブログのモジュールID として表示する際に、子ブログ「会員制コンテンツ」のデータも同様に扱うことができるようになります。 表示設定 標準の設定ではチェックがつけられていない「シークレットエントリー」のチェックをつけます。これで、ログインしていなくてもシークレットブログのエントリーを表示することができるようになります。 ここまでの設定で、会員制のコンテンツを作り、ログイン前も Entry_Summary で一覧に表示させるというところまでの実装は出来ました。ここまで出来ればいい事も多い事でしょう。 会員制コンテンツのアイキャッチ画像をモザイク化する 画像をぼかすような効果として「すりガラス効果」ということであれば CSS のプロパティ backdrop-filter で可能ではありますが、モザイク効果は残念ながらありません。その際にも a-blog cms なら実装可能です。 モザイク効果をかける方法 小さな画像を用意し、その画像を拡大する際にニアレストネイバー法で拡大するような対応を行います。 具体的には、a-blog cms の校正オプション resizeImg を利用し小さな画像を作成し、その後、CSS の設定で width : 100% ; image-rendering : pixelated を設定することで、小さくした画像をにじまないようにピクセルを保って拡大します。 {path} のところに表示される画像を [resizeImg(24,24)] で 24x24 のサイズに変換した画像を生成しています。 条件分岐で親ブログと子ブログの表示を分ける 全て上記のようにしてしまうと全部がモザイク画像になってしまうことから、今回の子ブログ（bid:2）の時だけモザイクにして、それ以外は、これまでのままにするようにします。 ログインした時にはモザイク画像でなくする 最後にログインしたユーザーが一覧ページにアクセスした際には、そのまま画像が表示されるようにする実装をしておいた方がいいかと思われます。 ログインした時としてない時でモジュールを分ける ログイン状態によって、大きく表示を分ける場合には一覧ページのテンプレートでインクルード処理をしているところで分岐してしまった方が分かりやすいのではないかと思います。 @include("/include/entry/summary-image.html") @include("/include/entry/summary-image_Unlogin.html") IFブロックに2つ条件を書く a-blog cms の IF文の書き方は独特な表記になっています。これは URL にそのまま書くことができる表記を採用しているためです。 今回は、ログインしていない時には何もなくログインしている時には権限を示す文字列を表示させる グローバル変数 を利用してログイン状態かどうかを判定しています。そして、2つの条件をつなぐ際には /_and_/ のように書きます。 最後に読者ユーザーを作りテストします 一般的には、会員制サイトを作る際には子ブログ側にユーザーを作ることで、その子ブログだけを会員がアクセスできるようにしますが、今回の場合には親ブログの一覧を表示させた際にログインできている必要があります。 私自身、この実装のテストをする際に子ブログ側にユーザーを作ってテストをして、読者権限の会員のユーザーでログインできているのに、モザイクのままになってしまう状況を体験しました。 会員制コンテンツの外にユーザーを作るというレアケースではありますが、親ブログ側に読者ユーザーを作る必要があります。 子ブログがシークレットモードになっていて、ユーザーが子ブログに存在していませんのでユーザーを作る際に、ユーザーの設定で「どこでもログイン」にチェックがある必要があります。 これで、a-blog cms で会員制コンテンツを作り、ログイン前はモザイク画像でチラ見せする実装を解説 については終わりです。 ablogcms.io に検証用のサイトを用意しましたので年内は http://e4ztd1ba.ablogcms.io/ で実際の動作を確認することができます。ちょっと試してみよう！って思った時には、ablogcms.io をご活用ください。 明日の a-blog cms Advent Calendar 2021 9日目は、ジェノベーゼ寺崎 さんの 「a-blog cmsのセキュリティを高める方法」との事です。 楽しみなエントリーです。

iPad対応のWebを考えてiPad用のCSSを追加する

先日の ひと足早くiPadのWebを考える勉強会 を実践するべく考えてみる事にします。 iPad 対応のサイトを考えると、フォームの入力欄やボタンのサイズを指で押しやすくするべき と思っています。今回は管理ページ上の表示を修正していますが、例えば通常のサイトでもお問い合わせフォームの部分とかを同様に設定しておくといいかもしれません。 例えば、上記のような感じになるだろう。iPadの時だけ1つ余分にCSSを読み込むように設定します。 とりあえずは、こんな感じにするといいのではないかと思う。

パソナテック Creator's Meeting In Nagoya Vol.2

今回は、COVER IT LIVE で現地から中継でもしてみようかと思います。 関係者のOKが取れたら。今回の講師は kicks-web の千貫 りこさんで、タイトルは「現場目線でのCSS TIPSを伝授」という事になっています。 #createch_nagoya / Creator's Meeting In Nagoya Vol.2 これが使われる事になると、13:00から上記に中継情報が表示され、終了後はログとしてみる事ができるようになります。コメント等で参加する事も可能です。どうなるかな？

CurvyCornersはCSS3に対応した最強の角丸JavaScriptだ！

今、作っているサイトで透過の角丸JavaScriptが必要になって、いいものは無いかと探していると「CurvyCorners」というJavaScriptが見つかりました。 Googleで CurvyCorners - Google 検索 を検索してみると、以下のようなエントリーがヒットします。（上位5件を表示） CurvyCorners - Beautiful rounded corners for your HTML boxes 角丸javascriptライブラリ『curvyCorners』を使ってみる[to-R]（2006年6月18日） jQueryを使って簡単に角丸を作れるjQuery curvyCorners | バシャログ。（2007年12月3日） 角丸作成javascript「curvyCorners」｜skuare.net（2007年10月21日） 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」 - GIGAZINE（2006年6月16日） これを見ると随分古くからある JavaScript であるという事が分かります。そして、凄いのは 2010年4月1日に新しいベータ版がリリースされています。開発が止ってないんです。 We've just released CurvyCorners 2.1 BETA. Over 50 bug fixes and improvements: Improved browser detection Lots of CSS detection improvements Support for CSS3 shorthand selectors Support for native CSS border-radius support in Opera 10.5 and many more. もっと、もっと、凄いのは CSS3 の border-radius を認識して自動で出来ない子(IE)のために角丸を作ってくれる事です。 これ凄くないですか？ なので、利用方法としては、この curvycorners.src.js を ＜head＞内で読み込むだけでOK なのです。どんな角丸なのかはCSS側で設定しましょう！ .myBox { /* Do rounding (native in Firefox and Safari) */ -webkit-border-radius: 20px; -moz-border-radius: 20px; } Firefox や Safari では、動作しないようになっているようです。デモについては以下の本家をご覧下さい。 curvyCorners Demo 4 そして、ダウンロードは以下からどうぞ！ Downloads - CurvyCorners - Beautiful rounded corners for your HTML boxes

CSS3のcolumnを利用してa-blog cmsで段組をサポートする

エントリーの本文部分を段組したいという事があった場合の a-blog cms のカスタマイズメモです。 例えば、以下のような感じ 2段組 CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。 3段組 CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。CSS3のカラムを a-blog cms で実装します。 どのように実装するかというと 管理ページ ＞ コンフィグ ＞ 編集設定 ＞ テキストタグセレクト に、以下のような設定を追加します。 次に、/include/column.html （vicunaのテーマのみ /include/unit.html）の の下くらいに以下のような記述を追加します。 <!-- BEGIN column2 --> <div class="column2">{text}[markdown]</div> <!-- END column2 --> <!-- BEGIN column3 --> <div class="column3">{text}[markdown]</div> <!-- END column3 --> また、CSSのどこかに div.column2 { column-count: 2; column-gap: 20px; -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; } div.column3 { column-count: 3; column-gap: 20px; -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; } を追加します。 更新用のフォームを表示させると、段落や見出しの選択する欄に2カラムや3カラムというものが表示されるようになります。 このように、標準のシステムのままテンプレートのカスタマイズの範囲でいろいろな事ができるのが、a-blog cms の良さですね。 他にも頑張れば、amazon ってのも作る事ができそうな気がしてきました。 続編をお楽しみに！

Web Directions East 行ってみたいな

11月7.8.9日に東京で、世界の凄い人達のセミナーが開催されるそうで、ちょっと行ってみたいなぁって思っています。 今のところ行けるかどうかは微妙... Web Directions East スピーカーさん達は以下の人たちとの事です。全員外人さんで、アメリカ・イギリス・オーストラリアからやってくるという事です。もちろん同時通訳あり。 Eric Meyer（エリック・メイヤー） Jeffrey Veen（ジェフリー・ヴィーン） Dan Cederholm（ダン・セダーホルム） Jeremy Keith（ジェレミー・キース） Andy Budd（アンディ・バド） 費用は高めですが、なかなかこういう経験はできないので、参加できるように仕事頑張ります！

Contact

お問い合わせはこちら