WordPressの投稿一覧画面をカスタマイズするなら『Admin Columns』
Wordpressの投稿一覧画面で例えばアイキャッチ画像や設定したカスタムフィールドの値などの表示をしたい、ということがあると思います。 functionへの記述でも実現はできますが、お手軽にわかりやすく対応できるのが『Admin Columns』というプラグインです。 目次1 インストールしよう2 設定をしよう3 タイプなどのオプション3.1 タイプの例 インストールしよう ひとまずインストールしましょう。 管理画面から行う場合は『プラグイン＞新規追加』から『Admin C […]
【WordPress】カスタム投稿内でカスタムタクソノミーをセレクトボックスで絞り込み検索したい
カスタム投稿内、かつカスタムタクソノミーをセレクトボックスで検索したいときに地味に悩んだので書き残しておきます。 見た目のイメージとしては下の画像のような感じです。and検索です。 目次1 searchform.phpにフォームを作る2 searchform.phpに記述していく searchform.phpにフォームを作る とりあえずsearchform.phpのような別ファイルを作成してフォームの記述をしていきます。 この作成したテンプレートを呼び出すには または などの […]
【PremierePro】自動追尾で動画の被写体にモザイクをかける
PremiereProのモザイクフィルターを使用すれば、ワンクリックで簡単にモザイクをかけることができます。 目次1 被写体を自動追尾する便利機能2 手順2.1 1.モザイクエフェクトをかける2.2 2.モザイクの範囲を調整する2.3 3.自動追尾する3 YoutubeChannelのご紹介 被写体を自動追尾する便利機能 PremiereProのモザイクフィルターは、被写体を自動追尾します。 歩く男性の顔にモザイクをかけ、自動追尾させた例です。簡単にできるのでやってみましょう […]
【解決方法】Android Studioでボタンの装飾ができない？
Android Studioでは4.1以降Material Componentsを使用しているため、デザイン面で強制的にデフォルトのマテリアルデザインが反映されます。 便利な時もあるのですが、反面自分で装飾をしたい…というときに迷うこともあるので解決方法を残しておきます。 目次1 ボタンを置いた時の表示2 android:backgroundTintの指定も効かないことがある3 まとめ3.1 通常だったら3.2 もし変更できなかったら ボタンを置いた時の表示 とりあえずこんな […]
position: sticky;を使って追従してくる要素を作ってみよう
WEBサイトを見ていると例えばスクロールをしたときにヘッダーが追従してくる、といった動作はよく見かけると思います。 だいたいposition:fixed;等のcssとjs等の組み合わせをしていることが多いと思いますが、cssでposition: sticky;を使うとすぐに実現できます。 目次1 ヘッダーを追従させてみる1.1 フッターも追従させてみる2 パララックス的な表現をしてみる3 ブラウザの対応状況 ヘッダーを追従させてみる 実際の画面をとりあえず見ていただくと早いか […]
Android Studioで外部のフォントを追加して使ってみよう！
Android StudioではデフォルトでGoogle Fotntsをダウンロードする機能があるので、比較的フォントの選択肢が幅広いです。 ただ日本語フォントは用意されていないものも多く、自分で用意してインストールをする必要があります。 今回はAndroid Studioでのフォントのインストールと使用できるようになるまでをご紹介します。 とりあえずフォントを反映させるテキストを置いてみました。 では進めていきます。 目次1 フォントを用意する2 Android Studi […]
【PremierePro】Ultraキーを使って動画の背景を透明に切り抜く
Premiere ProのUltraキーエフェクトを使用すると、動画の一部を透明にすることができます。 イメージ的には、テレビの天気予報でキャスターと定点カメラの映像を合成して表示するといったような状況で使用できます。最近では、実況動画などでも似た手法がよく見受けられますね。 目次1 Ultraキーの特徴2 Ultraキーの使い方3 YoutubeChannelのご紹介 Ultraキーの特徴 Ultraキーは、動画の背景を透明にすることができます。 実際には特定色を指定して透 […]
CSSだけでカルーセルを実装する
IEがお役目を終えるということで、CSSでスクロールスナップが使用できるようになります。 これを使用すると、CSS数行で簡易的なカルーセルを実装できるようになります。 特にスマートフォンなどのタッチデバイスではJSでの実装とほとんど変わらないような操作感を実現できます。 ＜JSを使用しないスクロール例＞ 目次1 スクロールスナップさせる2 実装例 スクロールスナップさせる スクロールをスナップさせるには、scroll-snap-typeとscroll-snap-alignを使 […]
【Android Studio】アプリアイコンの設定をしよう！
アプリを作るからには必要不可欠なアプリアイコン。 色々なサイズを1から用意しなければならない…？など不安に思うかもしれませんがAndroid Studioの機能を使えばあっさり登録できます。 目次1 アプリアイコンの設定をしよう2 アイコン設定をした後のビルドでエラーが出たら3 YoutubeChannelのご紹介 アプリアイコンの設定をしよう プロジェクトの中で『res』を右クリックします。 するとメニューが表示されるので『新規』を選択。 設定に問題なければ『次へ』をクリッ […]
【CSS】乗算・やオーバーレイなどのブレンドモードで要素を重ねる
Photoshopなどのグラフィックソフトで使用する乗算やオーバーレイなどのブレンドモードですが、CSSでも使用することができます。 目次1 mix-blend-mode2 ブレンドモード一覧3 対応ブラウザ4 YoutubeChannelのご紹介 mix-blend-mode ブレンドモードを使用するには、前面に重なる要素に、CSSで mix-blend-mode を追加するだけでOKです。簡単ですね。 ＜HTML＞ ＜CSS＞ 画像と背景が重なるように配置し、div.ba […]
Xcodeでカスタムフォントを追加して使ってみよう！
Xcodeで好きなフォントを追加したい！ということがあると思います。 最初は戸惑うかもしれませんが覚えると結構簡単に追加できます。 目次1 まずはフォントをダウンロード2 フォルダにフォントを追加3 Infoにフォントを登録する4 実際に使ってみる まずはフォントをダウンロード まずはフォントをダウンロードします。 今回はGoogle Fontsの中の『Noto Sans Japanese』をインストールしてみます。 フォルダにフォントを追加 ダウンロードしたらXcodeで今 […]
【WordPress】管理画面の不要なメニューを非表示にする
Wordpressの管理画面から、不要なメニューを削除しましょう。 目次1 不要なメニューを非表示にする1.1 コメントメニューを非表示にする1.2 複数のメニューを非表示にする1.3 権限で表示を切り替える2 YoutubeChannelのご紹介 不要なメニューを非表示にする 不要なメニューを非表示にするには、「functions.php」を編集します。 functions.php は、テーマのファイルがまとめられているフォルダの中にあります。 コメントメニューを非表示にす […]
【Photoshop】クリックするだけ!? AIで風景を置き換える新機能”風景ミキサー”の使い方
PhotoshopCCのver23.0から搭載された新機能「風景ミキサー」を紹介します。 AIを使用したフィルター機能で、写真の背景をクリックするだけで簡単に変更できます！ 目次1 どんな機能？2 使い方2.1 手順1：被写体を選択する2.2 手順2：フィルターを適用する2.3 完成3 YoutubeChannelのご紹介 どんな機能？ 左が元写真で、右がフィルター適用後です。 あくまで元の画像の構図や要素は崩さずに、雰囲気をガラリと変えてしまいます。 どんな雰囲気の背景にし […]
【Illustrator】手書きのスキャン画像をパスデータにする
Illustratorの「画像トレース」という機能を使用すれば、パスデータを作成することができます。 簡単に使えるので、ぜひロゴやイラストを作る時に活用してください。 目次1 「画像トレース」機能の使い方1.1 画像トレースパネルを開く1.2 スキャンしたデータをトレースする1.3 不要な部分を削除する2 YoutubeChannelのご紹介 「画像トレース」機能の使い方 画像トレースパネルを開く まず、メニューから画像トレースパネルを開きます。 [ウィンドウ]＞[画像トレー […]
【Illustrator】長文をカラム分けして読みやすくする方法
リーフレットやチラシなどの印刷物を作る時、長文をカラム分けすると文章が読みやすくなります。 このカラム分けされたテキストボックスは互いにリンクされており、片方で改行などの編集をすると、溢れたテキストが自動で次のテキストへ送られるようになっています。 領域を作ってリンクするだけなので、非常に簡単です。ぜひ習得してください。 目次1 やり方解説1.1 手順1：四角オブジェクトを配置する1.2 手順2：四角オブジェクトをテキストボックスに変換する1.3 手順3：複数のテキストボック […]
Android studioで縦並び・横並びで整列させるレイアウト【初心者用】
今回は初心者用にAndroid studioで縦並び・横並びで整列させるレイアウトの仕方をご紹介します。 主に使うのはLinerarLayoutです。 目次1 LinerarLayoutで縦並び・横並びで整列させるレイアウトを実現しよう1.1 横並びにする場合1.2 縦並びにする場合2 YoutubeChannelのご紹介 LinerarLayoutで縦並び・横並びで整列させるレイアウトを実現しよう 今回は『デザイン』タブベースで進めていきます。 まずは新しいファイルを開きま […]
WordPressで目次のプラグインを使うなら『Table of Contents Plus』！
Wordpressで記事を書いているときに『目次』が必要になることがあると思います。 そんな時はタイトルタグがあれば自動で目次を生成してくれるプラグイン『Table of Contents Plus』が便利です。 目次1 『Table of Contents Plus』を使ってみよう2 『Table of Contents Plus』の設定をしてみよう2.1 位置2.2 表示条件2.3 以下のコンテンツタイプを自動挿入2.4 見出しテキスト2.5 階層表示2.6 番号振り2. […]
flexboxとmargin: auto;を使ってレイアウトを組んでみよう
レイアウトを組むのに便利な『flexbox』。 今回は『flexbox』と『margin: auto;』を使用していい感じにレイアウトを組んでみましょう。 目次1 左に3つの要素、右に1つの要素を置きたい2 左に1つの要素、右に3つの要素を置きたい3 左右と中央、それぞれに要素を置きたい 左に3つの要素、右に1つの要素を置きたい このレイアウトだと左側の3つをさらにdivなどで囲み『justify-content: space-between;』を一緒に指定する方法などが考え […]
WordPressで記事を複製するなら『Duplicate Page』を使おう！
Wordpressで記事を複製したい、ということありますよね。 そんな時はプラグインの『Duplicate Page』を使ってみましょう。 Duplicate Pageをインストールして使ってみる まずはプラグインの新規追加画面でプラグインを追加します。 『Duplicate Page』をインストール・有効化します あとはたったこれだけで記事の一覧画面に『複製』が表示されます！ 『複製』を押すと下書きの状態で記事が複製されるので、編集が完了したら『公開』をしましょう！ ちなみ […]
WordPressでカスタムフィールド（デイトピッカー）を使って要素の表示・非表示をする
Wordpressのカスタムフィールドで日付の期限内で項目の表示・非表示を切り替えたいときがあるかと思います。 そんな時に便利な方法をご紹介します。 まずはカスタムフィールドで始まりの日付と終わりの日付のフィールドを設定しましょう。 フィールドタイプは『デイトピッカー』を選択します。 ラベル・フィールド名は任意で設定してください。 開始日付、終了日付の2つを用意します。 今回はラベル『開始日付』のフィールド名は『start_date』、 ラベル『終了日付』のフィールド名は『e […]
『toggleClass』を使ったアコーディオンを作る（heightでアニメーションが効かないのを解決）
jQueryでアコーディオンを実現したい、ということはよくあると思います。 実現したいときは単純に『slideToggle』を使うのが早いです。 ただ、いろんな都合によりアコーディオンをcssの切り替え『toggleClass』で実現したいということがあるかもしれないです。 そんな時にちょっとだけ悩んだのでメモがてら書いておきます。 目次1 『slideToggle』を使ったアコーディオン2 『toggleClass』を使ったアコーディオン（ただの表示・非表示）3 『togg […]
【写真の副業】WEBデザイナーの私が思う”使いやすい写真素材”とは？
最近、副業としてPIXTAなどで写真素材を販売する方が多いとの話を聞きました。 スマホで撮影した写真があれば手軽に始められるので、人気の副業のようです。 では、素材サイトヘビーユーザーのデザイナー目線で素材として使いやすく、ダウンロードしたい素材とはどんなものでしょうか？ 実際に写真をダウンロードして使う側の私が思う、使いやすい写真素材の特徴をまとめてみました。 目次1 その1.ピントがあっている2 その2.写真が小さい3 その3.写真が暗すぎる・明るすぎる3.1 暗すぎる例 […]
レスポンシブサイトでjavascript(jQuery)の読み込みを切り替えよう
2021年現在、新規でWebサイトを作成する際はレスポンシブ対応するのがほとんどかと思います。 そんな時PCだけまたはスマホだけでjavascript(jQuery)の読み込みを行いたい時があるかと思います。 実はファイルに何行か追記するだけで簡単に切り分けができます。エラー回避やサイト軽量化のためにもやってみましょう。 目次1 ①画面サイズで切り分ける方法2 ②端末（UA）で切り分ける方法 ①画面サイズで切り分ける方法 画面サイズで切り分ける際はこのように記述します。css […]
LINEでbotやリッチメニューを設定するお話
ここ最近いろいろな意味で話題になっているLINEですが、とはいえ便利なSNSツールであることは間違いないところです。 ここでは情報セキュリティ的な部分は置いといて、LINEのAPIを利用したbotやリッチメニューを作っていきます。 目次1 事前に行うこと1.1 LINE for Business でアカウントを開設する1.2 LINE Developers からログインする1.2.1 チャンネル設定から「新規チャンネル作成」を選び、チャンネルを作成1.2.2 作成したチャンネ […]
【IE11】flexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならない【解決方法】
IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。 目次0.1 元のコード1 解決方法1.1 修正したコード 元のコード HTML CSS これを参考に修正していきます。 解決方法 解決には高さ指定をIEのみ通常のheightで指定したりtable要素にしたり…等色々あります。 が、flex要素をさらにflex要素で囲むと解決します。 修正したコード HTML CSS fl […]
運営会社:株式会社8bit
制作サービス
運営サービス
