質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

3642閲覧

スマホ画面時にparticles.jsの幾何学模様の網の大きさを広げたい

kentaros

総合スコア8

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

1クリップ

投稿2020/05/30 03:09

編集2020/05/30 03:11

前提・実現したいこと・問題

■前提
particles.jsの幾何学模様をwordpressのサイトに実装しています。
particle.jsのプラグインjsファイル、css,他のjsファイルはfuncitions.phpで読み込んでいます。

PC画面の幾何学模様のデザインは下記の「javascript」のソースコードです。

■問題・実現したいこと
PC画面だといい感じの網の大きさになっているのですが、
スマホ画面になると、網の大きさが密集しすぎになっているので、
スマホ画面のみもう少し大きさを広げたいです。

▼該当サイトURL
http://omo-mice.com/wp/

また、javascriptはほぼコピペなので、
どこで網の大きさを調整していいかも分からない状況です。。。。。

該当のソースコード

hogeがparticles.jsの実装部分です。

PHP

1<?php get_header(); ?> 2 <div class="main"> 3 <div id="hoge"></div> 4 </div> 5<?php get_footer(); ?> 6

css

1/* 2================= 3幾何学模様 4================= 5*/ 6 7#hoge { 8 background-color:white; 9 width: 100%; 10 height: 100vh; 11 margin: 0 auto; 12 position:fixed; 13 top:0; 14 z-index: -10; 15}

javascript

1jQuery(function($){ 2 3particlesJS('hoge',{ 4 "particles":{ 5 6//--シェイプの設定---------- 7 "number":{ 8 "value":200, //シェイプの数 9 "density":{ 10 "enable":false, //シェイプの密集度を変更するか否か 11 "value_area":10 //シェイプの密集度 12 } 13 }, 14 "shape":{ 15 "type":"none", //シェイプの形(circle:丸、edge:四角、triangle:三角、polygon:多角形、star:星型、image:画像) 16 "stroke":{ 17 "width":3, //シェイプの外線の太さ 18 "color":"#bbb" //シェイプの外線の色 19 }, 20 //typeをpolygonにした時の設定 21 "polygon": { 22 "nb_sides":5 //多角形の角の数 23 }, 24 //typeをimageにした時の設定 25 "image": { 26 "src": "img/", 27 "width": 600, 28 "height": 200 29 } 30 }, 31 "color":{ 32 "value":"#505050" //シェイプの色 33 }, 34 "opacity":{ 35 "value":0, //シェイプの透明度 36 "random":true, //シェイプの透明度をランダムにするか否か 37 "anim":{ 38 "enable":false, //シェイプの透明度をアニメーションさせるか否か 39 "speed":10, //アニメーションのスピード 40 "opacity_min":0.1, //透明度の最小値 41 "sync":false //全てのシェイプを同時にアニメーションさせるか否か 42 } 43 }, 44 "size":{ 45 "value":70, //シェイプの大きさ 46 "random":true, //シェイプの大きさをランダムにするか否か 47 "anim":{ 48 "enable":false, //シェイプの大きさをアニメーションさせるか否か 49 "speed":10, //アニメーションのスピード 50 "size_min":0.1, //大きさの最小値 51 "sync":false //全てのシェイプを同時にアニメーションさせるか否か 52 } 53 }, 54//-------------------- 55 56//--線の設定---------- 57 "line_linked":{ 58 "enable":true, //線を表示するか否か 59 "distance":180, //線をつなぐシェイプの間隔 60 "color":"#000", //線の色 61 "opacity":0.4, //線の透明度 62 "width":1 //線の太さ 63 }, 64//-------------------- 65 66//--動きの設定---------- 67 "move":{ 68 "speed":1, //シェイプの動くスピード 69 "straight":false, //個々のシェイプの動きを止めるか否か 70 "direction":"top", //エリア全体の動き(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-leftより選択) 71 "out_mode":"out" //エリア外に出たシェイプの動き(out、bounceより選択) 72 } 73//-------------------- 74 75 }, 76 77 "interactivity":{ 78 "detect_on":"canvas", 79 "events":{ 80 81//--マウスオーバー時の処理---------- 82 "onhover":{ 83 "enable":false, //マウスオーバーが有効か否か 84 "mode":"bubble" //マウスオーバー時に発動する動き(下記modes内のgrab、repulse、bubbleより選択) 85 }, 86//-------------------- 87 88//--クリック時の処理---------- 89 "onclick":{ 90 "enable":false, //クリックが有効か否か 91 "mode":"push" //クリック時に発動する動き(下記modes内のgrab、repulse、bubble、push、removeより選択) 92 }, 93//-------------------- 94 95 }, 96 97 "modes":{ 98 99//--カーソルとシェイプの間に線が表示される---------- 100 "grab":{ 101 "distance":400, //カーソルからの反応距離 102 "line_linked":{ 103 "opacity":1 //線の透明度 104 } 105 }, 106//-------------------- 107 108//--シェイプがカーソルから逃げる---------- 109 "repulse":{ 110 "distance":200 //カーソルからの反応距離 111 }, 112//-------------------- 113 114//--シェイプが膨らむ---------- 115 "bubble":{ 116 "distance":400, //カーソルからの反応距離 117 "size":60, //シェイプの膨らむ大きさ 118 "opacity":8, //膨らむシェイプの透明度 119 "duration":2, //膨らむシェイプの持続時間(onclick時のみ) 120 "speed":3 //膨らむシェイプの速度(onclick時のみ) 121 }, 122//-------------------- 123 124//--シェイプが増える---------- 125 "push":{ 126 "particles_nb":4 //増えるシェイプの数 127 }, 128//-------------------- 129 130//--シェイプが減る---------- 131 "remove":{ 132 "particles_nb":2 //減るシェイプの数 133 } 134//-------------------- 135 136 } 137 }, 138 "retina_detect":true, //Retina Displayを対応するか否か 139 "resize":true //canvasのサイズ変更にわせて拡大縮小するか否か 140 141 142 143 } 144); 145 146 147}); 148

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

hogeのwidthを広げると解決できました。
お騒がせしました。

投稿2020/06/10 05:38

kentaros

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問