今更ですがCodepenを登録して使い始めました。 英語でよくわからない、という方のために登録して初歩的な使い方をするまでをご紹介します。 Codepenって？ よく見かけると思うこれです。 See the Pen Codepenって？ by kkdd (@kk8kk) on CodePen. 簡単に説明するとCodepenとは、オンライン上でHTML・CSS・JSを書いて、実際の動きを手軽に確認することができるサービスです。 また、実際に書いたコードは保存しておくことができ […]
スクロールをしたとき、要素の区切りのところで止まってほしいなあなんてことはないでしょうか。 そんな時はCSSのscroll-snap-typeを使うと、特に細かいこだわりさえなければjsに頼らなくてもあっさりと実現できます。 いまいち挙動がわからないかもしれないので、実際に見てみましょう。 縦スクロールをしてみる See the Pen Untitled by kkdd (@kk8kk) on CodePen. ちょっとずつ要素を縦スクロールするとわかりやすいと思うのですが、 […]
wpで投稿や固定ページに画像を入れる際、いざ本番環境に移行をするとなるとパスを変更したい…ということがあると思います。 プラグインで変更する方法もあるのですが、functionに記述をして変更する方法もあります。 場合によってはこちらの方がテスト環境と本番環境どちらにもうまく対応できたりします。 実際に入れてみよう 以下のコードをfunctions.phpに入れてみましょう。 ※functions.phpはバックアップを取りながら作業をしてください。 まずは『〇〇〇』となって […]
Wordpressでfunctions.phpにtitle-tagを記述すると自動的に出力される<title>～</title>タグの内容。 こちらの区切り線や表示する内容を変えたい…ということがあると思います。 今回はそのカスタマイズ方法をご紹介します。 ※functions.phpはバックアップを取りながら作業をしてください。 セパレーターを変更したい まずはセパレーターの変更方法です。 タイトルのセパレーターとして横線で「-」が入っていると思うの […]
CSSのアニメーションを作成してまとめてみました。 今回は単純なテキストに対してのアニメーションになります。 ちなみにaタグのカラーやtext-decorationについてはあらかじめ調整しておいてください。 アニメーションの一覧は下のDEMOに置いておきます。 下線系 左から下線が現れてカーソルを外すと左側に消える サンプルテキスト HTML CSS ::afterで作成した下線をhoverしたときにwidth: 100%;にする、という割と単純なアニメーションです。 左か […]
Wordpressでカスタム投稿を作成したとき、使い方によってはsingleがいらない…なんて時もあります。 また、ややこしいので投稿ページでパーマリンクも表示させたくなかったりします。 そんな時はfunctionにちょっと記述をするだけで簡単に実現できます。 singleページを消す（404ページにする） まずはsingleページを消す方法です。 以下の1行をfunctionに追加するだけで簡単に実現できます。 ※バックアップを取りながら作業しましょう 『〇〇〇』の部分にカ […]
特殊な形で画像を切り抜きたい時単純に1枚画像を用意することもできますが、例えば切り抜きたい画像が動的に変わる場合などはCSSで画像を自由な形で切りぬくことができるようにしておくと便利です。 今回はCSSで画像をマスクする方法をご紹介します。 mask-image プロパティ mask-imageプロパティを使うと、指定した画像の形で切り抜くことができます。 基本的にマスクレイヤーとして使用する画像はSVGなどのパスデータで用意するとサイズの変更もきれいにできます。 HTML […]
アプリの容量を少しでも減らすために、画像の軽量化をしたいということがあるかと思います。 ただ、すでに追加した画像をいじるのは少々手間です。 そんな時はAndroid Studio上で、画像をWebPに変換することができます。 WebPはGoogle公式が開発している静止画のフォーマットのことで、圧縮率が高く容量が軽く済みます。 早速Android Studioで試してみましょう。 Android Studio上で画像をWebPに変換しよう 今回は登録しているjpg画像を変換し […]
Wordpressの投稿一覧画面で例えばアイキャッチ画像や設定したカスタムフィールドの値などの表示をしたい、ということがあると思います。 functionへの記述でも実現はできますが、お手軽にわかりやすく対応できるのが『Admin Columns』というプラグインです。 インストールしよう ひとまずインストールしましょう。 管理画面から行う場合は『プラグイン＞新規追加』から『Admin Column』で検索してインストールします。 インストールしたら有効化します。 あとはプラ […]
カスタム投稿内、かつカスタムタクソノミーをセレクトボックスで検索したいときに地味に悩んだので書き残しておきます。 見た目のイメージとしては下の画像のような感じです。and検索です。 searchform.phpにフォームを作る とりあえずsearchform.phpのような別ファイルを作成してフォームの記述をしていきます。 この作成したテンプレートを呼び出すには または などの記述を該当テンプレートで行いましょう。 searchform.phpに記述していく 作成したsear […]
Android Studioでは4.1以降Material Componentsを使用しているため、デザイン面で強制的にデフォルトのマテリアルデザインが反映されます。 便利な時もあるのですが、反面自分で装飾をしたい…というときに迷うこともあるので解決方法を残しておきます。 ボタンを置いた時の表示 とりあえずこんな感じで、強制的に紫の背景色のボタンが反映されます。 背景色を変えたいので属性の『背景（android:background）』で背景色を指定してみます。 すると… な […]
WEBサイトを見ていると例えばスクロールをしたときにヘッダーが追従してくる、といった動作はよく見かけると思います。 だいたいposition:fixed;等のcssとjs等の組み合わせをしていることが多いと思いますが、cssでposition: sticky;を使うとすぐに実現できます。 ヘッダーを追従させてみる 実際の画面をとりあえず見ていただくと早いかと思います。 DEMOを見ていただくとわかりやすいですが、スクロールをするとヘッダーがついてくるようになっています。 コー […]
Android StudioではデフォルトでGoogle Fotntsをダウンロードする機能があるので、比較的フォントの選択肢が幅広いです。 ただ日本語フォントは用意されていないものも多く、自分で用意してインストールをする必要があります。 今回はAndroid Studioでのフォントのインストールと使用できるようになるまでをご紹介します。 とりあえずフォントを反映させるテキストを置いてみました。 では進めていきます。 フォントを用意する Google Fotntsからフォン […]
アプリを作るからには必要不可欠なアプリアイコン。 色々なサイズを1から用意しなければならない…？など不安に思うかもしれませんがAndroid Studioの機能を使えばあっさり登録できます。 アプリアイコンの設定をしよう プロジェクトの中で『res』を右クリックします。 するとメニューが表示されるので『新規』を選択。 設定に問題なければ『次へ』をクリックします。 あとはいい感じにAndroid Studioがアイコン画像を出力してくれるので『完了』を押しましょう。 これでビル […]
Xcodeで好きなフォントを追加したい！ということがあると思います。 最初は戸惑うかもしれませんが覚えると結構簡単に追加できます。 まずはフォントをダウンロード まずはフォントをダウンロードします。 今回はGoogle Fontsの中の『Noto Sans Japanese』をインストールしてみます。 フォルダにフォントを追加 ダウンロードしたらXcodeで今回フォントを追加するプロジェクトを開きましょう。 ちなみに初期のフォントはこんな感じになっています。 Noto San […]
今回は初心者用にAndroid studioで縦並び・横並びで整列させるレイアウトの仕方をご紹介します。 主に使うのはLinerarLayoutです。 LinerarLayoutで縦並び・横並びで整列させるレイアウトを実現しよう 今回は『デザイン』タブベースで進めていきます。 まずは新しいファイルを開きましょう。 見た通り何もないファイルなので画像を置いていきます。 パレット＞widgets＞ImageView を選択して好きな画像を置きます。 画像を3つほど置きました。 今 […]
Wordpressで記事を書いているときに『目次』が必要になることがあると思います。 そんな時はタイトルタグがあれば自動で目次を生成してくれるプラグイン『Table of Contents Plus』が便利です。 『Table of Contents Plus』を使ってみよう それではまず『Table of Contents Plus』をダウンロードしてみましょう。 管理画面内ではサイドナビの『プラグイン＞新規追加』で『Table of Contents Plus』を検索する […]
レイアウトを組むのに便利な『flexbox』。 今回は『flexbox』と『margin: auto;』を使用していい感じにレイアウトを組んでみましょう。 左に3つの要素、右に1つの要素を置きたい このレイアウトだと左側の3つをさらにdivなどで囲み『justify-content: space-between;』を一緒に指定する方法などが考えられます。 ただその分余計な囲みが増えてしまう、ということでもあります。 そのため一番最後の要素（右側）の要素に対して『margin- […]
Wordpressで記事を複製したい、ということありますよね。 そんな時はプラグインの『Duplicate Page』を使ってみましょう。 Duplicate Pageをインストールして使ってみる まずはプラグインの新規追加画面でプラグインを追加します。 『Duplicate Page』をインストール・有効化します あとはたったこれだけで記事の一覧画面に『複製』が表示されます！ 『複製』を押すと下書きの状態で記事が複製されるので、編集が完了したら『公開』をしましょう！ ちなみ […]
Wordpressのカスタムフィールドで日付の期限内で項目の表示・非表示を切り替えたいときがあるかと思います。 そんな時に便利な方法をご紹介します。 まずはカスタムフィールドで始まりの日付と終わりの日付のフィールドを設定しましょう。 フィールドタイプは『デイトピッカー』を選択します。 ラベル・フィールド名は任意で設定してください。 開始日付、終了日付の2つを用意します。 今回はラベル『開始日付』のフィールド名は『start_date』、 ラベル『終了日付』のフィールド名は『e […]
jQueryでアコーディオンを実現したい、ということはよくあると思います。 実現したいときは単純に『slideToggle』を使うのが早いです。 ただ、いろんな都合によりアコーディオンをcssの切り替え『toggleClass』で実現したいということがあるかもしれないです。 そんな時にちょっとだけ悩んだのでメモがてら書いておきます。 『slideToggle』を使ったアコーディオン まずは『slideToggle』を使ったスタンダードなアコーディオンです。 cssで要素を非表 […]
2021年現在、新規でWebサイトを作成する際はレスポンシブ対応するのがほとんどかと思います。 そんな時PCだけまたはスマホだけでjavascript(jQuery)の読み込みを行いたい時があるかと思います。 実はファイルに何行か追記するだけで簡単に切り分けができます。エラー回避やサイト軽量化のためにもやってみましょう。 ①画面サイズで切り分ける方法 画面サイズで切り分ける際はこのように記述します。cssのメディアクエリと同じようにmax-width: 〇〇pxのように切り分 […]
IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。 元のコード HTML CSS これを参考に修正していきます。 解決方法 解決には高さ指定をIEのみ通常のheightで指定したりtable要素にしたり…等色々あります。 が、flex要素をさらにflex要素で囲むと解決します。 修正したコード HTML CSS flexWrapを追加して、そこにdisplay: flex; […]
こんにちは。今回はiPhone 12 / iPhone 12 Pro のモックアップをまとめました。 一応ライセンスフリーのものを掲載していますが、使用用途によって異なるかと思いますので各サイトをご確認ください。 iPhone 12 iPhone 12のモックのセットです。 Psd iPhone 12 Mockup Set 全色分のモックがそろっています。正面を向いているため使い勝手もよさそうです。 Isometric Psd iPhone 12 Mockup Set 全色分 […]
WordPressでデフォルトの『投稿』ですが、表示部分と異なることも多いので変えてしまいましょう。 function.phpに以下を記入していきます。 ※バックアップを取りながら作業をしてください 『お知らせ』のところを任意の名前にしてください。 これで『投稿』から『お知らせ』に名前が変わりました！
運営会社:株式会社8bit
制作サービス
運営サービス
