属性セレクターを使ってファイルごとにアイコンをつけよう！
例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]
【2022年版】Can I useを使ってみよう！
Can I useというサイトをご存じでしょうか。 IEがそろそろお役目を果たしそうなのでCSSの対応をあまり気にすることもなくなったかな…と思っていたのですが、気づけば新しいCSSプロパティが増えている昨今。 そんな時「あれ、このCSSはこのブラウザで使えるのかな？」と思ったとき調べるのに便利なのがCan I useです。 ※2022年4月現在の情報です 目次1 使い方1.1 CSSプロパティの対応状況を確認したい1.2 ブラウザ利用量にあわせた対応状況を確認する1.3 対 […]
【初心者向け】Codepenを登録して使ってみよう
今更ですが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 […]
表示領域でスナップスクロールを実現！scroll-snap-typeプロパティを使ってみよう！
スクロールをしたとき、要素の区切りのところで止まってほしいなあなんてことはないでしょうか。 そんな時はCSSのscroll-snap-typeを使うと、特に細かいこだわりさえなければjsに頼らなくてもあっさりと実現できます。 いまいち挙動がわからないかもしれないので、実際に見てみましょう。 目次1 縦スクロールをしてみる2 横スクロールをしてみる3 mandatoryとproximityの使い分け4 scroll-snap-alignを使い分ける 縦スクロールをしてみる Se […]
【WordPress】投稿・固定ページに記述している画像のパスを置き換えよう！
wpで投稿や固定ページに画像を入れる際、いざ本番環境に移行をするとなるとパスを変更したい…ということがあると思います。 プラグインで変更する方法もあるのですが、functionに記述をして変更する方法もあります。 場合によってはこちらの方がテスト環境と本番環境どちらにもうまく対応できたりします。 実際に入れてみよう 以下のコードをfunctions.phpに入れてみましょう。 ※functions.phpはバックアップを取りながら作業をしてください。 まずは『〇〇〇』となって […]
【WordPress】納品前に確認したい管理画面カスタマイズ
サイトにWordPressを導入したいというご要望は年々増えています。 受託で制作するサイトでは、WEBに慣れない人でも更新作業を行えるように、WordPressの管理画面をより使いやすくする必要があります。 今回は、クライアントに納品する前にやっておきたい管理画面のカスタマイズをご紹介します。 目次1 ログインURLを変更する2 管理画面の不要なメニューを非表示にする3 投稿のカテゴリー選択肢をradioボタンに変更する4 管理画面の[タグ]を非表示にする5 投稿の一覧画面 […]
【WordPress】titleタグの出力内容を変更しよう！
Wordpressでfunctions.phpにtitle-tagを記述すると自動的に出力される<title>～</title>タグの内容。 こちらの区切り線や表示する内容を変えたい…ということがあると思います。 今回はそのカスタマイズ方法をご紹介します。 ※functions.phpはバックアップを取りながら作業をしてください。 目次1 セパレーターを変更したい2 タイトルの内容を変更する2.1 タイトルのパーツで変更もできる セパレーターを変更した […]
【コピペ可】CSSのhoverアニメーション-テキスト編-
CSSのアニメーションを作成してまとめてみました。 今回は単純なテキストに対してのアニメーションになります。 ちなみにaタグのカラーやtext-decorationについてはあらかじめ調整しておいてください。 アニメーションの一覧は下のDEMOに置いておきます。 目次1 下線系1.1 左から下線が現れてカーソルを外すと左側に消える1.2 左から下線が現れてカーソルを外すと右側に消える1.3 右から下線が現れてカーソルを外すと左側に消える1.4 中央から下線が現れてカーソルを外 […]
【CSS】clip-pathを使ってWEBページに斜めのデザインをコーディングする
WEBページの要素で、斜め方向にカットされたデザインを見たことがあると思います。 これを実際にレスポンシブでコーディングするとなると、工夫が必要です。 （筆者は過去、斜め画像を用意してbackgroundに配置したところ、超ワイドディスプレイで想定外の表示になってしまったりと、ため息をついた覚えがあります） 今回はCSSのclip-pathを使用して、手軽に斜めのデザインを追加してみましょう。 目次1 clip-path1.1 それぞれの値の解説1.2 斜めエフェクトの例1. […]
Google reCAPTCHAのv2とv3の違いのお話
Google reCAPTCHA（リキャプチャ）とはGoogleが提供している認証システムで、現在はv2とv3が用意されています。 なんとなく「v3ってv2の進化版でしょ？」という感じがするのですが、調べてみるとどうもそうとも言い切れないので、まとめてみました。 ちなみに無料で利用できますが大規模サイトやアクセス数の多いサイトはエンタープライズ版を利用する必要があるみたいです。 reCAPTCHAの登録について reCAPTHCAを使用登録する前にGoogleのサービスですの […]
【さくらのレンタル】さくらのレンタルサーバーに移行する際によくあるお話
他社からさくらのレンタルサーバーに移行する際に躓いたこと 他社からさくらのレンタルサーバーに移行する場合に「あれ？」って思うことを何点かまとめました。実はだいたいさくらのヘルプに記載しているのですが、念のためまとめておきます。 目次1 PHP関係1.1 php.iniの設定2 MySQL関係2.1 データベースごとにユーザーアカウントを作成できない2.2 データベース総使用量が決まっている2.3 phpMyAdminのアップロードサイズが32MB3 ドメイン周り3.1 DNS […]
Googleアナリティクス現行verが2023年7月廃止！新verに移行する方法を解説
先日Googleから、Googleアナリティクスの現行バージョン（ユニバーサルアナリティクスといいます）が2023年7月に廃止というアナウンスがなされました。 サポート自体が終了となるため、期間内に新バージョンのGoogleアナリティクス4プロパティに移行が必要になります。今回は、移行が必要かどうかの見分け方や、以降の方法を紹介します。 目次1 現行verと新verの見分け方1.1 プロパティIDの確認方法2 アナリティクス4に移行する2.1 gtag.js（グローバルサイト […]
脱初心者！Google Analytics活用法【イベントトラッキング・参照元(utm)】
機能豊富な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ページを消して、投稿ページでパーマリンクも表示させない
Wordpressでカスタム投稿を作成したとき、使い方によってはsingleがいらない…なんて時もあります。 また、ややこしいので投稿ページでパーマリンクも表示させたくなかったりします。 そんな時はfunctionにちょっと記述をするだけで簡単に実現できます。 目次1 singleページを消す（404ページにする）2 投稿画面でパーマリンクを非表示にする singleページを消す（404ページにする） まずはsingleページを消す方法です。 以下の1行をfunctionに追 […]
CSSを使って画像をマスクしよう！
特殊な形で画像を切り抜きたい時単純に1枚画像を用意することもできますが、例えば切り抜きたい画像が動的に変わる場合などはCSSで画像を自由な形で切りぬくことができるようにしておくと便利です。 今回はCSSで画像をマスクする方法をご紹介します。 目次1 mask-image プロパティ2 clip-path プロパティ3 background-clip mask-image プロパティ mask-imageプロパティを使うと、指定した画像の形で切り抜くことができます。 基本的にマ […]
【android】Webview内のJavascriptやjQueryからアプリ内の関数を呼び出すお話
スマホアプリを作る上でWebViewを抜きには作ることができません。 ゲームやツール系の場合はアプリで実装する必要がありますが、ウェブサービスとの連動を行う場合は、WebViewで作った方が便利だったりします。（androidやiosでの出し分けも不要だったりするので） ただ、アプリ→WebViewやWebView→アプリといったデータの受け渡しが必要になると思います。 例）WebViewのボタンを押すとアプリ内課金の画面が表示される、一覧はwebViewで詳細はアプリ側で表 […]
【Admob】アプリで設定せずにテスト広告を表示するお話
アプリで広告をつける場合メジャーどころなのはAdmobだと思いますが、Admobはアプリ開発者がタップするのを禁じています。 もちろん誤タップもあるので１回タップした時点でNGと言うわけではないですが、何度もやっていると広告が配信されなくなったりアカウントがBANされる可能性もあります。 ですのでAdmobもアプリ開発を行う上で、テスト広告というものを用意し、それを利用することで、上記のペナルティを回避することができます。 目次1 テスト広告IDを使用する2 テストデバイスを […]
【Apple】iOS14以降でトラッキング許可を行うお話
目次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 […]
Laravelを使ってREST APIを作ってみるお話 （インストール編）
目次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までしか対応していなかっ […]
プレーンなPHPで2段階認証（Google Authenticator）を導入するお話
最近はログインID/PW方式だけではセキュリティ的に厳しいと言うことで様々な認証方式が使われています。 SMSを使ったSMS認証もあるのですが、最近はOTP（One Time Password）を用いた認証方式が増えてきています。 スクウェア・エニックスのOTPはネットゲームを行うユーザーには有名でしょうか 目次1 なんかめちゃくちゃ大変そう…2 スマホアプリで認証システムをダウンロードする3 「PHPGangsta/GoogleAuthenticator」をインストールする […]
WordPressでプラグインを作るお話
WordPress（以下WP）はメジャーなCMSであり、様々なプラグインがあるのでそれを利用していろんなサイトを作ることができます。 ただ、どうしても既存のプラグインでは対応できない事もあり、そういう場合は独自でプラグインを作ってしまった方がよかったりしますね。 具体的にはフルスクラッチのCMSをWPに移植する場合などです。 今回は独自プラグインをどうやって作るのかをさわりの部分だけ説明します。 目次1 プラグインの機能1.1 ファイル構成1.2 プラグインの情報を設定する1 […]
Windows10でComposerをインストールするお話
そもそも「Composer」ってなによ？ 「Composer」とはPHPのパッケージライブラリ管理ツールで、フレームワークを含むPHPのパッケージをわざわざダウンロードせずにコマンドだけでインストールすることができる非常に便利なものです。 例えばあるライブラリを使いたい場合、そのライブラリの公式サイトを探してzipやtar.gzなどの圧縮ファイルをダウンロードして展開して所定の場所に置いて・・・ってめんどくさいですが 「Composer」を使うと、ライブラリを記述して叩けば自 […]
FuelPHP を無理矢理PHP8.1に対応するお話
FuelPHPのPHP8.1対応（無理矢理編） 皆さん、PHPのフレームワークは何を使っていますか？ 今から学ぶなら「Laravel」や昔ながらの「CakePHP」でしょうか？ 私は数年前から「FuelPHP」というフレームワークを使っていて「なんて開発しやすいんだ」と感動した記憶があります。 ところが、FuelPHPのリリースがピタッと止まり、PHPのバージョンアップに対して暗雲が立ちこめてきました。 てかフレームワークの選定ミスはかなり痛いですね。私は先物取引には金輪際手 […]
WEBデザイナーの私が産休明けのリモートワーク期間中に使用したツールや、困ったこと
コロナ禍ということもありましたが、私自身産休明けですぐに出社は難しく、在宅で1年間作業をしていました。 その際に使用して便利だったツールや、困ったことなどの所感を書きたいと思います。 目次1 使用していたツール1.1 TeamViewer1.1.1 メリット1.1.2 デメリット1.1.3 TeamViewerで制作作業を行うコツ1.2 Grmo1.2.1 メリット2 その他に困ったこと2.1 Windows GameBarを開くことができない2.2 文字でのコミュニケーショ […]
運営会社:株式会社8bit
制作サービス
運営サービス
