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

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

備忘録

【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(){ //関数が呼び出される…

【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);【参…

【レスポンシブ】親要素が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 () {…

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

①ヘッダー部の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のデザイン

①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データ…

【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

【css】ウィンドウサイズに合わせてボックスを上下左右の中心に表示する

中心にしたいボックスをdivとして div { position: absolute; top: 50%; left: 50%; width: 360px; /* 横幅 */ height: 210px; /* 高さ */ margin-left: -180px; /* マイナス「横幅÷2」 */ margin-top: -105px; /* マイナス「高さ÷2」 */ overflow: auto; /*…

【jQuery】ウィンドウサイズ高さ計算

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> //開いた画面の高さを取得 var WindowHeight = $(window).height(); //WindowHeightは変数のため任意の名前をつける $(function(){ if(WindowHeight > 320){ //開いた画面が320px以上なら実行 //body要素に高さを書き込む $('body').css('height',WindowHe…

スマホサイト制作中、サイト右側に余白ができた場合

html{ overflow-x : hidden; -webkit-overflow-scrolling: touch } body{ overflow-x : hidden; -webkit-overflow-scrolling: touch } webkit-overflow-scrolling: touchでスクロールをなめらかにする。 てゆーかこれのほうが確実!! レスポンシブデザイン…

シンプルなスマホナビゲーション

もうまじ時間ねえ!!!って時にお使いください。() 【html】 <p><span class="nav-button">Menu</span></p> <nav class="nav-closed"> <ul class="g-navi"> <li><a href="#">test1</a></li> <li><a href="#">test2</a></li> <li><a href="#">test3</a></li> </ul> </nav> 【css】 .nav-button { float: right; padding: 0.5rem; /* margin-top: .25rem…

【wordpress】アイキャッチ画像 レスポンシブ化

下記コードで、アイキャッチ画像に独自のクラスを自動でつける。 add_filter( 'post_thumbnail_html', 'custom_attribute' ); function custom_attribute( $html ){ $myclass = 'myclass'; // クラス名 return preg_replace('/class=".*\w+"/', 'class="'. $…

Page Plugin 導入方法(facebook likeboxの代替)

①facebookの以下ページへアクセス。 https://developers.facebook.com/docs/plugins/page-plugin ②該当のfacebookページのアドレスとpage pluginの任意の高さと幅を記入し、get codeをクリック。 1.と2.とでコードが生成されるが、1.は/bodyタグの直前に2.は…

responsive nav(スマホナビゲーション) 設置方法

①headタグ内に以下記入 <link rel ="stylesheet" href="css/styles.css" type="text/css" /> <script type="text/javascript" src="js/responsive-nav.min.js"></script> ②styles.cssの編集 以下記入 /* ------------------------------------------ NECESSARY STYLES FOR RESPONSIVE NAV --------------------------------------------- *…</link>

googlemapをレスポンシブ対応に

googlemapをレスポンシブに対応させます。 ①css記述 .google-maps { position: relative; padding-bottom: 75%; // これが縦横比 height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; heig…

skippr.js 導入コード

skippr.jsの導入コードheadタグ内に入れてとりあえずこれで動いた(wordpressにて) <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.skippr.min.js"></script> <script> //Skipperの初期化 jQuery("document").ready(function() { jQuery("#theTarget").skippr({ // スライドショーの変化 ("fade" or "slide") transitio…

【EC-CUBE】決済モジュール導入のやりかた(ルミーズ)

①決済モジュールプラグインをインストール eccubeの公式サイトのオーナーズストアで「ルミーズ決済モジュール(~系)」というのがあるのでそれを購入。 ここでモジュールを利用するサイトを記載するよう指示がでるので記入する事。 ②eccube 管理画面にて認証…

PC、スマホなどデバイスごとにhtmlファイルを分ける(.htaccessを用いて)

スマフォとPCなどデバイスで完全に表示ファイルを切り分けたい時に使う。①テキストエディタで以下記述。 RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android) RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^$ /s/ [R]4行目の「/…

positon fixedのヘッダ固定でページ内リンクのずれを解消

ヘッダの高さが100pxの場合、 <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> ①cssで調整 #header { width: 100%; min-width: 960px; height: 100px; position: fixed; left:0; top:0; z-index: 10; } #content{ padding-top: 100px; } #link01 {…