コーディングで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で作成したサイトの管理者権限など、クライアントに譲渡する場合や、
自分の書いていたブログをほかの人に譲渡したい場合です。

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

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

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

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

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

WpのCrazy Boneのプラグインをインストールしていれば、
いだれがログインアクセスしたのかを判別することが可能です。

ログイン履歴をチェックすると、時々、
不正アクセスの履歴が残っていたりすることがあります。

主な不正アクセスはロシアやアメリカ、ウクライナなどが多くあります。

不正アクセスを発見した場合、
特定のIPアドレスをブロックできる「WP-Ban」というプラグインを入れるとよいでしょう。

使い方は簡単で、特定のIPアドレスなどの場合は、
プラグインをWordPressにインストールして、ブロックしたいIPアドレスを入力するだけです。

同じ国で、複数のIPアドレスから攻撃を受けている場合,
設定のBanned Host Namesに
中国ならcn
ロシアならrnと入力して登録すればOKです。

日本のサイトなど海外からの閲覧など特にないような場合などは、国ごと登録してしまうのも一つの手かもしれません。

不正ログインをされないようにWPのログインIDやパスワードなど簡単なものにしないように気を付けていきたいですね。

CSSのアニメーションを使って、うねうね動く円を作成することができます。
滅多に使用することはないとは思いますが、独特な雰囲気のサイトややわらかい雰囲気のサイトなどに使用できるのではないでしょうか。

作り方は、border-radiusをキーフレームを使用して動かしてくだけです。

.wave-circle {
  border: 5px solid #87CCA1;
  animation: uneune 5s linear infinite; /* 5秒アニメーションをループ */
  width: 300px;
  height: 300px;
}
@keyframes wave {
  0% {
    border-radius: 30% 50% 80% 50% / 60% 40% 30% 50%; 
  }
  20% {
    border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%; 
  }
  40% {
    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
  }
  60% {
    border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%; 
  }
  80% {
    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
  }
  100% {
    border-radius: 30% 50% 80% 50% / 60% 640% 30% 50%; 
  }
}

SVGやJQueryを使用するほうが、より細かく設定が可能ですが、調整が難しい場合が多いので、CSSで実現可能なところはkeyframeアニメーションを使用するほうがよいでしょう

WordPressをインストールした後、
サイトのURLの変更や、インストール先ディレクトリ変更を行いたいという場合が、時々あるかもしれません。

WordPressでは後からディレクトリの変更やURLの変更が可能です、

ドメイン直下にインストールしてしまった場合、WordPress以外のファイルでサーバー内のファイル構成が乱雑になりがちです。
WordPressではWpやSystemなどの名前のサブディレクトリを作成して、インストールし、TOPページのみドメイン直下に配置する構成が好ましいでしょう。

●WordPressをサブディレクトリへ移動
■手順■
1,WordPressの格納場所、サブディレクトリを作成します。
xxx.com/public_html(ルートディレクトリ)/system

2,ダッシュボードの設定画面で、「WordPressのアドレス（URL）」をサブディレクトリに合わせる
3,WordPressファイルを、先ほど作成した、サブディレクトリに移動
4,index.phpと.htaccessファイルをコピーし、index.phpを修正する

修正前
require( dirname( __FILE__ ) . '/wp-blog-header.php' );
修正後
require( dirname( __FILE__ ) . '/system/wp-blog-header.php' );

5,パーマリンク設定の更新をします。

●WordPressのサイトURLとインストール先ディレクトリ変更

インストール先ディレクトリとサイトURLを変更します。

「http://example.com/wp」にインストールしたけれども、「http://example.com/system」にしたい場合などです。

WordPressの設定ページで、「WordPressのアドレス（URL）」と「サイトのアドレス（URL）」を両方とも、
新しいアドレスに変更する（http://xxx.com/wp -> http://xxx.com/system）
変更後ログアウトし、サーバー上のディレクトリ名を変更します（wp > system）
再度ログインしてパーマリンク設定を更新すれば完了です。

Sassの@mixinという機能を活用すれば、今まで面倒くさかった記述も、効率的にコーディングが可能です。

@mixin に任意で名前を指定してスタイルを指定することでひとまとまりの定義とすることができます。

使用するときには、@includeで呼び出します。

@mixin font {
     color:#333;
     font-size:14px;
     font-weight:bold;
}
.text {
     @include font;
}

また変数を使って

@mixin box($size) {
     width: $size;
     height: $size;
}
■scss
.content {
     @include box(300px);
}
■css{
     width: 300px;
     height: 300px;
}

変数$sizeに格納されたpxの値がwidthとheightに適用されます。

上記を活用して、指定の多いポジションの指定などを@mixinを使用すると

@mixin position ($top: auto, $right: auto, $bottom: auto, $left: auto) {
     position: absolute;
     top: $top;
     right: $right;
     bottom: $bottom;
     left: $left;
}

.content {
     @include position(10px, 50px, 50px, 0);
}

.content {
  position: absolute;
  top: 10px;
  right: 50px;
  bottom: 50px;
  left: 0px;
}

位置の指定が@include position(10px, 50px, 50px, 0);の一行だけで済むので、メンテナンス性や作業効率にもつながります。