BLOG﻿メニューとウィジェットFacebookTwitter検索:ABOUT当サイトは株式会社アートグラフィック新潟WEB制作ブログです。WEB制作にまつわることや新潟の情報など投稿していきます。会社のホームページはこちら♪ご注意:記事は当時の情報を元に書かれておりますので、仕様が変更され記事と合わない事がございますので、その際はご容赦願います。以前の記事で、Illustratorのブラシを使用した手描き風の線をご紹介しました。今回は「不透明マスク」を利用した、塗りを手描き風にみせる方法をご紹介します。オブジェクトを選択後、透明パネルの「マスクを作成」をクリックし「不透明マスク」を作成します。右側の黒い四角形をクリックし「不透明マスクの編集」モードに。「クリップ」のチェックを外します。できるだけガサガサしたブラシを選択し線の色を黒(K100)にした状態でオブジェクトの上をなぞります。今回はブラシライブラリの「アート_木炭・鉛筆」から下のブラシを使用しました。なぞった部分が透明になり、アナログのがさがさした塗り残しのような表現ができました。透明パネルの左側の四角形(オブジェクトが表示されている方)をクリックすると編集完了です。イラストだけではなく記号や線などに使っても、アナログ感のあるちょっとしたあしらいにできるのでおすすめです。簡単な一手間でできるものなので、ちょっと違った表現を取り入れたいときなどにぜひお試しください。コメントを残すPHPからJavaScriptへの変数渡しもはやアプリ化しているホームページですが、プログラム部分で使われる基本的な言語が『PHP』と『JavaScript』かと思います。それぞれに得意とする部分がありますので、その得意とする部分で言語を分けて書いて行くと異言語間の変数の共有が必要になってくると思います。今回、PHPとJavaScriptでの変数の受け渡しについてお教えします。※[××××××.php]ファイルでの記述方法になります。変数編】PHPで使っている変数の内容をJavaScriptへ渡しjQueryなんかで処理したい事が多いかもしれません。$bbの内容が$aaへ代入する事ができます。配列変数編】まず、基本的にJavaScriptが多次元配列に対応していないため、通常の配列の受け渡しについて説明します。implode(“,”,$aa);『implode』をつかって配列をカンマ区切りの文字列情報へ組み替えます。bb_csvをsplit()でカンマ区切り配列に再編成。bb_csvをsplit()でカンマ区切り配列に再編成。することで、PHPでデーベースなどの処理を行ない、表示部分ではJavaScriptでjQueryなどを使った柔軟な表示がおこなえます。Homeでは「すべては、お客様のために、社会のために」を企業理念として、「家づくり」に取組んでいます。・レスポンシブwebデザイン・CMSの導入。サムネイルの位置を切り替える年末からの体調不良からいっこうに立ち直れないyasaiです。先日の大寒波からみなさんは立ち直ったでしょうか?さて僕としては2016年1回目のブログとなります。気合い入れていきます!!なんていうと、あとが続かなくなるので、今回はサラッと軽めに参ります。bxSliderとslickです。先日やらせていただいた案件で、メインのスライドエリアの横にサムネイル表示されるパターンのものがあったので、今回はその時のお話です。スマホの時はサムネイルを下へ移動します。今回はslickを使いました。slickの素敵な所は、画面幅にによってオプションを切り替えられるところですね。それと今回の案件でslickを使うことにしたのは、サムネイルの表示が別のHTMLとして書くことができて、CSSでの制御がしやすかったからです。slick.jsとCSSを読み込みます。jQueryのプラグインですので、お約束jQueryと一緒に。href="slick.css">※追記slick-theme.cssは読み込んでいません。slick-theme.cssを読み込むと縮めたときに「戻る」ボタンの表示がうまくいかないようです。一応回避方法を考えてみましたのでコメントをご覧ください。スライダー部分のHTMLはこんな感じに。class="slick-prev"></div></div></div></div>スライダーのメイン部分を.slide-for、サムネイル部分を.slider-nav、矢印を.slick-nav-arrowsでマークアップしています。ひとつポイントなのが、.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしているところでしょうか。動作のためのJavascriptをこんな感じです。false}}]});});メイン.slider-forとサムネイル.slider-navの両方ともスライダーとして動作させます。‘.slider-nav’」として、.slider-navがサムネイルボタンとして機能するようにします。サムネイルの方は、今回は4枚並ぶ形にしました。」なんていうサブタイトルがついてるくらい、使いやすいカルーセルスライダーですなんですよね。slickのよいところ、オプション「responsive」でブレイクポイントを設定し、表示を切り替えます。今回は768pxをブレイクポイントとし、縦型のスライダーにするかどうかを切り替えています。その他詳しいオプションなどは、本家サイトをご覧ください。見た目の方のCSSはこんなです。transparent;}}ちょっと長いですけど、基本的にはたいしたことしてないですね。メディアクエリで768px以上の場合はメイン部分を左に寄せて、サムネイル部分は天地のセンターをとりたかったので、絶対配置で右寄せにしているだけです。この時に幅を%で指定してあるから縮んでいくよ、というからくり。(imgをmax-width:100%にしています).slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしたのは.slick-nav-arrowsをうまいこと配置したかったから、ということです。(.slider-navの位置に合わせて天地or左右のセンターをとりたかった)スマホのときは特にfloatも絶対配置もしていないので、メインの下にサムネイルがやってくるという仕掛けになってます。DEMOのブラウザ幅を広げたり縮めたりするを動作を確認いただけると思います。今回はコードばかりでいつも以上にとっつきにくいですね。追記(2016/04/25)サンプルその2も作ってみました。新発田市を中心に幼稚園と保育園を展開している法人様です。昭和43年に開園した歴史ある幼稚園です。Microsoftサポートが打ち切られました。Microsoftのサポートが打ち切られたらどうなるのでしょう。8・9・10を使用するデメリット●セキュリティの更新サポートが終了するので、更新が止まります。セキュリティの問題が発生しても更新されないので、ウィルスや情報漏えい脅威にさらされ攻撃を受けやすくなります。●ウェブサイトの対応サポートが終了するブラウザにウェブサイトが対応しなくなってきます。今後、見れないウェブサイトが次々と出てきます。9がサポートされます。使い続けることはできますが、約1年後に同じ問題に直面します。これを機会にPCを買い換えるか、OSをアップグレードすることをおすすめいたします。Vistaを利用したいのであれば他のWebブラウザへ移行することをお勧めします。Explorerにバージョンアップを行う。他のWebブラウザへ移行することで、問題は解決致します。これを機会にぜひバージョンアップすることをお勧めいたします。