masakaz77のブックマーク - はてなブックマーク

[ CSS3 ] transform プロパティを使って CSS アニメーションを実行した際に要素がガタつくのを防ぐ方法

transf orm プロパティの scale で要素をズームしたり、translate で移動させるアニメーションを、transition で行った際に、アニメーションしている要素以外の部分が微妙にガタガタ動くという現象に遭遇しました。実際の動き実際の症状は下の画像のような動きです。マウスオーバーでアニメーションを実行すると、アニメーション要素でないテキストの部分が微妙に動いてしまいます…。この現象は Chrome や Safari など、webkit 系のブラウザで発生するようです。ただ、起こる場合と起こらない場合があり、どういう状況で起こるのかまでは検証できませんでした…。この CSS アニメーションのコード対処法このガタツキは以下のようにアニメーション要素に対して、3Dの方向に関する transf orm:translatez(0) 又は、transf orm:transla

masakaz77 2016/05/16

リンク

Facebook のフォローボタンを「いいね」ボタンのデザインへ変更する｜ memocarilog

masakaz77 2015/12/28

リンク

JUGEMブログからWordPressへブログの引っ越し

JUGEMブログからWordPressへブログの引っ越しをする機会がありましたので、その手順の覚え書きです。 JUGEMからの画像のダウンロードが少しめんどくさいですが、WordPressのインポート機能のおかげで、簡単にjugemの記事を再現できました。引っ越しの手順 1. ブログ記事のエクスポート jugemにログインし、”ブログ設定”より”インポート・エクスポート”を選択。エクスポートの”JUGEMの別ブログへの引っ越し”の所で100件ずつに分けてエクスポートします。 2. 画像のエクスポート jugemの機能では、画像を一括でダウンロードはできないようです。一枚ずつダウンロードするには管理画面の”データ管理”より”画像を管理”を選択します。画像の一覧がでますので、ファイルをクリックして画像を表示させて、右クリックでダウンロードします。画像の枚数が少ない場合には右クリックで一枚

masakaz77 2015/11/09

リンク

[CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る

単なる横並びのボックスも、アニメーションを少しつけるだけで目を引くものになります。スマートフォンやモダンブラウザのみがターゲットとなりますが、表示する時に順々にふんわりとしたアニメーションをつけて表示するサンプルをCSSのみで作ってみました。 CSS3 の animation プロパティを使用しているので、ベンダープレフィックスやキーフレームなども合わせるとコードが沢山になってしまいます。そこで、Sass を利用して簡単に書く方法も合わせてご紹介します。完成サンプル下のサンプルが完成形となります。「Return」をクリックするとアニメーションを再度開始します。 See the Pen 順にフワッと表示するCSS by Saomocari (@Saomocari) on CodePen. HTML コード HTML コードはシンプルなリストになります。順番に表示する要素が li になるの

masakaz77 2015/06/01

リンク

さくらのVPS サーバで複数のドメイン（Virtualhost / マルチドメイン）を運用する方法

さくらのVPS サーバに WordPress を移転して一番感動したのは、サクサク動く管理画面です。表示スピードも上がり大変快適になりました。せっかくなので、他のドメイン・サーバーで運用しているサイトもこのサーバーに引っ越したいという欲が出てきました…。さくらのVPS ではマルチドメイン（Virtualhost）で運用することも可能です。エラーを出しながらもなんとか、複数のドメイン設定ができたのでその手順のメモです。 1. さくらのネームサーバー設定をするさくらのVPS 管理画面から「ネームサーバー登録」をクリックして「ネームサーバの利用申請」画面へ移行します。画面一番下に「新しいネームサーバの登録」という項目があるので、ここからドメインを追加します。次に「ゾーン編集」のボタンをクリックし、「さくらインターネットのネームサーバーに設定する」の項目の箇所へ、IPアドレスを入力し送信しま

masakaz77 2015/05/26

リンク

[jQuery] レスポンシブ対応でないギャラリーを jQuery を使って簡単にレスポンシブ対応にする方法

プラグインなどで実装した非レスポンシブなギャラリーでも、シンプルなものの場合は CSS やライブラリのコードに少し手を加えるだけでレスポンシブ対応にできることもあります。しかし、凝ったエフェクトのギャラリーをレスポンシブ対応にしたい場合、どこをどうしたらいいのかプラグインのコードを読むだけで大変です…。少し力技になってしまいますが、凝ったエフェクトのギャラリーを jQuery を使って簡単にレスポンシブにする方法を思いついたので、記事にしてみました。ヒントになったのは少し前に話題になったこちらの記事「これでよくない？レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング」サンプルデモだいぶ以前に Rhinoslider（シンプルなスライドショーから変わったエフェクトのスライドショーも簡単に実装できるjQueryプラグイン-Rhinoslider）というプラグインをご紹介しました

masakaz77 2015/05/06

リンク

[CSS3] IE9以下とその他のモダンブラウザで 10px 以下のフォントサイズを表示する CSS の指定方法

10px 以下という小さいフォントサイズを指定する機会は頻繁にないかもしれませんが、遭遇した時に少し手こずったので、IE9 以下のオールドブラウザとその他のモダンブラウザとで 10px 以下のフォントサイズを同じように表示する方法を考えてみました。 10px 以下のフォントサイズ指定ができない Google Chrome Google Chrome は、デフォルト設定で 10px 以下のフォントサイズは表示されないようになっており、8px などの小さいフォントサイズを指定した場合は全て 10px で表示されてしまいます。そこで、transf orm プロパティの scale() をつかい「縮小する」という方法で小さいフォントサイズを表示します。 Google Chrome 以外でも共通の見た目に最近では transf orm プロパティが解釈できるブラウザも増えており（Can I use…

masakaz77 2015/03/16

リンク

[WordPress] サイト改ざんの被害にあったので行った対処・対策方法などについてまとめました

Modified 2014-11-22 更新情報 Twitter にていろいろ教えて頂いたので、今後の対策として「追記」しました。先日 WordPress で運営しているサイトが改ざんの被害にあってしまいました…。どのような改ざん被害だったのかと今回行った対処・対策方法などについてまとめました。今回あった改ざんは一見して分からないように改ざんされていたため、他にも気づかないうちに被害にあっている WordPress サイトがあるかもしれません…。どのような改ざんだったのか一見通常通り表示されているのですが、ソースコードをみると以下の画像のようなコードが投稿記事内に書き込まれていました。（クリックで大きい画像をみることができます。）海外のiPhoneアプリの販売サイトなどへのリンクですが、CSS で画面には表示されないように設定されています。実は以前もサイト改ざんの被害にあったこと

masakaz77 2014/11/21

リンク

[WordPress] 管理画面に独自の CSS・JavaScript を適用させる方法まとめ

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

masakaz77 2014/11/15

リンク

[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る

Modified 2015-10-17 更新情報メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。コンテンツ部分をクリックしても閉じることができるようにするコードを追記しました。スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコードスライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ

masakaz77 2014/11/14

リンク

[jQuery] サムネイルをクリックするとメイン画像が入れ替わるレスポンシブ対応のギャラリーを作る

Modified 2014-1-12 更新情報連続クリック時の不具合解消のため、jQuery コードを一部書き直しました＆キャプションを表示する方法を追記しました。サムネイル画像をクリックすると、メインの大きい画像が入れ替わる定番のギャラリーを jQuery を使って作る方法です。現在メイン表示されている画像のサムネイルへのカレント機能と、レスポンシブ表示にも対応しています。 IE8+ / iOS8 / Android4.3 / その他のブラウザで動作確認済みです。最低限のシンプルなコードなのでカスタマイズもしやすいと思います。サンプルデモ ◆ レスポンシブギャラリーデモ｜memocarilog 横幅が狭くなった場合のサムネイル画像は、設定した min-width まで小さくなり、並びきらない場合は以下のように2段になって表示します。 HTML コード画像をサムネイルサイズの画像と

masakaz77 2014/11/02

リンク

[JS] jQuery を使わずにスクロールでふわっと出現し、クリックするとページトップへスムーススクロールで戻るボタンを作る

スクロールするとふわっとフェードインしてくるページトップへ戻るボタンは今や定番ですね。前回に引き続き jQuery などのライブラリーを使わずに、JavaScript と CSS のみでページトップへ戻るボタンを作ってみました。今回のアニメーションは CSS3 は使わず JavaScript のみで実装しました。 IE7+、Andoroid 3.2＋、その他のブラウザでも動作確認できました。サンプルデモスクロールでふわっと出現しクリックするとページトップへスムーススクロールで戻るボタンのサンプルデモです。ページトップへ戻るボタンサンプルデモ｜memocarilog-demo HTML コード HTML は通常のリンクボタンのように作り親要素に ID名 “pagetop”とつけ、HTML 内の適当な場所へおきます。 <div id="pagetop"> <a href="#">↑Pag

masakaz77 2014/09/21

リンク

[JS][CSS3] jQuery を使わずに fadeIn / fadeOut のアニメーションを実装する方法

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 プロパティでアニ

masakaz77 2014/09/18

リンク

[jQuery] scroll や resize イベント時の処理回数を減らすプラグイン – jQuery throttle / debounce

scroll や resize イベント時は、そのイベント発生中ずっと何らかの処理が行われます。特にモバイル端末の場合、処理によってはブラウザへの負担が心配です。jQuery throttle/debounce プラグインを使用するとイベント中の処理回数を減らすことができます。jQuery throttle/debounce プラグインの使い方などをまとめました。なにをしてくれるのか throttle/debounce プラグインではイベント中の処理を、「イベント発生中に随時実行」ではなく「イベント発生中、指定した秒数毎に実行」（throttle）又は、「イベントが終了してから、指定秒数後に実行」（debounce）というタイミングに変更することができます。「サンプル」も作りました。参考とダウンロード以下ページで使い方などの説明があります。「Download」よりプラグインを入手で

masakaz77 2014/09/13

jquery

リンク

[WordPress] ログインページ(wp-login.php)で海外IPアドレスからのアクセスを拒否する

WordPress のブルートフォースアタックは以前から問題になっており、管理しているサイトでもユーザー名とパスワードを工夫するなどの対策をしていました。しかし、ロリポップサーバーの WordPress で度々「WordPressへの攻撃に対する検知・防御機能」によるログインページへの全アクセス制限が自動的に行われ、少し困っていました…。とてもありがたい機能ですが、実際の使用者もログインページに突然アクセスできなくなるのと、その頻度が高く週に一回くらい起こっていた為、その度に .htaccess ファイルを編集しなくてはいけないのでちょっと面倒です。そこで、wp-login.php への海外 IPアドレスからのアクセス制限を行ったところ効果てきめんでした。最初からやっておけばよかったと思います。その設定方法のメモです。 .htaccess ファイルの設定 1. 国内のIPのアクセスのみ

masakaz77 2014/08/26

リンク

[WordPress] カスタムメニューのコードから余計なタグやクラスを削除しスッキリさせ、かつカレントクラス機能を付ける

カスタムメニューを使うとオリジナルのメニューを管理画面で簡単に作れて便利ですが、カスタムメニューで生成されるコードは余計な div や id、class が入ってしまいます。この余分な部分を削除して、カレントクラス表示の機能は残す方法です。カスタムメニューをデフォルトのまま表示したコードは以下のようになっています。これをスッキリ必要なものだけにしていきます。具体的には、ul 要素を囲っている div 要素を削除し、ul と li 要素に付与されているID、クラスを削除します。ただ、現在開いているページメニューに付けられる current-menu-it em クラスは便利なので、それと同じように表示中ページの li には current のクラスを付けるようにします。メニューを囲っている div要素と、ul要素に付与されているID・クラスを削除するカスタムメニューは表示したいテンプ

masakaz77 2014/08/11

リンク

[JS] クラスのチェック・追加・削除を行う便利なスクリプト Classie.js

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"></

masakaz77 2014/07/23

リンク

[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 >

masakaz77 2014/07/12

リンク

[JS] JavaScriptの読み込み位置をページ最後にしたほうがよい理由

最近JavaScriptの読み込みや実行の記述を、ページ最後の body 終了タグ直前で行っている場合をよくみかける気がしたので、理由を調べてみました。個人的になるほどと思ったことや誤解していた事があり、常識的なところなのかもしれないですがまとめてみました。 1. Webページの表示速度を早くするこの理由は一番分かりやすく重要なところだと思います。javascriptを読み込んでいる間は、HTMLファイルの読み込みが止まってしまう為、HTMLファイルをほぼ全部読み込んで表示された後javascriptを読み込む方が表示速度が早くなります。以下の参考サイトがとてもわかりやすいです。 2. 並列ダウンロードの妨げになってしまうこれは1.の「表示速度を早くする為」の1つを掘り下げた感じになるかもしれませんが、ブラウザ側では表示速度を上げるために、サーバーから画像等をダウンロードする際には1

masakaz77 2014/06/23

リンク

指定要素をふわふわさせたりブルブルさせたりする事ができるjQueryプラグイン-jqFloat

簡単な指定で、画像や要素をふわふわ浮せたり、小刻みにふるえさせることができるjQueryプラグインのjqFloatの使い方などです。たくさん使うとイライラする感じになってしまいますが、控えめに使えばふわふわかわいく楽しい雰囲気を演出できます。IE6でもちゃんと動きました。「サンプル」も作りました。デモ jqFloat.js Demonstration ダウンロード以下のアドレスよりプラグインのダウンロードが可能です。 jqFloat.js – A Floating Effect with jQuery! 使い方ヘッド内で以下の様にjQuery本体とプラグインを読み込みます。 jQuery本体は1.7.1以上が推奨のようです。 <script src="http://ajax.google apis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

masakaz77 2014/06/23

リンク

はてなブックマーク

タグ

ブックマーク / memocarilog.info (21)

お知らせ

今週のはてなブックマーク数ランキング（2024年8月第1週）

月間はてなブックマーク数ランキング（2024年7月）

今週のはてなブックマーク数ランキング（2024年7月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス