読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【jQuery】lazyload使い方

head内にlazyloadのプラグインjs読み込ませる。以下はオプションでカスタムのイベントloadImgをつくってる。 kikaku1をクリックすると、lazyloadが始まる。(img.lazyの画像読み込みが始まる)data-originalに本命のimgを。srcにloading中の画像を <img src="dummy.png" class="lazy" data-original="honmei.jpg" alt="*" /> $(functi…

【EC-CUBE2系】コメントアウト

http://qiita.com/tomcky/items/d947c26786d7269f5cf3

グリッドジェネレーター

http://gridulator.com/(こっち使うかな)http://www.kenjisugimoto.com/gridpx/

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

css

.element{ -webkit-transform: translatez(0); // 又は -webkit-transform: translate3d(0,0,0); } 【参考URl】 http://memocarilog.info/webdesign/8304

【css】EDGE,IE,FIREFOXのみに適用されるcss

css

①IE @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* ここにIEのみ適用したいcssを */ }@-moz-document url-prefix() { /* ここにfirefoxのみ適用したいcssを */ }@supports (-ms-ime-align:auto) { .selector { prop…

velocity.jsのqueue

velocityのメソッドチェーンは最初に定義したものから順番に実行されます。1回目に定義したアニメーションの途中から、2つ目以降のアニメーションを実行させることもできます。それはqueueを使う。 【参考URL】 http://un-tech.jp/velocity-basic-option/

mp4からwebmに変換するオンラインツール「cloudconvert」

使い方は以下。というかみなくてもできるか。。。 http://webcre8.jp/use/webservice-creation-cloudconvert.html https://cloudconvert.com/

DVDをmp4に変換するフリーソフト「HandBrake」

使い方は以下のサイト。 http://freesoft.tvbok.com/freesoft/dvd_copy/handbrake.html

【jQuery】特定の要素が画面内に表示(レンタリング)されたら際、処理を実行する。

$(function(){ // 処理実行の引き金となる要素を設定 var target = $("#target"); $(window).scroll(function(){ // 実行のトリガーになる要素のオフセット(一番上からの距離)から // 画面の縦幅を引いたものを処理実行までの距離とする(画面の下端を基準…

【jQuery】offsetとscrollTop

①offset()の基本 jQueryで要素の位置を取得したり移動させるにはoffset()を使います。 ブラウザの左上ではなく、ドキュメントの左上となります。 ですので、スクロールしたら起点はブラウザ上からは見えなくなります。 ②scrollTop()の基本 $(window).scrollT…

processing random関数とnoise関数の違い 自分用メモ

float i = random(10); // 0~10のfloat型乱数取得 float i2 = noise(10); // 0~1のfloat型乱数取得(というか引数にどんな数字を入れても0~1の乱数取得) float i3 = 10 + random(ynoise) * 80; //10から810の間のfloat型乱数 float i4 = 10 + noise(ynoi…

モーダルウィンドウでよく使うバブリング

・クリックなどのイベントは、子要素から親要素へと伝播される(バブリング) ・preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 ・return false; を使うと、その要素のイベントも親要素へ…

【jquery】fadeInupとかのモーションの場合のコーディング

fadeInupとかモーションするときは以下の感じでさきにcssメソッドでopacity:0にしてdisplayをblockにする。そんでshowメソッドからのanimate $("div").css({ "opacity":"0", "display":"block", }).show().animate({opacity:1})

jQueryで特定の要素が存在するかどうかを判別する処理

$(function(){ if($('#sample').length){ ~ ここに「#sample」が存在した場合の処理を記述 ~ } else { ~ ここに「#sample」が存在しなかった場合の処理を記述 ~ } }); もし次の要素がなかった場合次へボタン削除・・・とかで使った if($('.content_mod…

【jQuery】n番目の要素にアクセス

jQueryでクリックされた要素が何番目か取得する <ul> <li class="some-item">hoge</li> <li class="some-item">foo</li> <li class="some-item">bar</li> </ul> $('li.some-item').on('click', function(){ var index = $('li.some-item').index(this); console.log(index + 'th item clicked!'); }); インデックスは配列と同じで0から始まる 【参考URL】…

【wordpress】ループ中の記事奇数偶数に違う処理

以下をfunctions.phpに記述。 //ループ中奇数だけに処理 function is_odd_post(){ global $wp_query; return ((($wp_query->current_post+1) % 2) === 1); } 以下を記事のループ中に記述。 <div> // 奇数ループ記事のコード <div class="odd"> </div> </div>

【wordpress】続きを読むのリンクとexcerptの文字数

以下をfunctions.phpに記述。 // 続きを読む function my_excerpt_more($post) { return '<a href="'. get_permalink($post->ID) . '" class="more_link">' . '&#8811; 続きを読む' . '</a>'; } add_filter('excerpt_more', 'my_excerpt_more'); // 続きを読むの文字数 function new_excerpt_length($length) { return 134; } …

【wordpress】カスタム投稿でブログ機能を実装するときのメモ

wordpressデフォルトの「投稿」でブログ機能実装すると、個別記事のパーマリンクが「~~~~~~.com/category/title」になる。 これを「~~~~~~.com/blog/category/title」にしたいため。とりあえずカスタム投稿のためのプラグイン「Custom Post Type UI」、カス…

【css】width: calcについて

css

レスポンシブで便利だったので。縮めても要素間のマージンが変わらない。 注意!!width:calcに設定した要素がdisplay:tableの場合は聞かないので注意!!!!! ①2カラムの場合。(containerのmax-width:952pxで間のmarginを常に40pxあける場合) <div class="container"> <div class="left"> </div> <div class="right"> </div> </div> .co…

【jQuery】Masonry 実装メモ

①とりあえずまずレイアウトをcssなどでだいたいつくっとく。itemがmasonryのタイル1個1個のスタイル。ここでwidthやmarginプロパティを設定しておくとその通りにタイルが配置されるよう。 このタイルの横並びもdisplay:inline-blockで最初に処理しとく。そん…

【wordpress】contactform7でenterキーを押したら勝手に送信されるのを防ぐ

//Enterキーが押されても送信(submit)しない function submitStop(e){ if (!e) var e = window.event; if(e.keyCode == 13) return false; } //全てのinputのtext,password要素にそれを適応 window.onload = function (){ var list = document.getElements…

【javascript】ブラウザ 条件分岐

//UserAgent var ua=window.navigator.userAgent; var browserIE=false;//IE判定 var browser_v=0;//IEバージョン番号 var browser_nm="";//browser名 //IE判定 if(ua.match(/MSIE/) || ua.match(/Trident/)) { // IEの挙動 } if (browserIE) {browser_nm="I…

【wordpress】カスタム投稿タイプの複数ループ

'work', 'taxonomy' => 'work_category', 'term' => 'logo', 'posts_per_page' => 6, /* 表示するページ数 */ ); ?> have_posts() ) : $my_query->the_post(); ?>

【wordpress】投稿記事編集画面でのカスタム投稿のカテゴリー(タクソノミー)をチェックボックス表示にする方法

この記事 http://sachips.byeto.jp/wordpress/custom-taxonomy-checkbox.html

【jQuery】マウスクリック連打とかイベント重複を防ぐ

var busy = 0; // これはクリックイベントのコードの直前に記述。 $('div').on('mouseover click', function() { //連打を防止したいイベントコード if (busy == 1) return false; // イベント内最初に記述 // 処理開始 $(this).append('●'); // 処理終了 */…

ページトップへ戻るボタン【追尾バージョン】

JavaScript $(function() { var topBtn = $('#pagetop'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function() { if ($(this).scrollTop() > 100) { topBtn.fadeIn(500); } else { topBtn.fadeOut(500); } }); //スクロール…

ベーシック認証 やり方

①まず、IDとPWを決めておく PWはここで決めたりすると便利 http://www.luft.co.jp/cgi/randam.php ②下記サイトでPWを暗号化する http://www.shtml.jp/htaccess/make_htpasswd.html ③ ②で作られたコードをテキストエディタにコピペして「htpasswd.txt」という…

html,css 整形ツール

https://syncer.jp/css-prettyprint

操作画面の動画を録れるAGデスクトップレコーダー 使い方

①デスクトップの「AGDRec.exe」をクリック。するとウィンドウがでるのでとりあえずOK。②タスクバーの上矢印アイコンからAGという緑のアイコンを右クリック。「領域指定録画」をクリック。 そこからドラッグでとりたいキャプチャ範囲を設定して、録画開始。

Javascript オブジェクト指向 メモ

JavaScriptは、インスタンス化/インスタンスという概念はあるが、いわゆるクラスがなく、「プロトタイプ(ひな形)」という概念だけが存在する点である。 プロトタイプとは、「あるオブジェクトのもととなるオブジェクト」のことで、Javascriptではこれを利…

【jQuery】チェックを入れてからボタンを押せるようにする

jQuery $(function() { $('.cart_real').attr('disabled', 'disabled'); $('#cart_check').click(function() { if ($(this).prop('checked') == false) { $('.cart_real').attr('disabled', 'disabled'); } else { $('.cart_real').removeAttr('disabled'); …

【EC-CUBE3】head内編集

head内のタグ編集にはFTPで /home/アカウント名/www/src/Eccube/Resource/template/default/default_frame.twig

google PageSpeed insight 点数あげ方

①画像をtinypng,tinyjpgで圧縮②css,jsを圧縮③.htaccessを以下のように編集(この場合wordpressとかじゃなくベタ打ちのhtmlに有効)このhtaccessだけで20点弱上がるときがある。 ExpiresActive On ExpiresByType text/css "access plus 1 days" ExpiresByTy…

CreateJSのメモ

●graphics.drawCircle(0,0,100)のかっこの中は(円の中心のx座標、円の中心のy座標) .x、.yはdrawCircleで決めた円の中心の座標がそれぞれxpx、ypx移動する。 drawCircleの基準点は円の中心 ●graphics.drawRect(0,0,200,100)のかっこの中は(短形の左上頂点…

【ECCUBE2系】税抜価格の表示コード

①カートの中ページ ●単価(税抜) 円 ●小計(税抜単価+商品数量)税込み単価-税抜単価=消費税をbarに代入して税込単価総額からbar×商品数を引いてる 円 ●税抜の合計価格

Web上でソースコードやテキストを比較

js

これは便利 http://mergely.com/editor 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」 | Cappee Design

【jQuery】ページ内スクロール

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒 // アンカーの値取得 var href= …

【EC-CUBE】インストール方法

今更感はんぱないんですが、いっつも何かしらつまづくので備忘録 ①ECCUBE公式サイトからECCUBEダウンロード ②その中のdataフォルダとhtmlフォルダの「中身」をサーバーに(同階層ディレクトリ)にアップロードするんだけれども、htmlフォルダの.htaccessはア…

【jQuery】waypoint.js やり方

/bodyの直前に以下記述。ただしloadイベントを使っているのはページ自体にローディング機能をつけた場合の記述。 <script src="js/jquery.waypoints.min.js"></script> <script> $(window).on('load',function(){ $('selector1').waypoint(function(){ $('.selector2').addClass('fadeIn'); },{ offset : '-2400px' }); </script>…

velocity.jsのコールバック

$('selector1').velocity({skewX:"-12deg", scaleX:"1.3", translateX:"100%"}, {duration:500, complete: function(){ $('selector2').remove(); $('selector3').addClass('aaa'); } });

WEBフォントのやり方

①フォントファイルのotfからeotとwoffのファイルに変換して準備 (変換するファイルを縮小するなら)サブフォントメーカー、woffコンバータというフリーソフトを使って変換 ②変換したフォントファイル(eot,woff)をサーバーにあげてcssファイルにfont-faceプ…

【javascript】ブラウザリサイズでページをリロード

// 画面リサイズでリロード(ただし、iphoneやタブレット以外では無効) $(function(){ if(!navigator.userAgent.match(/(iPhone|android|iPad)/)){ var timer = false; $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer…

【jQuery】カンタンなローディング画面

【html】 <div> <ul id="images"> <li><img src="images/img01.jpg" alt="image"></li> <li><img src="images/img02.jpg" alt="image"></li> <li><img src="images/img03.jpg" alt="image"></li> <li><img src="images/img04.jpg" alt="image"></li> <li><img src="images/img05.jpg" alt="image"></li> <li></li></ul></div>

ハンバーガーボタンのスクリプト

ハンバーガーを連打したとき、そのアニメーションとグローバルナビが出るときたまにずれるときがある。それを下記コードで解決 <div id="sp_g"> <nav> </nav> </div> <a class="menu-trigger" href="#"> <span></span> <span></span> <span></span> </a> .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box…

ローディングのJSを入れたら他のJSが動かなくなった時の対応

ローディングのJSを入れたら、・スティッキーヘッダーが高さ取得できない ・パーティクルのプラグインが動かないこのようなことが起こった 結論からいうとそれぞれのJSにイベントの対応すればOK 通常下記のようになっているところを $(document).ready(funct…

Instafeed.jsの使い方

①instafeed.jsをダウンロード。そしてクライアント用のアカウントを作成する。(自分のアカウントではあんまり作らないほうが良い) ②JSをユーザーアカウントから画像を取得出来るように書き換えるプラグインページに記載されている内容を下記に変更してhead…

IEだけimgで表示させたsvgのサイズがおかしいのをなおす

SVG

img[src$=".svg"] { width: 100%; } 【参考】http://qiita.com/ShioTsugi/items/4edf6fae3329c4904f29

【wordpress】カスタムフィールドの値ごとにclass付与

functions.phpに以下記述。 function cate_class() { $custom_cate = post_custom( 'フィールド' ); if ( $custom_cate == 'フィールドの値B' ) { echo 'cateA'; } else if ( $custom_cate == 'フィールドの値B' ) { echo 'cateB'; } else { echo 'no-catego…

【wordpress】カスタムフィールド文字制限の出力コード

ID) . '">' . '続きを読む' . '</a>'; } else { $…

【jQuery】fullpage.jsの使い方

html <div id="fullpage"> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> </div> css head内に記述