SQLの窓

2016年02月04日


livedoor Blog で、Facebook の『シェアボタンを表示する』


※ テンプレートは右2カラムの『キャンバス』シリーズのうちの一つを使用しています

トップページと個別記事ページに指定しました。

両方の container にルート要素とスクリプト

appid は必要無いです(たぶんデフォルトの appid が使われると予想しています / 966242223397117 )。
<!-- ............... Container ............... -->
<div id="container">

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- ..... Title ..... -->

両方の article-social-btn にボタン用要素追加
		<div class="article-social-btn">
			<$ArticleToolBox$>
<div class="fb-share-button" data-href="<$ArticlePermalink$>" data-layout="button_count"></div>
		</div>
ArticlePermalink は、個別記事用の変数ですが、トップページに指定すると都合よく記事毎の URL に変換されました( ArticlesLoop の中ですから )

デフォルトの appid に関しては、オブジェクトデバッガーの結果より類推しています。


そもそも、シェアボタンのコード取得時に appid を持っていなくても動作するコードを取得できます。


関連する記事

livedoor Blog で、Twitter カードを使用する



posted by lightbox at 2016-02-04 23:12 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2015年09月18日


CKEditor CDN を使用して、簡単に HTML コンテンツ作成エディタを利用できます

CKEditor CDN( full )
※ 最大化ボタンをクリックして利用できます


CKEditor はダウンロード可能なソフトウェアですが、設置せずとも CKEditor CDN でホスティングされているライブラリを使用してすぐに使えるようになります。

CKEditor CDN( full ) では、WEBアプリの画面を作成するのを補助する事を想定しています( 特に、TABLE 要素のメンテナンスに優れています / 他も対話式やドラッグドロップ可能なコンテンツもあります )

また、この目的に特化する為、いくつかの拡張用のコードを追加しています。

1) 全ての HTML 要素を書ける
2) p 要素を自動挿入しない
3) localStorage に保存するボタンを追加
(保存するボタン用コマンド登録時に、modes プロパティでソース表示時にも実行可能にする)
<script src="//cdn.ckeditor.com/4.5.3/full/ckeditor.js"></script>
<textarea name="editor1"></textarea>
<style type="text/css">
.cke_button__mybutton_icon {
	display: none !important;
}
.cke_button__mybutton_label {
	display : inline !important;
}
</style>
<script>
editor = CKEDITOR.replace( 'editor1', {
	allowedContent : true,
	enterMode : CKEDITOR.ENTER_BR,
	enableTabKeyTools : true
} );
editor.on( 'pluginsLoaded', function(){
	editor.addCommand( 'svData', {
		modes : { source : 1,wysiwyg : 1 },
		exec : function( editor )   {
			localStorage["_save_ck_code"] = editor.getData();
		}
	}); 
	editor.ui.addToolbarGroup( "user" );
	editor.ui.addButton( 'mybutton',   {
		label : '入力内容を保存', command : 'svData', toolbar: 'user'
	} );
	var editor_code = localStorage["_save_ck_code"];
	if(typeof editor_code == 'string'){
		editor.setData(localStorage["_save_ck_code"]);
	}
});
</script>

ボタンのテキストを表示させる為に、強制的に CSS を変更していますが、ボタンのラベルがデフォルトで非表示となっている為です。( アイコンを利用したい場合は、background で指定し直します )
.cke_button_label {
    display: none;
    padding-left: 3px;
    margin-top: 1px;
    line-height: 17px;
    vertical-align: middle;
    float: left;
    cursor: default;
    color: #474747;
    text-shadow: 0 1px 0 rgba(255,255,255,.5)
}
参考ページ

CKEDITOR.config
CKEDITOR.ui
CKEDITOR.editor

ボタンの追加だけでは、テキストがボタンに表示されなかったので、CSS で対応しています。




posted by lightbox at 2015-09-18 18:20 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2015年03月15日


画像を大きく見る為のウインドウを開くボタンの作成するサービス

▼ このページへのリンク


Lightbox や Shadowbox のような JavaScript ライブラリはとてもかっこよく表示できるのでとても自己満足はできるのですが、イザその画像の詳細を見たくて実際のサイズで見たいときにはあまり意味がなかったり。特に、イラストを作った直後で、ブログに貼り付けてから再度見直したい時にはなんか違うなぁ(画像小さいし)・・・・なんて思う事もあったので、単純に大きく開くボタンを作ってはみたのですが、結構コードが長くて使いまわしがつらかったので作りました。

『関数にすれば?』

という意見も頭の中には少しあったのですが、このほうがイラスト毎に後から開いたウインドウの背景をカスタマイズできるので、これでいいかなと思いました。

▼ 通常ボタン
 

上で開くイラストは、背景が透過しているのでこんなふうにカスタマイズできます。

▼ インラインに JavaScript で背景を追加したカスタマイズボタン
 

5行目が追加部分です
<input type="button" value="最大表示" onclick='
	var w=1000,h=860;
	hwin=window.open("about:blank","","width="+w+",height="+h+",scrollbars=yes,resizable=1,left="+(screen.width-w)/2+",top="+(screen.height-(h+100))/2);
	hwin.document.write("&lt;img src=&#92;&#34;https://lh6.googleusercontent.com/-	FQO8GbFoAUI/VQVVLysRSzI/AAAAAAAAY1g/trUU_gZMCkQ/s1200/Aiko6_maid.png&#92;&#34;&gt;");
	hwin.document.body.style.background="url(https://lh5.googleusercontent.com/-yzSGYSSjnFo/VP8HrL7VPLI/AAAAAAAAYts/r_GE5g8ee9s/s1200/marge_city_a01.png) no-repeat 0px 100px";
'> 



posted by lightbox at 2015-03-15 22:30 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2014年11月09日


フリーフォントで簡単ロゴ作成の『横書きページで』文字の中央に鏡を置いたような結果を反映させられるようにしました。フリーフォントの種類によって、みんな違うものになります。

けっこう調整が必要ですが、なれると簡単です。

とりあえず『愛』の文字をバリエーションしてみます( 複数文字もできますし、影なしでもできます / 影があったほうが調整が多くなります )

なにもしない愛



愛の上鏡



愛の下鏡



愛の左鏡



愛の右鏡



何度もテストしましたが、マジに一つ一つ作るのは初めてで、けっこうたいへんです。後、組み合わせとして 2x2 の4通りあるんですけれど………

愛の上左鏡



文字枠できるの忘れていた………

愛の上右鏡



色変えて文字枠のオプション設定したら、もうなんだか全く別物になっていしまいました( カエルさん万歳 )

愛の下左鏡



なかなかうまくいかないパターンもあります。フォントの幅の中心位置を特定するのが難しいので。

愛の下右鏡




posted by lightbox at 2014-11-09 00:21 | WEBサービス | このブログの読者になる | 更新情報をチェックする

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 年現在の設定画面 一度登録していまっているので、初期画面がどうだったかは覚えていませんが、自分のドメイン側で『サブドメイン』を用意して登録するだけで良いと思います。
posted by lightbox at 2014-11-03 14:16 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2014年10月31日


Google のカスタム検索の結果と、通常の site: 検索の結果が同じにならないので、後者でしばらく様子を見る事に

どうも最近微妙に『バグじゃないの?』と感じるような細かい現象の変化があるのですが、Google の事なのでジタバタしても仕方無いので様子を見る事にしました。
<script type="text/javascript">
function callSearch() {

	var query = document.getElementById("q").value;
	query = encodeURIComponent(query);
	query = query.replace("%20", "+");

	target = "https://www.google.co.jp/#q=" + query + "+site:logicalerror.seesaa.net";
	window.open(target);

}
</script>
<input type="text"
	id="q"
	size="31"
	maxlength="255"
	value=""
	style='font-size:16px;'>
<input type="button"
	value="検索"
	onclick="callSearch();"
	style='font-size:16px;'>
Google のカススタム検索は、複数のサイトをグループとして検索できるので、その場合は選択肢はありませんが、一つのサイトならば site: で検索するのは簡単です。

現象としては、キーワードでサイト内検索すると、タイトルにヒットして思った記事がトップに出て来るのですが、カスタム検索ですとどうも優先順位が違うらしく、(タイトル内のキーワードより既存の優先順位の中のページにそのキーワードがあるほうが優先されている)全く表示されない事が最近多発しました。せっかくサイト内を検索したいのに、全く役に立たないという状況です。

余談ですが、Google WEBマスターツールがリンクをチェックする際、JavaScript の結果も対象としているのですが、その結果がありえない結果だったり( URL を replace して加工しているのですが、勝手に2回実行して URL が無いとか言われています・・・ )



posted by lightbox at 2014-10-31 01:29 | WEBサービス | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり