フローティングバナーをCSS作る【Web制作】
この記事はフローティングバナーをCSS作る【Web制作】 へ移動しました。 ▶
【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法
数あるJavaScriptスライダープラグインの中で、 ・bxslider.js ・slick.js の著名ですが今回利用したのが「Swiper」です。 Swiperのメリット Swiperはオプションが多く、いろいろなスライダーを作ることができます。 ・IE11対応 ・jQueryが不要 ・スマホOKでタッチやスワイプにも対応 ・オプションがありすぎてちょっと面倒 とりあえず公式サイトにあるDEMOを見てみると実装できるスライダーの豊富さがわかります。 デモを見るだけでも大変です。IE11だと結構動作が ...
【JavaScript】jQueryのSlideToggle()でアコーディオン開閉時にテキストを変更する。
アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。 短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。 今回はそのサンプルを紹介します。 javaScriptでやること ・SlideToggle()を実装する ・SlideToggle()の開閉を判別する ・テキストを変更する。 最初に必須なjQueryの読み込み方 jQueryをページに読み込 ...
メディアクエリ(Media Queries)が効かないときに確認したいこと
メディアクエリ(Media Queries)が効かないときに確認したいこと メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。 メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。 メディアクエリ @media screen and (max-width: 320px); というように表示させるディスプレイサイズごとに CSSを記述していける書き方です。 CSSは原則として下に書く内容が優先度が高く処理されるため(イレギュ ...
スクロールしたらCSS3のグラフがアニメーションするようにする方法
スクロールしたらCSS3のグラフがアニメーションするようにする方法 『アニメーションするグラフを作ってくれ』と言われてしました。 知らない間にアニメーションの需要が出てきているんですね。 少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。 たしかにアニメーションするグラフは見栄えが良いし、 企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。 ちょっとリッチなページ、ひと目を引くページ作成で アニメーションをいれてくれと言われる ...
【Chart.js】グラフを簡単に作れるJavaScriptライブラリ
Chart.jsはグラフをとても簡単に作っていくことができるJavaScriptライブラリです。 ・どのグラフにするか? ・どんな数値・メモリを入れていくか? と中身のデータを入れ替えていくだけでグラフが簡単に出来上がります。 エクセルなどのスプレッドシートでグラフを作る感覚に近いです。 グラフの初期テンプレートは用意されており色を変えるだけでなく、カスタマイズも出来ます。 グラフが表示されるときにアニメーションするのもポイントが高い点です。 グラフがアニメーションするとWEBページとしての見栄えも良いで ...
【Photoshop】テキストに下線を付けたい!テキストツールを使って方法が簡単!
Photoshopでテキストに下線をつける方法 PhotoShopでテキストに下線をつけるには 「テキストツール」の下線のボタンを押すだけです。 テキストツールを選択して文字を入力します。 メニューのウィンドウ > 文字を選択して文字ウィンドウを表示します。 下線を追加したい文字レイヤー内の文字を選択。 文字ウィンドウにある「下線追加ボタン」を押します。 ちなみに縦書きの場合には左側へ線が追加されます。 ただしこのテキストツールをつかって下線を加える方法は 『テキストと下線が同じ色になる』という点に注意で ...
【JavaScript】「next()」「prev()」でjQueryで要素の取得して画像を変更する。
JavaScriptのライブラリとして一般的になったのが「jQuery」です。 いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。 「ボタンをオン・オフしてjQueryで画像を変えたい!」と言う時困るのが ・そもそもの画像の変える書き方がわからない ・画像を変える要素を選択する書き方がわからない というところでしょうか。 初歩的な内容ですが、とても需要があり使うことが多いため書き方を覚えておくと便利です。 jQ ...
【Photoshop】クリップボードからコピペができなかった事例を解決した
【PhotoshopCC】ガイドラインを非表示にするショートカット
古いサイトでたまに見かけるaタグ「javascript:void(0);」の意味【WEB制作】
Javascript 古いサイトの修正をするときに見かけることがあるのが 「javascript:void(0);」 aタグの画面遷移を無効化するために使われていますが、 どんなメリット・デメリットがあるのでしょうか。 「javascript:void(0);」のメリット ・aタグのhrefに書き込むとaタグの画面遷移を無効化 ・カーソルが「指カーソル」の形になるのでボタンの画像が視覚的に”押すもの”とわかりやすくなる。 ・表示枠をタブ化するときなどにURL欄に”#”などがつかない 「javascript ...
【Web制作】IE11でFlexboxが横並びにならなくてハマる
IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました… 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。 結論としては 「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いものだと勘違いしていたんですね。 IE11ではdisplay:-ms-flex;が読み込まれずにいて、 そもそもの「display: flex;」が抜けているとflexboxレイアウトができない という初歩ミスにハマってしまい ...
CSSでレイアウトしたときにリンクの指マークが表示されないときはZ-indexを確認【Web制作】
WEBブラウザはリンク要素の上にマウスカーソルを乗せると 矢印から指マークへ切り替わります。 マウスカーソル リンクカーソル CSSを編集しているときに何度やっても指マークが表示されなくなる不具合が起こることがあります。 その時の解決方法を記載します。 CSSでレイアウトしたときにリンクの指マークが表示されない原因はZ-index よくよく考えれば当たり前なのですが、他のことでいっぱいいっぱいになっていると忘れがちな内容です。 リンクタグを付けているのに指マークが表示されない要素に 『positionのプ ...
「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】
「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】 LityはjQueryを利用したLightbox系のJavaScriptライブラリです。 ポイント ・画像、インラインコンテンツ、iframe、動画URLをポップアップ表示できる ・3kBと超軽量 ・レスポンシブ対応 ・利用にはjQuery本体が必要。 ・MIT license. Lityを使うとどうなる? ユーザーがボタンを押すと、対象の内容をポップアップ表示できます。 ポップアップ表示をすることで、自分の ...
【Web制作】Floatレイアウトを卒業するためのFlexboxのまとめ
Flexboxを使っているWEBサイトが増えてきました。 ちょっと勉強しなくなると進化についていけなくなりますね。
【WEB制作】Lightboxの実装方法。かっこいい画像ギャラリーがJavaScriptの知識なしで簡単実装できる
LightboxはjQueryを利用したJavaScriptライブラリ。 最近は見かける機会が減ってきましたが、写真を押すと写真が拡大表示されて 黒背景に写真が等倍で表示される「写真の見栄えをよくできる」ライブラリです。 サムネイルを押すと、大きい画像が等倍にリサイズされながらフェード処理されて表示されるので 動きがあり非常に見栄えが良いのがポイント高いです。 JavaScriptの専門知識がまったくなくても簡単に導入ができるのでよく利用されています。 ライセンスは The MIT Licenseで商用・ ...
【WordPress】使っているサーバーのPHP,MySQLのバージョンを確認する方法
「WordPress」を使っているときに、PHP,MySQLのバージョン情報を知りたいときがあります。 調べる方法は色々ありまして、一番カンタンなWordPressプラグインを使った方法からご紹介します。 プラグイン「SERVER INFORMATION」をインストールする メニュー > プラグイン >新規追加を押します。 検索フォームに「server info」を入力して「サーバー情報」のプラグインをインストールして 「今すぐインストール」のボタンを押します。 ボタンの表示が「有効化」に変わったら 「 ...
【WordPress】「AFFINGERタグ管理マネージャー2」を使っていてcrawl-66-249-79-112.googlebot.comでハマる。
クリック率計測でログのcrawl-66-249-79-112.googlebot.comでハマる WordPressテーマでAFFINGERを使っているのですが、AFFINGERの便利なプラグインに「AFFINGERタグ管理マネージャー2」というプラグインがあります。 「AFFINGERタグ管理マネージャー2」を使うと、WordPressショートコードで記事内容を一括管理できます。 アフィリエイト向けで記事作成をしている場合に、同じ内容の文章を10,20記事と書いているとき、緊急で修正しないといけなくなる ...
「Revive Old Posts」でError posting on twitter. Error: {"request":"\/1.1\/statuses\/update.json","error":"Read-only application cannot POST."}WordPressプラグインでエラー
予めツイッターアカウントを連携させておくと、WordPressの過去記事が自動ツイートされるWordPressのプラグインで「Revive Old Posts」というプラグインがあります。 「Revive Old Posts」をアップデートしたら、ツイートが止まってしまいました。 しばらく更新していなかったらTwitter Developer Platformの登録・規制が強化されていて 再設定に苦労しますね。 「Revive Old Posts」のLOGを見ると Error posting on twi ...
さくらドメインコンパネにWPXレンタルサーバーのネームサーバーを設定する方法
さくらドメインコンパネにWPXサーバーのネームサーバーを設定する方法
Macを新しくしたときのAdobe CC(Photoshop写真業界向けプログラム)の移行
Macを新しくしたときのAdobe CC(Photoshop写真業界向けプログラム)の移行
WordPressのwp-login.phpの場所を変える
WordPressのwp-login.phpの場所を変える
php-fpm+nginxでload averageが上がった時の対処メモ
php-fpm+nginxでload averageが上がった時の対処メモ
【PhotoshopCC】Photoshopで簡単なカレンダーを手軽に作る方法
【PhotoshopCC】Photoshopで簡単なカレンダーを手軽に作る方法
お名前.comのVPSでのWordPress移行作業
お名前.comのVPSでのWordPress移行作業
お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策
お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策
Nginx+php-fpmで502 Bad gatewayが出たときの対処メモ
Nginx+php-fpmで502 Bad gatewayが出たときの対処メモ
【PhotoshopCC】ガイドラインを非表示にするショートカット
【PhotoshopCC】ガイドラインを非表示にするショートカット
Naverまとめで「サービス利用に制限がかかっているため、ログインできません。」が表示される
Naverまとめで「サービス利用に制限がかかっているため、ログインできません。」が表示される
自分のブログファンを増やすためにプロフィールシェアボタンを記事の下へ置こう。
自分のブログファンを増やすためにプロフィールシェアボタンを記事の下へ置こう。
アプリデザイナー必須のSlicyでPhotoshopのスライス作業効率が30倍になる!
かったるいPhotoshopのスライスから解消
アドセンスのクリック率が落ちてきたら広告のブロックもしてみよう。
アドセンスのクリック率が落ちてきたら広告のブロックもしてみよう。広告のブロック設定方法の紹介
[Javascript]「?」を使ったif文の書き方-三項演算子
[Javascript]「?」を使ったif文の書き方-三項演算子
MAMPを使いローカル環境にテストサイトを作る MarvericksにWordPressをインストールする方法
MAMPを使いローカル環境にテストサイトを作る MarvericksにWordPressをインストールする方法
MAMPを使いローカル環境にテストサイトを作る MarvericksにMAMPをインストールする方法
MAMPをつかってMarvericksにWordPressインストールする方法
Feedlyボタンをブログに設置する方法
Feedlyボタンをブログに設置する方法
ウェブ作成時にMacで画面上の色を拾って16進法でコピーする方法
ウェブ作成時にMacで画面上の色を拾って、16進法でコピーする方法
ブロガーにオススメ!これだけであれば十分なFirefoxのオススメアドオン2013
ブロガーにオススメ!これだけであれば十分なFirefoxオススメアドオン2013
レスポンシブ対応CSSモジュールフレームワークPure
レスポンシブ対応CSSモジュールフレームワークPure
エックスサーバーからシックスコアサーバーへのWordPress移行手順
エックスサーバーからシックスコアサーバーへのWordPress移行手順
【htmlコーディング】Zen Cording for Coda v0.7.1の使い方
【htmlコーディング】Zen Cording for Coda v0.7.1の使い方