最短を目指すWEB制作者の技術ログ
HTML･CSS･PHP･jquery＆将棋

マウスホバーはPC版サイト限定なので、スマホサイトでは使えません。 BtoBではまだまだPC版サイトが重要なので、需要は多少ありますよね。 さて、ゆっくり変化させる方法ですがCSSのみで簡単にできます。 まずはclassにtransition（切り替える時間）を指定します。 hover時の効果も指定。半透明にさせるopacityかbackgroundがベターです。 htmlStart .hover-slow{ transition: 0.5s;} .hover-slow:hover{ opacity:0.7;} htmlEnd あとは、ホバー時に変化させたい画像やリンクの...続きを見る

最近流行の技のようで、主にロシアからのリファラースパム行為が多いらしい。 google解析（グーグルアナリティクス）でリンク元の参照を見ると、 普通なgoogleやyahooなどの検索エンジンが上位のはずが、訳の分からないドメインが上位になっている。 例えば、こんな感じのURLが参照元に… htmlStart claim66629524.copyrightclaims.org site48246457.snip.to site69510790.snip.to get-your-social-buttons.info site46176572.snip.to htmlEnd...続きを見る

スマホサイトでボタンを作る時の汎用リンクマークを作成しました。1ピクセルのビットマップでのマークもおまけに。 1ピクセルのリンクマークはPC用サイトで、使いこなせる人は上級者かも。 個人的にはポータルサイトなどの細々したサイトで重宝してます。リストタグに背景指定で使って見て下さい。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ...続きを見る

DVDfabでDVD（及びブルーレイ）をMP4にする方法を紹介したいと思います。MP4にしてしまえば、youtubeにアップできるのでどこでも見れるようになるので便利。 今回の例は「海外ドラマで２話が入っている」ケースでの設定で字幕もMP4の映像に入れ込むようにしている。 まず、「リッピング」のメニューをクリックし、チェックボックスでMP4に変換したいところ選択。ドラマなので、同じオープニングが毎回しつこくなってしまうので、チャプターを2-7にしてますが、通常は変更する必要はありません。 次はエンコードの種類を選択。2014年の現在は「MP4」、「WMV」が主流で、今...続きを見る

インターネットとブラウザは切っても切れない関係。 果たして、あなたが使っているブラウザは本当に自分に合っているブラウザなのか？ 「IE」「google chrome(以下、クローム)」「firefox（以下、狐）」「safari」 ブラウザのシェア率は、この辺が高いというのは知っている。 が、個人的には日本人が開発している「sleipnir(スレイプニル)」（以下、プニル）がイチオシである。 国産のわりには読みづらい名前で浸透性がなく、シェア率は0.2％ほどの超絶マニアックブラウザ。 しかし、慣れてしまうと他のブラウザにはもう移行できない感が一番強いのはプニルではないかと思...続きを見る

画像ファイルがあるかないかを判断して、必要に応じてノーイメージ(now printing)を表示する時などに使用するファイル存在確認の代表的関数file_exists()。 phpStart $path = './log/item/12345.jpg'; if(file_exists($path)){ $img = $path; }else{ $img = '/img/noimage.jpg'; } phpEnd しかし、自サーバーならfile_exists関数でファイルがあるかないかを判断できるが、他ドメイン＆他サーバーでは使用できないので、その場合はget_hea...続きを見る

更新 2018-11-26 この記事に関する最新記事は「ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)」になります。下記の古い内容よりも画像ファイルが不要で使い勝手がいいので、新しい記事をご覧ください。 管理画面で時間のかかる処理（例えば画像や動画などをアップロードする際）をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。 そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像...続きを見る

ドラッグ＆ドロップで並び替える機能はほんの数行で実現できる。まずはjqueryとjquery-uiを下記にアクセスしてダウンロードする。jqueryは自サーバに置いたほうが読み速度が早いから直リンクはオススメしない。 htmlStart http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js http://code.jquery.com/ui/1.10.2/jquery-ui.js htmlEnd 次は、下記のようにjqueryを読み込んで、一行コードを書いてやります。#sortにドラッグ＆ドロップソートを適応さ...続きを見る

divの中全体をリンクにしたい場合は下記のコードがおすすめ。リンクにしたいタグにクラス指定をすれば、そのタグ内にあるリンクのリンク範囲をボックス全体にしてくれます。 ＜javascript＞ htmlStart $(".boxlink").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); htmlEnd HTMLは下記のような感じで使用する。親ボックスは特にdivじゃないとダメということはない。block要素であればなんでもOK。 ＜HTML＞ ...続きを見る

アフィリエイトのリンクがサイト内にたくさんある場合は、隠した方がSEO的に良しとされています。では、簡単なので早速コードを見てください。 ＜jump.php＞ phpStart $link[1] = 'http://sample1.jp?afid=9999'; $link[2] = 'http://sample2.jp?afid=9999'; $link[3] = 'http://sample3.jp?afid=9999'; $link[4] = 'http://sample4.jp?afid=9999'; $link[5] = 'http://sample5.jp?afid...続きを見る

ページを開いた直後に指定のページ内リンクまでスムーズにスクロールさせるという技。jqueryを使用しています。下記のコードは#sampleの部分まで移動させるという場合のものです。任意で変更してください。 htmlStart $(function() { var p = $("#sample").offset().top; $('html,body').animate({ scrollTop: p }, 'slow'); return false; }); htmlEnd ※var p = ～～とありますが、このpはHTMLタグのpとは関係ありません。ただの変数名...続きを見る

Jqueryのプラグインであるthickboxを使ってダイアログを表示してみよう。まずはheadタグ内でjqueryを読み込んだ後にthickbox.jsを読み込む。順番が逆だと動きません。 htmlStart htmlEnd あとはテキストリンクにclass指定でthickboxを宣言し、リンクを貼るだけで設置完了です。リンクのパラメータにはheightとwidthを必ず指定しなければいけません。リンク先はHTMLや画像、PHPでさらに独自のパラーメーターを付け足すことも可能です。 ＜テキストリンク～ダイアログ表示＞ htmlStart サンプル htm...続きを見る

UTF-8の文字をshift_jisに変換するコードです。携帯サイトを作る場合はdocomoとauがshift_jisで作らないといけないので、文字コードを変更することがあります。EUC-JPはperl時代の時によく使用されていましが、今はUTF-8とshift_jisのどちらかしか使わないですね。 phpStart //mb_convert_encoding(文字列,変換後,変換前); mb_convert_encoding($str,'SJIS','UTF8'); phpEnd あとPCサイトでもメーラーを立ち上げるmailtoのリンクで件名と内容も付属するときはshif...続きを見る