投稿者: doggstar
体重計算での小数点計算での誤差
どうやら0.1は2進数で割り切れない数字だから
0.09999999となる??
ので前回からの結果が-0.9.000000000001 となる
ので
$weight_d = sprintf('%.1f', ($weight_now - $weight2[0])); echo $weight_d;
sprintf(‘%.1f’, ~
でできた。
小数点2けただと
sprintf(‘%.2f’,
となるらしい
参考
http://www.phppro.jp/qa/2601
http://php.net/manual/ja/function.sprintf.php
http://www.psi-net.co.jp/blog/?p=277
https://forum.openoffice.org/ja/forum/viewtopic.php?f=10&t=768
mail3cgiを使うときの注意点
cgiへ渡すhtmlもしくはphpの文字コードをShift_JISにしなければならない。
文字コードはメタの宣言で済まず、ファイルの保存形式を変えなければならない。
そのため使うのが、macでフリーソフト MultiTextConverter
こいつの設定を 変換したい文字コードに設定
メタタグも変更するをチェックして保存すれば
一発で変更できる。
phpでインクルードする場合、ヘッダーフッター等はutf8となるため文字化けする。
facebookサムネイルサイズまとめ
http://gaiax-socialmedialab.jp/facebook/309
画像サイズは246×470px
open officじゃなくて libre offic
日本語化して
msp ゴシック DL
msgothic.ttc
https://code.google.com/p/browserlinux-jp/downloads/detail?name=msgothic.ttc&can=2&q=
フォント置き換え msp を好みのフォントへ
管理ホームページ停止措置
http://web-tan.forum.impressrd.jp/e/2009/06/16/5880
htaccessにメンテナンスをかき
メンテナンスに中止を書く
スマフォ対応 簡易 簡単 即席 css スマフォ分岐
http://millkeyweb.com/if-mobile/
ファンクション
function is_mobile() { $useragents = array( 'iPhone', // iPhone 'iPod', // iPod touch 'Android', // 1.5+ Android 'dream', // Pre 1.5 Android 'CUPCAKE', // 1.5+ Android 'blackberry9500', // Storm 'blackberry9530', // Storm 'blackberry9520', // Storm v2 'blackberry9550', // Storm v2 'blackberry9800', // Torch 'webOS', // Palm Pre Experimental 'incognito', // Other iPhone browser 'webmate' // Other iPhone browser ); $pattern = '/'.implode('|', $useragents).'/i'; return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']); }
<?php if (is_mobile()) : ?> // スマートフォン用コンテンツ <?php else: ?> // PC・タブレット用コンテンツ <?php endif; ?>
こいつで タブレットをはしょって分岐できる
br をはしょりたいからページのどこかに
<?php if (is_mobile()) : ?> <style type="text/css"> .top_p br, .smap br { display:none; } </style> <?php else: ?><?php endif; ?>
と記入
samp とつけたbrは改行されない
即席対応で
どうしても改行させたい倍はpでくくりなおす
あけたい場合はpに全角スペースでOK
http://www.msng.info/archives/2013/03/turning-off-html-br-with-css.php
さらにはここは完全にPCの文字バランスを出したい場合
div#textArea { -webkit-text-size-adjust: 100%; }
こんなんあった
heightをしていしなくともよい
bodyにいれると全部PC表示
//新スマフォ分岐 function is_mobile(){ $useragents = array( 'iPhone', // iPhone 'iPod', // iPod touch 'Android.*Mobile', // 1.5+ Android *** Only mobile 'Windows.*Phone', // *** Windows Phone 'dream', // Pre 1.5 Android 'CUPCAKE', // 1.5+ Android 'blackberry9500', // Storm 'blackberry9530', // Storm 'blackberry9520', // Storm v2 'blackberry9550', // Storm v2 'blackberry9800', // Torch 'webOS', // Palm Pre Experimental 'incognito', // Other iPhone browser 'webmate' // Other iPhone browser ); $pattern = '/'.implode('|', $useragents).'/i'; return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']); }
05navinavi 自作プラグイン ログイン時ダッシュボード以外
使うものは
★adminmiz – ログインurlを変更
編集者、投稿者等 ダッシュボードを無効化して保存
ページをotherpageにし
urlを
http://○○○/wp-admin/admin.php?page=Dogg
にする。
メニューエディターで 権限設定を非許可にすると リダイレクトされないので注意
★自作プラグイン
ただシンプルに管理画面に新しいページを追加
(過去違うものもあったがURLがサーバーの初期URLがのるので非実用的)
参考
http://shared-blog.kddi-web.com/about/166
pdf-dl
“WordPress 初めてのプラグイン作成〜He…法 | レンタルサーバーのCPIスタッフブログ”のプレビュー
実際スマフォから投稿する為の画面を作成する必要があるので
今後利用頻度高い
05navinaviにすべて書けばよし
春日井ナビがかなり高度
シュガはシンプル
車はコメントアウトした。
プラグイン
タグ打ち込みプラグイン
IME Ready Taxonomy
画像サイズ作成プラグイン
Simple Image Sizes
シュガーで サイドバーにあと入れワードプレスのコンテンツを無理クリ入れる方法
全てワードプレスに置き換えは
・URLの問題
・読み込み速度の問題
・手間の問題
から見送り
ブログ追加時TOPのみWP化し
サイドバーはiframeで追加した。
方法が複雑なため記す
・通常のWP化したサイドバーを用意(sidebar2.php)
wpで読み込みたい部分を
pageテンプレを作りbodyにコピペ
ヘッダー等必要なためhead footer 等はインクルード
body html アド民バーを消すために
css追加
<style type="text/css"> #wpadminbar{ display:none} html{ margin:0px!important;} #sidemenu{margin:0px!important; padding:0px!important;} .blog_side_li{ text-align:center} @media (max-width: 480px){ #sb_instagram.sbi_col_3 #sbi_images .sbi_item{width: 33.33%!important;} } </style>
これはインスタグラムウィジェットを突っ込んだら
iframeでディバイスワイドがきき
1列になってしまたので
さらに上書きしている
ログイン▶固定ページ作成 テンプ選択 urlコピー
iframeにsec
<iframe src="http://sugaryawd.com/insta/" width="190" height="251" frameborder="0" scrolling="no" ></iframe>
d-marking ドメイン統一展開展望
http://bizvektor.com/plugins/301_redirection/
まず
http://www.d-marking.jpに統一するべし
検索順位を落とさない引っ越し方法予想
http://www.d-marking.jpに現在のサイトをアップhttp://www.d-marking.jpで稼働させる。
上記最初のプラグインにて301リダイレクトをdoggstarpromotion.infoに差し込む
doggstarpromotion.infoは永遠に保持しなければならない 多分
■デザインサイト
★サンプルサイトをサブドメインでいくつか作成する案
・サンプルサイトを/sample/で今後作成し運営する案
この2つが有望
現在のd-marking.comはひとまず維持しつずける
サブドメインに転送して
http://www.design.d-marking.jpというアドにデザイン専用サイトを移すか
もしくは
デザインサイトは現在のままd-marking.comとして運営
もしくは
http://www.d-marking.jpにデザイン制作事例を新たに作成して埋め込む。
http://www.d-marking.jp/design/をトップドメインにして作成も可能
だがイメージ等/img/とパーマーリンクをいじったせいで/から始めている urlがたくさんあるため
それを/design/(そのフォルダ名に現在のd-marking2)を入れ込みwordpressを稼働させwる
デザイン事例を入れ込む事で seoをさらにアップさせる 愛知 ホームページ制作で
もしくは現在の 春日井 デザイン事務所 のキーワードも狙うため
維持するかどうか
悩む。
ひとまず現状維持
体重の折れ線グラフ + 今日の体重等
今回取得したコード
get_the_date(''); ループ内に <?php $days[] = $day; ?> としてループ終わって、 <?php echo implode( '","', $days )//区切り文字指定 ?> で区切って出す。 if have post 前に $i = 0; を設置し end wihle前に $i++;//繰り返すごとに$iに数値が1つづ増える を設置して ループ後 記事の回数を測る。 if($i > 1): //記事が一件以上だったら など分岐可能 date_query 参考http://elearn.jp/wpman/column/c20131030_01.html 'relation'=>'OR',で 今日の記事が含まれない場合 指定する チャートjs 折れ線 参考http://log.noiretaya.com/238 体重の現象を測るために 前日の体重を取得するために php 配列 最後から2番目を取得したい array_slice(array,start,length,preserve) 参考 http://memopad.bitter.jp/w3c/php/func_array_slice.html 具体 省略 //ポイントは[0] <?php $day_weights2[] = $day_weight . ','; ?> <span style="color: #33CC99">前回比 : <?php $weight2 = array_slice($day_weights,-2,1); ?> <?php if($weight_now > $weight2[0]){ echo "-"; }?> <?php $weight_d = $weight_now - $weight2[0]; echo $weight_d ?>kg</span>
<!----テスト-------> <?php //折れ線グラフへカスタムフィールドの値と日付を入れる。 //投稿日取得 $today30 = get_the_date('Y/m/d h:i:s'); $post_y = get_the_date('Y'); $post_m = get_the_date('m'); $post_d = get_the_date('d'); $args = array( 'cat' => 190, 'posts_per_page' => 19, //'orderby' => 'date', 'order' => 'ASC', 'date_query' => array( 'relation'=>'OR', array( //投稿日の記事 'year' => $post_y, 'month' => $post_m, 'day' => $post_d, ), array( //投稿日以前の記事 'before' => $today30, 'inclusive' => true, 'compare' => '>=', ), ), ); query_posts( $args ); ?> <?php $i = 0; //1個では折れ線がバグルので記事1個の時は出さないため記事カウント?> <?php if ( have_posts () ) : while ( have_posts() ) : the_post(); ?> <?php $day = get_the_date('m/d'); ?> <?php $days[] = $day; ?> <?php $day_weight = get_post_meta($post->ID,"weight",true); ?> <?php $day_weights[] = $day_weight; ?> <?php $day_weights2[] = $day_weight . ','; ?> <?php $go_weight = '62'; ?> <?php $go_weights[] = $go_weight; ?> <?php $i++;//繰り返すごとに$iに数値が1つづ増える endwhile; else:?> <?php endif; ?> <?php wp_reset_query(); ?> <?php if($i > 1): //記事が一件以上だったら ?> <div class="weight_chart_single"> <canvas id="canvas" width="400" height="240"></canvas> <div class="weight_go"> 目 標 体 重 </div> </div> <!----/テスト-------> <script> //最新30日のダイエットを取得して フォーチで入れ込む // window.onload = function(){ var lineChartData = { labels : ["<?php echo implode( '","', $days )//区切り文字指定 ?>"], //ここ日付を取得して入れる datasets : [ //目標値用 { fillColor : "rgba(255,0,0,0)", strokeColor : "rgba(255,0,0,1.0)", pointColor : "rgba(255,0,0,1.0)", pointStrokeColor : "rgba(255,0,0,1.0)", data : [<?php echo implode( ',', $day_weights )//区切り文字指定 ?>] //ここ-体重を取得して入れる }, { fillColor : "rgba(38,181,229,0.3)", strokeColor : "rgba(38,181,229,0.3)", pointColor : "rgba(38,181,229,1)", pointStrokeColor : "rgba(38,181,229,1)", data : [<?php echo implode( ',', $go_weights )//区切り文字指定 ?>] //ここ-目標体重を記事数分取得して入れる } ] } var options = { // X, Y 軸ラインが棒グラフの値の上にかぶさるようにするか scaleOverlay : true, // 値の開始値などを自分で設定するか scaleOverride : true, // 以下の 3 オプションは scaleOverride: true の時に使用 // Y 軸の値のステップ数 // e.g. 10 なら Y 軸の値は 10 個表示される scaleSteps : 13, // Y 軸の値のステップする大きさ // e.g. 10 なら 0, 10, 20, 30 のように増えていく scaleStepWidth : 1, // Y 軸の値の始まりの値 scaleStartValue : 60, // ラインが曲線 ( true ) か直線 ( false )か bezierCurve : false, // ポイントの点を表示するか pointDot : true, // ポイントの点の大きさ pointDotRadius : 2, // ポイントの点の枠線の幅 pointDotStrokeWidth : 1, // データセットのストロークを表示するか // みたいですが、ちょっと変化が分からなかったです datasetStroke : false, // ラインの幅 datasetStrokeWidth : 1, // ラインの内側を塗りつぶすか datasetFill : true, // 表示の時のアニメーション animation : false, // アニメーションの速度 ( ステップ数 ) animationSteps : 60, // アニメーションの種類, 以下が用意されている // linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, // easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, // easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, // easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, // easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, // easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce animationEasing : "easeInOutCubic", // ラベルの表示 ( Y 軸の値 ) scaleShowLabels : true, // ラベルの表示フォーマット ( Y 軸の値 ) scaleLabel : "<%=value%> kg", // X, Y 軸値のフォントサイズ scaleFontSize : 10, } // function show() { var chart = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData, options); // } // show(); //} </script> <?php endif; //記事が1件終わり?> <div class="weight_box_single"> <h2 class="weight_h">体重計</h2><span style="color:#FF0000;"> 今日の体重 : <span style="font-size:20px;"><?php $weight_now = get_post_meta($post->ID,"weight",true); echo $weight_now ?>kg</span></span><br /> 目標まであと: <span style="font-size:20px;"><?php $weight_base = 62.0; $weight_sa = $weight_now - $weight_base; echo $weight_sa?>kg</span> <br />開始 : 72.0kg <br /><span style="color:#2EA7E0;">目標 : 62.0kg </span><br /><span style="color: #33CC99">総減量 : <?php $weight_d = $weight_now - 72.0; echo $weight_d ?>kg</span> <br /><span style="color: #33CC99">前回比 : <?php ?> <?php $weight2 = array_slice($day_weights,-2,1); ?> <?php if($weight_now > $weight2[0]){ echo "-"; }?> <?php $weight_d = $weight_now - $weight2[0]; echo $weight_d ?>kg</span> </div> <?php if($i > 1): //記事が一件以上だったら ?> <div style="clear:both;"></div> <?php endif; //記事が1件終わり?>
チャートjsで折れ線グラフを書く方法
参考
http://z-styles.blogspot.jp/2013/08/javascript-chartjs.html
http://log.noiretaya.com/238 詳しい応ション
<script src="./Chart.min.js"></script> <canvas id="canvas" height="450" width="600"></canvas>
var lineChartData = { labels : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], datasets : [ { fillColor : "rgba(220, 220, 220, 0.5)", strokeColor : "rgba(220, 220, 220, 1)", pointColor : "rgba(220, 220, 220, 1)", pointStrokeColor : "#fff", data : [1, 59, 90, 81, 56, 55, 40, 30, 10, 40, 48, 58] }, { fillColor : "rgba(151, 187, 205, 0.5)", strokeColor : "rgba(151, 187, 205, 1)", pointColor : "rgba(151, 187, 205, 1)", pointStrokeColor : "#fff", data : [28, 48, 40, 19, 96, 27, 100, 33, 63, 31, 64, 51] } ] }
// オプション var options = { // X, Y 軸ラインが棒グラフの値の上にかぶさるようにするか scaleOverlay : true, // 値の開始値などを自分で設定するか scaleOverride : true, // 以下の 3 オプションは scaleOverride: true の時に使用 // Y 軸の値のステップ数 // e.g. 10 なら Y 軸の値は 10 個表示される scaleSteps : 10, // Y 軸の値のステップする大きさ // e.g. 10 なら 0, 10, 20, 30 のように増えていく scaleStepWidth : 10, // Y 軸の値の始まりの値 scaleStartValue : 0, // X, Y 軸ラインの色 scaleLineColor : "rgba(0, 0, 0, .1)", // X, Y 軸ラインの幅 scaleLineWidth : 1, // ラベルの表示 ( Y 軸の値 ) scaleShowLabels : true, // ラベルの表示フォーマット ( Y 軸の値 ) scaleLabel : "<%=value%>%", // X, Y 軸値のフォント scaleFontFamily : "'Arial'", // X, Y 軸値のフォントサイズ scaleFontSize : 12, // X, Y 軸値のフォントスタイル, normal, italic など scaleFontStyle : "italic", // X, Y 軸値の文字色 scaleFontColor : "#666", // グリッドライン ( Y 軸の横ライン ) の表示 scaleShowGridLines : true, // グリッドラインの色 scaleGridLineColor : "rgba(0, 0, 0, .05)", // グリッドラインの幅 scaleGridLineWidth : 1, // ラインが曲線 ( true ) か直線 ( false )か bezierCurve : false, // ポイントの点を表示するか pointDot : true, // ポイントの点の大きさ pointDotRadius : 5, // ポイントの点の枠線の幅 pointDotStrokeWidth : 1, // データセットのストロークを表示するか // みたいですが、ちょっと変化が分からなかったです datasetStroke : false, // ラインの幅 datasetStrokeWidth : 1, // ラインの内側を塗りつぶすか datasetFill : true, // 表示の時のアニメーション animation : true, // アニメーションの速度 ( ステップ数 ) animationSteps : 60, // アニメーションの種類, 以下が用意されている // linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, // easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, // easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, // easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, // easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, // easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce animationEasing : "easeOutQuad", // アニメーション終了後に実行する処理 // animation: false の時にも実行されるようです // e.g. onAnimationComplete : function() {alert('complete');} onAnimationComplete : null } var chart = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData, options);
GIF作成 チュートリアル
http://helpx.adobe.com/jp/photoshop/kb/5784.html
サクラサーバーでHTMLでPHPを動かす方法があった。
そもそも動かなかった理由は
メインディレクトリのパーミッションにあった。
デフォで604 664 で フォルダは 755 705あたりらしい
保存用
http://www.mdn.co.jp/di/articles/2104/?page=2
http://www.tagindex.com/cgi/permission.html
“パーミッションの設定 – TAG index Webサイト”のプレビュー
“第2回 「パーミッションの意味と使い分け」 | …dN Design Interactive -”のプレビュー
テストサーバーでは合格
ローカルでは動かないので#でコメントアウトして使うと良い
#Action myphp-script /php.cgi #AddHandler myphp-script .php .html RewriteEngine on RewriteCond %{HTTP_HOST} ^yasaka-indus1\.co\.jp RewriteRule (.*) http://www.yasaka-indus1.co.jp/$1 [R=301,L] RewriteEngine on RewriteCond %{THE_REQUEST} ^.*/index.(html|php) RewriteRule ^(.*)index.(html|php)$ /$1 [R=301,L]
下記引用
http://www.k-design2zz.com/blogs/1397/
さくらサーバー】にてhtmlファイル内にphpを記述し動作させようとしたのですが。。。
上手く動作しない???
本来?ならば。。「.htaccess」ファイルに下記を記述しうpすればおkなのぉ
※大体はこれで解決!!
===============================================
AddType application/x-httpd-php .php .html
AddHandler application/x-httpd-php .php .html
===============================================
でも、さくらサーバーはアカンかった
イロイロとぐぐるとSSHでサーバーにアクセスして~って書いてあったけどもう少し簡単に問題解決できたのでメモ
【php.cgi】ファイルを作成(テキストエディタなど使用)し書きコードを記述
===============================================
#!/bin/sh
exec /usr/local/bin/php-cgi
===============================================
対象ドメイン(トップページと同階層)へアップロード→パーミッションを705に設定
【.htaccess】ファイルを作成し書きコードを記述
===============================================
Action myphp-script /php.cgi
AddHandler myphp-script .php .html
===============================================
こちらも、対象ドメイン(トップページと同階層)へアップロード
これで問題なく、さくらサーバーでhtmlファイル内に記述したphpが動作可能になりました♪
ordPressを任意(過去)のバージョンに手動アップデートする方法
http://stinger3.com/post-1142/
プラグイン埋め込まれた
http://www.bossraku.com/id=75
バージョン
http://news.mynavi.jp/news/2014/09/08/068/
インフォメーションカテゴリのカスタム 分岐
飛ばしたいリンクがあればそこへ
本文空ならURLなし
本文ありなら本文
カスタムフィールドスイートで
info_url
エクスポート
[{"post_title":"\u30a4\u30f3\u30d5\u30a9\u30e1\u30fc\u30b7\u30e7\u30f3\u30ab\u30c6\u30b4\u30ea\u7528","post_name":"%e3%82%a4%e3%83%b3%e3%83%95%e3%82%a9%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e7%94%a8","cfs_fields":[{"id":26,"name":"info_url","label":"INFO URL","type":"text","notes":"\u30bf\u30a4\u30c8\u30eb\u304b\u3089\u98db\u3070\u3057\u305f\u3044\u30da\u30fc\u30b8\u304c\u3042\u308c\u3070\u30b3\u30b3\u306bURL\u3092\u30b3\u30d4\u30da","parent_id":0,"weight":0,"options":{"default_value":"","required":"0"}}],"cfs_rules":{"post_types":{"operator":"==","values":["post"]}},"cfs_extras":{"order":"0","context":"normal","hide_editor":"0"}}]
<h3 class="top_koushin_titel"> <i class=" icon-dot-circled"></i> インフォメーション</h3> <?php $args = array( 'posts_per_page' => 3, 'cat' => 30, ); query_posts( $args ); if ( have_posts () ) : while ( have_posts() ) : the_post(); ?> <div class="set_day_all clearfix"> <div class="set_day"><?php the_time('Y.m.d'); ?></div> <div class="set_title"> <?php if(post_custom('info_url')): ?> <a href="<?php echo post_custom('info_url'); ?>"><?php the_title(); ?></a> <?php else: ?> <?php if($post->post_content=="") : //本文空なら?><?php the_title(); ?> <?php else: //?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php endif; ?> <?php endif; ?> </div> </div> <?php endwhile; else:?> <div style="margin-left:20px;">記事はまだありません。</div> <?php endif; ?> <!------------------------------------------------リセットクエリ---------------------------------------------> <?php wp_reset_query(); ?> <div style="text-align:right; padding-top:15px; padding-bottom:15px; padding-right:15px;"> <a href="<?php echo home_url(); ?>/?cat=30" style="color:#FF3300; font-size:13px;">すべて見る ▶▶</a> </div>
レーダーチャート Jクエリ 設置覚え
本家?
http://oreweb.toypark.in/jquery.canvasChart/
説明
http://wataame.sumomo.ne.jp/archives/3841
別のやつ
http://www.takuro.info/archives/5045
説明書いたる 動きあるからいいかも
さらに別のやつ google
http://judenco-shogi.hatenablog.com/entry/2014/05/21/214605
説明
http://timing-web.com/google-chart-api/
他の設定
http://blog.lqd.jp/api/000027.html
利用したチャートJS
<canvas id="radar" height="290" width="340"></canvas> <script> var radarChartData = { labels : ["感動","笑い","ほっこり","驚き","LOVE","女性的","戦い","かっこいい","ミステリアス","飽きない","展開速度"], datasets : [ { fillColor : "rgba(230,117,56,0.5)", strokeColor : "#E67538", pointColor : "#E67538", pointStrokeColor : "#fff", data : [4,1,4,1,1,0,2,1,0,4,3], }, // { // fillColor : "rgba(151,187,205,0.5)", // strokeColor : "rgba(151,187,205,1)", // pointColor : "rgba(151,187,205,1)", // pointStrokeColor : "#fff", // data : [28,48,40,19,96,27,100] // } ] } var myRadar = new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10, scaleShowLabels: true, // 目盛を表示(true/false) scaleOverride : true, // 目盛の最大値を手動設定(true/false) scaleSteps : 6, // 目盛の数 scaleStartValue : -1, scaleStepWidth : 1, }); </script>
1階作ったgoogleレーダーチャート
<canvas id="canvas" width="300px" height="300px"> </canvas> <img src="http://chart.apis.google.com/chart?cht=r &chxt=x,y &chds=0,5 &chls=2,1,0 &chco=2EA7E0 &chxr=1,0,5,1 &chd=t:4,3,2,1,0,1,2,3,4,4,4,4 &chm=B,2EA7E050,0,0,0|s,2EA7E0,0,-1,4,0 &chxl=0:|感動|笑い|ほっこり|驚き|LOVE|女性的|戦い|かっこいい|ミステリアス|飽きない|展開速度 &chxs=0,666666,13|1,666666,15 &chts=000000,18,c &chs=340x340" style="margin-left:0px;"/> <!--&chtt=レビュー||-->
Jクエリのホバーを始めて自分で書いたよ。
<script type="text/javascript"> jQuery( function() { jQuery( '.dvideo_img' ) .hover( function(){ jQuery( ".dvideo_star").stop(). animate({opacity: 'show',},{duration: 500,easing: 'swing',}) }, function(){ jQuery( ".dvideo_star").stop(). animate({opacity: 'hide',},{duration: 500,easing: 'swing',}) }) } ); </script>
htmlコード
<div class="dvideo"> <div class="dvideo_img"> <img src="/img/60474568.jpg" width="160"> <div class="dvideo_star"> <img src="/img/stars/6.png" width="160" height="34"> </div> </div> <div class="dvideo_title"> 最強のふたり </div> </div class="dvideo">
css
/*VIDEO*/ .dvideo{ float: left; margin-right: 5px; } .dvideo_img{ position: relative; } /*.dvideo_img:hover .dvideo_star{ display:inline-block}*/ .dvideo_star{ position: absolute; left: 0px; bottom: 0px; display:none; } .dvideo_title{ font-size: 12px; }
参考
jQuery の animate で、透明⇔不透明のアニメーション動作
ソースを見るから見ると分かりやすい。
http://alphasis.info/2011/05/jquery-animate-opacity/
マウスオーバーアニメーションの基本型
http://www.webopixel.net/javascript/179.html
これはhoverだけではなく、他のアニメーションでも有効です。意図せず連続してアニメーションしてしまうときに試してみてください。
http://logic-a.com/2012/05/14/jquery_hover_event_crazy_animation_stopper/
インスタグラム(Instagram)ウィジェットをHPに設置 WordPress編
インスタグラム(Instagram)ウィジェットをHPに設置 Wordpress編
http://doggstarpromotion.info/?p=1878