投稿者: 工藤

スマホアプリ

【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を開いて、ファイルの一覧を確認します。 ベクター […]

マークアップ

属性セレクターを使ってファイルごとにアイコンをつけよう!

例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

Webサイト制作

【2022年版】Can I useを使ってみよう!

Can I useというサイトをご存じでしょうか。 IEがそろそろお役目を果たしそうなのでCSSの対応をあまり気にすることもなくなったかな…と思っていたのですが、気づけば新しいCSSプロパティが増えている昨今。 そんな時「あれ、このCSSはこのブラウザで使えるのかな?」と思ったとき調べるのに便利なのがCan I useです。 ※2022年4月現在の情報です 使い方 CSSプロパティの対応状況を確認したい CSSプロパティの対応を確認するには、まずTOP画面上部の『Can I […]

Webサイト制作

【初心者向け】Codepenを登録して使ってみよう

今更ですがCodepenを登録して使い始めました。 英語でよくわからない、という方のために登録して初歩的な使い方をするまでをご紹介します。 Codepenって? よく見かけると思うこれです。 See the Pen Codepenって? by kkdd (@kk8kk) on CodePen. 簡単に説明するとCodepenとは、オンライン上でHTML・CSS・JSを書いて、実際の動きを手軽に確認することができるサービスです。 また、実際に書いたコードは保存しておくことができ […]

マークアップ

表示領域でスナップスクロールを実現!scroll-snap-typeプロパティを使ってみよう!

スクロールをしたとき、要素の区切りのところで止まってほしいなあなんてことはないでしょうか。 そんな時はCSSのscroll-snap-typeを使うと、特に細かいこだわりさえなければjsに頼らなくてもあっさりと実現できます。 いまいち挙動がわからないかもしれないので、実際に見てみましょう。 縦スクロールをしてみる See the Pen Untitled by kkdd (@kk8kk) on CodePen. ちょっとずつ要素を縦スクロールするとわかりやすいと思うのですが、 […]

WordPress

【WordPress】投稿・固定ページに記述している画像のパスを置き換えよう!

wpで投稿や固定ページに画像を入れる際、いざ本番環境に移行をするとなるとパスを変更したい…ということがあると思います。 プラグインで変更する方法もあるのですが、functionに記述をして変更する方法もあります。 場合によってはこちらの方がテスト環境と本番環境どちらにもうまく対応できたりします。 実際に入れてみよう 以下のコードをfunctions.phpに入れてみましょう。 ※functions.phpはバックアップを取りながら作業をしてください。 まずは『〇〇〇』となって […]

WordPress

【WordPress】titleタグの出力内容を変更しよう!

Wordpressでfunctions.phpにtitle-tagを記述すると自動的に出力される<title>~</title>タグの内容。 こちらの区切り線や表示する内容を変えたい…ということがあると思います。 今回はそのカスタマイズ方法をご紹介します。 ※functions.phpはバックアップを取りながら作業をしてください。 セパレーターを変更したい まずはセパレーターの変更方法です。 タイトルのセパレーターとして横線で「-」が入っていると思うの […]

マークアップ

【コピペ可】CSSのhoverアニメーション-テキスト編-

CSSのアニメーションを作成してまとめてみました。 今回は単純なテキストに対してのアニメーションになります。 ちなみにaタグのカラーやtext-decorationについてはあらかじめ調整しておいてください。 アニメーションの一覧は下のDEMOに置いておきます。 下線系 左から下線が現れてカーソルを外すと左側に消える サンプルテキスト HTML CSS ::afterで作成した下線をhoverしたときにwidth: 100%;にする、という割と単純なアニメーションです。 左か […]

WordPress

【WordPress】カスタム投稿のsingleページを消して、投稿ページでパーマリンクも表示させない

Wordpressでカスタム投稿を作成したとき、使い方によってはsingleがいらない…なんて時もあります。 また、ややこしいので投稿ページでパーマリンクも表示させたくなかったりします。 そんな時はfunctionにちょっと記述をするだけで簡単に実現できます。 singleページを消す(404ページにする) まずはsingleページを消す方法です。 以下の1行をfunctionに追加するだけで簡単に実現できます。 ※バックアップを取りながら作業しましょう 『〇〇〇』の部分にカ […]

マークアップ

CSSを使って画像をマスクしよう!

特殊な形で画像を切り抜きたい時単純に1枚画像を用意することもできますが、例えば切り抜きたい画像が動的に変わる場合などはCSSで画像を自由な形で切りぬくことができるようにしておくと便利です。 今回はCSSで画像をマスクする方法をご紹介します。 mask-image プロパティ mask-imageプロパティを使うと、指定した画像の形で切り抜くことができます。 基本的にマスクレイヤーとして使用する画像はSVGなどのパスデータで用意するとサイズの変更もきれいにできます。 HTML […]

スマホアプリ

Android Studio上で、jpgやpngなどの画像をWebPに変換しよう

アプリの容量を少しでも減らすために、画像の軽量化をしたいということがあるかと思います。 ただ、すでに追加した画像をいじるのは少々手間です。 そんな時はAndroid Studio上で、画像をWebPに変換することができます。 WebPはGoogle公式が開発している静止画のフォーマットのことで、圧縮率が高く容量が軽く済みます。 早速Android Studioで試してみましょう。 Android Studio上で画像をWebPに変換しよう 今回は登録しているjpg画像を変換し […]

WordPress

WordPressの投稿一覧画面をカスタマイズするなら『Admin Columns』

Wordpressの投稿一覧画面で例えばアイキャッチ画像や設定したカスタムフィールドの値などの表示をしたい、ということがあると思います。 functionへの記述でも実現はできますが、お手軽にわかりやすく対応できるのが『Admin Columns』というプラグインです。 インストールしよう ひとまずインストールしましょう。 管理画面から行う場合は『プラグイン>新規追加』から『Admin Column』で検索してインストールします。 インストールしたら有効化します。 あとはプラ […]

WordPress

【WordPress】カスタム投稿内でカスタムタクソノミーをセレクトボックスで絞り込み検索したい

カスタム投稿内、かつカスタムタクソノミーをセレクトボックスで検索したいときに地味に悩んだので書き残しておきます。 見た目のイメージとしては下の画像のような感じです。and検索です。 searchform.phpにフォームを作る とりあえずsearchform.phpのような別ファイルを作成してフォームの記述をしていきます。 この作成したテンプレートを呼び出すには または などの記述を該当テンプレートで行いましょう。 searchform.phpに記述していく 作成したsear […]

スマホアプリ

【解決方法】Android Studioでボタンの装飾ができない?

Android Studioでは4.1以降Material Componentsを使用しているため、デザイン面で強制的にデフォルトのマテリアルデザインが反映されます。 便利な時もあるのですが、反面自分で装飾をしたい…というときに迷うこともあるので解決方法を残しておきます。 ボタンを置いた時の表示 とりあえずこんな感じで、強制的に紫の背景色のボタンが反映されます。 背景色を変えたいので属性の『背景(android:background)』で背景色を指定してみます。 すると… な […]

マークアップ

position: sticky;を使って追従してくる要素を作ってみよう

WEBサイトを見ていると例えばスクロールをしたときにヘッダーが追従してくる、といった動作はよく見かけると思います。 だいたいposition:fixed;等のcssとjs等の組み合わせをしていることが多いと思いますが、cssでposition: sticky;を使うとすぐに実現できます。 ヘッダーを追従させてみる 実際の画面をとりあえず見ていただくと早いかと思います。 DEMOを見ていただくとわかりやすいですが、スクロールをするとヘッダーがついてくるようになっています。 コー […]

スマホアプリ

Android Studioで外部のフォントを追加して使ってみよう!

Android StudioではデフォルトでGoogle Fotntsをダウンロードする機能があるので、比較的フォントの選択肢が幅広いです。 ただ日本語フォントは用意されていないものも多く、自分で用意してインストールをする必要があります。 今回はAndroid Studioでのフォントのインストールと使用できるようになるまでをご紹介します。 とりあえずフォントを反映させるテキストを置いてみました。 では進めていきます。 フォントを用意する Google Fotntsからフォン […]

スマホアプリ

【Android Studio】アプリアイコンの設定をしよう!

アプリを作るからには必要不可欠なアプリアイコン。 色々なサイズを1から用意しなければならない…?など不安に思うかもしれませんがAndroid Studioの機能を使えばあっさり登録できます。 アプリアイコンの設定をしよう プロジェクトの中で『res』を右クリックします。 するとメニューが表示されるので『新規』を選択。 設定に問題なければ『次へ』をクリックします。 あとはいい感じにAndroid Studioがアイコン画像を出力してくれるので『完了』を押しましょう。 これでビル […]

スマホアプリ

Xcodeでカスタムフォントを追加して使ってみよう!

Xcodeで好きなフォントを追加したい!ということがあると思います。 最初は戸惑うかもしれませんが覚えると結構簡単に追加できます。 まずはフォントをダウンロード まずはフォントをダウンロードします。 今回はGoogle Fontsの中の『Noto Sans Japanese』をインストールしてみます。 フォルダにフォントを追加 ダウンロードしたらXcodeで今回フォントを追加するプロジェクトを開きましょう。 ちなみに初期のフォントはこんな感じになっています。 Noto San […]

スマホアプリ

Android studioで縦並び・横並びで整列させるレイアウト【初心者用】

今回は初心者用にAndroid studioで縦並び・横並びで整列させるレイアウトの仕方をご紹介します。 主に使うのはLinerarLayoutです。 LinerarLayoutで縦並び・横並びで整列させるレイアウトを実現しよう 今回は『デザイン』タブベースで進めていきます。 まずは新しいファイルを開きましょう。 見た通り何もないファイルなので画像を置いていきます。 パレット>widgets>ImageView を選択して好きな画像を置きます。 画像を3つほど置きました。 今 […]

WordPress

WordPressで目次のプラグインを使うなら『Table of Contents Plus』!

Wordpressで記事を書いているときに『目次』が必要になることがあると思います。 そんな時はタイトルタグがあれば自動で目次を生成してくれるプラグイン『Table of Contents Plus』が便利です。 『Table of Contents Plus』を使ってみよう それではまず『Table of Contents Plus』をダウンロードしてみましょう。 管理画面内ではサイドナビの『プラグイン>新規追加』で『Table of Contents Plus』を検索する […]

マークアップ

flexboxとmargin: auto;を使ってレイアウトを組んでみよう

レイアウトを組むのに便利な『flexbox』。 今回は『flexbox』と『margin: auto;』を使用していい感じにレイアウトを組んでみましょう。 左に3つの要素、右に1つの要素を置きたい このレイアウトだと左側の3つをさらにdivなどで囲み『justify-content: space-between;』を一緒に指定する方法などが考えられます。 ただその分余計な囲みが増えてしまう、ということでもあります。 そのため一番最後の要素(右側)の要素に対して『margin- […]

WordPress

WordPressで記事を複製するなら『Duplicate Page』を使おう!

Wordpressで記事を複製したい、ということありますよね。 そんな時はプラグインの『Duplicate Page』を使ってみましょう。 Duplicate Pageをインストールして使ってみる まずはプラグインの新規追加画面でプラグインを追加します。 『Duplicate Page』をインストール・有効化します あとはたったこれだけで記事の一覧画面に『複製』が表示されます! 『複製』を押すと下書きの状態で記事が複製されるので、編集が完了したら『公開』をしましょう! ちなみ […]

1 2 3 7