スクロールバーをCSSで装飾しよう！【chrome・edge・Firefox】
CSSでのスクロールバーの装飾。 以前はchromeとあたりの対応だけだったのが、いつの間にかFirefoxも対応していたので今更感もありますがまとめておきます。 chrome・edge・safari まずは手始めにchrome・edgeの方法をご紹介します。 See the Pen Untitled by kkdd (@kk8kk) on CodePen. コードとしてはこんな感じです。注釈で書いてある通りですが ::-webkit-scrollbar ここでスクロールバー […]
ChatGPTを使って文章を作ってもらう時のアイディア
今まで何となく触っていただけのChatGPT。ちょっと色々と文章を作成してみる機会があったので、私なりのアイディアやコツなどを書いてみます。 もう少しシステム的な記事はこちらをご確認ください。 ChatGPTに登録をする とりあえず登録していない人のために手順をご紹介します。 1.ログイン/サインアップページを開く まずはログイン/サインアップページを開きましょう。 『Sign up』をクリックして、登録画面を開きます。 2.登録するメールアドレスなどを入力・選択する 登録の […]
hoverや時間経過などでグラデーションをアニメーションさせよう！
webサイトのサイトデザインでもよく使うようになったグラデーション。 例えばボタンに使った時にhoverしたとき、背景に使用したときなどにグラデーションの色をアニメーションさせながら変化させることができます。 hoverしたときにグラデーションが動く hoverしたときにグラデーションが左の方に流れていくようなイメージです。 それでは実際のHTML・CSS、動作を見てみましょう See the Pen グラデーションボタン by kkdd (@kk8kk) on CodePe […]
【WordPress】カスタムフィールドを使って記事をピックアップ表示しよう
WordPressで記事をピックアップして掲載したいということがあるかと思います。 そんな時はカスタムフィールドを使うと便利です。 カスタムフィールドを用意しよう カスタムフィールドを用意する方法はなんでもいいですが、今回はAdvanced Custom Fieldsを使います。 Advanced Custom Fieldsをインストールしたら管理画面のサイドメニューに『ACF』というメニューができているので設定をしていきましょう。 今回は『真偽』を使用します。 チェックボッ […]
cubic-bezierを使ってアニメーションの雰囲気を変えてみよう！
cssをよく使う人なら既におなじみ、transitionプロパティによるアニメーション。 例えばhoverをしたとき、スムーズに画像を拡大等してくれます。 コードの例 使用比較 See the Pen デフォルトアニメーション by kkdd (@kk8kk) on CodePen. これでもアニメーションが滑らかになって十分ではあるのですが、アニメーションをがっつり使うならcubic-bezierというイージング（動きの加減速）をさらに細かく自分で指定できる関数を使用した方 […]
色が敷かれてから画像やテキストが表示されるアニメーションを作ってみよう！
Webサイトを見ると最初に色が敷かれてから画像などが表示、そのあと敷かれた色は非表示に…というアニメーションをよく見かけると思います。 言葉にするとややこしいですが図にすると下のような感じです。 これは、CSSのアニメーショと少しのjsで対応できます。 早速作り方の詳細を見ていきましょう。 実際にアニメーションを作ってみよう とりあえず実際に作成したデモと、これから使用するコードをまとめておきます。 js CSS HTML 上記のものを使用して解説していきます。 jquery […]
アプリ初回起動時などに特徴や使い方などを解説する『ウォークスルー画面』のデザインを見てみよう！
初めて入れるアプリは起動時に「どういうアプリなんだろう…？」と恐る恐る使うことがたまにあります。 そんな気持ちを少しでも和らげてくれるのが『ウォークスルー画面』です。 アプリ初回起動時などに特徴や使い方などを解説してくれる画面て見覚えがありませんか？ それを『ウォークスルー画面』と呼びます。 今回はそんないろんなアプリの『ウォークスルー画面』を集めてみましたので、デザインなどの参考にどうぞ。 GO LINE 公式アカウント SODA しまむら タイミー Ponta みてね も […]
【WordPress】記事の一覧を過去一定期間内のものだけ表示しよう
WordPressで一覧表示をする時、例えば現在から1週間以内、1か月以内、1年以内…など一定期間内のものだけ表示させたいということがあるかと思います。 そんな時はWP_Queryの引数内の『date_query』を使用してうまく表示できるようにします。 投稿の一覧表示に『date_query』を使う まずは通常の投稿のループを記述して、その中に『date_query』を追加していきます。 今回は現在から、という指定なのでbeforeについてはnowを指定しています。 aft […]
WordPressのユーザー権限を『User Role Editor』を使って管理しよう
WordPressには 購読者 寄稿者 投稿者 エディター 管理者 といった5つの権限がデフォルトで存在します。 これは記事を登録できる人、記事は登録できず閲覧だけできる人…などの設定がされています。 ただ、運用での条件に合った権限がないという場合もあります。 そんな時は『User Role Editor』という自分の好きなように権限を割り振ることのできるプラグインを使います。 まずはプラグインをインストール まずはプラグインのインストール画面から『User Role Edi […]
Smart Custom Fieldsなどのプラグインを使ったときにメディアでPDFなどが一覧で表示されないときの対処法【WordPress】
カスタムフィールドのプラグインとして便利な『Smart Custom Fields』。 無料ながら繰り返しフィールドも使えたり重宝しているのですが、『メディア』を使用するときに「メディアを絞り込む」の部分が「すべてのメディア」になっているにも関わらず画像だけが表示される現象が起きます。 絞り込みを切り替えたら表示されるのですが、PDFなどをメインで登録したいときなどは若干不便です。 今回は「すべてのメディア」で画像以外のメディアがきちんと表示される方法をご紹介します。 とはい […]
【css】borderにグラデーションをかけよう！
borderにグラデーション、いざやってみようと思うとあれ？borderプロパティに対してグラデーションをかけたらいいのかな？と少し戸惑います。 ちょっとしたコツさえつかめばすぐに再現できますので、ためしてみましょう！ 実際にやってみよう というわけで実際にやってみましょう。 See the Pen グラデーションborder by kkdd (@kk8kk) on CodePen. はい、できました。 cssだけで見てみましょう。 まずは通常のborderを指定します。ベー […]
【WordPress】カテゴリーをチェックボックスからラジオボタンにしよう！
WordPressではカテゴリーがデフォルトだとチェックボックスになっています。 運用の都合で複数にチェックをつけさせたくないな…という場合があるので、そんな時はチェックボックスをラジオボタンにしましょう。 functions.phpに記述をしていこう ※必ずfunctions.phpのバックアップを取りつつ作業をしてください。 通常の『投稿』の場合 通常投稿のカテゴリーの場合は、以下のようにfunctionsに記述を行います。 まずはチェックボックス部分、『#categor […]
『clamp()』関数を使ってフォントサイズを可変にしよう！
様々なデバイス対応をしなければいけない昨今、フォントサイズの指定は悩みどころだったりしますね。 そこで『clamp()』関数を使用すれば1行でフォントサイズの最小値、基準値、最大値を指定することができ、使いようによってはメディアクエリで細かく指定する手間が省けます。 clamp()を実際に使ってみよう では実際の挙動を見てみましょう。 例えば2vwを基準値としたいとき、PCぐらいの表示だと大きすぎるので最大値を20pxに、スマホぐらいの表示だと小さくなりすぎないように最小値を […]
Youtubeなどの動画作成に！フリー素材15選【2022年版】
YouTubeなどに投稿する動画で必要になる素材。 今回は基本的にフリーで手に入れられる素材を提供してくださっているサイトをご紹介します。 ※サイトや素材自体によって規約は変わるので、きちんと確認してからのご使用をお願いします！ YouTuberのための素材屋さん 名前の通りYouTuberのためのような動画素材を配布してくれているサイトです。 mp4を配布してくれているので、Adobe Premiere Proなどのクロマキー機能で背景を透過して使用しましょう。 動画AC […]
レスポンシブでのクリッカブルマップ対応は『image-map-resizer』を使おう！
忘れた頃にごく稀に使うことになるクリッカブルマップ。 レスポンシブでは設定したエリアがずれてしまうので『image-map-resizer』というjsに頼ります。 jQuery非依存で結構簡単に導入できます。 画像とHTMLを用意 とりあえずクリッカブルマップに使用する画像を用意します。 HTMLについては『HTML Imagemap Generator』さんを使用します。 画像をドラッグ&ドロップしましょう。 あとは右側のツールを使って図形をなぞるだけです。大変便 […]
iOSのSafariで100vhを使うとはみ出てしまうときはsvh,lvh,dvhを使おう！
iOSで100vhを使った場合、大きいviewportを基準にするため、小さいviewportの時はアドレスバーの分はみ出てしまったりステータスバーで予想外に隠れてしまったり…ということがあったりしますよね。 そんな時は新しい単位『svh』『lvh』『dvh』を使いましょう。 ちなみにこちらはiOS15.4以上から対応している単位なのでandroid対応も含めご注意ください。 『svh』について 『svh』では小さいviewportの方に合わせてくれます。 たぶんsmall […]
素敵な配色パターンを知りたい！おすすめ配色ツールのまとめ【2022年版】
初心者だと何を選んだらいいのかわからなくなったり、そこそこ経験のある人でも同じようなものを選んでしまったりで悩んでしまう『配色』。 今回はそんな配色のヒントを得られるサイトをご紹介します。 Color Drop 4つの色の組み合わせがずらっと用意されているサイトです。 気になる色をクリックすると右側にカラーコードが発行されるので、あとはコピーするだけ。 用意されている色に限りはありますが、シンプルなものを求めている方におすすめです。 実は地味に画像から色を抽出したりカラーコー […]
【Grid CSS】grid-template-areasプロパティを使用して名前を付けて位置指定する
前回はGrid CSSの『grid-row』『grid-column』を使用してでレイアウトを組んでみました！ 今回はそこから応用的なことをしていきましょう。 グリッド領域に名前をつけて、表示場所の指定に使用する 今回はグリッド領域それぞれに名前をつけて表示場所の指定に使用する方法をご紹介します。 （ちなみに『グリッド領域』の概念についてはこちらをご参照ください） いまいち最初はピンとこないと思いますので実際の画面などを使いながら説明していきます。 See the Pen G […]
【Android】アプリを多言語対応する時、画像も対応する
Androidアプリを多言語対応したい！という時「あれ？そういえば画像はどう対応したらいいんだろう…」と悩む方もいらっしゃると思います。私がそうでした。 今回はそんな方向けの記事です。 ちなみにもともとアプリは形になっていて、テキストベースの言語の切り替えができている前提のお話です。 drawbleのフォルダを言語ごとに用意して入れていく 最初は戸惑うのですが、答えは結構単純で『drawableフォルダを各言語ごとに作成して該当する言語の画像を入れていく』が正解です。 例えば […]
CSS Gridで実際にレイアウトを組んでみよう【初心者向け】
前回初歩をご紹介したCSS Grid。 今回はもっといかにもグリッドレイアウト、という感じのことに挑戦したいと思います。 グリッド線の定義を知ろう まずはグリッド線の定義を知りましょう。基本的にはy軸、x軸的な考え方です。 y軸＝row x軸＝column として定義していきます。 上の画像を見ると要素の区切りになるようなところに数字が振ってあるかと思います。 『column』『row』それぞれ振っている数字を使うことで、うまくレイアウトをしていくことができます。 定義を利用 […]
CSS Gridの初歩を知ろう【初心者向け】
これまではIE対応もそこそこ必要・flexboxでなんとなくこと足りていたのでふわっとした知識だった『CSS Grid』。IE対応も無事なくなったのでこれを機に知識を少しずつ入れて模索中です。 基本的な部分を紹介するので、勉強中の方は一緒に頑張りましょう。 ボックスをグリッドで並べてみる とりあえず基礎的な感じで、ボックスをこんな感じでグリッドで並べてみます。 See the Pen CSS Grid by kkdd (@kk8kk) on CodePen. 基本のcssを使 […]
【Android Studio】Androidアプリでラジオボタンの『選択時』『非選択時』のボタンの背景色と文字色を変える
Androidアプリでラジオボタンを通常のボタンのようにして、かつ『選択時』『非選択時』のボタンを変えたい…ということがあるかと思います。 そんな時はdrawableに要素を用意して、背景色や文字色に指定するだけで簡単に変更することができます。 ラジオボタンを設置 それではプロジェクトを開きましょう。 とりあえずはラジオボタンを2つ設置しました。 今回はボタンぽくしたいのでラジオボタンのデフォルト要素をクリアします。 buttonに対して『@null』を指定してください。 こ […]
【可変対応】中のテキストをはっきり表示させたまま、ブレンドモード（mix-blend-mode）を使おう！
『乗算』などを再現できるcssのブレンドモード（mix-blend-mode）。 大変便利なのですが、背景色だけ乗算をして文字はそのまま…ということが工夫をしないと地味に難しかったりします。 上の画像のように表現をしたかったのに、何も考えずに背景色と一緒にブレンドモード（今回は乗算）を設定すると以下のような感じになってしまいます。 See the Pen ブレンドモード（テキストが埋もれる） by kkdd (@kk8kk) on CodePen. 要はテキストも一緒に乗算に […]
背景に画像や動画を置いてパララックス効果で見せる
サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcssの方を解説していきましょう。 HTML HTMLの方では上部に背景画像を置くエリア『.ma […]
Android Studioでベクター画像を登録しよう
Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 Android Studioを開こう まずはAndroid Studioを開いて、ファイルの一覧を確認します。 ベクター […]
運営会社:株式会社8bit
制作サービス
運営サービス
