グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

WEB制作に役立つデザインアーカイブサイトは数多くありますが、
その中でも見出しやメニューなどの「パーツ」ごとにまとめられているサイトです。

デザインしていると細かいあしらいで悩むことが結構あるので、
1つ1つサイトを見て回らなくてすむのはありがたいですね。


■Webデザインの"ブブン"を集めたブブンデザインアーカイブ


http://bubundesignarchive.jp/

メインビジュアル、見出しなど部分ごとにアーカイブされています。
かなりの数があります。


■見出しデザイン.com -Webデザインの"見出し"を集めたサイト-


http://midashi-design.com/

見出しのみを集めたデザインギャラリー。


■フッターデザイン.com -Webデザインの"フッター"を集めたサイト-


http://footer-design.com/

フッターのみを集めたデザインギャラリー。


■MephoBox


http://box.mepholio.com/

海外。カレンダーや404ページまであったりします。


■Elements of Design


http://www.smileycat.com/design_elements/

海外。数が多いです。


以上。

この他にも海外のサイトだと結構ありますが、
かっこよくても日本のサイトに合わなかったりして結局
使えなかったりするんですよね。

Google Chromeのデフォルト機能である「デベロッパーツール」ですが、
ソースを見る以外にも役立つ機能が結構搭載されていることを知り、
ちょっとずつ使っていっています。

そのうちの1つにユーザーエージェントの変更があります。



1.デベロッパーツールの右下の設定アイコンを押します。

2. Settings画面が開くので、「Overrides」内の「User Agent」にチェックを入れて環境を選びます。

これだけで変更することができます！

拡張機能を入れる必要もないのでお手軽に使えるのが良いですね。

MTのグローバルモディファイアで、"sanitize"というものがあります。
ブログ設定の「HTMLを許可」に当たるもので、1（有効）と0（無効）で
指定できるのですが、特定のタグ以外を取り除く使い方もできます。

<$mt:EntryBody sanitize="b,br"$>

上記のようにすると、bタグとbrタグを残し、
それ以外のHTMLタグは全て消去して出力されます。

あまり使っていませんでしたが、
事故防止に使えるかも？

先日、Google Chromeでいくつかのログインフォームにて
ログインできなくなる問題が発生しました。

結果的にはChromeだけの問題ではなかったのですが、
自分のようにChromeの問題と思って調べている方のために
このように書いてみました。


■症状
Chromeでいくつかのログインフォームにてログインできなくなった。
他のブラウザでは普通にログインできる。


■原因
Kaspersky Internet Security 2013の「入力情報の漏えい防止機能」のせい。

http://support.kaspersky.co.jp/kis2013/error?print=true&qid=208291095
ここに書かれているように、Kasperskyの「入力情報の漏えい防止機能」には
銀行や決済システム以外のフォームでも起動してしまう場合があります。

また、起動中はShiftキーが効かなくなる不具合（？）もあるようです。

今回はデータベースにログインしようとしたのですが、
データベースのログインフォームでこの機能が起動してしまい、
しかもShiftキーが効かないためパスワードの大文字が入力できず
ログイン失敗してしまっていたんですね。

さらに、そのフォームで漏えい防止機能が起動したのはGoogle Chromeだけだったため、
原因を見誤って無駄に苦労しました。。。


■解決方法
Kasperskyの入力情報の漏えい防止機能をオフにするだけです。
「設定」＞「データ入力の保護」と進んで、
「物理キーボードの入力をキーロガーから保護する」のチェックを外せばOK。

これまで、

・記事が所属しているカテゴリー
・記事が所属しているメインカテゴリー以外のカテゴリー

この2つはMTタグで取得できましたが、
何故か「記事が所属しているメインカテゴリー」を取得するタグは
ありませんでした。
（メインカテゴリーの名前とパスだけなら取得できました）

かなり不便に感じていたのですが、
実はMT5.1からはそのタグが追加されていたようです。


<mt:EntryPrimaryCategory> </mt:EntryPrimaryCategory>

または

<mt:EntryCategories type="primary"> </mt:EntryCategories>


上記のいずれかで、その記事が所属するカテゴリーの中で
メインカテゴリーのみを扱うことができます。


この調子でどんどん便利になってほしい。

テキスト（複数行）のカスタムフィールドを出力するときの、
改行やpタグの制御についてです。

まず、テキストフィールドには下記のように入っているとします。

あいうえお
かきくけこ
さしすせそ

これを改行を活かして出力するには、
下記のようにします。
※本文の「改行を変換」と同様になります

<$mt:customField convert_breaks="1"$>

出力
--------------------
<p>あいうえお<br />
かきくけこ<br />
さしすせそ</p>
--------------------

逆にpタグやbrタグが入らないようにするには、
convert_breaks="0" とします。

<$mt:customField convert_breaks="0"$>

出力
--------------------
あいうえお
かきくけこ
さしすせそ
--------------------

pタグで囲まれずに改行が<br>になるようにするには以下のようにします。

<$mt:customField convert_breaks="0" nl2br="1"$>

出力
--------------------
あいうえお<br />
かきくけこ<br />
さしすせそ
--------------------

参考にしたサイトはこちら。
カスタムフィールドの段落と改行の制御について | タグ：カスタムフィールド | MovableType | いろいろコードスニペット

●カテゴリーA
　・サブカテゴリーA
　・サブカテゴリーB
　・サブカテゴリーC
●カテゴリーB
●カテゴリーC

上記のような構造で、例えばサブカテゴリーAのアーカイブページに、
親であるカテゴリーAの「カテゴリ月別アーカイブリスト」を出力しようとしても、
サブカテゴリーAのものが出力されてしまいました。

ソースは下記のような感じです。

<mt:TopLevelParent>
<ul>
<mt:ArchiveList archive_type="Category-Monthly">
<li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveDate$></a></li>
</mt:ArchiveList>
</ul>
</mt:TopLevelParent>


散々悩みましたが、最終的には次のようにすることで解決できました。

<mt:BlogID setvar="blog_id">
<mt:Blogs include_blogs="$blog_id" ignore_archive_context="1">
<mt:IfCategory name="カテゴリー名">
<ul>
<mt:ArchiveList archive_type="Category-Monthly">
<li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveDate$></a></li>
</mt:ArchiveList>
</ul>
</mt:IfCategory>
</mt:Blogs>


ブログIDからの指定にして「ignore_archive_context="1"」と入れることで、
アーカイブページでも全ての記事を参照できるようになるそうです。

製作用メモ。
jQuery/JavaScriptを高速化するための記述方法がまとめられています。
こういう、普段なかなか身に着けられない知識はとてもありがたい。

jQuery/JavaScriptの高速化テクニックまとめ
http://matome.naver.jp/odai/2134058372410380801

実践できていたのは1つ目と5つ目くらいでした。。

ボタンクリック時などのイベントハンドラの中で、
イベントが発生したムービークリップ自身を扱う書き方。


_btn.addEventListener(MouseEvent.CLICK, xClick);

function xClick(evt:MouseEvent):void {
var target_mc:MovieClip = evt.target as MovieClip;
}

上記のように書くことで、
_btn（クリックしたボタン）を「target_mc」として扱うことができます。

AS2からの移行で結構悩んだとこだったりします。

Sassを勉強し始めました。
自分はmacユーザーなのですが、ターミナルを使うより簡単そうなので
Scoutをインストールしてみました。
下記からインストールできます。
※もちろんwinユーザーさんもつかえます!

Scout - Compass and Sass without all the hassle



左下の「＋」ボタンから作成します。
ここではとりあえず「test」と設定。
右にある「Configure」から細かく設定していきます。

【Stylesheet Directories】
■Input Folder
元の「.scss」のファイルを入れるフォルダを選択

■Onput Folder
書き出す「.css」のファイルを入れるフォルダを選択

【Other Directories】
ここは、まだよくわかりません。
Compassで使うみたいです。

【Output Modes】
■Environment
Scoutが勝手に吐き出すコメントの有無の設定です。
「Deveropment」だとどのscssファイルの何行目だよみたいな
下記のようなコメントが出てきます。
/* line 13, sass/style.scss */
「Production」にすればコメントは吐き出されません。

■Putput Style
書き出されるCSSのフォーマットを指定することができます。
「Expanded」CSSと同じように
「Compact」シングルライン
「Compressed」圧縮されるので容量は軽いですが解読難しい感じに。
「Nested」ネストされます

【Manage Project】
■Remove Project
「Remove」というボタンのみです。
これを押すと何の確認もなく消えます。ご注意を！