月: 2018年11月

コーディングでposition関連のプロパティを使う機会はとても多いと思います。

今回ではIEでchromeなどのブラウザとちがっいぇレイアウトが崩れる現象に遭遇したのでメモです。

二倍で書き出した画像に対して、画像に対してzoomを指定し半分のサイズで表示させていましたが、
ブラウザ上では画像は半分サイズで表示されているにもかかわらず、親要素に対して、
指定している位置がおかしいという現象がありました。

contents .inner{
  position:relative;
}
.contents{
 position:absolute; 
 bottom:0;
 left:0;
}
.contents　img{
 zoom:0.5;
}

上記のように指定してしまうと、画面上は正常な画像サイズに見えていても、実際は2倍サイズとして扱われてしまっているため
positionの位置が崩れていたということです。

表示とコードの差異がわかりずらく、解決に時間がかかってしまったので、zoomなど、問題のありそうなプロパティなどに注意して、
コーディングを行っていきたいですね。

サイト制作においてSVGを使用する機会が多く増えてきました。

アニメーションも非常に軽快で使用しやすいものなので、効果的に使用すれば、サイトのデザインを魅力的に見せることが可能です。

そこでSVGアニメーションを使用で便利なサイトを紹介します。

https://maxwellito.github.io/vivus-instant/

SVG画像を、ドラッグ&ドロップでアップロードして、左側のメニューでアニメーションの設定をするだけで簡単に調整が可能です。

メニュー項目のAnimation typeでアニメーションのタイプや、描く順番、時間や、ループの設定が可能です。

項目の設定し、SVGファイルをダウンロードしたら
CSSで動かす設定をしてあげれば、OKです。

 path{
　　fill:#333;
　　stroke:#333;
　　stroke-dasharray: 1000;
　　stroke-dashoffset: 0;
　　stroke-width: 1;
　　-webkit-animation: stroke 4s ease-in 0s;
　　animation: stroke 4s ease-in 0s;
}


 @-webkit-keyframes stroke {
　　0% {
　　　　stroke-dashoffset: 2000;
　　　　fill:transparent;
　　}
　　40% {
　　　　stroke-dashoffset: 2000;
　　　　fill:transparent;
　　}
　　50% {
　　　　fill:transparent;
　　}
　　100% {
　　　　stroke-dashoffset: 0;
　　　　fill:#0060e6;
　　}
}

文字をアウトライン化したデータや複数の線画をアニメーションさせたいけれども、設定が難しいなんて方も使用してみてはどうでしょうか。

CSS3のアニメーションなどで、要素が見えた瞬間にアニメーションさせたいという場面があったので、
備忘録的なメモです。

ブラウザ上で見えたときに処理を実行するには、
要素までのスクロール量を収得してイベントを発火させるか,
プラグインで、イベントさせるかがあります。

jquery.inview

プラグインを使用する場合

ダウンロードしたquery.inview.jsをhead内で読み込み、

.on(‘inview’, function(){});でイベントの記述をします。

■js
    $('.animation').on('inview', function() {
         $(this).addClass("active");
    });
■css
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.animation.active {
    animation-name: fadeIn;
}

上記のように記述することで、見えたときにアニメーションのフェードインをさせることができます。

単にjsで実行する場合下記のように記述すればOKです。

$(function() {

	var active = $(".animation");

	$(window).scroll(function(){
		var Position = $(active).offset().top - $(window).height();	
	
		if ($(window).scrollTop() > Position) {
			$(this).addClass("active");
		}
	});
});

WordPressには条件分岐タグが存在します。
このタグを使用することで、デバイスによって表示の変更が可能です。

それが、wp_is_mobileという条件分岐タグです。
スマホからのアクセスされているかどうかを判定し、表示の切り替えが可能です。

 // スマホで表示させる内容

 // PCで表示させる内容

PCとスマホで別々の広告を表示させるときや、
PCとスマホでメニューの表示の仕方を変えたい場合に有効です。

メディアクエリーと似たように表示の切り替えが可能ですが、wp_is_mobile()では、端末によって判別するところが大きく違うところです。

注意点として、タブレットもスマホ扱いになってしまうため、スマホ以外はPC表示にしたいい場合は、
function.phpに以下の記述をして、is_mobile()で条件分岐をしてあげます。

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']);
}



  // スマホで表示させる内容

  // スマホ以外でで表示させる内容

会社概要のテーブルなど、

table, tbody, tr, th, td {
display: block;
}

display: block;をしてしてあげることで縦並びになります。

ですが、iOSの実機で表示されたときにSafariではtdが横並びのままで表示されることがあります。

iosのSafariはWebkitです。
WebkitはDOCTYPE宣言をしなければ、tdのdisplay:block;をtable-cellで上書きしてしますため、
立て並びになりません。

DOCTYPE宣言で

を指定してあげることで解決できます。

ユーザーの削除の方法を紹介します。

WordPressで作成したサイトの管理者権限など、クライアントに譲渡する場合や、
自分の書いていたブログをほかの人に譲渡したい場合です。

管理画面にログインした後、メニューの中の「ユーザー」メニューの
「ユーザー一覧」メニューをクリックします。

表示された「ユーザー」画面の削除したいユーザーにマウスカーソルを合わせると、「削除」というボタンがありますので、
それを押すと、「ユーザーの削除」画面が表示されます。

１．「すべてのコンテンツを消去します。」
２．「すべてのコンテンツを以下のユーザーのものにする」

上記の二つを選択できるので、削除するのか、違うユーザーに引き継いでもらうのか選択してください。

選択が終われば、削除を押して完了です。