更新するのが面倒！サイトの共通部分を簡単に作る様々な方法
サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。 がんばって直に書いてるものを置換する Dreamweaverのテンプレート機能を使う JavaScriptを使う PHPを使う SSIを使う Node.jsやRubyのツールを使う がんばって直に書いてるものを置換する とりあえず普通にコーディングして、修正などある場合はソフトの一斉置換を使ってなんとかする方法です。 数ページものならあまり気にならないがページが増えていく毎に大変になる。リンクや画像が相対パス指定だと階層が増えると更に大変になります。 <footer>
Facebookなどで使われている「OGP」の一覧
FacebookなどのSNSで自分のサイトを紹介する際に使うOGPを一覧にしてみました。 特に絶対に指定しなければいけないものではないですが、どのテキストや画像が紹介した先で使われるかわかりませんので、 できれば指定しておきたいものです。 だいたい基本情報の「タイトル」「表示される画像のパス」「概要を説明する文章」を指定する事が多いかなと思います。 基本情報 <meta property="og:title" content="タイトル" /> <meta property="og:type" content="オブジェクトのタイプ" /> <meta property="og:url" content="このページのURL" /> <meta property="og:image" content="表示される画像のパス" /> <meta property="og:descriptio
jQueryを使ってチェックボックスが押されたらリンクをつける
チェックボックスにチェックを入れるとaタグが出てリンクが押せるようになるというのをjQueryで作成したので、また作る時用に残しておきます。 JavaScriptがもっと効率良くかける気がしますが、ひとまず以下になりました。 HTMLソース サンプルとして以下のHTMLを用意しました。 <input type="checkbox" id="ideaCheck" name="ideaCheck">チェック<br> <p id="text01">リンク</p> JavaScriptソース $(function(){ //ウインドウロード時 $(window).load(function(){ if($('#check').attr("checked")){ hogehoge1(); } else { hogehoge2(); }; }); //クリック時 $('#check').click(f
SNSボタンをオリジナル画像で設置する方法
TwitterやFacebookへのボタンは公式サイトでボタンを作れますが、そのボタンはそれぞれオリジナルのボタンで設置することもできます。 ボタンの仕組みが変わると動かなくなるかもしれませんが、以下の方法で設置できます。今回紹介しているのはTwitter・Facebookシェア・mixiチェック・Google+です。 Twitter コードは以下になります。 <a href="http://twitter.com/share?count=horizontal&original_referer=ページのアドレス&text=ツイートさせたいテキスト&url=ページのアドレス&via=Twitterアカウント" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=
スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選
スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。 PC（IE以外）でも動作します。 flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです – piglovesyouの日記 flickable こちらはPCでフリックができるようにできるプラグインです。そのままスマートフォンでも使えます。 PCでも（IE6でも）よく動きます。 jQuery.flickable: iPhone and Android like flick scrolling plugin flickSimple こちらもP
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
途中からスクロールについてくる
スクロールに関する演出を調べたので、調べたものに使用しているプラグインと実装方法のメモです。 なお、デモについてはFirefoxで確認してますので他のブラウザではずれてる場合があるかもしれません。 慣性スクロール 横スクロール（ナビゲーション付き） iOS見たいなスクロールバーと慣性スクロールができるプラグインNiceScroll スクロールに遅れてついてくるコンテンツ 途中からスクロールについてくる 慣性スクロール こちらは以下のサイトに実装方法が書いてありましたので、そちらをそのままご紹介です。 jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる | webOpixel 参考JSソース <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqu
Photoshopの便利なスクリプトや拡張機能のまとめ
Photoshopにも便利な機能を追加できるスクリプトと拡張機能があります。こちらでも自分が使っているものや便利そうだなと思ったものをまとめました。 スクリプトの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Scripts Mac → アプリケーションのAdobe Photoshop CS5\Presets\Scripts 拡張機能はダウンロードしたファイルをクリックすると、Adobe Extension Managerが起動しますのでそちらにインストールすればOKです。 Index… PSDからテキストを抽出 レイヤー名の「コピー」を削除 Fireworks風のスライスレイヤー 選択したフォルダやレイヤーを別ファイルへ
情報収集をもっと快適にする「Gunosy」を使ってみた
Gunosyとは Web上にあふれる情報の中から，毎日，あなたの興味にあった記事を集めてきます。 さらにGunosyは使えば使うほど，あなたの興味を学習し，より良い記事を推薦するようになります。 登録する TwitterかFacebookのアカウントを使ってログインします。 そうすると情報を送ってくれるメールアドレスと、興味を分析するためのアカウントの追加（Twitter・Facebook・Hatena）設定をします。 解析してくれるので、メールがくるまであとは待ちます。 メールを受信 解析が終わるとメールが先ほど指定したアドレスに送られてきます。 さらに推薦記事を見たい場合は「すべての推薦記事を確認する」をクリックします。 Gunosyのページで見る そうするとGunosyのページに飛びます。 記事の一覧のページが開きます。上のメニューでカテゴリーも選べます。 ちなみにリンクをクリックし
アイコンにも使える！？「Wingdings」と「webdings」 #LOVEFONT
webcre8さんで「皆さんの好きなフォントに対するアツい想いをブログでぶちまけ合う#LOVEFONT」というのがあります。 そこで自分も紹介してみようと思います。といっても業務でデザインすることが今はないのであまりフォントのことを知らないのですが・・・ みなさんの記事を見てると、フォントってすごいなーと感動するばかりです。 自分がご紹介するのはこの「Wingdings」と「webdings」です。ご覧のとおり絵文字フォントです。 Wingdings 絵文字フォントの一つ。Microsoft Windowsには標準添付されている。英語で「ドンチャン騒ぎのお祭り」の意。 以下の画像はフォントの一部です アイコンや装飾に使える！ 特に凝ったアイコンではなくてもよい場合はこちらをそのまま使えそうですし、ちょっと加工するだけでも面白いものが作れそうです。 どうしてこのフォントをおすのかというと、昔
YouTubeの埋め込み動画プレーヤーをJavaScriptで制御するYouTube JavaScript Player APIの使い方
サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、 Youtubeの埋め込みを使って表示する事があるかと思います。 この際にJavaScriptを使って制御ができるYouTube JavaScript Player APIというものがあり、設置をしたので そちらの実装方法のメモです。 これを使うと自分が作ったボタンで再生や停止が出来るようになります。（他にもいろいろ出来ると思います） SWFObjectを使って動画を読み込む 動画を埋め込む際は、動画の共有にある「埋め込みコード」でiframeかobjectのタグをサイト内に入れますが、 APIを使うときはFlashなどを表示する時によく使う「SWFObject」を使用します。このJSを使わなくてもできるそうですが、 このAPIがFlash Player8からしか対応してないので、この「SWFObject
FacebookのOGPを確認する・キャッシュをクリアする方法
ホームページにFacebookにシェアするボタンを設置しているページが増えてきました。 そこで表示する画像やタイトルを記述するOGPですが、こちら一回そのURLでアクセスするとキャッシュがFacebook側に残るようで、 修正しても早々には変わってくれないようです。 OGPはこういうのです。 <meta property="og:title" content="ページタイトル"> 確認の時に変わってくれないので困りものなのですが、こちらのfacebook developersのページで確認とキャッシュの削除ができることがわかりました。 URLリンター – Facebook開発者 こちらでOGPの入力内容の確認とキャッシュが削除できるので便利です。
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
canvasを使って地下鉄の路線図を描けるjQueryプラグインで東京の地下鉄の路線図を描いてみた
デモ 手元にあったFirefoxとChromeで表示の確認をしています。 東京の地下鉄の路線図を描いてみた 結構ごっちゃごちゃになってしまいました。それだけ入り組んでるという事で・・・駅はそれぞれWikipediaの各駅にリンクしています。 紹介サイト こちらのサイトで詳しく紹介されています。 canvasを使って地下鉄の路線図のようなグラフィックを描けるjQueryプラグイン・Subway Map Visualization 配布サイト JavaScript自体は以下のページからダウンロードできます。 Subway Map Visualization jQuery Plugin
スマートフォンサイトのデザイン集サイトのまとめ｜WEB Drawer -WEB制作に関するメモサイト-
最近普及しているスマートフォンですが、その専用のサイトを作っている所も多くなってきました。 WEB制作の会社でもスマートフォンサイトを制作する事が多くなってきたと思います。 スマートフォンは指で操作するのでパソコンとはまた違ったデザインになっています。 そこで、デザインをまとめているサイトをまとめてみました。 優れたiPhoneサイトデザイン集 – iPhoneデザインボックス 優れたiPhoneサイトデザイン集 – iPhoneデザインボックス 全iPhoneサイト一覧｜iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト 全iPhoneサイト一覧｜iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト スマートフォンサイト集めました。 スマートフォンサイト集めました。 iShowcase – 国内のiPhone / iPad最適化対応をしたサイトを
FirefoxでFlashが表示されないときの対処法
flashを使ったサイトをチェックをしていた時に、表示されない時がありました。 そこで検索してみたところ、情報がいろいろあったので主な原因をまとめてみました。 swfobject2.2とFirefox3.5の相性が悪い flashを貼付ける時に使う、「swfobject2.2」と「Firefox3.5」の相性が悪いとのことです。 簡単な解決法はswfobjectのバージョンを2.1にすることです。 Issue 327 – swfobject – swfobject 2.2 fails… SWFObject v2.1 アドオンのPearl Crescent Page Saver Basic2.5を削除する サイトのキャプチャを撮ってくれるアドオンの「Pearl Crescent Page Saver Basic」。 こちらのアドオン（バージョン2.5）が入っていると表示されない事があるそうで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
