サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]
Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]
例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]
Can I useというサイトをご存じでしょうか。 IEがそろそろお役目を果たしそうなのでCSSの対応をあまり気にすることもなくなったかな…と思っていたのですが、気づけば新しいCSSプロパティが増えている昨今。 そんな時「あれ、このCSSはこのブラウザで使えるのかな？」と思ったとき調べるのに便利なのがCan I useです。 ※2022年4月現在の情報です 目次1 使い方1.1 CSSプロパティの対応状況を確認したい1.2 ブラウザ利用量にあわせた対応状況を確認する1.3 対 […]
今更ですがCodepenを登録して使い始めました。 英語でよくわからない、という方のために登録して初歩的な使い方をするまでをご紹介します。 目次1 Codepenって？2 登録して使ってみよう2.1 HTML2.2 CSS2.3 JS2.4 埋め込みをする Codepenって？ よく見かけると思うこれです。 See the Pen Codepenって？ by kkdd (@kk8kk) on CodePen. 簡単に説明するとCodepenとは、オンライン上でHTML・CSS […]
スクロールをしたとき、要素の区切りのところで止まってほしいなあなんてことはないでしょうか。 そんな時はCSSのscroll-snap-typeを使うと、特に細かいこだわりさえなければjsに頼らなくてもあっさりと実現できます。 いまいち挙動がわからないかもしれないので、実際に見てみましょう。 目次1 縦スクロールをしてみる2 横スクロールをしてみる3 mandatoryとproximityの使い分け4 scroll-snap-alignを使い分ける 縦スクロールをしてみる Se […]
wpで投稿や固定ページに画像を入れる際、いざ本番環境に移行をするとなるとパスを変更したい…ということがあると思います。 プラグインで変更する方法もあるのですが、functionに記述をして変更する方法もあります。 場合によってはこちらの方がテスト環境と本番環境どちらにもうまく対応できたりします。 実際に入れてみよう 以下のコードをfunctions.phpに入れてみましょう。 ※functions.phpはバックアップを取りながら作業をしてください。 まずは『〇〇〇』となって […]
サイトにWordPressを導入したいというご要望は年々増えています。 受託で制作するサイトでは、WEBに慣れない人でも更新作業を行えるように、WordPressの管理画面をより使いやすくする必要があります。 今回は、クライアントに納品する前にやっておきたい管理画面のカスタマイズをご紹介します。 目次1 ログインURLを変更する2 管理画面の不要なメニューを非表示にする3 投稿のカテゴリー選択肢をradioボタンに変更する4 管理画面の[タグ]を非表示にする5 投稿の一覧画面 […]
Wordpressでfunctions.phpにtitle-tagを記述すると自動的に出力される<title>～</title>タグの内容。 こちらの区切り線や表示する内容を変えたい…ということがあると思います。 今回はそのカスタマイズ方法をご紹介します。 ※functions.phpはバックアップを取りながら作業をしてください。 目次1 セパレーターを変更したい2 タイトルの内容を変更する2.1 タイトルのパーツで変更もできる セパレーターを変更した […]
CSSのアニメーションを作成してまとめてみました。 今回は単純なテキストに対してのアニメーションになります。 ちなみにaタグのカラーやtext-decorationについてはあらかじめ調整しておいてください。 アニメーションの一覧は下のDEMOに置いておきます。 目次1 下線系1.1 左から下線が現れてカーソルを外すと左側に消える1.2 左から下線が現れてカーソルを外すと右側に消える1.3 右から下線が現れてカーソルを外すと左側に消える1.4 中央から下線が現れてカーソルを外 […]
WEBページの要素で、斜め方向にカットされたデザインを見たことがあると思います。 これを実際にレスポンシブでコーディングするとなると、工夫が必要です。 （筆者は過去、斜め画像を用意してbackgroundに配置したところ、超ワイドディスプレイで想定外の表示になってしまったりと、ため息をついた覚えがあります） 今回はCSSのclip-pathを使用して、手軽に斜めのデザインを追加してみましょう。 目次1 clip-path1.1 それぞれの値の解説1.2 斜めエフェクトの例1. […]
Google reCAPTCHA（リキャプチャ）とはGoogleが提供している認証システムで、現在はv2とv3が用意されています。 なんとなく「v3ってv2の進化版でしょ？」という感じがするのですが、調べてみるとどうもそうとも言い切れないので、まとめてみました。 ちなみに無料で利用できますが大規模サイトやアクセス数の多いサイトはエンタープライズ版を利用する必要があるみたいです。 目次1 reCAPTCHAの登録について2 結局reCAPTCHA v3とreCAPTCHA v2 […]
目次1 他社からさくらのレンタルサーバーに移行する際に躓いたこと1.1 PHP関係1.1.1 php.iniの設定1.2 MySQL関係1.2.1 データベースごとにユーザーアカウントを作成できない1.2.2 データベース総使用量が決まっている1.2.3 phpMyAdminのアップロードサイズが32MB1.3 ドメイン周り1.3.1 DNSゾーンが既に登録されています1.3.2 無料SSLの設定タイミング1.4 ネームサーバー切り替え前にサーバー上で確認する方法1.5 さく […]
先日Googleから、Googleアナリティクスの現行バージョン（ユニバーサルアナリティクスといいます）が2023年7月に廃止というアナウンスがなされました。 サポート自体が終了となるため、期間内に新バージョンのGoogleアナリティクス4プロパティに移行が必要になります。今回は、移行が必要かどうかの見分け方や、以降の方法を紹介します。 目次1 現行verと新verの見分け方1.1 プロパティIDの確認方法2 アナリティクス4に移行する2.1 gtag.js（グローバルサイト […]
機能豊富なGoogle Analyticsですが、画面も複雑で、サイトに計測タグ仕込んだだけでそのままな場合も多いのではないでしょうか。 一段階ステップアップして、イベントトラッキングと参照元の機能を使用してみましょう。 これらを活用すれば、より深い分析が可能です。 目次1 イベントトラッキング1.1 イベントトラッキングとは？1.2 使用方法1.2.1 イベントハンドラ1.2.2 アクション1.2.3 カテゴリ1.2.4 ラベル1.2.5 値1.3 動作の確認1.4 計測デ […]
Wordpressでカスタム投稿を作成したとき、使い方によってはsingleがいらない…なんて時もあります。 また、ややこしいので投稿ページでパーマリンクも表示させたくなかったりします。 そんな時はfunctionにちょっと記述をするだけで簡単に実現できます。 目次1 singleページを消す（404ページにする）2 投稿画面でパーマリンクを非表示にする singleページを消す（404ページにする） まずはsingleページを消す方法です。 以下の1行をfunctionに追 […]
特殊な形で画像を切り抜きたい時単純に1枚画像を用意することもできますが、例えば切り抜きたい画像が動的に変わる場合などはCSSで画像を自由な形で切りぬくことができるようにしておくと便利です。 今回はCSSで画像をマスクする方法をご紹介します。 目次1 mask-image プロパティ2 clip-path プロパティ3 background-clip mask-image プロパティ mask-imageプロパティを使うと、指定した画像の形で切り抜くことができます。 基本的にマ […]
スマホアプリを作る上でWebViewを抜きには作ることができません。 ゲームやツール系の場合はアプリで実装する必要がありますが、ウェブサービスとの連動を行う場合は、WebViewで作った方が便利だったりします。（androidやiosでの出し分けも不要だったりするので） ただ、アプリ→WebViewやWebView→アプリといったデータの受け渡しが必要になると思います。 例）WebViewのボタンを押すとアプリ内課金の画面が表示される、一覧はwebViewで詳細はアプリ側で表 […]
アプリで広告をつける場合メジャーどころなのはAdmobだと思いますが、Admobはアプリ開発者がタップするのを禁じています。 もちろん誤タップもあるので１回タップした時点でNGと言うわけではないですが、何度もやっていると広告が配信されなくなったりアカウントがBANされる可能性もあります。 ですのでAdmobもアプリ開発を行う上で、テスト広告というものを用意し、それを利用することで、上記のペナルティを回避することができます。 目次1 テスト広告IDを使用する2 テストデバイスを […]
目次1 はじめに2 なぜトラッキング許可が必要？3 Swiftで実装する3.1 Google Mobile Ads SDKのバージョンを7.64.0以降にアップデートする3.2 App Tracking Transparency で許可をリクエストする3.3 実際に許可を表示する4 アプリの多言語化について4.1 多言語化の設定について4.2 InfoPlist.strings を作成する4.3 ちなみに5 最後に はじめに もう1年ほど前の話になりますが、iOSアプリでAd […]
目次1 今回のゴール2 Laravelのインストール2.1 インストール前に2.2 インストールを行う2.3 フォルダのパーミッションを確認する2.4 webサーバーにアップし、確認する3 データベースの設定を行う。3.1 マイグレーションファイルの作成3.2 マイグレーションファイルの編集3.3 フィールドを追加する場合4 最後に 今回のゴール 今回はComposerからLaravelをインストールし、webサーバーで表示され、データベースの構築が行えるまで。 （REST […]
問い合わせフォームや登録フォームなどで入力した値のバリデーションチェックは必須ですが、「あれってなんだったかな」ということがあるので、備忘録代わりにまとめました。 「いや、今ならフレームワークやライブラリであるだろ」というのがある気もしますが… 目次1 絵文字のチェック2 機種依存文字のチェック3 URLの正規表現4 最後に 絵文字のチェック 今はデータベースの文字コードがutf8mb4であれば絵文字も問題なく登録できますが、古いデータベースでutf8までしか対応していなかっ […]
最近はログインID/PW方式だけではセキュリティ的に厳しいと言うことで様々な認証方式が使われています。 SMSを使ったSMS認証もあるのですが、最近はOTP（One Time Password）を用いた認証方式が増えてきています。 スクウェア・エニックスのOTPはネットゲームを行うユーザーには有名でしょうか 目次1 なんかめちゃくちゃ大変そう…2 スマホアプリで認証システムをダウンロードする3 「PHPGangsta/GoogleAuthenticator」をインストールする […]
WordPress（以下WP）はメジャーなCMSであり、様々なプラグインがあるのでそれを利用していろんなサイトを作ることができます。 ただ、どうしても既存のプラグインでは対応できない事もあり、そういう場合は独自でプラグインを作ってしまった方がよかったりしますね。 具体的にはフルスクラッチのCMSをWPに移植する場合などです。 今回は独自プラグインをどうやって作るのかをさわりの部分だけ説明します。 目次1 プラグインの機能1.1 ファイル構成1.2 プラグインの情報を設定する1 […]
目次1 そもそも「Composer」ってなによ？1.1 Windowsでどうやって使うの？2 PHPのダウンロードとインストールを行う2.0.1 PHPのダウンロード2.0.2 環境変数を設定してパスを通す2.0.2.1 （2022.03.09 追加）パスを通すとは？2.0.3 PHPの動作確認を行う2.1 「Composer」のダウンロードおよびインストール2.1.1 「Composer」の動作確認3 最後に4 YoutubeChannelのご紹介 そもそも「Compose […]
運営会社:株式会社8bit
制作サービス
運営サービス
