けっこう調整が必要ですが、なれると簡単です。 とりあえず『愛』の文字をバリエーションしてみます( 複数文字もできますし、影なしでもできます / 影があったほうが調整が多くなります ) なにもしない愛愛の上鏡
愛の下鏡
愛の左鏡
愛の右鏡
何度もテストしましたが、マジに一つ一つ作るのは初めてで、けっこうたいへんです。後、組み合わせとして 2x2 の4通りあるんですけれど……… 愛の上左鏡
文字枠できるの忘れていた……… 愛の上右鏡
色変えて文字枠のオプション設定したら、もうなんだか全く別物になっていしまいました( カエルさん万歳 ) 愛の下左鏡
なかなかうまくいかないパターンもあります。フォントの幅の中心位置を特定するのが難しいので。 愛の下右鏡
2014年11月09日
フリーフォントで簡単ロゴ作成の『横書きページで』文字の中央に鏡を置いたような結果を反映させられるようにしました。フリーフォントの種類によって、みんな違うものになります。
2014年11月07日
META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
meta要素の内容を構文解析エラー： ';' は有効なキーと値のペアの区切りではありません。代わりに ',' を使用してください。単純にコピーペーストで使っており、実際動作していたので気が付きませんでした。ちょっと調べてみると、世の中では実際混在しているようでしたが、基本的にはカンマを使うべきなのでしょう。
<meta name="viewport" content="width=1280,initial-scale=1.0"> <meta name="viewport" content="width=1280;initial-scale=1.0">
The value "1280;initial-scale" for key "width" was truncated to its numeric prefix.
The key "1.0" is not recognized and ignored.
Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.
iOS Developer Library : Configuring the Viewport
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">
Mozilla | MDN : Using the viewport meta tag to control layout on mobile browsers
<meta name="viewport" content="width=device-width, initial-scale=1">
▼ Microsoft は、META 要素における viewport そのものの解説を見つけられませんでした… MDSN : How to display dynamically generated web content using the WebBrowser control for Windows Phone 8
2014年11月06日
JavaScript でクリックの代替( 古くは dispatchEvent で呼び出し )、現在は jQuery の click() ではリンクの URL を開く事はでき無いので、$("セレクタ")[0].click() 等を併用します。
現在 IE、Google Chrome、Firefox では dispatchEvent を使用しなくても click() だけで実行できるようです。元々、このメソッドは IE では古くから使用でき、特にリンクのクリックに対する代替として良く使われていたのですが、他のブラウザでは dispatchEvent を使う必要がありました( かなり昔です )
しかし、jQuery の click メソッドでは通常の click イベントは起きるのですが、a 要素の url を開く動作が実行されないという実情があります。ですから、その場合(URLを開きたい場合)だけは $("セレクタ").click() では無く、$("セレクタ").get(0).click() か、$("セレクタ")[0].click() とする必要があります
▼ 書き方の比較
<pre>
<a id="target20141106"
target="_blank"
href="https://www.google.co.jp/?gws_rd=ssl"
onclick='console.log("normalイベント発生")'
>www.google.co.jp</a>
▼ ◎ うまく行きます
<input type="button"
value="DOMでリンクをclick()"
onclick="document.getElementById('target20141106').click();">
▼ × うまく行きません
<input type="button"
value="jQueryでリンクをclick()"
onclick="$('#target20141106').click();">
▼ ◎ うまく行きます
<input type="button"
value="jQueryでリンクをclick()"
onclick="$('#target20141106').get(0).click();">
▼ ◎ うまく行きます
<input type="button"
value="jQueryでリンクをclick()"
onclick="$('#target20141106')[0].click();">
</pre>
www.google.co.jp ▼ ◎ うまく行きます ▼ × うまく行きません ▼ ◎ うまく行きます ▼ ◎ うまく行きます ▼ dispatchEvent を使用した記述 2011 年の最初の頃は、Firefox で制限があったのですが、今は皆 (IE, Chrome, Firefox) 正常に動作しているようです
<script type="text/javascript">
var flg = "ノーマル";
function clickAction(id) {
flg = "代替";
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
document.getElementById(id).click();
}
else {
var clickevent=document.createEvent("MouseEvents");
clickevent.initEvent("click", true, true);
document.getElementById(id).dispatchEvent(clickevent);
console.log("IE以外とIE11")
}
flg = "ノーマル";
}
</script>
<span id="target"
onclick='alert(flg)'
style='cursor:pointer'>JavaScriptクリック
</span>
<input type="button"
value="クリックのかわり"
onClick='clickAction("target")'>
<a id="link"
href="about:blank"
target="_blank">通常のリンク
</a>
<input type="button"
value="クリックのかわり"
onClick='clickAction("link")'>
(1)JavaScriptクリック (2) (3)通常のリンク (4)
(1) は onclick で alert を呼び出しています
(2) のボタンで (1) の click イベントを呼び出しています
(3) は href で新しいウインドウを開く普通のアンカーです
(4) のボタンで (3) のイベントを呼び出しています
▼ submit ボタンに対する click() テスト
jQuery で記述すると単純な click イベントは非常にシンプルになりましたが、アンカーのURL先へのページ移動は実行されませんでした
※ しかし、submit ボタンによる form の処理は実行されました
<script>
$(function(){
$("#submit_button").val("送信")
.click(function(){
$("#target2").click();
});
});
</script>
<span id="target2"
onclick='alert("ここを実行")'
style='cursor:pointer'>JavaScriptクリック
</span>
<form target="_blank">
<input id="submit_button"
type="submit"
name="submit">
</form>
<input type="button"
value="JavaScript 送信"
onclick='$("#submit_button").click()'>
JavaScriptクリック
● 一番上をクリックすると、JavaScript だけの実行
● 真ん中(submitボタン)をクリックすると、一番上をクリックした事にして、さらに通常の送信
一番下(ただのbutton)をクリックすると、真ん中をクリックした事になって、さらに連動して一番上もクリックした事になります
2014年11月04日
JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード (2) / ページ表示部中央に固定
▼ 本文中のブックマークレット(URLからリンクを作成)の登録用リンク埋め込みアプリ用 IFRAME
前回は、IFRAME を埋め込んだだけでしたが、今回はIFRAME の中に、HTML を書き込みます。 但し、ブックマークレットで書ける量には限界があるので、SCRIPT 要素と他の若干の処理のみ書きこんで、内部の処理や画面は SCRIPT 要素のsrc 属性で呼び出される.js ファイル内で実行させます。 この方法のメリットは、IFRAME 内で独立した CSS や 変数が使える事と、IFRAME 内から元のページにアクセス可能であるということです。この方法を使えば、ドメイン間のセキュリティの問題は発生しません。 ( src に別ドメインを使うとセキュリティの制限でアクセスはできません ) 例えば以下のような HTMLとJavaScript を IFRAME の中に埋め込みたい場合、少し特殊な処理が必要になります
<meta charset="utf-8">
<style>
body{
background-color:#ccc;
}
textarea {
width:300px;
height:70px;
}
</style>
<input type="button" value="ダウンロードリンク作成" onclick="build_link();">
<br>
<textarea id="url"></textarea>
<br>
<a id="link" href="#"></a>
<script>
function build_link() {
document.getElementById("link").innerText = "ダウンロードリンク";
document.getElementById("link").href= document.getElementById("url").value;
}
</script>
JavaScript 内で画面を作成するには、HTML そのものを文字列として作成して document.write する必要があります。( こちらの javascript ボタンで作成できます ) HTML 部分を文字列化した JavaScript ソースコード(UTF-8)
str="";
str+="<meta charset=\"utf-8\"> \n";
str+="<style> \n";
str+="body{ \n";
str+=" background-color:#ccc; \n";
str+="} \n";
str+="textarea { \n";
str+=" width:300px; \n";
str+=" height:70px; \n";
str+="} \n";
str+="</style> \n";
str+="<input type=\"button\" value=\"ダウンロードリンク作成\" onclick=\"build_link();\"> \n";
str+="<br> \n";
str+="<textarea id=\"url\"></textarea> \n";
str+="<br> \n";
str+="<a id=\"link\" href=\"#\"> </a> \n";
document.write(str);
document.close();
function build_link() {
document.getElementById("link").firstChild.nodeValue = "ダウンロードリンク";
document.getElementById("link").href= document.getElementById("url").value;
}
このコードをWEBに保存して、以下のようにスクリフプトタグごと IFRAME 内に document.write する事によって、一般のページに対する処理を行う画面として IFRAME を埋め込む事ができます。 ※ もちろん、サイト側で この手のブックマークレットをブロックする事は可能です
<a href="javascript:if(!window['_bI']){window._bI={};(function(w,h,b,l,t,z,v){var%20wnd=document.createElement('iframe');with(wnd){frameBorder=b;width=w;height=h;with(style){position='fixed';left=l;top=t;zIndex=z;display=v;marginLeft=(((w/2)*-1)+'px');marginTop=(((h/2)*-1)+'px');borderRadius='8px';}}document.body.appendChild(wnd);window._bI.wnd=wnd;wnd.contentWindow.document.write('<'+'script%20src='http://toolbox.winofsql.jp/build_link.js'%20charset='utf-8'></'+'script>%20');})(400,200,1,'50%','50%',1000,'');}" onclick="
alert('ブックマークバーにドロップか、IEでは右クリックでお気に入りに登録(お気に入りバー)が簡単です');
if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) {
event.returnValue = false;
}
event.preventDefault();
event.stopPropagation();
">埋め込みアプリ用 IFRAME</a>
このブックマークレットは、URL を手早くリンク化して右クリックしてそのファイルをダウンロードする為に使用できます 関連する記事 JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード(1) 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。 更新履歴 2011-03-20 : 初回投稿 2013-11-03 : ソースコードを単純に書き換えて、解説を追加。 2014-11-04 : ブックマークレットをページ表示部中央に固定
JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード(1)
▼ ブックマークレット登録用のリンク IFRAME ※ Google Chrome は、ブックマークバーにドラッグ&ドロップ ※ Firefox は、ブックマークツールバーにドラッグ&ドロップ ※ IE は、右クリックでお気に入りバーへ登録 これだけでは、役には立ちませんが、次にこの IFRAME の中に画面(または処理のみ)を構築します _bI は、ユニークであれはなんでもいいのですが、bindIframe を略しています。リロードしない限り、いったん作成した IFRAME を window._bI.wnd で参照する事ができます。w : 幅 h : 高さ b : ポーダー( 0:なし、1:あり ) l : 左表示開始位置 t : 上表示開始位置 z : zIndex v : 表示する : ""、表示しない : "none"
<script>
if (!window['_bI']) {
window._bI = {};
(function(w, h, b, l, t, z, v) {
var wnd = document.createElement('iframe');
with (wnd){
frameBorder = b;
width = w;
height = h;
with (style){
position = 'absolute';
left = l;
top = t;
zIndex = z;
display = v
}
}
document.body.appendChild(wnd);
window._bI.wnd = wnd;
wnd.contentWindow.document.write('<style>body{background-color:#ccc;}</style> ');
wnd.contentWindow.document.close();
})(400, 200, 1, '0px', '0px', 1000, '');
}
</script>
ブックマークレット登録用のコードは以下のようになります ※ 変数定義と空白出力にのみ、%20 を使いますが、それ以外のスペースは全て取り除いています ※ ブックマークレットは、A 要素 の中で記述するので、< と > は、< と > に変更します。
<a href="javascript:if(!window['_bI']){window._bI={};(function(w,h,b,l,t,z,v){var%20wnd=document.createElement('iframe');with(wnd){frameBorder=b;width=w;height=h;with(style){position='absolute';left=l;top=t;zIndex=z;display=v}}document.body.appendChild(wnd);window._bI.wnd=wnd;wnd.contentWindow.document.write('<style>body{background-color:#ccc;}</style>%20');wnd.contentWindow.document.close();})(400,200,1,'0px','0px',1000,'');}">IFRAME</a>
リンク(アンカー)の表示文字列が登録時の文字列になりますが、登録後に各ブラウザで変更する事ができます。 カスタマイズは、400,200,1,'0px','0px',1000,'' の部分を変更します 関連する記事 JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード (2) / ページ表示部中央に固定 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。 変更履歴 2011-03-20 : 初回投稿 2013-10-31 : 内容の再整備
2014年11月03日
bit.ly の短縮URLのドメイン部分に自分のサブドメイン(Branded Short Domain)を使用する
▼ Branded Short Domain を使うとカスタマイズ自由http://q.winofsql.jp/GALLERIA_Heart こんな感じです。 seesaa も自分のドメインを使ってサブドメインで呼べるようになりますが、同じ理屈です。bit.ly では、A レコードでも、CNAME でもどっちでもいいようですが、seesaa は CNAMEでした。 英文の説明ページ
CNAME の場合は、cname.bitly.com. で、A レコードの場合は 69.58.188.49 とあります。 注意するのは、さくらインターネットもそうですが、CNAME の場合は 最後に .(ドット) が必要です( 但し、レジストラによって必要無いかもしれません )さくらインターネットで取得したドメインを使用して、そのサブドメインを Seesaa に設定する :logical error
bitly の URL 短縮結果のカスタマイズ
2014 年現在の設定画面
一度登録していまっているので、初期画面がどうだったかは覚えていませんが、自分のドメイン側で『サブドメイン』を用意して登録するだけで良いと思います。
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
