2012.04.11
素材サイトなどで配布されている、モノクロ素材の色を変える方法です。
Photoshopでの手順になります。
1.「イメージ」→「モード」がRGBやCMYKになっていることを確認
2.「イメージ」→「色調補正」→「色相・彩度」を選択
3.「色彩の統一」にチェックを入れ、彩度を上げる
また、モノクロの状態でブラシに登録し、希望の描画色を選択して塗るという方法もあります。
すでに使う色が決まっているなら、数値で指定できるこちらが良いかもしれません。
Photoshopでの手順になります。
1.「イメージ」→「モード」がRGBやCMYKになっていることを確認
2.「イメージ」→「色調補正」→「色相・彩度」を選択
3.「色彩の統一」にチェックを入れ、彩度を上げる
また、モノクロの状態でブラシに登録し、希望の描画色を選択して塗るという方法もあります。
すでに使う色が決まっているなら、数値で指定できるこちらが良いかもしれません。
Photoshop
2012.04.04
アンカーリンクを使って特定のIDまでスクロールさせるのは簡単に出来ますが、
この場合、リンク元で指定しなければなりません。
リンク元で指定できない場合でも、アクセス時に自動で移動する必要があり探しました。
検索では「window.scrollTo」などがよく出てきますが、
数値で指定するため移動させたい位置の上にテキストなどがあると使用できません。
なんとかCLASSやIDで指定できないか探して見つけました。
すごく簡単で使いやすいです。
下記の記事を参考にしています。
>リンク先ページの指定位置にスクロールで移動
---------------
---------------
青字部分を移動させたい位置のIDまたはCLASSを指定すれば完了です。
この場合、リンク元で指定しなければなりません。
リンク元で指定できない場合でも、アクセス時に自動で移動する必要があり探しました。
検索では「window.scrollTo」などがよく出てきますが、
数値で指定するため移動させたい位置の上にテキストなどがあると使用できません。
なんとかCLASSやIDで指定できないか探して見つけました。
すごく簡単で使いやすいです。
下記の記事を参考にしています。
>リンク先ページの指定位置にスクロールで移動
---------------
<script type="text/javascript">
$(function() {
var n = window.location.href.slice(window.location.href.indexOf('?') + 4);
var p = $("移動させたいIDまたはCLASS").offset().top;
$('html,body').animate({ scrollTop: p }, 'slow');
return false;
});
</script>
---------------
青字部分を移動させたい位置のIDまたはCLASSを指定すれば完了です。
2012.03.28
すべての画像が読み込まれた後にスクリプトを実行する場合は
前回のJS：ロード完了時に実行でほぼ足りてしまうのですが、
指定した画像が読み込まれたときに実行する場合や、
後から画像を読み込む場合には不十分です。
画像ありのRSSを読み込もうと思い、
--------------------------------------------------------------------
$("#rssList img").load(function(){
// 処理
});
--------------------------------------------------------------------
と書いたのですがブラウザによっては上手くいかず。。
↓こちらのサイトでぴったりのことが記事にされていましたので
参考にさせていただきました。
jqueryで画像のロード完了後に実行 - downstairs lab
http://www.stairsdesign.jp/blog/2011/07/jquery.html
■方法
imagesLoadedというプラグインを使用します。
https://gist.github.com/268257
こちらのサイトからJSファイルをダウンロードして<head>内で読み込み、
--------------------------------------------------------------------
<script type="text/javascript" src="js/imagesLoaded.js"></script>
--------------------------------------------------------------------
loadをimagesLoadedに書き換えれば完了です。
※2013/10/2 $(function(){}); を追加しました。
--------------------------------------------------------------------
$(function(){
$("#rssList img").imagesLoaded(function(){
// 処理
});
});
--------------------------------------------------------------------
前回のJS：ロード完了時に実行でほぼ足りてしまうのですが、
指定した画像が読み込まれたときに実行する場合や、
後から画像を読み込む場合には不十分です。
画像ありのRSSを読み込もうと思い、
--------------------------------------------------------------------
$("#rssList img").load(function(){
// 処理
});
--------------------------------------------------------------------
と書いたのですがブラウザによっては上手くいかず。。
↓こちらのサイトでぴったりのことが記事にされていましたので
参考にさせていただきました。
jqueryで画像のロード完了後に実行 - downstairs lab
http://www.stairsdesign.jp/blog/2011/07/jquery.html
■方法
imagesLoadedというプラグインを使用します。
https://gist.github.com/268257
こちらのサイトからJSファイルをダウンロードして<head>内で読み込み、
--------------------------------------------------------------------
<script type="text/javascript" src="js/imagesLoaded.js"></script>
--------------------------------------------------------------------
loadをimagesLoadedに書き換えれば完了です。
※2013/10/2 $(function(){}); を追加しました。
--------------------------------------------------------------------
$(function(){
$("#rssList img").imagesLoaded(function(){
// 処理
});
});
--------------------------------------------------------------------
JS
2012.03.28
スマートフォン用のサイトでよくアドレスバーを隠す設定になっているところを多く見かけます。
ということで検索していろいろなページを参考にやってみました。
一画面で表示できる範囲がひろくなっていい感じです。
赤字部分が必須です。
---------------
---------------
1点注意点が。
このアドレスバーを隠す設定をしている場合、
idを使ったアンカーリンクがきかなくなります。
ご注意を。
ということで検索していろいろなページを参考にやってみました。
一画面で表示できる範囲がひろくなっていい感じです。
赤字部分が必須です。
---------------
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1, maximum-scale=1">
<title>スマートフォン用サイト</title>
<style type="text/css">
body {
min-height: 416px;
-webkit-text-size-adjust: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
setTimeout("scrollTo(0,1)", 100);
}
</script>
</head>
<body>
サイトの中身
</body>
</html>
---------------
1点注意点が。
このアドレスバーを隠す設定をしている場合、
idを使ったアンカーリンクがきかなくなります。
ご注意を。
2012.03.21
JSの実行タイミングとして「ページの読み込みが完了したとき」がありますが、
いまだに忘れて調べなおしてしまうのでメモです。
■HTMLコードを読み込み終わった時点で実行
要jQuery。タイミング的によく使います。
-------------------------------------------------
$(function(){
// 処理
});
または
$(document).ready(function(){
// 処理
});
-------------------------------------------------
■すべて読み込んだ後に実行
画像などもすべて読み込んだ後に実行。
-------------------------------------------------
window.onload=function(){
// 処理
}
-------------------------------------------------
・jQueryを使う場合
-------------------------------------------------
$(window).load(function () {
// 処理
});
または
jQuery.event.add(window, "load", function(){ /* 処理 */ });
-------------------------------------------------
・HTMLに書く場合
HTMLのbodyタグに書くことでも同じ処理ができます。
-------------------------------------------------
<body onload="処理">
-------------------------------------------------
いまだに忘れて調べなおしてしまうのでメモです。
■HTMLコードを読み込み終わった時点で実行
要jQuery。タイミング的によく使います。
-------------------------------------------------
$(function(){
// 処理
});
または
$(document).ready(function(){
// 処理
});
-------------------------------------------------
■すべて読み込んだ後に実行
画像などもすべて読み込んだ後に実行。
-------------------------------------------------
window.onload=function(){
// 処理
}
-------------------------------------------------
・jQueryを使う場合
-------------------------------------------------
$(window).load(function () {
// 処理
});
または
jQuery.event.add(window, "load", function(){ /* 処理 */ });
-------------------------------------------------
・HTMLに書く場合
HTMLのbodyタグに書くことでも同じ処理ができます。
-------------------------------------------------
<body onload="処理">
-------------------------------------------------
JS
2012.03.07
googleアナリティクスは解析用のコードをページに埋め込む形式のため、
外部サイトへのリンクについては計測することができません。
その場合、解析タグを設置するのと合わせて、
<a>タグにonclickで次のようなコードを仕込むことで
クリックを計測することができるようになります。
---------------------------------------------------------------------------------------
<a href="xxx.html" onclick="javascript:_gaq.push(['_trackPageview', '仮想URL']);">
---------------------------------------------------------------------------------------
-- 2013/7/16 追記 --
上記の他に、下記のような記述の仕方もありました。
---------------------------------------------------------------------------------------
<a href="xxx.html" onclick="javascript:_gaq.push(['_trackEvent', '仮想URL']);">
---------------------------------------------------------------------------------------
_trackPageview と _trackEvent の違いになります。
_trackPageview は仮想ページビューを使う方法で、サイト全体のページビューも増えます。
_trackEvent はイベントトラッキングを使うので他の計測結果には影響しません。
基本的には外部サイトヘのリンクに設置するものですので、_trackEvent のほうが良さそうです。
逆にPDFなどへのリンクに仕込む場合は _trackPageview が良さそうですね。
-- 追記ここまで --
外部サイトへのリンクと書きましたが、
解析コードを仕込めない画像やPDFへのリンクも計測できるため
使いどころはいろいろとありそうです。
ちなみに、解析コードのバージョンによって記述が違うようで、
上記の記述が使えるのは↓のような非同期型の場合になります。
---------------------------------------------------------------------------------------
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
---------------------------------------------------------------------------------------
外部サイトへのリンクについては計測することができません。
その場合、解析タグを設置するのと合わせて、
<a>タグにonclickで次のようなコードを仕込むことで
クリックを計測することができるようになります。
---------------------------------------------------------------------------------------
<a href="xxx.html" onclick="javascript:_gaq.push(['_trackPageview', '仮想URL']);">
---------------------------------------------------------------------------------------
-- 2013/7/16 追記 --
上記の他に、下記のような記述の仕方もありました。
---------------------------------------------------------------------------------------
<a href="xxx.html" onclick="javascript:_gaq.push(['_trackEvent', '仮想URL']);">
---------------------------------------------------------------------------------------
_trackPageview と _trackEvent の違いになります。
_trackPageview は仮想ページビューを使う方法で、サイト全体のページビューも増えます。
_trackEvent はイベントトラッキングを使うので他の計測結果には影響しません。
基本的には外部サイトヘのリンクに設置するものですので、_trackEvent のほうが良さそうです。
逆にPDFなどへのリンクに仕込む場合は _trackPageview が良さそうですね。
-- 追記ここまで --
外部サイトへのリンクと書きましたが、
解析コードを仕込めない画像やPDFへのリンクも計測できるため
使いどころはいろいろとありそうです。
ちなみに、解析コードのバージョンによって記述が違うようで、
上記の記述が使えるのは↓のような非同期型の場合になります。
---------------------------------------------------------------------------------------
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
---------------------------------------------------------------------------------------
JS
2012.02.29
リンクURLにパラメータを付け、
リンク先のページで処理させるというのをやったのでメモです。
■index.html
---------------------------------------------------------------------------------------
<a href="page.html?sample1=yes&sample2=100">リンクです</a>
---------------------------------------------------------------------------------------
上記のようなリンクを設置。
URLの後に"?"でパラメータを繋ぎます。
複数ある場合はさらに"&"で繋ぎます。
■page.html
---------------------------------------------------------------------------------------
<script type="text/javascript">
var urlPrm = new Object;
var urlSearch = location.search.substring(1).split('&');
for(i=0;urlSearch[i];i++) {
var kv = urlSearch[i].split('=');
urlPrm[kv[0]]=kv[1];
}
alert(urlPrm.sample1);
alert(urlPrm.sample2);
</script>
---------------------------------------------------------------------------------------
飛び先のページに書くJSは上記のようになります。
最後のアラートで表示される文字はそれぞれ"yes","100"となります。
リンク先のページで処理させるというのをやったのでメモです。
■index.html
---------------------------------------------------------------------------------------
<a href="page.html?sample1=yes&sample2=100">リンクです</a>
---------------------------------------------------------------------------------------
上記のようなリンクを設置。
URLの後に"?"でパラメータを繋ぎます。
複数ある場合はさらに"&"で繋ぎます。
■page.html
---------------------------------------------------------------------------------------
<script type="text/javascript">
var urlPrm = new Object;
var urlSearch = location.search.substring(1).split('&');
for(i=0;urlSearch[i];i++) {
var kv = urlSearch[i].split('=');
urlPrm[kv[0]]=kv[1];
}
alert(urlPrm.sample1);
alert(urlPrm.sample2);
</script>
---------------------------------------------------------------------------------------
飛び先のページに書くJSは上記のようになります。
最後のアラートで表示される文字はそれぞれ"yes","100"となります。
JS
2012.02.20
以前このグラビカでも「DD_belatedPNG」を紹介する記事を紹介していました、
pngをIE6に対応させるためのJS「DD_belatedPNG」について注意点です。
CSSでマウスオーバーを表現させたい場合、
通常時とオーバー時の画像をつなげて、aタグの背景に指定し、
hoverで画像をスライドさせる方法があります。
png画像を使用した場合、IE6で正しく表示されないため
DD_belatedPNGを使用します。
が、、、、
上記のような場合、aタグの縦幅（height）が、奇数だと、
IE6で、オーバー画像が1px余分にスライドしてしまい、
画像がずれたような表現になってしまいます。
背景の位置指定では調節できないようです。
なんでか全くわかりませんが、
縦幅を偶数にすることで解決できます。
きみのために入れてるのにわがまま言うなよ。。。（;´_`;） ハァ・・
pngをIE6に対応させるためのJS「DD_belatedPNG」について注意点です。
CSSでマウスオーバーを表現させたい場合、
通常時とオーバー時の画像をつなげて、aタグの背景に指定し、
hoverで画像をスライドさせる方法があります。
png画像を使用した場合、IE6で正しく表示されないため
DD_belatedPNGを使用します。
が、、、、
上記のような場合、aタグの縦幅（height）が、奇数だと、
IE6で、オーバー画像が1px余分にスライドしてしまい、
画像がずれたような表現になってしまいます。
背景の位置指定では調節できないようです。
なんでか全くわかりませんが、
縦幅を偶数にすることで解決できます。
きみのために入れてるのにわがまま言うなよ。。。（;´_`;） ハァ・・
CSS , JavaScript
2012.02.15
JavaScript内に相対パスを記述すると、
そのJavaScriptが読み込まれるHTMLからの相対パスになります。
同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。
そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。
こちらのサイトで紹介されています。
Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する
そのJavaScriptが読み込まれるHTMLからの相対パスになります。
同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。
そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。
こちらのサイトで紹介されています。
Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する
JS：自身の設置URLを取得の続きを読む
JavaScript
2012.01.25
変数名を動的に指定できる、
Flashでは配列アクセス演算子と呼ばれるものがあるのですが、
JSでこれにあたるものはどれだろう？と思い
探してみるもなかなか見つかりません。
最終的に、eval() を使うことで似たようなことができたので
忘れないようにメモしておこうと思います。
eval() は中の式を評価するので、
例えば名前が連番になるような変数を作るなら
for(i=1; i<=5; i++){
eval("var sample_"+ i +";");
}
上記のように書くことで
「sample_1」～「sample_5」の変数を作成することができます。
Flashでは配列アクセス演算子と呼ばれるものがあるのですが、
JSでこれにあたるものはどれだろう？と思い
探してみるもなかなか見つかりません。
最終的に、eval() を使うことで似たようなことができたので
忘れないようにメモしておこうと思います。
eval() は中の式を評価するので、
例えば名前が連番になるような変数を作るなら
for(i=1; i<=5; i++){
eval("var sample_"+ i +";");
}
上記のように書くことで
「sample_1」～「sample_5」の変数を作成することができます。
