更新するのが面倒！サイトの共通部分を簡単に作る様々な方法
サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。 がんばって直に書いてるものを置換する Dreamweaverのテンプレート機能を使う JavaScriptを使う PHPを使う SSIを使う Node.jsやRubyのツールを使う がんばって直に書いてるものを置換する とりあえず普通にコーディングして、修正などある場合はソフトの一斉置換を使ってなんとかする方法です。 数ページものならあまり気にならないがページが増えていく毎に大変になる。リンクや画像が相対パス指定だと階層が増えると更に大変になります。 <footer>
サイトで右クリックしたら他のサイトへ飛ばすjQuery
こんにちは、かしゅうです。 右クリック禁止！というサイトがありますが、もういっそ右クリック禁止の約束を破ったら帰ってもらったらいいんじゃないかと思って、右クリックしてしまったら別のサイトに飛んでもらうjQueryを作ってみました。 デモページ デモページは以下から。右クリックすると別ページの飛ぶので注意。 右クリックしたら他のサイトへ飛ばすのデモページ JavaScript デフォルトだと、みんな大好きyahoo.jpに飛びます。optionのurlを指定し、飛ばしたいサイトのurlを入れておけばそちらのサイトに飛ぶようになります。 (function($){ $.fn.rightClickEscape = function(options){ var defaults = { url : 'http://www.yahoo.jp/' }; var setting = $.extend(d
今更だけどやるgrunt入門編・インストールから基本的な使い方
JavaScriptやCSSの結合や圧縮などいろいろな事を自動で処理してくれるGruntですが、もう話題になってずいぶん立ちますが今更ながら入れてみましたのでその方法です。 前にGruntの話題で盛り上がった時に試してみたのですがどうしても動かず原因もわからずで止まっていたのですが、情報も増えてきたので再チャレンジでした。 結果的に原因もわかったのでGruntの入れ方と基本的な使い方を書いておこうと思います。 node.jsのインストール Gruntを使うためにはnode.jsが必要になりますので、以下のサイトからnode.jsをダウンロードします。 node.js ダウンロードしたものを実行します。 これでnode.jsがインストールできたはずです。 コマンドを起動 次にコマンドを起動します。「管理者として実行」をクリックします。 まずはnode.jsが入ったか確認してみましょう。以下の
Pinterest風のデザイン 「jQuery Masonry」を試してみた
Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。 これを実装してくれるJavaScriptプラグインのひとつが「jQuery Masonry」なのですが、どういうものか使って試してみました。 基本的には公式サイトに載ってることを自分なりにまとめた内容となっております。 ダウンロードはこちらから JSなどの必要なファイルは以下からダウンロードします。 jQuery Masonry 設置の仕方 設置も特に難しいことはなくJavaScript読み込んでCSSで調整する感じです。 サンプルは以下から サンプルサイト JavaScriptの記述例 <script type="text/javascript" src="https://ajax.googleapis.com/ajax
レスポンシブデザインにするための基本的な方法｜WEB Drawer
スマートフォンの普及で出てきた「レスポンシブ・ウェブデザイン」。 今回は「レスポンシブ・ウェブデザイン」にするための基本的な方法を見て行きたいと思います。 使い方 記述方法は以下になります。 外部ファイル読み込む時の記述法 <link href="css/mini.css" rel="stylesheet" media="only screen and (幅の指定)" > @importでの方法 @import url("mini.css") screen and (幅の指定) インラインの記述法 @media screen and (幅の指定) { ～ここに記述～ } 個人的には同じファイルで見れたほうが嬉しいので、インラインを使っています。自分が管理しやすい方でよいかと思います。 幅の指定 上記のコードの「幅の指定」部分に適用したい幅を入れてスタイルを調整していきます。 この「幅の指定
要素を変化させる、CSS3「transform」のおさらい
今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。 指定後の画像を見てもいまいちどのような変化があるかわかりづらいと思うので、前回の記事CSSアニメーションの初歩をおさらいで紹介した、animationを使って 変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています。 また、このプロパティは3Dの指定もありますが、今回は平面の2D指定のみだけにします。 rorate 要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 transform: rotateX(); transform: rotateY(); transform: rotate();（角度の変更） #img01 img { animation: animat
CSSアニメーションの初歩をおさらい
最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま
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プラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
FacebookのOGPを確認する・キャッシュをクリアする方法
ホームページにFacebookにシェアするボタンを設置しているページが増えてきました。 そこで表示する画像やタイトルを記述するOGPですが、こちら一回そのURLでアクセスするとキャッシュがFacebook側に残るようで、 修正しても早々には変わってくれないようです。 OGPはこういうのです。 <meta property="og:title" content="ページタイトル"> 確認の時に変わってくれないので困りものなのですが、こちらのfacebook developersのページで確認とキャッシュの削除ができることがわかりました。 URLリンター – Facebook開発者 こちらでOGPの入力内容の確認とキャッシュが削除できるので便利です。
Dreamweaverの便利なコマンドや拡張機能のまとめ
コーディングをするときに自分が主に使ってるのがDreamweaverです。そのままでもいろいろ機能があって便利ですが、コマンドや拡張機能を入れることによってさらに便利に使うことができます。 そこでDreamweaverのコマンドや拡張機能で見つけたものをまとめてみました。他にもこんな便利なものがあるよなど教えてもらえるとうれしいです。 使い方は、コマンドの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Program Files\Adobe\Dreamweaver CS5.5\ja_JP\Configuration\Commands Mac → ライブラリ\Application Support\Adobe\DreamweaverCS5\ja_jp\Configuration\Commands 拡張機能はダウンロード
Dwでコーディングがちょこっと早くなる小技
コーディングを早くすると言えば超速コーディングとして話題になった「Zen-Coding」がありますが、記述方法を覚えなければいけないのもあって及び腰な人も多いのではないでしょうか（私です）。 私はコーディングする際は先にテキストをコピーしてもってきてからタグで囲むので、このような使い方をしてるとあまりZen-Codingは使わないのかなと思います。【追記】調べたら囲んだあとにもできました。Wrap with Abbreviationを選択し、ウインドウが出てくるのでそこにzen-codingの記述をすればいいです。ご指摘ありがとうございました。 覚えてしまえば早くなりそうですが、そこまでなーと思う人がちょこっとスピードアップできることをよく使っているDreamweaverの機能をご紹介します。 特に新しい事ではなく元から付いてる便利な機能のご紹介です。 スニペットを使う よく使うコードを登
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneだけでWordPressブログを更新する環境を試した結果こうなった