サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
memocarilog.info
<?php the_post_thumbnail(); ?>タグでアイキャッチ画像を表示すると以下のような形で img タグがHTMLに出力されます。 この img タグ内の width/height 指定やクラス名を任意のものへ変更したり、削除する方法のメモです。 img タグ内のサイズ指定を変更する the_post_thumbnail() に以下のように array( 橫, 縦 ) に表示したいサイズを渡します。 <?php the_post_thumbnail( array(200, 200) ); ?> これで以下のように img タグが変更されます。 独自のクラスを付ける the_post_thumbnail() タグの第二引数に以下のように任意のクラス(myClass の部分)を入れます。 <?php the_post_thumbnail( 'thumbnail', arra
カスタムメニューでメニュー部分を画像で表示したい場合、CSS で画像を置き換えることもできますが、直接置くことができないかやってみた所なんとか自分のやりたい要件を満たし画像の表示ができたので、その方法をまとめました。(子メニューは1階層のみ対応です。) 2種類の方法を作りましたが、子メニューの表示がなかなか上手く行きませんでした…。1つ目は子メニュー部分は入れ子にせず、子メニューリスト要素へ child というクラスを振るという方法です。2つ目の方法は子メニュー部分は ul 要素で入れ子になりますが、子メニュー要素のまとまりが1つだけでないとエラーになってしまうのでご注意下さい。 1. メニュー画像を表示するコード(子メニューにはクラス付けをする) このコードでは、HTML で表示する画像の名前が 「menu_item1.png」などになります。数字の部分は管理画面で設定したメニューの順番
Modified 2014-11-22 更新情報 Twitter にていろいろ教えて頂いたので、今後の対策として「追記」しました。 先日 WordPress で運営しているサイトが改ざんの被害にあってしまいました…。どのような改ざん被害だったのかと今回行った対処・対策方法などについてまとめました。 今回あった改ざんは一見して分からないように改ざんされていたため、他にも気づかないうちに被害にあっている WordPress サイトがあるかもしれません…。 どのような改ざんだったのか 一見通常通り表示されているのですが、ソースコードをみると以下の画像のようなコードが投稿記事内に書き込まれていました。(クリックで大きい画像をみることができます。)海外のiPhoneアプリの販売サイトなどへのリンクですが、CSS で画面には表示されないように設定されています。 実は以前もサイト改ざんの被害にあったこと
WordPress の管理画面に独自の CSS や JavaScript を適用させる方法のメモです。管理画面全てのページで読み込む場合と、投稿画面のみなど場所を限定して読み込む場合でコードをまとめてみました。 管理画面全てのページで独自の CSS・JavaScript を読み込む head 内に CSS・JavaScript コードを直接書き込む functions.php へ以下のように記入します。 CSS コードを書き込む function my_admin_style() { echo '<style> 〜適用したいスタイルを記入〜 </style>'.PHP_EOL; } add_action('admin_print_styles', 'my_admin_style'); JavaScript コードを書き込む function my_admin_script() { echo
Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo|memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ
要素の背景のみを透過したい場合は background-color に rgba() で背景色と透明度を指定しますが、いつものことながら IE8 は rgba() の色指定に対応していません…。そこで、IE8 にも対応したクロスブラウザで背景色の透明度を指定する方法をご紹介します。 IE8でも背景のみを透過するサンプルとそのコード 背景に透明度0.4の黒を指定したdivと、全く透明でない黒背景のdivを比較の為におきました。上の div は IE でも背景のみ透過されて表示されます。(CodePen のインラインフレームだと IE8 では正常に表示されないようです…) See the Pen ie8でも背景を透明にする by Saomocari (@Saomocari) on CodePen. このサンプルでは、背景を透明にしたい要素に対し以下のように指定しています。 div{ filte
Modified 2014-1-12 更新情報 連続クリック時の不具合解消のため、jQuery コードを一部書き直しました&キャプションを表示する方法を追記しました。 サムネイル画像をクリックすると、メインの大きい画像が入れ替わる定番のギャラリーを jQuery を使って作る方法です。現在メイン表示されている画像のサムネイルへのカレント機能と、レスポンシブ表示にも対応しています。 IE8+ / iOS8 / Android4.3 / その他のブラウザで動作確認済みです。最低限のシンプルなコードなのでカスタマイズもしやすいと思います。 サンプルデモ ◆ レスポンシブギャラリーデモ|memocarilog 横幅が狭くなった場合のサムネイル画像は、設定した min-width まで小さくなり、並びきらない場合は以下のように2段になって表示します。 HTML コード 画像をサムネイルサイズの画像と
新規投稿時のカテゴリー選択を、チェックボックスからラジオボタンへ jQuery で変更するカスタマイズに、「よく使うもの」カテゴリーに選択されているものの、一番最初に表示されるカテゴリーにチェックを入れておくという機能をつける方法です。 デフォルトのカテゴリー選択は以下のようにチェックボックスになっていて、複数選択が可能です。 functions.php へコードを追加する 以下のコードを functions.php へ追加します。 function my_print_footer_scripts() { echo "<script type='text/javascript'> jQuery(document).ready(function($){ var checkLists = $('#categorychecklist').find('li'); var cnt = 0; chec
スクロールするとふわっとフェードインしてくるページトップへ戻るボタンは今や定番ですね。前回に引き続き jQuery などのライブラリーを使わずに、JavaScript と CSS のみでページトップへ戻るボタンを作ってみました。今回のアニメーションは CSS3 は使わず JavaScript のみで実装しました。 IE7+、Andoroid 3.2+、その他のブラウザでも動作確認できました。 サンプルデモ スクロールでふわっと出現しクリックするとページトップへスムーススクロールで戻るボタンのサンプルデモです。 ページトップへ戻るボタンサンプルデモ|memocarilog-demo HTML コード HTML は通常のリンクボタンのように作り親要素に ID名 “pagetop”とつけ、HTML 内の適当な場所へおきます。 <div id="pagetop"> <a href="#">↑Pag
ビジュアルエディタからテーブルのセル(td要素)の背景色を変更するのに Editor Extender プラグインを使っていましたが、プラグインの開発が止まっているようで、現在のWPでは使えなくなっていました…。どうしてもビジュアルエディタから簡単に、td要素の背景色変更をしたかったためオリジナルボタンをエディタに追加しました。その方法のメモです。 WordPress のエディタは TinyMCE という外部のエディターが使われている為、エディタ部分をカスタマイズするには TinyMCE のプラグインを作る必要があります。TinyMCE のプラグインファイルを作り、そのプラグインを WordPress で読み込むという感じです。 この記事では「カーソルがあたっている要素の背景色を変更するボタンを作る」を例として説明しています。※ここでご紹介している方法は、WordPress 3.9.1 で
Modified 2014-09-20 更新情報 setTimeout を使ってフェードイン・アウトするコードを旧IEでも動くコードへ書き直しました。 jQuery を使わずに、CSS3・requestAnimationFrame メソッド・setTimeout 関数で fadeIn / fadeOut のアニメーション表現を行うということをやってみました。jQuery を使えば fadeIn()、fadeOut() だけの記述で済むことですが、いざそれを使わずにとなると大変だなという印象です…。 各サンプルは、マウスオーバー時にフェードアウト・マウスアウト時にフェードインします。 HTML は共通で以下のようになっています。 <div id="box">FadeIn/Out</div> CSS3 でフェードイン・アウトする opacity の変化を transition プロパティでアニ
scroll や resize イベント時は、そのイベント発生中ずっと何らかの処理が行われます。特にモバイル端末の場合、処理によってはブラウザへの負担が心配です。jQuery throttle/debounce プラグインを使用するとイベント中の処理回数を減らすことができます。jQuery throttle/debounce プラグインの使い方などをまとめました。 なにをしてくれるのか throttle/debounce プラグインではイベント中の処理を、「イベント発生中に随時実行」ではなく「イベント発生中、指定した秒数毎に実行」(throttle)又は、「イベントが終了してから、指定秒数後に実行」(debounce)というタイミングに変更することができます。 「サンプル」も作りました。 参考とダウンロード 以下ページで使い方などの説明があります。「Download」よりプラグインを入手で
このブログ(WordPress)では、プラグインと自作のjQueryコードを wp_enqueue_script 関数を使って head内へ出力していましたが、表示速度を上げる為にJSファイルをページ下で読み込むように変更してみました。 wp_enqueue_script 関数で読み込んだファイルは、デフォルトでは HTMLファイルの head内に出力しますが、簡単に footer(body終了タグ直前)への出力へ変更することができます。 wp_enqueue_script 関数とは WordPress は WordPress本体に jQuery や prototype 等のライブラリが入っている為、自分でわざわざ jQuery本体を用意しなくてもよいようになっています。 この wp_enqueue_script関数を使って jQueryプラグイン等を読み込むと、jQuery本体等必要なラ
WordPress のブルートフォースアタックは以前から問題になっており、管理しているサイトでもユーザー名とパスワードを工夫するなどの対策をしていました。 しかし、ロリポップサーバーの WordPress で度々「WordPressへの攻撃に対する検知・防御機能」によるログインページへの全アクセス制限が自動的に行われ、少し困っていました…。 とてもありがたい機能ですが、実際の使用者もログインページに突然アクセスできなくなるのと、その頻度が高く週に一回くらい起こっていた為、その度に .htaccess ファイルを編集しなくてはいけないのでちょっと面倒です。 そこで、wp-login.php への海外IPアドレスからのアクセス制限を行ったところ効果てきめんでした。最初からやっておけばよかったと思います。その設定方法のメモです。 .htaccess ファイルの設定 1. 国内のIPのアクセスのみ
GitHub に入門してみましたが、Git とかコマンドラインとかわからなくて、アプリを使ってなんとかファイルを上げることができたのでその手順です。GitHub for Mac を使えばターミナルを使わなくても GitHub を利用することができます。 公式ヘルプページ「GitHub Help」もあります。Git とか分かる方は英語がわからなくても、ヘルプに従って行けば全然できそうですね。 初回設定 まずは、GitHub のアカウントの作成です。GitHub のトップページ「Sign up for GitHub」からアカウントを作る事ができます。 そして、GitHub for Mac アプリをダウンロード&インストールします。 ダウンロードした GitHub for Mac をインストールし立ち上げ、ユーザー名とパスワードを入れてログイン完了です。 新しくリポジトリを作る 新しくリポジトリ
カスタムメニューを使うとオリジナルのメニューを管理画面で簡単に作れて便利ですが、カスタムメニューで生成されるコードは余計な div や id、class が入ってしまいます。この余分な部分を削除して、カレントクラス表示の機能は残す方法です。 カスタムメニューをデフォルトのまま表示したコードは以下のようになっています。 これをスッキリ必要なものだけにしていきます。具体的には、ul 要素を囲っている div 要素を削除し、ul と li 要素に付与されているID、クラスを削除します。 ただ、現在開いているページメニューに付けられる current-menu-item クラスは便利なので、それと同じように表示中ページの li には current のクラスを付けるようにします。 メニューを囲っている div要素と、ul要素に付与されているID・クラスを削除する カスタムメニューは表示したいテンプ
JavaScript のメソッド window.matchMedia を使用すると、CSS3 の MediaQuery のようにウィンドウサイズで JavaScript のコードを分けて使用する事が可能です。window.matchMedia の使い方・対応ブラウザなどのメモです。 window.matchMedia は MediaQueryList オブジェクト(MediaQueryList – Web API インターフェイス | MDN)を返すメソッドです。 サンプルデモまでのリンク→ウィンドウサイズによってテキストの内容を変更するサンプルデモ 使い方 matches でウィンドウサイズとマッチするかを簡単に調べる matches プロパティを使うと、指定したウィンドウサイズとマッチしたら true マッチしなければ false を返してくれます。ウィンドウサイズの指定の仕方は CS
やはりターミナルから GitHub を使ったりしてみたいなと思い、丁度よい機会なので GIt の勉強を始めました。Mac には最初から Git が入っていますが、最新のバージョンではないことがほとんどだと思います。そんな時は最新のバージョンを別途インストールする必要があります。 Mac に入っている Git のバージョンを確認 Git のバージョンを確認するにはターミナルで以下のコマンドを入力します。 git --version 私のMacでは git version 1.8.5.2(Apple Git-48) とでました。Gitのサイトを確認すると、現在は 1.9.2 が最新ですので少し古かったです。 インストールする方法 Git のページからインストーラーをダウンロードしてインストールする方法か、Homebrew をインストールして Homebrew から Git をインストールすると
Classie.js という JavaScript のライブラリを見つけました。Classie.js を使うと指定した要素のクラスのチェック・追加・削除を簡単に行う事ができます。jQuery を使うまでもないけれど…という時に便利です。 ダウンロード ライセンスは MIT です。 desandro/classie · GitHub 使い方 ダウンロードした Classie.js を読み込こんでまずは使う準備が完了です。 <script src="classie.js"></script> クラスを持っているかをチェックする クラスを持っていたら true 持っていなかったら false を返します。 classie.has( element, 'my-class' ) 例)#element が .red を持っていたらアラートを出す。 <script src="classie.js"></
他の方が書いたコードなどをみていると、意味が分かりそうで分からない JavaScript の書き方にしばしば遭遇します。そういった、本などではあまり紹介されていないけど実際のコードでは使われていたりする短縮された書き方のメモです。 条件分岐に関するもの 三項演算子で書く 書式 (条件式) ? 条件に当てはまる時の処理 : 当てはまらない時の処理 ; 例)変数 num の数値が5以上の場合は true 、それ以外なら false を変数 val へ代入 val = (num > 5)? true : false; 略さない書き方 if(num > 5){ val = true; } else { val = false; } if 文の true の場合だけ処理を書く 書式 if(条件式) 条件に当てはまる時の処理 ; 例)変数の数値が5以上の場合は false を返す。 if(val >
プラグインを使わずにビジュアルエディタへボタンを追加・削除したり、オリジナルの並びにしたりする方法です。フィルターフックを使って簡単にできました。 使用するフィルターフック デフォルトでは1段目と2段にボタンが配置されていますが、3段目と4段目にもボタンを配置することができるようです。カスタマイズしたい列により、フィルターフックがそれぞれ用意されています。 // 1段目をカスタマイズするフック add_filter( 'mce_buttons', '〜' ); // 2段目をカスタマイズするフック add_filter( 'mce_buttons_2', '〜' ); // 3段目をカスタマイズするフック add_filter( 'mce_buttons_3', '〜' ); // 4段目をカスタマイズするフック add_filter( 'mce_buttons_4', '〜' ); デフ
最新の Git を入れる為に Homebrew を初めてインストールしました。しかし、brew doctor を実行してみたらエラーが表示され意味がわからず長い時間はまってしまいました…。 エラー内容 Homebrew のインストール完了時に以下のように brew doctor するように言われました。 ==> Installation successful! You should run `brew doctor' *before* you install anything. Now type: brew help brew doctor をコマンドに打ち込んでみます。 brew doctor 以下のようなエラーが表示されてしまいました…。 Warning: /usr/bin occurs before /usr/local/bin This means that system-prov
jQueryを使ったウィンドウサイズに応じてロゴなどの画像を出し分ける方法です。部分的にお手軽レスポンシブデザインができます。 「サンプル」も作りました。 HTMLのコード レスポンシブに出し分けたい画像の親要素にid又はclassを振ります。htmlにはモバイル用の画像を置きます。(※モバイルでのアクセス時、最初にPC用画像を読み込むとモバイル画像へ切り替えるのに時間がかかるため、最初HTMLではモバイル画像を読み込むようにコードを変更しました。) <div id="example"> <img src="mobile.png" alt="mobile"> </div> jQueryのコード head 内にjQueryの読み込みとコードを以下のように記入します。 var swichWidth に切り替えたいウィンドウのサイズを記入します。 var defaultImg はPCサイズ用の画
基本的な動きは以前と同じくカーソルの動きに合わせて画像がグルグル動くというものですが、プラグイン化するにあたって、背景画像を動かしたり、逆方向に動かしたりできるオプションを作りました。 動作確認ブラウザ IE7+、GoogleChrome、Firefox、Opera サンプルデモ サンプル1 画像を動かすサンプルデモ 並べた画像がカーソルに合わせて動きます。デフォルトの動きです。 jQuery.Simples3D.js Sampledemo | Example1 サンプル2 背景画像を動かすサンプルデモ 背景画像に設定した画像がカーソルの動きとは逆方向へ動きます。 jQuery.Simples3D.js Sampledemo | Example2 bgImage:true ダウンロード 以下よりダウンロードできます。 github.com/SaoriMiyazaki/jQuery.Simp
いつの間にか WordPress 本体の jQuery を読み込んだら自動的に jQuery Migrate プラグインも一緒に読み込むようになっていました。jQuery Migrate プラグインのみを外す場面はあまりないかもしれませんが、せっかくプラグインのみ外す方法を調べたのでメモです。 jQuery Migrate プラグインとは jQuery はバージョン 1.9 がリリースされた時に、機能が重複したAPIなどが廃止されたり、挙動が変更されたりしました。jQuery Migrate プラグイン(jquery/jquery-migrate · GitHub)はその廃止になった機能を補うことができるプラグインです。 jQuery Migrate プラグインを入れると、1.9 以上のjQueryで廃止されたAPIを使ったコードが動くようになります。(WordPress 3.8.1 に入
最近JavaScriptの読み込みや実行の記述を、ページ最後の body 終了タグ直前で行っている場合をよくみかける気がしたので、理由を調べてみました。個人的になるほどと思ったことや誤解していた事があり、常識的なところなのかもしれないですがまとめてみました。 1. Webページの表示速度を早くする この理由は一番分かりやすく重要なところだと思います。javascriptを読み込んでいる間は、HTMLファイルの読み込みが止まってしまう為、HTMLファイルをほぼ全部読み込んで表示された後javascriptを読み込む方が表示速度が早くなります。 以下の参考サイトがとてもわかりやすいです。 2. 並列ダウンロードの妨げになってしまう これは1.の「表示速度を早くする為」の1つを掘り下げた感じになるかもしれませんが、ブラウザ側では表示速度を上げるために、サーバーから画像等をダウンロードする際には1
いろいろコードを覗いてみましたが、jQuery.Smart3D のコードが私にはわかりやすかったので計算式などだいぶ参考にさせて頂きました。 mousemoveイベントについて mousemoveイベントはマウスが要素上を動いた時に発生し、mousemoveイベントの引数からイベントに関するさまざまな情報を受取ることができます。マウスカーソルの位置もここで取得することができます。 作ったサンプルデモ Simple3Dmove_Sample|memocarilog-demo 作ったサンプルは以下のアドレスからダウンロードできます。 ◆ Simple3Dmove_Sampleをダウンロード カーソルの動きに合わせて動くパララックスを作るコード HTMLのコード HTMLは下のようにul要素で囲い、画像をli要素でマークアップします。 <ul id="sample"> <li><img src=
YouTubeの埋め込み動画の見た目や再生方法など、思っていた以上にいろいろカスタマイズができることを知ったのでメモとしてまとめました。外観に関することと再生に関することで分けてあります。 パラメータを設定した場合のデモを確認できるページを発見しました。 YouTube Player Demo – YouTube — Google Developers 右側でパラメータを設定して、動画下の青いボタン「Update player with selected options」をクリックすると動画が設定したパラメータに変更されます。 外観を変更するカスタマイズ デフォルトで埋め込みコードを取得すると以下のような形になっているかと思います。 <iframe width="420" height="315" src="//www.youtube.com/embed/ 動画ID" frameborde
私は普段iPod touchを愛用しているのですが、先日iPod touchの電源がまったく入らなくなってしまって困ってしまいました・・・その時の対処法のメモです。 iPod touchからメールを送ってスリープにして、数分後スリープ解除しようとしたら全然反応しなくなってしまいました。 再起動しようと思いスリープボタンをながおしして見ましたが反応なく、充電してみても反応なく、PCに接続してみましたがデバイスの認識がされないという状態です。 PCでの認識がされないのでitunesで開く事もできず、もうアップルストアに持ち込むしかないかと思いましたが、色々調べた所、DFUモードで復元するという方法がありました! DFUモードで復元する手順 1. 電源ボタンとホームボタン同時に押しっぱなしにし10秒待ちます。 2. そのままホームボタンを押し続けたまま、電源ボタンだけ放して10秒待ちます。 3.
次のページ
このページを最初にブックマークしてみませんか?
『memocarilog|WordPress jQuery などの Web 制作関連のメモと iPhone Macのこと』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く