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

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

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

【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 {…

【jQuery】レスポンシブ対応のタブコンテンツ「Basic Tabs」設置方法

①html記述 <div id="tabwrap"> <ul id="tabs"> <li class="current"><a href="#home">タブ1</a></li> <li><a href="#about">タブ2</a></li> <li><a href="#services">タブ3</a></li> <li><a href="#contact">タブ4</a></li> </ul> <div id="content"> <div id="home" class="current"> <p>コンテンツ1<…</p></div></div></div>

wow.jsをIE8&スマホで起動させない

wow.jsは少しのコードでアニメーションができるので楽だが、スマホでアニメーションつけるとなると重くてページが表示されない。 また、IE8でwow.jsのコードを読み込ませると、アニメーションさせたところが表示されなくなってしまう。なので下記コードを記…

bootstrap導入方法

今回初めてcssのフレームワークを使ってみた。結論から言うとかなり使いやすかった。 とりあえず導入方法を。 ①まずはbootstrapをダウンロードbootstrapをダウンロードすると ・css ・js ・fontsという3つのフォルダが内包したbootstrapフォルダになる。こ…

スマホ、ipadのときのみjavascript無効化

パララックスなどのサイトを作った際、重すぎてスマホでサイトがみれないよーということがあったので。 <script type="text/javascript"> if(!navigator.userAgent.match(/(iPhone|android|iPad)/)){ //ここにPC向けに読ませるjs } </script> 【参考URL】 http://hpseisakuwa.com/blog/js-2.html

【jQuery】sidr.jsの使い方

facebookであるようなメニュー。 ①sider.jsをダウンロード sidr.jsをダウンロードするとjquery.sidr.dark.css、jquery.sidr.light.cssの2種類ファイルがあるのでどちらかをheadタグ内に読み込ませる。 <link rel="stylesheet" href="css/jquery.sidr.dark.css"> ②bodyしめタグの直前にJavaScriptを読みこませる記述。</link>…

jQueryで覚えたこと2【アニメーションなど】

はいjquery覚えたこと第2弾~。とりあえず今は文法を覚えるべきだお。表示されている要素を非表示(hideメソッド) <script> $(function(){ $("#aaa").hide(); $("#bbb").hide('fast'); $("#ccc").hdie(5000); }); </script> 日表示されている要素を表示する(showメソッド) <script></script>…

【ECCUBE】インストール後、管理画面が真っ白

もうこれてこずったわー。結論からいうとパーミッションの問題だったのですが。 とりあえずインストールからの経緯をば。環境●version:eccube-2.13.3●サーバー:エックスサーバー eccubeをダウンロード今回はドメイン直下にeccubeを入れたかった。 そのため…

jQueryで覚えたこと【セレクタ・メソッド・イベント】

最近jQueryを勉強しはじめますた。ちょい大事だとおもったこと自分用にメモ。基本の書き方 <script> $(function(){ $("#abc").css("color","red"); }); </script> ひとつのセレクタに複数の支持を出す <script> $(function(){ $("#abc").css({ "color" : "red", "background" : "blue"</script>…

【EC-CUBE】EC-CUBE外からのカート設置

LPを作成し、カート機能のみeccubeのカートを使う。要するにeccube外のページから商品詳細ページを経由せずeccubeのカゴにダイレクトに入れる。 LPを作成したhtmlファイルのカート部分に以下記述。 <form id="form1" action="/products/detail.php?product_id=10" method="post" name="form1"><input type="hidden" name="transactionid" value="<!--{$transactionid}-->" /> </form>

【EC-CUBE】問い合わせフォームの必須項目の設定

①data/class/peges/contact/LC_Page_Contact.phpをいじる必須項目を削除したい場合は、下記部分の"EXIST_CHECK"の部分を削除 新たに必須項目にしたい場合は、"EXIST_CHECK"を追加。 不要な場合は、項目自体をすべて削除。 このPHPファイルをいじるとPCもスマ…

【wordpress】自作テーマでのループ コード

久しぶりにwordpressいじったお。ちょい自作でテーマ作ってみた。こっちの方がやりやすかったwとりあえずループのコードを備忘録に。 「test1」というカテゴリースラッグを1ページに5記事出したい場合 「test1」ループ内容 「test2」…

【wordpress プラグイン】ページング「WP-PageNavi」のループがきかなかった件

ワードプレス プラグイン「WP-PageNavi」をいれたところ2ページにいくとループしなくなった。 まずこのプラグインのhtmlへの挿入コードは そして 下記のループのコードかけば直った。

【wordpress】固定ページをフロントページにしたら、記事のページングが機能しない現象

これはやばかったよおう。もう無理かと思ったらなんとか直ったよう。表示設定でフロントページの表示を固定ページにすると記事のページングが機能しなくなる場合がある。これはwordpressのバグのようでこの解消法は、以下のコードをfunctions.phpに記述。こ…

【wordpress】固定ページに表示させる画像を短いパスで出力する方法

wordpressの固定ページに画像を呼び出す際、もちろん管理画面の「メディア」からアップロードした画像のURLを貼り付ければいいのだが、それだとパスが長くて野暮ったい。このやり方をすればスッキリコードの記述が可能。まず、サーバーのテーマフォルダの中…

【jQuery】ふわっと半透明するロールオーバー

これも今更感満載だけれども。汎用性高いので備忘録で。 【html】 <img src="images/sample.jpg" width="100" height="100" class="toumei" /> <p class="toumei">サンプルテキスト</p> 【css】 img.toumei { margin-bottom:10px; } p.toumei { background-color:#CCC; width:50%; padding:5px; } 【jQuery(head内に記述)】

【css】text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示する方法

以下のcssを設定。こういうやり方もあるのね~~~ .sample{ text-indent:100%; white-space:nowrap; overflow:hidden; } 【参考URL】 http://delaymania.com/201209/web/textindent-9999/

【wordpress】固定ページの条件分岐タグ

今さら感はあるけれども各固定ページのメインイメージ画像を違うものに出力したかったのでmemomemo。 <img src="" alt="*" /> <img src="" alt="*" /> <img src="" alt="*" />

【EC-CUBE】文字制限(カテゴリー名)

スマフォ画面でトップページにあるカテゴリーツリーのカテゴリ名を文字制限したかった。他のサイトには商品名を文字制限するやり方しかのってなかった。カテゴリ名の場合は以下の記述。 <ul <!--{if $treeID != ""}-->id="" style="display: none;"> </ul>

【jQuery】bxslider サムネイル付きページャーの挿入

今回はbxsliderのページャーをサムネイルにする。 手順 ①jquery.bxslider.min.jsとplugin/jquery.easing.1.3.jsとjquery.bxslider.cssをサーバーにあげる ②headタグ内にjavascript記述とcssコード呼び出し ③htmlうつ ①jquery.bxslider.min.jsとplugin/jquery…

【EC-CUBE】ページごとの分岐方法

今回eccube。特定のページのみにスライダーを挿入させたかったため使用。 ここに特定のページにのせたいコンテンツを記述 【参考URL】 http://www.and-nbsp.com/eccube%E3%81%AE%E5%88%86%E5%B2%90%E6%96%B9%E6%B3%95.html http://sachips.byeto.jp/ecc…