常連

注目の的

社会貢献

質問力

### 前提・実現したいこと

ScrollHintという、Javascriptライブラリを動作させたいのですが、動作しません。

[ScrollHint]
https://appleple.github.io/scroll-hint/

### 試したこと

サイトに記載のあるとおり、ヘッダ部に、

```ここに言語を入力
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
```

を記載しました。

また、横スクロールするテーブルを、

```ここに言語を入力
<div class="js-scrollable">
</div>
```

で囲みました。

初めはWordPressのテーブルに実装してみましたがうまくいかず、
ローカルにて、ミニサンプルミニサイトを作成し、CDNではなく、ダウンロードしてみて試すこともしましたが、結果は同じで、ScrollHintのアイコンは表示されませんでした。

気になるのは、

```ここに言語を入力
new ScrollHint('.js-scrollable');
```

この記述ですが、これはオプションを設定するつもりがなくても、記載しなければならないのでしょうか？


### お聞きしたいこと

ScrollHintを使うのには、

```ここに言語を入力
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
```

と、

```ここに言語を入力
<div class="js-scrollable">
</div>
```

以外に、

```ここに言語を入力
new ScrollHint('.js-scrollable');
```

の記述も必要なのでしょうか？

もし、必要なのであれば、どこにどう記載すればいいのでしょうか？

ScrollHIntというJavascriptライブラリを動作させるのに必要なコード

一定の位置までスクロールすると、上部に固定されるヘッダーを使っています。
ヘッダー固定時に、ページ内リンクの高さのずれを解消するため、JavaScriptで調整しようとしています。

以下のページを参考にしました。
[position:fixedでヘッダ固定時のページ内リンクのずれを解消したい](https://www.tam-tam.co.jp/tipsnote/html_css/post4776.html)


しかし、offset().topの値がヘッダー固定前と固定後でずれているようです。


### 該当のソースコード
```js
$(function () {
    $('a[href^="#"]').click(function () {
        //ヘッダーの高さを取得
        var headerHeight = $('.scroll-header').height();
        console.log(headerHeight);
        //アンカーの値取得
        var href = $(this).attr("href");
        //移動先ターゲットを取得
        var target = $(href == "#" || href == "" ? 'html' : href);
        console.log(target);
        //ターゲットの座標を取得
        var target_offset = target.offset().top;    
        console.log(target_offset);
        var position = target.offset().top - headerHight; //ヘッダの高さ分位置をずらす
        $("html, body").animate({ scrollTop: position }, 400, "swing");
        return false;
    });
});
```

移動先のターゲット（var target）は、ヘッダー固定前と固定後で、値は変わりません。
しかし、ターゲットの座標を取得すると、ヘッダー固定前と固定後で値が変わっています。



### 試したこと
target.offset().topをtarget.get( 0 ).offsetTopにしたりしてみましたが、解決できず。

javascript、offset().topの値が、固定ヘッダーの前と後でずれてしまう

２つの特定要素の高さの合計を別要素のbottomに指定したいです。
具体的には以下の構成で「hoge1」と「hoge2」の高さの合計をhogeのインラインstyle属性のbottomに指定したいです。

```lang-html
<div class="hoge1"></div>
<div class="hoge2"></div>
<div class="hoge" style="bottom:;「hoge1」と「hoge2」の高さの合計"></div>
```

以下のとおり、１種類の変数のみであれば、取得できるのですが２つの合計の取得方法がわかりませんでした。

```lang-javascript

var height1 = $('.hoge1').outerHeight(true);
var height2 = $('.hoge2').outerHeight(true);
$('.hoge').css('bottom',height1+'px'); 
```

ご教授の程よろしくお願いいたします。

２つの特定要素の高さの合計を別要素のbottomに指定したい

現在、CSSを使って、丸い要素を用意しその中に正方形の画像を配置し、その画像をhoverで拡大させるというWEBデザインを実装しようとしています。

[CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト](http://www.nxworld.net/tips/css-image-hover-effects.html)

上記のサイトの１つ目のZoom-Inを使って実装しようとしたのですが、

- FireFoxとInternetExplorerで表示した場合

![firefox](a69e83c117cd40cd584e03460cb413e1.gif)

うまくズームできています。

- Chromeで表示した場合

![chrome ver](8be6ebcbed431856a38fac29bbf6ba3a.gif)

hoverの動作中にimgの画像が前面に出てきてしまっています。一時的にoverflowを無視するような形になっているのでしょうか。

z-indexを指定するなどしてみたのですが、うまくいきませんでした。
どのようにすれば、chromeでも正常に動くのでしょうか？
アドバイスなど頂けると嬉しいです。
よろしくお願いします。

以下、コードです。

```html
<div class="img-block"><img src="img/sample.jpg"/></div>
```
```css
.img-block {
	width: 150px;
	height: 150px;
	overflow: hidden;
	border-radius: 50%;
	border: 10px solid #CCC;
}

.img-block img {	
	width: 150px;
	height: 150px;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.img-block:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
```

##追記(1) MasakazuFukamiさんの方法
background-imageを操作する方法です。
こういった方法もあるんですね。大変勉強になります。

- Chromeで表示
![Fukamiさんの方法](11d7a7a03b832791ceac0979fae2de0a.gif)

```html
<div class="img-block">
    <div class="img-1"></div>
</div>
```

```css

.img-block {
	width: 150px;
	height: 150px;
	overflow: hidden;
	border-radius: 50%;
	border: 10px solid #CCC;
}

.img-1 {    
    width: 150px;
    height: 150px;
    background:url(../img/sample.jpg);
    background-size: 150px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.img-1:hover {
    background-size: 200px;
}
```

また、中心にスケールさせる方法もご教示頂きました。
img-1:hoverに追記する形で

```css
.img-1:hover {
    background-size: 200px;
    background-position: 50%;
}
```
とすると、中心にぬるっとスケールするバージョンもできました。

- chromeで表示

![Fukamiさんの方法2](03e160ea6b47e61dc267dfb2a9a0e99f.gif)


##追記(2) 正常に実装できました

色々試してみたのですが以下のコードで狙った動作をChromeでも実装できました！

- Chromeで表示
![chrome成功例](d75dd30e3a0a8aa8b04f16b8696e2175.gif)




```html
<div class="img-block"><img src="img/sample.jpg"></div>
```
```css
.img-block {
	width:150px;
	height:150px;
	border-radius:50%;
	border: 10px solid #CCC;

	position:relative;
	overflow:hidden;
	z-index:1;
}

.img-block > img {
	width: 150px;
	height: 150px;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition:all .2s ease;
	transition:all .2s ease;
}

.img-block:hover img{
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
}
```

親要素のimg-blockを、
- position:relative
- z-indexを指定
する必要があったようです!

CSSによって丸くした要素の中に置いた画像をhoverで拡大させる方法

表題の通りMAMPでphpMyAdminにアクセスできません。
初期設定はApache Portを8888から80に変更したぐらいです。
現在添付画像のようにアクセスできない状態となっております。

![イメージ説明](5801ddfb6be1523e6b32b20c5c1daa69.png)

こちらはどのようにすれば利用できるようになるのでしょうか。
初歩的な質問で申し訳ございません。

現在MAMPは7.1.1を利用しております。

MAMPでphpMyAdminがアクセスできない

CSSで表示領域のoverflowをscrollにすると

当然スクロールバーがでますが

これを消す方法はありますか。スクロールはできるがスクロールバーは表示されない状態にしたいです。

overflow:scroll でスクロールバーを消したい

現在、サイトをリニューアル中です。
切り替えに際しgoogleアナリティクスのデータ集計を途切れさせたくないのですが、新サイトとアナリティクスとの紐付けはどのようにしたら良いのでしょう。

作成中のサイトは当然ながら現サイトとURL異なるため、現サイトと同一プロパティ内に置けません。

リニューアルサイトはwordpressで作製中なのですが、この場合、UAコードだけとりあえず埋め込んでおけば切り替え後googleさんのほうで読み込んでもらえるのでしょうか。

またサーチコンソールに関してもどのように引き継ぎすればいいのか（サイトマップ登録の切り替え方法）わからず困っています。
ご存知の方、ご指南ください。

サイトリニューアルに伴うgoogle解析ツール設定

ブログ内でインスタグラムのURLを設置しています。
今現在クリックするとweb版でインスタグラムを開くようになっているのですが
これをアプリで開くようにしたいのですがそうするにはどのようにすればいいでしょうか？ご教授お願いいたします！

インスタグラムのURLについて

###前提・実現したいこと
instagramのapiを使用して自分のアカウントの画像を最新8件出そうとしています。
テストURLで作成した際は問題なく動作していたのですが、本番用のURLでは画像が取得できなくなってしまいました。

Manage ClientでのWebsite URL:は本番用のURLで登録し
Valid redirect URIs:は本番用URLとテスト用URLの両方が登録してあります。

本番用URLを
http://example.com/
とするとテストURLは
http://example.com/test/

アクセストークンは下記の方式で「CLIENT ID」にCLIENT ID、「リダイレクトURL」にテストではテスト用のURL、本番では本番用のURLを入れて取得しました。

https://instagram.com/oauth/authorize/?client_id=「CLIENT ID」&redirect_uri=「リダイレクトURL」&response_type=token

対策方法などご存知の方がいましたら、教えていただけると助かります。

###データ表示箇所コード
```html
<div class="instagram clrFix"></div>
```

###データ取得用コード
```js
$(function() {
  $(".instagram.clrFix").text("loading...");
    $.ajax({
      url: "https://api.instagram.com/v1/users/self/media/recent",
      data: { access_token: "取得したアクセストークン" },
      dataType: "jsonp",
      error: function(jqXHR, textStatus, errorThrown) {
        $(".instagram.clrFix").text(textStatus);
      },
      success: function(data, textStatus, jqXHR) {
        $(".instagram.clrFix").text("");
        for (var i = 0, length = 8; i < length; i++) {
          var d = data.data[i];
          $(".instagram.clrFix").append(
          $("<div>").addClass("image").append($("<a>").attr("href", d.link).attr("target", "_blank").append($("<img>").attr("src", d.images.standard_resolution.url))));}
        }
    });
});
```

###試したこと
一度、テスト用のURLをValid redirect URIsから外して再登録しましたが変わりませんでした。