サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
raining.bear-life.com
セレクトボックスの値を変更した時に、選択した項目によって別のページに遷移（リンク）させたい場合があります。 Javascriptを使用すれば簡単にページ遷移させることが可能です。 JavaScriptのonChangeイベントを使用し、セレクトボックスの値を変更したら指定のリンク先に遷移するという処理を記述すればOKです。 JavaScriptでページ遷移する方法は「location.href」を使用します。 以前に「location.href」の説明を記述しました。下記に記載しています。 Javascript：locationオブジェクトでURL情報を取得する セレクトボックス optionタグのvalueの値を「location.href」にセットするようにします。 下記に例を記述します。 ■ セレクトボックス選択時にページ遷移 onChangeはフォームの入力・選択値が変更された時に
Linuxでディレクトリ（フォルダ）内にあるファイルの数がどのくらいあるのかを調べたい場合があります。 ディレクトリ内にあるファイルの数が少なければ「ls」コマンドで済むかもしれませんが、 大量にある場合は「ls」コマンドではファイル数を調べるのは大変です。 「find」コマンドと「wc」コマンドを使用すれば、大量にファイルがある場合でも 簡単にファイル数を取得することが可能です。 下記にLinuxでディレクトリ内にあるファイル数をカウントして表示する方法をメモします。 ■ ディレクトリ内にあるファイル数を表示 ファイル数を調べたいディレクトリを指定して、下記のように記述します。 パイプを使用して「wc -l」を指定します。 find /var/www/html/ -type f | wc -l 実行すると指定したディレクトリ内のファイル数を出力します。 サブディレクトリ内のファイル数もカ
CSS3の「border-radius」プロパティを使用すると画像や要素を角丸にして表示することができます。 今までは要素などを角丸にしたい場合、角丸の画像を作成して表示するなどしていました。 「border-radius」プロパティを使用すればCSSの記述だけでOKです。 また、指定した箇所のみに角丸を適用することも可能です。 下記にCSS3の「border-radius」プロパティを使用した時の方法をメモします。 ■ 「border-radius」の使用方法 【CSS】 .border_radius { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; } 【HTML】 要素に角丸を指定する場合 <div class="border_radius"> 表示する内容 </div> 画像に
PHPで開発している時にメモリ（memory_limit）の上限を変更したい場合があります。 memory_limitの値が低い場合、処理内容によっては「Fatal error」になってしまうことがあります。 その場合、php.iniで設定しているmemory_limitの値を大きくすればエラーを回避することが可能です。 下記にphp.iniのmemory_limitの値を変更し、メモリの上限を増加させた時の方法をメモします。 ■ php.iniのメモリ上限を変更 SSHでサーバにログインします。 ログイン後、php.iniを編集します。 vi /etc/php.ini 「memory_limit」で検索すると値が設定されています。 設定されている値を変更し、保存します。 memory_limit = 128M ↓メモリ上限を変更 ;memory_limit = 128M memory_l
WordPressでアイキャッチ画像を表示する場合のアイキャッチの存在確認と出力方法をメモします。 アイキャッチが設定されているかどうか調べる場合は「has_post_thumbnail()」関数を使用します。 また、「the_post_thumbnail()」関数でアイキャッチ画像を出力することができます。 下記にWordPressの「has_post_thumbnail()」「the_post_thumbnail()」の説明と記述方法を記載します。 ■ has_post_thumbnail() アイキャッチ画像が設定されているか確認します。 has_post_thumbnail() 記事を指定してアイキャッチ画像の確認を行う場合は 引数に記事IDを記述します。 has_post_thumbnail(記事ID) アイキャッチ画像が設定されている場合はtrue、 設定されていない場合はfa
WEBサイトを構築している時にトップページ以外のアクセスを拒否したい場合があります。 サイトの引越しやサイトの閉鎖などの時も必要になるかもしれません。 .htaccessを使用すれば、トップページ以外の下層ページにアクセスがあった場合、 トップページにリダイレクトさせることが可能です。 下記に.htaccessを使用し、下層ページのアクセスをトップページにリダイレクトさせる方法をメモします。 ■ トップページ以外のアクセスをリダイレクト ドキュメントルートに.htaccessを設置します。 下記の内容を.htaccessに記述します。 RewriteEngine on RewriteBase / RewriteCond %{REQUEST_URI} !(^/$) RewriteRule ^(.*)$ / [R=301,L] トップページのアクセスをリダイレクトさせない為に、 下記を記述して
シンボリックリンクの所有者や所有グループをchownコマンドで変更しようとしたのですが、何度実行しても所有者や所有グループを変更することができませんでした。 下記にその時のコマンドを記載します。 ※シンボリックリンク「img」の所有者や所有グループを「hoge」に変更する場合です。 # ls -la lrwxrwxrwx 1 root root 41 5月 15 20:26 img -> /var/www/html/hoge/img -rw-r--r-- 1 hoge hoge 1600 5月 15 17:25 index.php # chown hoge:hoge img # ls -la lrwxrwxrwx 1 root root 41 5月 15 20:26 img -> /var/www/html/hoge/img -rw-r--r-- 1 hoge hoge 1600 5月 1
CakePHPで$_GETの値を取得する方法を記載します。 CakePHPでは$this->params[‘url’]に格納され、$_POSTの値は$this->params[‘form’]に格納されます。 CakePHPではGETやPOSTの値はparams配列に格納されます。 ■ $_GETの値を取得する 下記のURLでアクセスした場合 http://raining.bear-life.com/?id=20&name=hoge 「id」の値を取得 $this->params['url']['id']; 「20」が取得できます。 「name」の値を取得 $this->params['url']['name']; 「hoge」が取得できます。 ※$this->params[‘url’]では$_POSTの値が取得できないので注意です。 ツイート
CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。 画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、 サイトに動きを出すことができるのでいいと思います。 下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に 拡大させて表示した時の方法をメモします。 ■ 「transform:scale()」の使用方法 ブロック要素を固定させて画像を拡大させた場合の方法です。 画像をマウスオーバーするとアニメーションで拡大します。 【CSS】 .scale { width: 400px; height: 300px; overflow: hidden; } .scale img { -moz-transition: -moz-transform 0.5s linear; -webk
WordPressのTOPページを表示する「index.php」と「home.php」の違いをメモします。 WordPressで作成したサイトをカスタマイズする場合、使用しているテーマのディレクトリを参照します。 テーマによっては「index.php」と「home.php」が存在する場合があります。 どちらもTOPページを表示するテンプレートですが、両方存在する場合は「home.php」が優先されます。 また、「front-page.php」がある場合は「home.php」よりも優先されて表示されます。 下記にそれぞれの違いを記載します。 ■ index.php index.phpはTOPページに使用するテンプレートで、絶対に必要なファイルになります。 他にもカテゴリーやタグの一覧ページなどにも使用されます。 （ファイルが存在しない場合に出力） ■ home.php home.phpはin
Javascriptのprint()メソッドを使用して、印刷ボタンを設置した時の方法をメモします。 データなどを出力する場合など、WEBページを印刷することがあります。 ブラウザのヘッダーにあるメニューからページを印刷してもいいのですが、 ページ内に印刷ボタンがあった方が効率が良い場合があります。 print()メソッドを使用すると、簡単に印刷ダイアログを呼び出してページを印刷することが可能です。 また、ボタンではなくリンクで設定することも可能です。 ■ print()を使用して印刷ボタンを設置 【HTML】 ・ボタンで設定する場合 <input type="button" value="印刷する" onclick="window.print();" /> ・リンクで設定する場合 <a href="#" onclick="window.print(); return false;">印刷す
スマホ（スマートフォン）ページで、一部のdiv要素にスクロールバーを表示させた時の方法をメモします。 利用規約など文章が長い場合、その要素にスクロールバーを表示して見せることがあると思います。 PCと同じようにコーディングしてスマホページを確認するとスクロールはできても、 スクロールバーは表示されませんでした。 しかし、CSSで「-webkit-overflow-scrolling:touch;」を記述するとスクロールバーを表示させることができます。 下記に「-webkit-overflow-scrolling:touch;」を使用した時の方法を記載します。 ■ スマホ div要素にスクロールバーを表示 【CSS】 スクロールバーを表示させる要素に 「overflow: scroll;」 「-webkit-overflow-scrolling: touch;」 を指定します。 <style
CSSの「CSShake」プラグインを使用してみました。 「CSShake」はクラスを指定した要素をぶるぶると振える効果を出すことができます。 「CSShake」 ライセンスはMITライセンスです。 使用方法はとても簡単で「CSShake」プラグインを読み込み、 シェイクさせたい要素にクラスを設定するだけです。 指定するのは要素でも画像でもOKです。 下記にCSSの「CSShake」プラグインを使用して、指定した要素をぶるぶると振えさせた時の方法をメモします。 ■ CSShakeの使用方法 下記URLより、「CSShake」プラグインをダウンロードします。 一番下にダウンロードのボタンがあります。 http://elrumordelaluz.github.io/csshake/ ダウンロードしたCSSを読み込み、ぶるぶる振えさせたい要素にクラスを設定します。 【読み込むファイル】 <lin
phpのforeachを使用してループ処理をしている際に、条件によってループを抜けたり（中断）、 スキップさせたい場合があります。 その場合は、breakとcontinueを使用すれば、処理を中断させたりスキップさせることができます。 他にもfor、while、do-while、switchでも使用可能です。 ■ ループ処理を抜ける（中断）「break」 breakを使用すれば、ループ処理を途中で終了させることができます。 foreach ($arr as $key => $value) { if (0 == strcmp($value, 'ccc')) { break; } echo $value . '<br>'; } 【出力結果】 aaa bbb 条件が一致した時に、ループを抜けます。 ■ ループ処理をスキップ「continue」 continueを使用すれば、ループ処理をスキ
jQueryのeachメソッドを使用して配列をループする方法をメモします。 前回、Javascriptで配列をループする方法を記載しました。 Javascript：Javascriptで配列をループする「for」 eachメソッドは繰り返し処理を行う時に使用するjQueryの関数です。 配列以外にもオブジェクトも繰り返し処理を行うことが可能です。 下記にjQueryのeachメソッドで配列をループし、配列の値を出力した時の方法をメモします。 ■ jQueryで配列をループ 配列を「$.each」にセットします。 コールバック関数の「function(i, value)」に値が格納されます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
HTMLで入力フォームを作成する場合、inputタグに「type=”text”」や「type=”password”」など 入力項目にあったtype属性を指定して作成します。 スマホ（スマートフォン）やタブレットでフォームの入力を行う際に 入力キーボードの切り替えなど、意外と大変な場合があります。 HTML5で追加されたinputタグのtype属性を使用すると type属性によって入力モードを自動的に切り替えることができます。 数字のみ入力を行う場合などは数字入力用のキーボードが表示された方が、 ユーザーにとって使いやすいものになります。 下記にinputタグのtype属性を変更して、スマホやタブレットでのフォームの入力モードを切り替えた時のメモを記載します。 ■ スマホ入力モード切り替え ※画像はiPhoneで撮影しています。 【type=”text”】 <input type="text
WordPressをインストールして、ログイン画面を表示するとWordPressのロゴマークが表示されます。 このWordPressのロゴをオリジナルの画像に変更する時の方法をメモします。 また、ロゴに設定されているリンク先やtitle属性を変更する方法も記載します。 お客様に管理画面の情報を渡す場合など、WordPressのロゴではなく独自のロゴを設定したい時に活用できます。 ■ WordPressログイン画面のロゴを変更 ロゴに使用する画像を用意し、テーマディレクトリ内に設置します。 使用しているテーマの「functions.php」に下記のコードを記述します。 function login_logo_image() { echo '<style type="text/css"> #login h1 a { background: url(' . get_bloginfo('templ
PCサイトを構築時にスマホでページを閲覧すると一部の文字サイズが 大きく拡大されて表示されることがありました。 iPhoneやAndroidなどでは文字が見やすいように文字サイズを自動調整して、 大きく表示してしまうようです。 しかし、文字が拡大してしまうとPCサイト用に構築したデザインが 崩れてしまったりすることがあります。 文字サイズを勝手に拡大されないようにするには CSSの「-webkit-text-size-adjust」プロパティを指定すると回避できます。 下記にCSSの「-webkit-text-size-adjust」プロパティを使用して、 スマホ・PCサイトの文字サイズを自動調整して拡大表示させずに 固定して表示する方法をメモします。 ■ 「-webkit-text-size-adjust」 テキストの文字サイズを調整するプロパティです。 デフォルトは「auto」なので文
WEBサイトで存在しないページにアクセスすると英語の画面が表示される場合があります。 これは、存在しないページにアクセスした時に表示されるエラーページ（404ページ）です。 リンク切れをしていたり、URLを間違えて入力した場合などに表示されます。 上記のような英語の画面だとユーザが何のページかわからず、戸惑ってしまう可能性があります。 また、サイトから離脱してしまう可能性も出てきます。 なので、独自の404ページを用意し、ページが存在しないことをユーザに伝えることが非常に大切だと思います。 下記に.htaccessを使用し、存在しないページにアクセスした際に独自の404ページにリダイレクトする方法をメモします。 ■ .htaccessで404ページにリダイレクト まず独自のカスタム404ページを作成します。 404.html .htaccessに下記のコードを記述します。 ErrorDoc
WordPressを使用していて、サーバを移行する時などデータベースを変更する場合があります。 設定ファイルのデータベース情報（データベース名、ユーザー名、パスワード、ホスト名）を変更するだけで簡単にデータベースを切り替えることができます。 下記にWordPressのデータベースを変更した際の方法をメモします。 ■ WordPressのデータベースを変更する WordPressでデータベースを変更する場合は下記のファイルを修正します。 wp-config.php 「wp-config.php」はデータベースの設定やWordPressの環境を設定するファイルです。 「wp-config.php」をエディターで開き、下記のデータベース情報を変更します。 // ** MySQL 設定 - こちらの情報はホスティング先から入手してください。 ** // /** WordPress のためのデータベ
jQueryで画像のスライドショーを実装できるプラグインは色々ありますが、 今回「FlexSlider 2」を使用してみたので、設定方法をメモします。 「FlexSlider 2」 スライドショーさせる画像を用意し、jQueryで指定すれば 簡単に画像のスライドショーを実現することができます 下記にjQueryのプラグイン「FlexSlider 2」を使用して、 複数の画像をスライドショーさせた時の方法をメモします。 ■ 「FlexSlider 2」を使用したスライドショーの使用方法 ※下記、基本的な設定方法です。 下記URLより、「FlexSlider 2」をダウンロードします。 http://flexslider.woothemes.com/ 【読み込むファイル】 jQueryと各ファイルを読み込みます。 <link rel="stylesheet" type="text/css" h
Thunderbirdにアカウントを複数設定した時に、アカウントの順番を変更したい場合があります。 主に使用するメールアドレスを一番上に持ってきたいですよね。 Thunderbirdでアカウントの表示順を変更したい場合は「Manually sort folders」アドオンを使用すれば簡単に並べ替えすることができます。 Thunderbirdのアドオン「Manually sort folders」を使用してアカウントの表示順を変更する使用方法・設定方法をメモします。 ■ Manually sort folders 1.1 メールアカウントの表示順を並び替えることができる拡張機能です。 また、フォルダの表示順も並び替えることができます。 https://addons.mozilla.org/ja/thunderbird/addon/manually-sort-folders/ ■ 使用方法・
画像をマウスオーバーした時に、画像の一部をズームして拡大表示することができる jQueryのプラグイン「elevatezoom.js」をご紹介します。 「elevatezoom.js」 マウスオーバーした時に画像を拡大させて見せることができるので、 ショップなどの商品画像を見せる際などに利用できると思います。 下記にjQueryのプラグイン「elevatezoom.js」を使用して、画像の一部をズームさせて拡大表示したときの方法をメモします。 ■ 「elevatezoom.js」の設置方法 下記URLより、ダウンロードします。 http://www.elevateweb.co.uk/image-zoom ダウンロードした「jquery.elevatezoom.js」を読み込みます。 【共通で読み込むファイル】 <script src="http://ajax.googleapis.com/
テキストにマウスを置いた時のマウスカーソルは通常下記のような表示になります。 リンクにマウスを置いた時のように、マウスカーソルを指マークにしたい時があります。 テキストにマウスを置いた時にマウスカーソルを指マークで表示する場合は、下記のように設定します。 ■ CSSでマウスカーソルを指マークに設定 設定する箇所に下記のスタイルを追加します。 【CSS】 cursor: pointer; cursor: hand; ※IE6に対応させる為、「cursor: hand;」も記述します。 【HTML】 <span style="cursor: hand; cursor:pointer;">テキスト</span> 【設定例】
CSSの「transform:rotate()」を使用するとテキストや画像、指定した要素を 回転させて表示することができます。 transform: rotate(10deg); rotate()には回転する角度を指定します。 下記のように「-」マイナスで指定することも可能です。 その場合は逆方向に回転して表示されます。 transform: rotate(-10deg); 要素を回転させて文字や画像を傾けて表示させたい場合などに利用できそうです。 下記にCSSの「transform:rotate()」を使用して、要素を回転させて表示した時の方法を記載します。 ■ 「transform:rotate()」の使用方法 【CSS】 <style type="text/css"> div#rotate { -moz-transform: rotate(-20deg); -webkit-trans
WordPressを使用して情報等を更新できるサイトやブログを構築した際に、 管理画面のメニューで使わないものや変更されると困るというメニューがあります。 お客様に管理画面の情報を渡す場合などは特にそう思います。 そのような場合は、使わない（変更しない）メニューを非表示にしてしまうのがいいと思います。 ユーザーの権限（レベル）によって、使用できる項目を絞ることができますが、 独自で使用できるメニューを決めたい場合があります。 下記にWordPressで管理画面の使わないメニューを非表示した時の方法を記載します。 色々なサイトで記載されていますが、メモ用に記事にします。 ■ 管理画面の使わないメニューを非表示にする 使用しているテーマの「functions.php」を編集します。 「functions.php」に下記のコードを追加します。 // 使用しないメニューを非表示にする functi
Javascriptでsubmitボタン押下時にPOSTされるデータを追加したい場合があります。 フォーム内に複数のボタンを設置した際に押されたボタンによってPOSTするデータを追加したい場合あったので、その時のメモです。 ■ Javascript function funcBtn() { // エレメントを作成 var ele = document.createElement('input'); // データを設定 ele.setAttribute('type', 'hidden'); ele.setAttribute('name', 'hoge'); ele.setAttribute('value', 'テスト'); // 要素を追加 document.myForm.appendChild(ele); } ■ HTML <form method="post" id="myForm" n
次のページ
このページを最初にブックマークしてみませんか？
『raining | 日常で感じたこと、覚えたことの記録』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
