B-bow-log

＊ノイズから作るモザイク・パターン



新規レイヤーを用意
　↓
フィルタ："ノイズ"−"ノイズを加える"
　↓
フィルタ："ピクセレート"−"水晶"　（左画像）
　↓
フィルタ："ピクセレート"−"モザイク"　（右画像）
　↓
色調やモザイクの大きさなど調整する。

＊網点でモダンに



画像レイヤー（合成・加工する場合）、
新規レイヤーを用意する
　↓
新規レイヤーをクイックマスクモードで、
太めぼかしブラシや範囲選択→ぼかし（ガウス）で網掛けになる部分を描く
（マスクモードなので黒で描く）
　↓
フィルタ："ピクセレート"−"カラーハーフトーン" をかける
初期値のままでOK
　↓
クイックマスクモードを解除し、通常レイヤーに戻すと
描画部分が選択範囲になっている状態
　↓
選択範囲を（または反転させて）好きな色で塗りつぶす
　↓
画像と網点を合成、
または網点の選択範囲を画像の上で呼び出して、範囲外を切り取り

＊いろいろやってみてこれがいちばんスムーズにいく方法でした。


（アレンジ）
フィルタ："ピクセレート"−"カラーハーフトーン" をかけたあとに、
"ノイズ"−"ダストスクラッチ"で何pxかすると、ドット部分が滲んだようになじむ。


画像の複製レイヤーを作成
　↓
フィルタ："ピクセレート"−"カラーハーフトーン"
フィルタをチャンネル1〜4まですべて45に設定
　↓
新規レイヤー作成、好きな色で塗りつぶす
　↓
描画モード："スクリーン"にして
背面の網点画像に塗りつぶした色を反映
　↓
すべてのレイヤーを結合、
描画モード："乗算"
きれいに合成できる

＊網点アレンジ−正丸

画像／正丸を作り、境界線をぼかして色付け
　↓
レイヤー／画像より大きいサイズで正丸を作り、境界線をぼかす。
　↓
フィルタ："ピクセレート"−"カラーハーフトーン"
　↓
イメージ："色調補正"−"2階調化”
　↓
イメージ："色調補正"−"色相・彩度”
"色彩の統一"で色を調節、同系色にする
　↓
画像レイヤーを手前にする
このとき、画像が下の網点と馴染むよう不透明度を少し落とす


＊網点アレンジ−グラデーション

画像／グラデーションで色をつける
　↓
フィルタ："ピクセレート"−"カラーハーフトーン"
　↓
イメージ："色調補正"−"2階調化”
　↓
イメージ："色調補正"−"色相・彩度”
"色彩の統一"で色を調節する


【参考】
Photoshopのチュートリアル集

<h3>〜</h3>

h3{
font-size: 15px;
font-weight: bold;
margin: 5px 0 20px 10px;
}

<h3 class="title">〜</h3>

h3.title{
font-size: 15px;
}

<h3 id="title">〜</h3>

h3#title{
font-size: 15px;
}

<div id="content">
<h3>〜</h3>
</div>

#content h3{
font-size: 15px;
}

特定のidセレクタ（ブロック要素）内のh3セレクタに適用

2カラム、3カラムの基本レイアウト設定です。

*----------------- 2カラム -----------------*
html
head
body

#wrapper
#sideber ←	#main →

* HTML
<!-- 2カラム　基本パターン --> <div id="wrapper"> <div id="main"> </div> <div id="sideber"> </div> </div>
* CSS
/* cssソース */ #wrapper{ width:700px; } #main{ width:500px; float:right; } #sidebar{ width:200px; float:left; }

wrapperの入れ子に、サイドバーは左、メインは右にfloatプロパティで配置する。
この場合、HTML上では常にメインがサイドバーより先に配置されるようにすることが可能。
入れ子のラッパーと、左右の段の幅の合計の幅を一致させるが、borderやmarginなども考慮する。
ユーザビリティを優先させるなら、ラッパーを相対値（%）、サイドバーを絶対値（px）指定にしてリキッドレイアウトにする。


*----------------- 3カラム -----------------*
html
head
body

#wrapper
#sideber ←	#content → #main ← #extra →

* HTML
<!-- 3カラム　基本パターン --> <div id="wrapper"> <div id="content"> <div id="main"> </div> <div id="extra"> </div> </div> <div id="sideber"> </div> </div>
* CSS
/* cssソース */ #wrapper{ width:750px; } #content{ width:550px; float:right; } #sidebar{ width:200px; float:left; } #main{ width:300px; float:left; } #extra{ width:250px; float:right; }

wrapperの入れ子に、サイドバー1は左、メインとサイドバー2（extra）をcontentの入れ子に入れて右にfloatプロパティで配置する。

すっかり放置してました。。
と言うのも、tipsなりメモ書きが目的だったわけですが、ほぼ同じ内容を社内ブログの方に書くようになって。。
試作テンプレも全部中途半端だし。あはは・・

"集中できる"時間があったので、あらためてテンプレ制作でも・・とFC2内テンプレを物色したところ、「カスタマイズ用テンプレ」ができたんですね。
カスタム派にはこういうの待ってたんじゃないでしょうかね。ありがたい限りです。

早速DLしてみました。
っが！

確かに、俗に言う"DIV厨"のようにDIVDIVいってませんが、でもCSSがちょっと複雑すぎじゃ・・？
HTML見てすぐ諦めちゃった。　←根性なしですｗ
私が勉強不足なんかしら。うーん。
どちらかといえば、Movable Typeのデフォルトくらいすっきりシンプルな方がいいんですがね。
たとえば、中身の濃さや難易度で低・中・高レベルに分けるとかしてくれたら、誰でもカスタマイズしやすくていいのになぁ。

気合を入れ直そうと、カリスマテンプラ屋さんのブログをふらふらはしご。
すると！素晴らしい記事を発見！
sugar potさんの「公式テンプレートcfdn_09徹底研究ぅ〜♪」

サポートフォーラムでも、テンプレート名「cfdn_09」で検索かけるとFAQがヒットします。

http://www.MdN.co.jp/webcre/

愛読書「web creators」のTipsやテクのサンプルが満載。
本書をアナログチックに参考にしてたけど、実際見るとわかりやすくてソースもコピれるし便利だ！
（なんで今まで気づかなかったんだろう・・・）

以前、MT（MovableType）からFC2にデータ移行させたときの別ブログに書いた記事ですが、検索が多いのでこっちにもコピっておきます。

---------------------------------------------------------------

MTほか過去ログをインポートする際、わからなくていろいろ調べましたが、やってみるとすっごく簡単でした。
180ちかくのログがあっという間にアップ、反映されました！
ただし、画像については別途こっちのサーバーにアップロードしないとダメみたい。


【MT形式のログのインポート方法】

MTの「エントリー書き出し」でログをtxt形式で保存。
　↓
FC2の「ログのインポート」でtxtファイルを指定。

おしまいっ！


MT以外のブログや日記サイトからのログについては、log2mtでMTログ形式でtxt保存してインポートすればオッケー。

FC2のログをバックアップ（エクスポート）する際、txt形式になりますが、そのままメモ帳で見ると文字化けになってしまいます。
（メモ帳の文字コードの違い？みたいです）
ファイルを右クリック「プログラムから開く」でIEブラウザで見るとちゃんと見られます。

このバックアップ機能は知ってる限り他のブログサービスにはないものでとってもありがたい。
万が一、データ消えちゃったら不安だし、別のとこに引越しするときも便利。

記事内で長めのソースを書いたり、サイドバーの月別アーカイブなどに。

* CSS
/* テキストエリア */ textarea.box{ font-size: 12px; color: #999999; border: solid 1px #999999; rows: 8; cols: 80; margin: 10px; padding: 5px; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #999999; scrollbar-darkshadow-color: #ffffff; scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-base-color: #ffffff; }
* HTML
<!-- text area box --> <textarea class="box" rows="8" cols="60"> 　+ここに内容を記述、表示+ （ex：サイドバーアーカイブh3下のul,li変数など） </textarea>

CSSでサイズ設定せずHTMLで設定した方が、限定されず多くの用途に使えて便利かも。
rows=""　→　hight="ピクセル数"　高さ
cols=""　→　width="ピクセル数"　幅
にも置き換えられる。

HTMLソースをまんま書いてしまうと、ブラウザがそれをタグと勘違いをして、ハイパーリンクしてしまいます。

たとえば、<br>とここに記述するためにそのまま<br>と記述すると、ただ改行されるだけで記述ソースは表示されません。
表示させるためには、&lt;br&gt;といちいち変数に変えて入力しなくてはなりません。
とりあえず、&lt;と&gt;については、投稿画面上にあるけど、いちいち入力してソース作るのはとっても不便ですよね。
または、テキストエリアをcssで予め作っておき、その間に書き込む方法でもまぁなんとかなりますが・・・

単純にソースを変換したい場合、以下の特殊文字変換できるツールがあると一括で変換されて便利です。

・blogeet（ブログ用DLツール）　
ブログの投稿画面から呼び出して使える編集ツールなのですっごい便利。

・HTML特殊文字変換ツール
webページで変換でき改行の設定も同時に行えて便利。

Amazonアソシエイト向けのHTML作成ツールです。
ブログに本や音楽の記事を書くときにとても便利ですよん。

Amazonアソシエイト（Amazonのアフィリエイト）に登録していると商品リンクを掲載できますが、商品を検索してHTMLに生成する作業が結構面倒くさい・・
というのも、Amazonサイトでリンクを作る作業が。
そもそもAmazonのアフィリエイトがわかりずらいというのは私だけでしょうか・・？


「G-tool」
こちらのG-toolでは、商品を検索してIDを入力、表示された掲載情報（画像、内容、デザイン）を選択するだけでHTMLが生成されるので、とても作業が簡単です。

たとえば、こんな感じ↓
（スピッツ−音楽、CDハチミツ、価格を表示−シンプルを選択）

ハチミツ スピッツ 草野正宗 笹路正徳 Amazonで詳しく見る by G-Tools

「amazie」
こちらは、指定した関連商品をFLASHアニメーションでランダムに表示します。

たとえば、こんな感じ↓
（スピッツ−音楽、横−サイズ中を選択）


＊注　amazieに限っては、エントリー内（記事）使用の際に自動改行でbrが挿入され表示されないので、テキストフォーマット「HTMLタグのみ」に設定してください。 その代わり、記事内容の改行は手動でbr入れないとダメです・・