Google web fonts
日本語フォント
セリフ体
ゴシック体
2014年9月1日月曜日
2013年6月8日土曜日
SEO対策 Googleにサイトマップを登録する方法
（１）ホームページのサイトマップをXML化する。
CMSを使用していない静的なホームページであればサイトURLを入れるだけでXML化したサイトマップを作成してくれるWEBサービスがあるのでそれを利用して追加で自分で書き込んでもいい。
Movable typeやWordpressを使用したホームページのサイトマップXMLはCMSにそのサイトマップを書きだすページ作成してXMLを書き出す。
（２）サイトマップのXMLに任意の名前を付けてHPのサーバーにアップロードする。
サイトマップのXMLに「sitemap.xml」などの任意の名前をつける。
それをそのホームページの第一階層などにアップロードする。
（3）Googleウェブマスターツールでサイトとサイトマップの登録をする。
（備考）
サイトマップのXMLの中のタグの説明
・ <priority>1.0</priority>
クロールさせたいページの優先順位をきめられる。1.0が最高値
・<lastmod></lastmod>
最後の更新日、古いからといってクロールされなくなるわけでは無いらしい。
参考サイト
2013年4月22日月曜日
flash(swf)をSVGに変換してくれるツール「Swiffy」開発元：Google
Swiffyの使い方
Google SwiffyのサイトにSWFをアップロードして変換
Google Swiffyサイト左下にあるボタンからHTML5に変換したいSWFをアップロードする
アップロードが完了すると「Swiffy output」と表示され、HTML5に変換されたhtmlのリンクが表示される
変換されたhtmlファイルをリンク先から取得する（リンクは１５分で期限切れになる）
Adobe FLASH CS4以降の拡張機能を使って変換
Google Swiffyサイト右上にあるボタンからExtensionをダウンロードして、インストールする（ダウンロードして、ファイルを実行するとインストールが開始される）
Swiffyで表示させるflaファイルを開く
「コマンド」から「Export as HTML5 (Swiffy)」を選択すると、HTML5のファイルが出力される
<注意点>
iOSではFLASH(swf)が非表示、Android2.x以前ではSwiffy(SVG)が非表示になります。
Canvasアニメーションに関しては、チューニング次第でパフォーマンス改善しそう(少し重い)です。
<画面を拡大した時の比較>
・SVG(Swiffy)
・Canvas
・Flash(swf)
＜参考サイト＞
msto.jp - Google Swiffy 覚書
http://msto.jp/p/6/
Google SwiffyのサイトにSWFをアップロードして変換
Google Swiffyサイト左下にあるボタンからHTML5に変換したいSWFをアップロードする
アップロードが完了すると「Swiffy output」と表示され、HTML5に変換されたhtmlのリンクが表示される
変換されたhtmlファイルをリンク先から取得する（リンクは１５分で期限切れになる）
Adobe FLASH CS4以降の拡張機能を使って変換
Google Swiffyサイト右上にあるボタンからExtensionをダウンロードして、インストールする（ダウンロードして、ファイルを実行するとインストールが開始される）
Swiffyで表示させるflaファイルを開く
「コマンド」から「Export as HTML5 (Swiffy)」を選択すると、HTML5のファイルが出力される
<注意点>
iOSではFLASH(swf)が非表示、Android2.x以前ではSwiffy(SVG)が非表示になります。
Canvasアニメーションに関しては、チューニング次第でパフォーマンス改善しそう(少し重い)です。
<画面を拡大した時の比較>
・SVG(Swiffy)
・Canvas
・Flash(swf)
msto.jp - Google Swiffy 覚書
http://msto.jp/p/6/
2013年4月3日水曜日
2012年10月8日月曜日
WEBフォントのWEBサービス「Fonts.com 」の使い方
(2)アカウントを作る。
※この時無料のプランは月間25000PV以内のWEBサイトで3000フォント使えるというようなプランを選べば無料でWEBフォントが使える。
(3)プロジェクト名を決める、プロジェクト毎に複数のサイトでWEBフォントを設定できる。
htmlやbodyタグを指定する。任意の場所のみに効かせたい場合はそのフォントを囲むhtmlのidやclass名を指定すれば良い。
(5) プロジェクトの設定画面右のメニュー「Publish Options」を選択する。
JSのリンクが出てくるのでそのリンクをhtmlの<head>の中に記述する。
それをCSSに書き込む。
消えるので気になる場合はCSSで消せる。
2012年6月23日土曜日
2012年6月19日火曜日
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方
ブログに実行したスクリプトと結果がでるので便利。
β版もこれからでるそうなので使い方はこれから探る。
<参考サイト>
http://kachibito.net/web-service/how-to-join-jsfiddle.html
2012年5月22日火曜日
syntaxhighlighterでコードをきれいに表示させる
syntaxhighlighterでコードをきれいに表示させる
(1)下記サイトからjs,css,swfファイルをダウンロード
syntaxhighlighter(google code)
(2)必要なJSをアップロードする 。html、CSS、JS、PHPの場合。
(3)htmlの方には以下<textarea>で囲んだ中にスクリプトを記述。
class=""のところに表示するコードの名前を入れる。
完了!
(参考サイト)
http://mrs.suzu841.com/highlighter/dp.SyntaxHighlighter/
(1)下記サイトからjs,css,swfファイルをダウンロード
syntaxhighlighter(google code)
(2)必要なJSをアップロードする 。html、CSS、JS、PHPの場合。
(3)htmlの方には以下<textarea>で囲んだ中にスクリプトを記述。
class=""のところに表示するコードの名前を入れる。
完了!
(参考サイト)
http://mrs.suzu841.com/highlighter/dp.SyntaxHighlighter/
2012年5月7日月曜日
SNSボタン(アイコン型を設置)facebook,yahoo,twitter,google,はてなブックマーク
○SNSボタン(アイコン型を設置)facebook,yahoo,twitter,google,はてなブックマーク
( 1 )twitterアイコンのつぶやくボタンを設置する。
( 2 )facebookアイコンのシェアボタンを設置する。
( 1 )twitterアイコンのつぶやくボタンを設置する。
<a href="http://twitter.com/share?count=horizontal&original_referer=ここに絶対パスでページのURLを書く&text=タイトル部分&url=ここに絶対パスでページのURLを書く(ツイート時に表示される)&" onclick="window.open(this.href, 'mywindow6', 'width=750, height=550, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="ここにオリジナルのtwitterアイコンを入れる" width="18" height="18" /></a> ( 2 )facebookアイコンのシェアボタンを設置する。
<a href="http://www.facebook.com/share.php?u=ここに絶対パスでページのURLを書く" onclick="window.open(this.href, 'mywindow6', 'width=750, height=550, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="ここにオリジナルのfacebookアイコンを入れる" width="18" height="18" /></a>
( 3 )はてなブックマークボタンを設置する。<a href="http://b.hatena.ne.jp/entry/ここに絶対パスでページのURLを書く" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="18" height="18" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> ( 4 )Yahoo!ブックマークボタンを設置する。※ページURL等は書かなくてOK<a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(document.title)+'&u='+encodeURIComponent(location.href)+'&ei=UTF-8','_blank','width=750,height=550,left=100,top=50,scrollbars=1,resizable=1',0);"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" style="border:none;"></a> ( 5 )googleブックマークボタンを設置する。
<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=ここにhttp://以下のページURLを書く&title=タイトル部分" onclick="window.open(this.href, 'mywindow6', 'width=750, height=550, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img alt="" src="http://www.google.co.jp/favicon.ico" border="0" width="16" height="16" /></a>
参考サイト「facebook,twitter,はてぶボタンの設置方法」http://es.istgut.jp/tips/facebooktwittermixi.htmlhttp://b.hatena.ne.jp/guide/bbutton
「yahooブックマークボタン設置方法」http://bookmarks.yahoo.co.jp/settings/tools/savelink
「googleブックマークボタン設置方法」http://blog.seiji.me/blog/2008/05/13/161/
「小窓の開き方」http://amenti.usamimi.info/windowopen.html2012年2月22日水曜日
IE6/7/8をCSS3対応にする 「CSS3 PIE」
(1)CSS3 PIEからファイルをダウンロード。
(2)ファイルの中にあるPIE.htcだけを任意のホームページサーバーディレクトリに
入れる。（ドメイン直下とか）
(3)CSSに以下のように記述する。
(4)完了、注意点は「PIE.htc」のパスは角丸を効かせるhtmlまでのパスを
書く事。また
-pie-border-radius:0 0 0 0;はPIEのジェネレーターでは出てこない,左上から時計回りに4つの角丸を指定出来る。radiusを効かせている要素がIEで消えるバグがあったが
この要素のCSSの最初にpositon:relative;を効かせたら直った。
以下にバグ解決の参考サイトを載せる。
「CSS3 PIE」参考サイト
・コリス
・「IEの角丸を一行で指定出来る」参考サイト
・Firefox 13 リリース、接頭辞 -moz-border-radius* と -moz-box-shadow のサポート終了
・CSS3 PIE」がうまく動かなかった時の対処法
2012年2月7日火曜日
ブログの投稿をfacebookへ連動させる(テストを兼ね)
Facebookのアプリ「RSS Graffiti」を使ってブログの投稿をfacebookへ連動させられる。
しかし設定時にRSS Graffitiのエラーが出るので注意。
参考ソース：ブログの投稿をFacebook（フェイスブック）に連動、連携させる。
2012年2月1日水曜日
2012年1月11日水曜日
2011年12月1日木曜日
JWplayer各種ブラウザ対応の動画再生player
mp4だけでflashplayerがインストールされていればどのブラウザでも表示出来る
JWplayer
(1)インストール
http://www.longtailvideo.com/players/jw-flv-player/
Keep me informed of news, offers & updatesと
Include Viral, a video sharing plugin のチェックは外す。
(インフォメーションが届かないようにするのと再生後にシェアするなどの項目を出さないようにする。)
(2)カスタマイズする。
file:動画のパス;
skin:スキンの場所;
(例)
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "player.swf",
file: "video_01.mp4",
skin: "nacht.zip"
});
</script>
(3)その他の設定は以下URLから
スキンは以下からダウンロードしてzipのまま好きなの場所に上げる。
http://www.longtailvideo.com/addons/skins
JW FLV Media Player のオプションの一覧
http://kenknown.blog42.fc2.com/blog-entry-54.html
他に役立つかもしれない
http://dmoon.at.webry.info/201011/article_18.html
JWplayer
(1)インストール
http://www.longtailvideo.com/players/jw-flv-player/
Keep me informed of news, offers & updatesと
Include Viral, a video sharing plugin のチェックは外す。
(インフォメーションが届かないようにするのと再生後にシェアするなどの項目を出さないようにする。)
(2)カスタマイズする。
file:動画のパス;
skin:スキンの場所;
(例)
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "player.swf",
file: "video_01.mp4",
skin: "nacht.zip"
});
</script>
(3)その他の設定は以下URLから
スキンは以下からダウンロードしてzipのまま好きなの場所に上げる。
http://www.longtailvideo.com/addons/skins
JW FLV Media Player のオプションの一覧
http://kenknown.blog42.fc2.com/blog-entry-54.html
他に役立つかもしれない
http://dmoon.at.webry.info/201011/article_18.html
2011年10月20日木曜日
cgiメールフォーム、普通のサーバーなら使える！
1) ファイルをダウンロードしてmailformpro > mailformpro > config.cgi に設定したいメールアドレスを入れる。
2)config.cgi変更後全ファイルをまるっとサーバーに上げる。
説明書(ダウンロードファイルや配布サイトにある)を見ながらcgiなどのデータのパーミッションを設定する。
3)※注意 説明書には書いてないが他のhtml、CSS、画像データなどもそのサーバーに合ったパーミッションにしないとアクセスできない。因に試したサーバーではパーミッション設定777(全部チェック)でいけた。パーミッションで引っかかる事が多い。
4) あとは細かな体裁をhtmlやCSSで変えるのみ。
<参考URL>
http://www.synck.com/contents/download/cgi-perl/mailformpro.html
2011年1月24日月曜日
2010年10月19日火曜日
登録:
投稿 (Atom)