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

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

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

【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内に記述

【jQuery】関数の設定

関数とは ある特定の処理をするために作られた、比較的小規模なプログラムのこと。関数は定義しただけではなにも働きをせず、定義された関数の機能が必要になったときに呼び出して使う。 関数定義と呼び出し function nameFunction(){ //関数が呼び出される…

android対応でハマったこと

background-imageをcssで設定する際、なぜか背景画像が表示されなかった。 原因は画像サイズであった。画像サイズはだいたい1000px前後が限界みたい。高画質すぎるとandroidでは背景画像が表示されないという事に注意する。

スマホのデバイスごとにjsソースを振り分ける条件分岐

if ( navigator.userAgent.indexOf('Android') > 0 ){ //ここにアンドロイドのみの処理 } else if( navigator.userAgent.indexOf('iPhone') > 0 ){ ここにiphoneのみの処理 } 【参考URL】 http://rfs.jp/sb/javascript/js_lab/smartphone_user-agent.html

【js】圧縮したjsを戻して整形

これも便利!!http://jsbeautifier.org/ こちらは他のjs整形ツールまとめ記事maccle.com

【jQuery】画像の切り替えロールオーバー(プリロード付)

①js記述 jQuery(function(){ var supfix = "_on"; $("img.rollover").hover( function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1"+supfix+"$2")); }, function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)…

【css】レスポンシブでの印刷対応

style.cssに以下記述。 @media print { section { display: block; page-break-before: always; } pre code {page-break-after: always;} @page { margin-top:0.4cm; margin: 0.5cm; } p a, code, pre { word-wrap: break-word; } /* img {display:none;} */…

【wordpress】ユーザーサムネイルを手軽に設定できるSimple Local Avatars

これは便利でした。 やり方はSimple Local Avatarsをインストールすれば、自動的にユーザー編集画面にサムネイルを設定する項目ができる。

【WordPress】移設の注意点

【注意点】①wordpress管理画面の「設定」-「一般」の・wordpressアドレス(URL) ・サイトアドレス(URL)この2点に気をつけるもし、サーバーを移設した後にここを変更するなら、管理画面にはログインできないので、 phpMyAdminにログイン後該当のデータベースを…

複数サイトのRSSフィードをまとめて最新順に表示する

①headタグ内に以下記述。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); //

【WordPress】画像を記事に挿入する際の<a> タグを削除

下記をfunctions.phpに記入。 function remove_a_tag_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size) { return strip_tags($html, '<img>'); } add_filter('image_send_to_editor', 'remove_a_tag_image_send_to_editor', 10, 7);【参…

パソコンからiphoneに写真を取り込む方法(iCloudの保存場所)

①PCにicloudをインストール② iPhoneの「設定」→「iCloud」で「フォトストリーム」をオンにする③PCのユーザー名フォルダの中の「マイ ピクチャ」の中の「iCloud photos」の中の「アップロード」に写真を放り込めばiphoneでもみれるようになる

【wordpress】アーカイブのタイトル(カテゴリーや月別など振りわけ)

archive.phpに下記記述. <h1 class="archive_title"> の記事一覧</h1> <h1>の記事一覧</h1> <h1 class="archive_title"> の記事一覧</h1>

【wordpress】投稿のビジュアルエディタを整形

【参考URL】netaone.com

【wordpress】 contact form 7のメール設定

これいつも忘れるのでメモ ①メール こちらは問い合わせがあったらウェブサイト管理者に自動メールする方 ・送信先はこれはウェブサイト管理者のアドレスを入力・送信元は下記 ""<[your-email]> ・題名は下記 [your-name]様より~~のウェブサイト問い合わせ…

loading.jsでの注意点

loading中にスクロールすると下のほうでコンテンツがみえちゃってるときがあるのでその対策。①まず下記URLのloading.jsを保存してサーバーアップhttp://web-pc.net/jquery004 $('head').append( '<style type="text/css">#loading111 { display: none; } #fade, #loader { displa</style>…

【wordpress/jQuery】レスポンシブ対応のrightbox系 spipeboxの使い方

このswipebox、レスポンシブ対応ですぐに実装可能なので便利。wordpressで実装するときにした細工をここに記す。 1.ファイル読み込むまずはheadタグ内に下記記述。 <link rel="stylesheet" href="src/css/swipebox.css"> <script src="lib/jquery-2.0.3.js"></script> <script src="src/js/jquery.swipebox.js"></script> <script type="text/javascript"> ;( function( $ ) { $( '.swipebox'…</link>

【wordpress】記事の投稿日日付の表記変更

上記を下記に変更 【参考URL】 http://www.imaginationdesign.jp/blog/wordpress/1367/

【wordpress】記事タイトルに文字数制限

を下記のように書き換えすればよい。 post_title)>20) { $title= mb_substr($post->post_title,0,20) ; echo $title. ・・・ ; } else {echo $post->post_title;}?> 【参考URL】 http://studio-freetown.com/post-776/

【google map】複数のマーカーを設置して、マーカーをアルファベットに。

下記コードをheadタグ内に記述。 <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentWindow = null; function initialize() { var myOptions = { zoom:10, scrollwheel: false, center: new google.maps.LatLng(32.818199, 130.753743), mapTypeId: google.maps.Map…

【wordpress】固定ページや投稿の中で自動で生成されるpタグを生成されないようにする

上記のコードの直前に下記記述。 【参考URL】 http://kawatama.net/web/1079

【wordpress】bodyタグに各ページのクラス付与

下記のように記述すればOK <body <?php body_class(); ?>>【参考URL】 https://ja.forums.wordpress.org/topic/3133</body>

【レスポンシブ】親要素がrelativeで子要素のabsoluteの横幅と高さの比率を保つ

親要素のcssを以下のように設定 #box{ position: relative; width: 100%; height: 100%; padding: 75% 0 0; } 子要素のcssを以下のように設定 #box .inner{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(丸い画像の参…

ページを読み込んだ後、数秒後にアンカーまでスクロールするJS

<script type="text/javascript"> $(function(){ var targetOffset = $('#main').offset().top; $('html,body').delay(1000).animate({scrollTop: targetOffset}, "slow"); }); </script>【参考URL】 http://webdrawer.net/javascript/scrolljs.html

【jQuery】addClassのタイミングをずらす

下記をfooter付近に記述 <script> (function($){ $.fn.delayAddClass = function(className,delay){ return $(this).delay(delay).queue(function(next){ $(this).addClass(className); next(); }); }; $.fn.delayRemoveClass = function(className,delay){ return $…

【jQuery】animateメソッドでbackgroundColorを適用するには?

下記記述が必要。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

【jQuery】一定のanimate処理が終わってから、指定の処理がしたい complete

$(".switch").animate( { opacity: '0',}, { duration:500,complete: function(){ //ここにanimate opacity0のあとに処理させたいアニメーションを記述 - }}); 【参考URL】 http://webdrawer.net/javascript/jqueryanimate.html

【jQuery】ある一定の処理を終了させてから指定の処理をする whenメソッドdoneメソッド

下記の例だと 、divが右に300px動いた後、下に300px動き、そのあとにdiv内にテキストで「DONE!」が記述。つまりwhenメソッド内に先に済ましておきたい処理を記述し、メソッドチェーンでdoneメソッドにつなぎ、その中に後でする処理を記述。 <script type="text/javascript"> $(function () {…

スティッキーヘッダーを利用してページ内スクロールをする場合のリンクのずれ解消

#link1 { margin-top: -50px; /* 固定ナビの高さ分のネガティブマージン */ padding-top: 50px; /* 打ち消し用のパディング */ } 以上cssかけば解決。 【参考URL】 http://liginc.co.jp/web/js/jquery/80140

ページ内スムーススクロール

①js記述 <script> $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href =…

スティッキーヘッダー(スクロールすると別のヘッダーがついてくるやつ)

①ヘッダー部のhtml記述。固定のヘッダーとついてくるヘッダーのhtmlを記述。 <header id="header"> <div class="inner"> <h1>Demo</h1> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </header> <div id="change"> </div>

supersized.jsを使って全画面ズームインアウトしながらスライドショー

今回はwordpressで構築。 ①まずsupersized.jsなどをheadタグ内で読み込んでスライドショー起動。下記コードをかけば基本は設置できるはず。 <head> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/supersized.css" type="text/css" media="screen" /> </link></head>

【wordpress】googlemapのデザインの色を変えた時にIE10以下でエラー

原因はbodyタグに書いてある <body onload="initialize();">これのよう。これが地図を表示していないページでエラーが発生してしまう。(地図が表示されているページではエラーがおこらない) よって、条件分岐タグで地図を表示しているページのみこのbodyタグになるように記述。ちなみに</body>…

googlemap 複数設置

http://miukro.hatenablog.com/entry/2015/07/07/211358 の続き。 function initialize() { var latlng = new google.maps.LatLng(座標); var myOptions = { zoom: 18,/*拡大比率*/ scrollwheel: false, center: latlng,/*表示枠内の中心点*/ mapTypeControl…

googlemapのデザイン

①headタグに以下を記述 <script src="http://maps.google.com/maps/api/js?sensor=true"> </script>②googlemapを表示させるところにhtmlを記述。bodyタグのところはbodyタグのところに必ず以下のコードをかく。 <body onload="initialize();"> <div id="map_canvas" style="width:100%;height:500px;"></div> ③mapstyle.jsを以下のように記述。スタイルのところは「Styled Map Wizard」で生成したものを貼り付…</body>

自作webアイコンフォントのつくりかた

①illustratorなど使ってアイコンフォントにしたいものをsvg画像で保存。また、 http://www.webcreatorbox.com/webinfo/svg-tools/ここでも紹介があるような画像をsvgに変換するツールもある。私はpotrace.jsを使っている。 potrace.jsはネット上でsvgデータ…

javascript 圧縮ツール

超便利!!それだけ!!w http://dean.edwards.name/packer/

【wordpress】facebookコメント導入

これやり方いっつも忘れるから備忘録~ ①まず下記へアクセス。 http://developers.facebook.com/docs/reference/plugins/comments/ ②必要な情報入力。 コメント欄の横幅、コメントを使うサイトなどを入力して、get codeボタンをクリック。 ③生成されたコード…

【wordpress】contact form 7 郵便番号入力で住所自動入力

jqueryライブラリはいらない模様。ajaxzip3というもの使用。 1.headタグ内に下記記入。 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ajaxzip3.js"></script> 2.オプション記入。 フォームを使用する固定ページ編集画面のcontactform7のショートコードの直前に下記記入 <script type="text/javascript"> jQuery(function(){ jQuery('#zip').keyup(function(ev…

【wordpress】contact form 7メールアドレス確認用の入力フォーム

functions.phpに下記記入。 add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 ); add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 ); function wpcf7_text_validation_filter_extend…

【SVG】SVGアニメーション(ロゴ編-線を描いた後色を塗る)

①illustratorでロゴをsvgで保存。こんとき、1.1で。②保存したsvgをテキストエディタで開いて以下を全て選択してコピーしてhtmlのbodyタグ内にペースト。 ③svgタグに「logo1」というクラス名を付与しcss記述。fillがロゴの塗りの指定。strokeが線の設定。aiデ…

【jQuery】jQuery 2.0を使用する際の注意

下記のようにするとIE8以下では1.9.1、IE9以上やIE以外のブラウザではjquery-2.0.0.jsを読む <script src="jquery-2.0.0.js"></script> 【参考URL】 http://blog.webcreativepark.net/2013/04/24-235534.html