Web制作

PhotoshopのWEB用に保存時の書き込み権限エラーが出る MacOS Big Sur 11.3.1 / Photoshop 23.22(Photoshop2022)を使っています。 下のエラーが出ました。 Adobe Web用に保存エラー　 この操作を完了できませんでした。書き込み権限エラーが発生しました。 もしかしたら解消できるかもしれません。 私の環境ではようやくWEB書き出しできました。 やったこと [1]セキュリティとプライバシーの設定 セキュリティとプライバシーを開いてPhotoshop2 ...

この記事はフローティングバナーをCSS作る【Web制作】 へ移動しました。 ▶

数あるJavaScriptスライダープラグインの中で、 ・bxslider.js ・slick.js の著名ですが今回利用したのが「Swiper」です。 Swiperのメリット Swiperはオプションが多く、いろいろなスライダーを作ることができます。 ・IE11対応 ・jQueryが不要 ・スマホOKでタッチやスワイプにも対応 ・オプションがありすぎてちょっと面倒 とりあえず公式サイトにあるDEMOを見てみると実装できるスライダーの豊富さがわかります。 デモを見るだけでも大変です。IE11だと結構動作が ...

アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。 短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。 今回はそのサンプルを紹介します。 javaScriptでやること ・SlideToggle()を実装する ・SlideToggle()の開閉を判別する ・テキストを変更する。 最初に必須なjQueryの読み込み方 jQueryをページに読み込 ...

メディアクエリ(Media Queries)が効かないときに確認したいこと メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。 メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。 メディアクエリ @media screen and (max-width: 320px); というように表示させるディスプレイサイズごとに CSSを記述していける書き方です。 CSSは原則として下に書く内容が優先度が高く処理されるため（イレギュ ...

スクロールしたらCSS3のグラフがアニメーションするようにする方法 『アニメーションするグラフを作ってくれ』と言われてしました。 知らない間にアニメーションの需要が出てきているんですね。 少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。 たしかにアニメーションするグラフは見栄えが良いし、 企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。 ちょっとリッチなページ、ひと目を引くページ作成で アニメーションをいれてくれと言われる ...

Chart.jsはグラフをとても簡単に作っていくことができるJavaScriptライブラリです。 ・どのグラフにするか？ ・どんな数値・メモリを入れていくか？ と中身のデータを入れ替えていくだけでグラフが簡単に出来上がります。 エクセルなどのスプレッドシートでグラフを作る感覚に近いです。 グラフの初期テンプレートは用意されており色を変えるだけでなく、カスタマイズも出来ます。 グラフが表示されるときにアニメーションするのもポイントが高い点です。 グラフがアニメーションするとWEBページとしての見栄えも良いで ...

Photoshopでテキストに下線をつける方法 PhotoShopでテキストに下線をつけるには 「テキストツール」の下線のボタンを押すだけです。 テキストツールを選択して文字を入力します。 メニューのウィンドウ ＞ 文字を選択して文字ウィンドウを表示します。 下線を追加したい文字レイヤー内の文字を選択。 文字ウィンドウにある「下線追加ボタン」を押します。 ちなみに縦書きの場合には左側へ線が追加されます。 ただしこのテキストツールをつかって下線を加える方法は 『テキストと下線が同じ色になる』という点に注意で ...

JavaScriptのライブラリとして一般的になったのが「jQuery」です。 いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。 「ボタンをオン・オフしてjQueryで画像を変えたい！」と言う時困るのが ・そもそもの画像の変える書き方がわからない ・画像を変える要素を選択する書き方がわからない というところでしょうか。 初歩的な内容ですが、とても需要があり使うことが多いため書き方を覚えておくと便利です。 jQ ...

【PhotoshopCC】ガイドラインを非表示にするショートカット

Javascript 古いサイトの修正をするときに見かけることがあるのが 「javascript:void(0);」 aタグの画面遷移を無効化するために使われていますが、 どんなメリット・デメリットがあるのでしょうか。 「javascript:void(0);」のメリット ・aタグのhrefに書き込むとaタグの画面遷移を無効化 ・カーソルが「指カーソル」の形になるのでボタンの画像が視覚的に”押すもの”とわかりやすくなる。 ・表示枠をタブ化するときなどにURL欄に”#”などがつかない 「javascript ...

IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました… 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。 結論としては 「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いものだと勘違いしていたんですね。 IE11ではdisplay:-ms-flex;が読み込まれずにいて、 そもそもの「display: flex;」が抜けているとflexboxレイアウトができない という初歩ミスにハマってしまい ...

WEBブラウザはリンク要素の上にマウスカーソルを乗せると 矢印から指マークへ切り替わります。 マウスカーソル リンクカーソル CSSを編集しているときに何度やっても指マークが表示されなくなる不具合が起こることがあります。 その時の解決方法を記載します。 CSSでレイアウトしたときにリンクの指マークが表示されない原因はZ-index よくよく考えれば当たり前なのですが、他のことでいっぱいいっぱいになっていると忘れがちな内容です。 リンクタグを付けているのに指マークが表示されない要素に 『positionのプ ...

「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】 LityはjQueryを利用したLightbox系のJavaScriptライブラリです。 ポイント ・画像、インラインコンテンツ、iframe、動画URLをポップアップ表示できる ・3kBと超軽量 ・レスポンシブ対応 ・利用にはjQuery本体が必要。 ・MIT license. Lityを使うとどうなる？ ユーザーがボタンを押すと、対象の内容をポップアップ表示できます。 ポップアップ表示をすることで、自分の ...

Flexboxを使っているWEBサイトが増えてきました。 ちょっと勉強しなくなると進化についていけなくなりますね。

LightboxはjQueryを利用したJavaScriptライブラリ。 最近は見かける機会が減ってきましたが、写真を押すと写真が拡大表示されて 黒背景に写真が等倍で表示される「写真の見栄えをよくできる」ライブラリです。 サムネイルを押すと、大きい画像が等倍にリサイズされながらフェード処理されて表示されるので 動きがあり非常に見栄えが良いのがポイント高いです。 JavaScriptの専門知識がまったくなくても簡単に導入ができるのでよく利用されています。 ライセンスは The MIT Licenseで商用・ ...

「WordPress」を使っているときに、PHP,MySQLのバージョン情報を知りたいときがあります。 調べる方法は色々ありまして、一番カンタンなWordPressプラグインを使った方法からご紹介します。 プラグイン「SERVER INFORMATION」をインストールする メニュー ＞　　プラグイン　＞新規追加を押します。 検索フォームに「server info」を入力して「サーバー情報」のプラグインをインストールして 「今すぐインストール」のボタンを押します。 ボタンの表示が「有効化」に変わったら 「 ...

クリック率計測でログのcrawl-66-249-79-112.googlebot.comでハマる WordPressテーマでAFFINGERを使っているのですが、AFFINGERの便利なプラグインに「AFFINGERタグ管理マネージャー2」というプラグインがあります。 「AFFINGERタグ管理マネージャー2」を使うと、WordPressショートコードで記事内容を一括管理できます。 アフィリエイト向けで記事作成をしている場合に、同じ内容の文章を10，20記事と書いているとき、緊急で修正しないといけなくなる ...

予めツイッターアカウントを連携させておくと、WordPressの過去記事が自動ツイートされるWordPressのプラグインで「Revive Old Posts」というプラグインがあります。 「Revive Old Posts」をアップデートしたら、ツイートが止まってしまいました。 しばらく更新していなかったらTwitter Developer Platformの登録・規制が強化されていて 再設定に苦労しますね。 「Revive Old Posts」のLOGを見ると Error posting on twi ...

さくらドメインコンパネにWPXサーバーのネームサーバーを設定する方法

Macを新しくしたときのAdobe CC(Photoshop写真業界向けプログラム)の移行

WordPressのwp-login.phpの場所を変える

php-fpm+nginxでload averageが上がった時の対処メモ

【PhotoshopCC】Photoshopで簡単なカレンダーを手軽に作る方法

お名前.comのVPSでのWordPress移行作業

お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策

Nginx+php-fpmで502 Bad gatewayが出たときの対処メモ

【PhotoshopCC】ガイドラインを非表示にするショートカット

Naverまとめで「サービス利用に制限がかかっているため、ログインできません。」が表示される

自分のブログファンを増やすためにプロフィールシェアボタンを記事の下へ置こう。

かったるいPhotoshopのスライスから解消

アドセンスのクリック率が落ちてきたら広告のブロックもしてみよう。広告のブロック設定方法の紹介

[Javascript]「?」を使ったif文の書き方-三項演算子

MAMPを使いローカル環境にテストサイトを作る MarvericksにWordPressをインストールする方法

MAMPをつかってMarvericksにWordPressインストールする方法

Feedlyボタンをブログに設置する方法

ウェブ作成時にMacで画面上の色を拾って、16進法でコピーする方法

ブロガーにオススメ!これだけであれば十分なFirefoxオススメアドオン2013

レスポンシブ対応CSSモジュールフレームワークPure

エックスサーバーからシックスコアサーバーへのWordPress移行手順