サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
ingwer-design.com
写真家の方のサイトを作る際に画像をコピーできないようにしてもらえないか・・・と言われ、コピー禁止用のJavaScriptを書いてみました。HTMLがクライアント側で解釈されるので完全にコピー禁止にすることはできませんが、一手間かけないとコピーできないようになってます。 なるべく簡単に導入できるよう書いてみました。 コピー禁止用のjQueryプログラム サンプルページ 今回のプログラムでは以下の機能を実装しました。 文字や画像を選択させない 右クリックででてくるコンテキストメニューを表示しない Ctrl+A,Ctrl+Cによるコピーをさせない 画像には透明画像のカバーをつけて直接選択できないようにする 入力系パーツに影響がないようにしたり、ショートカットキーを使ったコピーをさせないようにしたり、いろいろ組み込んでみました。IE6とIE7で「display:inline-block」が効かない
JavaScriptで起きたエラーに対処するためには、エラーメッセージを表示させる必要があります。各ブラウザでどのように表示をされるのか紹介します。 目次 今回使用するソースコード FireFox でエラーメッセージを表示 FireBug でエラーメッセージを表示 Internet Explorer でエラーメッセージを表示 Safari でエラーメッセージを表示 Google Chrome でエラーメッセージを表示 今回使用するソースコード 今回は下記のソースコードを使用します。アラートに「Hello World !!」と表示させる、お勉強用でおなじみのソースコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi
XAMPPをインストールしただけでは日本語をうまく扱えないので、設定ファイルを変更しなければなりません。日本語対応の他にエラー表示等の設定についても変更していきます。 設定変更の手順 変更する設定ファイル 設定ファイルの編集 php.ini 保存時の注意 変更する設定ファイル PHPの設定ファイル「php.ini」を編集します。 「アプリケーション」>「XAMPP」>「xamppfiles」>「etc」フォルダ内に「php.ini」ファイルがあるので、テキストエディタで開いて編集します。 設定ファイルのバックアップ 設定ファイルを編集するときは、設定ファイルのバックアップを必ずとってから行いましょう。設定ファイルが壊れるとXAMPPを起動することができなくなってしまいます。 「php.ini」をコピーしてファイル名の後に日付をいれておき(例:「php_20110507.ini」)、不具合が
JavaScriptではイベント発生時に関数を実行させる場合、以下のように記述します。イベントに関数を代入しておき、イベント発生時に実行します。イベントに関数を設定する場合は関数名に()をつけませんね。 window.onload = 関数名; もし下記のソースコードのように関数名に()をつけてしまうとうまく動かないことがあります。それはなぜでしょう?この疑問を検証してみます。 window.onload = 関数名(); //うまく動かないことがある 関数名()と関数名の違い 以下のソースコード1を実行するとアラートが表示され、きちんと動きます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
トップページに記事タイトルをランダムに表示させてみることにしました。 使用するのは「RandomEntries1.0」プラグインです。 ランダム表示させる手順 RandomEntries1.0をインストール トップページにランダム表示用のソースコードを記述 絞り込んでランダム表示 サンプルテンプレートのインストール まずは「RandomEntries1.0」プラグインをダウンロードします。 https://github.com/rayners/movable-type-plugin-random-entries ダウンロードした圧縮ファイルを解凍し、MovableTypeの「plugins」フォルダにアップロードします。 トップページにランダム表示用のソースコードを記述 通常の記事タイトル表示方法 トップページにブログの記事タイトルを表示させる時は、トップページ用インデックステンプレートに
「SyntaxHighlighter を使ってみる(導入編)」に引き続き、今回はソースコードを記述する際の様々な使い方を試してみます。 まずは標準の記述法で書いたときの表示です。 <h4 class="id_title4">使用用途</h4> <p> 移動先のページやページ内の特定の場所を指定する<br /> HTMLだけでなく、画像や音声にリンクを指定することもできる </p> ソースコードのコピー 最初の行番号を変える 特定の行をハイライトする 他言語のソースコードとHTMLを同時に色分けする 行番号を表示させない ソースをコードを隠す ソースコードにタイトルをつける IE8でHTMLの要素が大文字になってしまうのを直す デザインテーマを変える 奇数行と偶数行で色分けする ソースコードのコピー 3系になってからFlashを使ったクリップボードへのコピーがなくなり、ソースコードをダブルク
「とにかくなんでもやってみる」の最初の記事は「SyntaxHighlighterを使ってみる(導入編)」です。 SyntaxHighlighterは行番号のついたソースコードを表示してくれるJavascriptライブラリで、言語ごとに見やすく色分け表示してくれる便利なライブラリです。 どんなことができるか ファイルのダウンロード ファイルをサーバに設置 SyntaxHighlighterのライブラリを読み込む ソースコードを記述する どんなことができるか まずはどんな風に表示されるのか見てみましょう。 最初に<pre>タグを使って通常のHTMLソースコード表示<h4 class="id_title4">使用用途</h4> <p> 移動先のページやページ内の特定の場所を指定する<br /> HTMLだけでなく、画像や音声にリンクを指定することもできる </p> 次はSyntaxHighlig
このページを最初にブックマークしてみませんか?
『INGWER DESIGN』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く