常連

注目の的

社会貢献

自己紹介

### 前提・実現したいこと

初めて質問しますので不躾がありましたらご容赦ください。

http://axiate-ss.jp/test/
このように、swiper.jsを利用して
3つのスライドショー設置し、3枚の画像が次々に入れ替わっていくようにしたいと思っております。
その際、３つの窓のサイズが違うからなのか、時間が経つと少しずつスライド開始のタイミングがずれてしまいます。

時間が経っても同じタイミングでアニメーションが始まるようにしたいです。

解決方法をご教示いただけませんでしょうか。


### 試したこと

speedやdelayをいじってみたのですがなかなかうまくいきません...


### 環境

safariで検証したところ
safariでは時間が経ってもタイミングがずれることがありませんでした。
私が確認している環境はchrome (81.0.4044.138)です。


皆様のお知恵をお借りできますと幸いです。

複数のスライドショーのアニメーションのタイミングを合わせる

```html
---クリック前ページ---
<a href="sample3.html#sample3"></a>
```
```html
---クリック後ページ---
<body>
    <div id="sample1"></div>
    <div id="sample2"></div>
    <div id="sample3"></div>
    <div id="sample4"></div>
</body>
```

ページ内リンクの場合のアンカーリンクを残さない方法はわかるのですが、
調べても解決できなかったので質問させていただきます。

別ページに飛ぶアンカーリンク付きのaタグをクリックし、
遷移後アドレスバーに残るアンカーリンクを残したくない場合はどうすればいいのでしょうか？

よろしくお願いいたします。

別ページに飛ぶアンカーリンク付きのaタグをクリックし、遷移後アドレスバーに残るアンカーリンクを残したくない

###前提・実現したいこと
サブディレクトリにインストールしたwordpress（マルチサイト）をドメイン直下に表示する方法はありますか？
下記が理想の形です。

WordPressのインストール場所
http://example.com/wp/

WordPressの親サイトURL（トップページ）
http://example.com/

WordPressの子サイトURL（トップページ）
http://example.com/子サイト名/

###補足情報

単体のWordPressでの設定方法は見つかりますが、
マルチサイトではなかなか見つかりませんでした。
ご存知の方はご教示お願い致します。
単体のWordPressでの設定方法参考：http://on-ze.com/archives/987

wordpress（マルチサイト）をドメイン直下に表示する方法

サイトを制作中に[fadeThis](http://lwiesel.github.io/jquery-fadethis/)というライブラリを使用し
要素のスライドやフェードインできるようにしているのですが、
ページローディングアニメーション後に画面内にすでに収まっている要素が
ローディング表示時点でスライドインが実行され
ローディング終了時にはすでに画面に出てきてる状態になってしまいます。

これをローディング画面が終わってページが表示されてからスライドインが実行されるようにするには
どのようにしたらいいか悩んでいます。どなたかアドバイスいただけると嬉しいです。

テスト用に参考ページをアップしました。
[http://o-sam.com/loadercheck/loader.html](http://o-sam.com/loadercheck/loader.html)

ページの内容は以下になります。
```ここに言語を入力
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <title>フェードインのアニメーションをページローディング後に再生されるようにしたい</title>
    
    <style>
    #loader-bg {
        text-align:center;
        display: none;
        color:#ffffff;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: #333333;
        z-index: 10000;
        overflow:hidden;
    }
    #loader {
        font-size:10px;
        width:100%;
        height:100%;
        text-align:center;
        display: none;
        color: #ffffff;
        z-index: 20000;
        margin:auto;
    }
    #loader img{
        text-align:center;
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    </style>
    
</head>

<body>
    
    <div id="loader-bg">
        <div id="loader">
            <img src="img/three-dots.svg" width="60" height="60" alt="Now Loading..." />
            
        </div>
    </div>
    
    <div id="wrap">
        
       

        <div class="container-fluid mt-5">
                <div class="row mt-5">
                    <div class="slide-top mb-5 mt-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                        <div class=" pt-1 pb-1">
                            <h3><b>最初の画面内の要素はスライドインの予定がローダーが表示されている間にスライドインされてしまっている</b></h3>
                        </div>

                    </div>
                    <div class="slide-top mb-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                        <div class=" pt-1 pb-1">
                            <h3><b>これらすべてを<br>ページローディング後に再生されるようにしたい</b></h3>
                        </div>

                    </div>
                    <div class="slide-top mb-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                        <div class=" pt-1 pb-1">
                            <h3><b>これらすべてを<br>ページローディング後に再生されるようにしたい</b></h3>
                        </div>

                    </div>
                    <div class="slide-top mb-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                    <div class=" pt-1 pb-1">
                        <h3><b>これらすべてを<br>ページローディング後に再生されるようにしたい</b></h3>
                    </div>

                    </div>
                    <div class="slide-top mb-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                    <div class=" pt-1 pb-1">
                        <h3><b>これらすべてを<br>ページローディング後に再生されるようにしたい</b></h3>
                    </div>

                    </div>
                    <div class="slide-top mb-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                    <div class=" pt-1 pb-1">
                        <h3><b>これらすべてを<br>ページローディング後に再生されるようにしたい</b></h3>
                    </div>

                    </div>


                </div>
        </div>
  
        

        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(function() {
                var h = $(window).height();
                $('#wrap').css('display','none');
                $('#loader-bg ,#loader').height(h).css('display','block');
            });

            $(window).load(function () { //全ての読み込みが完了したら実行
                $('#loader-bg').delay(900).fadeOut(800);
                $('#loader').delay(600).fadeOut(300);
                $('#wrap').css('display', 'block');
            });

            //10秒たったら強制的にロード画面を非表示
            $(function(){
                setTimeout('stopload()',10000);
            });

            function stopload(){
                $('#wrap').css('display','block');
                $('#loader-bg').delay(900).fadeOut(800);
                $('#loader').delay(600).fadeOut(300);
            }
    
            
        </script>
       
  
        <script type="text/javascript" src="js/jquery.fadethis.min.js"></script>
        
        <script type="text/javascript">
            $(window).fadeThis();
        </script>
     
    </div>
    
</body>

</html>
```

ページのローディングアニメーション後にページ内のスライドインアニメーションを実行するようにしたい

### 前提・実現したいこと

現在、写真がグリッドで並ぶウェブページをWordPressで製作しています。
画面内に入って来たらふわっと表示するよくみるものを実装したく、作業しています。

以下のコードで、スクロールするとフェードインするところまでは実装できたのですが、最初から画面内にある要素に関しては、最初のタイミングでスクロールせずともフェードインさせたいです。(写真が極端に少ないとスクロールできないため)



### 該当のソースコード 

```php

// Script
<script type="text/javascript">
  jQuery(function(){
    jQuery(window).scroll(function (){
        jQuery('.fadein').each(function(){
            var elemPos = jQuery(this).offset().top;
            var scroll = jQuery(window).scrollTop();
            var windowHeight = jQuery(window).height();
            if (scroll > elemPos - windowHeight + 300){
                jQuery(this).addClass('scrollin');
            }
        });
    });
  });
</script>


// CSS
<style>

/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 30px);
    transition : all 500ms;
  }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
  }

</style>

```
よろしくお願いいたします。

スクロールしたらフェードインするやつを最初から画面内であれば表示してしまいたい。

YouTube APIを使用して動画を埋め込んだ時にコンソールに下記のようなエラーが出てしまいます。

** エラーメッセージ１ **
```エラーメッセージ
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost').
```

** エラーメッセージ２ **
```エラーメッセージ
Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied.
```
調べてみると下記サイトを見つけたのでできる範囲で試してみたのですが、やり方が違うのか解決できませんでした。

** 参考サイト **
[https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http](https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http)

エラーをなくすためにはどのような対策を入れる必要があるでしょうか？

現在使用している埋め込み用のJavascriptは下記です。
```Javascript
var youtube_ID = $('#sample').data("video");

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var playerReady = false;
function onPlayerReady(event) {
	playerReady = true;
}

function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player ('sample', {
		width: 640,
		height: 390,
		videoId: youtube_ID,
		playerVars: {
			rel: 0,
			autoplay: 0,
			showinfo: 0,
		},
		events: {
			'onReady': onPlayerReady
		}
	});
}

$(function() {
	$('.yt_btn').click(function() {
		if(playerReady) {
			ytPlayer.playVideo();
			$(this).addClass('yt_play');
		}
	});
});
```

```HTML
<div id="sample01" class="ytBtn">
	<div id="sample"></div>
</div>
```
また、このエラーはYouTube Player API リファレンスのページやYouTube APIの埋め込み方の紹介ページにもでていることがあるようですが、頻発するものなのでしょうか？

ご教示いただけますと幸いです。
何卒よろしくお願いいたします。

YouTube APIで動画を埋め込んだ時にエラーが出る

isotope（http://isotope.metafizzy.co/）を使用し、イラストのレスポンシブサイトを作っている初心者です。自分なりに勉強したり、ご教示頂いたりしてある程度まで出来たのですが、『画面が480px以下のとき、複数あるメニュー（isotopeの並べ替えの項目）をドロップダウンにしたい』所で行き詰まっております。
現状を下記にアップしてみました。

http://omatome.sitemix.jp/

ファイルは下記にアップしました。
http://9.gigafile.nu/hc596de80177ef188377febf86056d69d-0410

【やりたいこと】
（1）480pix以下に対応させたいjavascriptは【pix480.js】に書いたのですが、このスクリプトを480px以下の時だけ実施したい。
（2）480px以下でメニューがドロップダウンリストになった時、クリックでリストを開く＞項目を選ぶ＞リストが自動で閉じる＞選択された項目だけが表示されるようにしたい。![イメージ説明](0b8c7b655eecd64bcc19445c7bf4374a.png)

この動作が【pix480.js】のみの変更で叶いますでしょうか？いろいろ、文法やイベントなど勉強してみたのですが、理解できませんでした。できましたら、ズバリ教えて頂ければ助かります。よろしくおねがいします。

追記／もし他の部分にでもおかしいところがあれば、アドバイス頂ければ勉強になります。よろしくおねがいします。

画面が480px以下のとき、メニューをドロップダウンにしたいです

jQueryを主に使ってWebサイトの動きをごにょごにょしているのですが、
レスポンシブデザインでスマホ、タブレット、pcで用いるjQueryを切りたいと考えています！
今回の場合は、pcではlightbox(featherlight.js)で表示していた要素を、スマホではタブ切り替え(生jQueryもしくは何かプラグイン)で表示できるようにしようと思っています。

この際の、**jsを切り替えるベストな方法を教えてくださると助かります。**

ちなみに自分なりに調べたものとしては
- $(window).on('load resize')でwindowのwidthによって切り替える。
- window.matchMediaをつかってwidthによって切り替える。
- window.userAgent.indexOf('iPhone')をつかってユーザーエージェントによって切り替える
などがありました。

$(window).on('load resize')で過去に切り替えたことがあるのですが、
ぎこちなかったり、すこし挙動が出たりして
(#追記：確実にこれのせいとは言えませんが、画面サイズ変更時に2重に読み込まれるのかも。)

どの方法がいいのか迷っております。

もちろん状況に応じて変わるとも思いますし、
$(window).on('load resize')は画面サイズ変更ごとにjsが動いてしまう。iphoneを横に使用した場合の対応。
matchMediaはIE9以下未対応、
useAgentは対応する個体数が多くなるにつれて大変などあるかと思いますが、
**これがおすすめ。これ使うならこうしたほうがいいよ。他にもっといい方法があるよ。や、気をつけるべき点などがあれば教えていただけると助かります。**

レスポンシブにおけるjs(jQuery)の切り替えについて

お疲れ様です。javascript初心者のポテトです。
現在CSVファイルをJavascriptで読み込んで、HTML上に生成するということをやっています。
表示自体はできたのですが、そこからジャンルの切り分けをしたいと考えております。

例えば下記のようなCSVがあるとします。
映画 , 30 , 2000円
映画 , 10 , 1000円
アニメ , 50 , 3000円
ドラマ , 100 , 5000円
ドラマ , 40 , 7000円

そこから1つ目の値が
[映画] だった場合は <ul id="movie"></ul> の中に表示。
[アニメ] だった場合は <ul id="anime"></ul> の中に表示。
[ドラマ] だった場合は <ul id="drama"></ul> の中に表示。

といった具合にCSVの1つ目の値で表示場所を切り分けたいと考えています。
そこで下記のようなJavascriptを書いたのですがまったく動かず悩んでいます（現状何も表示されません）。。。
基本的なことが間違ってる気がするので是非ともご教授していただけると幸いです。

$(function() {
    var csvList;
    var insert = '';
    $.ajax({
        url: 'list.csv',
        success: function(data) {

            // csvを配列に格納
            csvList = $.csv()(data);

              function genre(seisei){
                if(csvList[i][0] == "映画"){
                    var movie = '#movie';

                    // 挿入するHTMLを作成
                    for (var i = 1; i < csvList.length; i++) {
                        insert += '<li><p>' + csvList[i][1] + csvList[i][2] + '</p></li>';
                    };
                    $(movie).append(insert);

                } else if(csvList[i][0] == "アニメ") {
                    var anime = '#anime';

                    // 挿入するHTMLを作成
                    for (var i = 1; i < csvList.length; i++) {
                        insert += '<li><p>' + csvList[i][1] + csvList[i][2] + '</p></li>';
                    };
                    $(anime).append(insert);
                }

                } else {
                    var drama = '#drama';

                    // 挿入するHTMLを作成
                    for (var i = 1; i < csvList.length; i++) {
                        insert += '<li><p>' + csvList[i][1] + csvList[i][2] + '</p></li>';
                    };
                    $(drama).append(insert);
                }
            }
        }
    });
});

【Javascript】読み込んだCSVから特定の値で表示場所を切り分けたい

WordPressサイトを制作中です。

投稿画面で文章や画像を入れていきます。
通常、画像をビジュアルエディターから入れると、

<img src="" alt="">
<img src="" alt="">

このような感じのソースが吐き出されると思いますが、これを画像の枚数によって異なるクラスで内包しレイアウトを変えたいのですが可能なのでしょうか？

「ビジュアルエディターから画像を入力。画像群はdivで覆い、連続して入力された画像の枚数に応じて異なるクラス名を付ける」

例えば、

- 画像を2枚連続で入力した場合

<div class="2枚用のクラス">
  <img src="" alt="">
  <img src="" alt="">
</div>

- 画像を3枚連続で入力した場合

<div class="3枚用のクラス">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
</div>

このように画像を連続で入力した枚数によって異なるクラスを付けたdiv要素で内包したいです。

「ソースエディタからやればいいじゃん」という声もあるかと思いますが、素人でも更新できるような方式にしたいです。

WordPressでもPHPでもjQueryでもどれでも良いのですが、「画像はdivで覆い、連続して入力された画像の枚数に応じて異なるクラス名を付ける」というのが実現できたら嬉しいです。

WordPressで投稿の画像に対してdivで囲み、枚数に応じてレイアウトを変えたいです。

Aサイトから読み込んだ記事をBサイトに自動で投稿させたいです。

また、そのAサイトの記事を更新したらBサイトで自動生成された記事も更新されるようにしたいです。

今の段階でのソースです。
```ここに言語を入力
global $wpdb;
$results = $wpdb->get_results("
SELECT post_title 
FROM wp_posts
");

foreach ($results as $post) {
$page_exists = $post->post_title;
}


//その他DB接続設定
$another_db_user = 'user';
$another_db_pass = 'pass';
$another_db_name = 'name';
$another_db_host = 'localhost';
$another_tb_prefix = 'wp_';

$mydb = new wpdb($another_db_user,$another_db_pass,$another_db_name,$another_db_host);

$mydb->set_prefix($another_tb_prefix);

//一覧情報取得
$result = $mydb->get_results("
SELECT  
m0.post_title,  
m0.id,  
m0.post_name,
m0.guid  
FROM ( select post_title, id, guid, post_name from wp_posts where post_type = 'bio' AND post_status = 'publish'  ) AS m0 
");


foreach ($result as $value) {

if( $value->post_title == $page_exists  ) {

//何もしない

}

else {
$my_access = Array(

'post_author' => '1',
'post_title' => ''.$value->post_title.'',
'post_status' => 'publish',
'comment_status' => 'closed',
'ping_status' => 'closed',
'post_name' => ''.$value->post_name.'',
'post_type' => 'page',
'post_parent' => '115822',
'page_template' => 'template-profile-info.php'
	  );

wp_insert_post($my_access);
}

}
```


**これだと記事は重複されて繰り返し自動投稿します。**

###別のソースの案
```ここに言語を入力
$this_posts = get_posts(
                array(
					'post_type' => 'page',
                    'page_template' => 'template-profile-info.php'
                )
            );
			
$this_post_titles = wp_list_pluck( $this_posts, 'post_title' );
		
// set the DB creds
$another_db_user = 'user';
$another_db_pass = 'pass';
$another_db_name = 'name';
$another_db_host = 'localhost';
$another_tb_prefix = 'wp_';

// setup the DB connection
$mydb = new wpdb( $another_db_user, $another_db_pass, $another_db_name, $another_db_host );

$mydb->set_prefix( $another_tb_prefix );

//一覧情報取得
$result = $mydb->get_results("
SELECT  
m0.post_title,  
m0.id,  
m0.post_name,
m0.guid  
FROM ( select post_title, id, guid, post_name from wp_posts where post_type = 'bio' AND post_status = 'publish'  ) AS m0 
");


foreach ( $result as $value ) {
    if ( in_array( $value->post_title, $this_post_titles ) ) {
        
    } else {
        $my_access = array(
                    'post_author' => '1',
                    'post_title' => $value->post_title,
                    'post_status' => 'publish',
                    'comment_status' => 'closed',
                    'ping_status' => 'closed',
                    'post_name' => $value->post_name,
                    'post_type' => 'page',
                    'post_parent' => '115822',
                    'page_template' => 'template-profile-info.php'
                  );

        wp_insert_post( $my_access );
    }
}
```

###さらに別のソースの案

```ここに言語を入力
function wpse_20160318_do_db_sync() {

	// query the DB
	global $wpdb;
    $result = $wpdb->get_results(
        "
    SELECT post_name
	FROM wp_posts
	WHERE post_status = 'publish'
	AND post_type = 'page'
    "
    );



    // for all the results, let's check against the slug.
    foreach ( $result as $r ) {

        // see if we can find it...
        $post = get_page_by_path( $r->post_name );

    }
	
	// set the DB creds
	$another_db_user = 'user';
	$another_db_pass = 'pass';
	$another_db_name = 'name';
	$another_db_host = 'localhost';
	$another_tb_prefix = 'wp_';

	// setup the DB connection
	$mydb = new wpdb( $another_db_user, $another_db_pass, $another_db_name, $another_db_host );

	$mydb->set_prefix( $another_tb_prefix );

	//一覧情報取得
	$results = $mydb->get_results("
	SELECT  
	m0.post_title,  
	m0.id,  
	m0.post_name,
	m0.guid  
	FROM ( select post_title, id, guid, post_name from wp_posts where post_type = 'bio' AND post_status = 'publish'  ) AS m0 
	");

	foreach ( $results as $value ) {
		
		
		if ( ! $post ) {
			// We're cool, let's create this one.
			$my_access = Array(
		
			'post_author' => '1',
			'post_title' => ''.$value->post_title.'',
			'post_status' => 'publish',
			'comment_status' => 'closed',
			'ping_status' => 'closed',
			'post_name' => ''.$value->post_name.'',
			'post_type' => 'page',
			'post_parent' => '115822',
			'page_template' => 'template-profile-info.php'
			);
			wp_insert_post($my_access); 
			
        }
        else {
            // No need to duplicate this one
            
        }
		
	}
	
	
}

// using on init to make sure the DB is ready to go
add_action( 'init', 'wpse_20160318_do_db_sync' );
```

外部のWordpressから読み込んだ記事を別のWordpressに自動で投稿したいです

###前提・実現したいこと

全くのJavaScript初心者です。
商品在庫数を管理しているcsvを自社サーバ上に置いて、各商品ページで該当のセル（以下の例ではK6）を読み込んで表示させようと試みたのですがうまくいきません。
調べつつ見よう見まねで以下のコード書いてみましたが、何も表示されません。何が問題なのでしょうか。

初歩的な質問で申し訳ありませんがよろしくお願いします。

###ソースコード
```html
<script language="JavaScript"></script>

<span id="txt"></span>
```

###補足情報(言語/FW/ツール等のバージョンなど)