Columnコラム
- TOP
- コラム一覧
-
HTMLだけで、PC画像とSP画像を切り替える方法（webp画像の設定とRetinaディスプレイ対応の設定）今回は、前回のレスポンシブ対応｜HTMLだけで、PC画像とSP画像を切り替える方法の続きで、pictureタグを使用してwebp画像の設定と、Retinaディスプレイ対応の設定をしていきたいと思います。 webp画像の設定 圧縮率の高い画像webp（ウェッピー）は、他の形式の画像より軽量なため、画像が複数あるサイトなどでは読み込みが早くなるメリットがあります。ただ、ブラウザによっては対応していREAD MORE
-
レスポンシブ対応｜HTMLだけで、PC画像とSP画像を切り替える方法PC画像とSP画像のデザインが変わる際、CSSのメディアクエリで切り替えたりJavaScriptを使用して切り替える方法もありますが、今回はHTMLのpictureタグを使用して簡単に画像の切り替えができる方法を紹介します。 pictureタグを使用するメリット 画面幅によって、表示する画像を切り替えることができる ブラウザが対応していない画像（webpなど）を、別の画像に切り替えて表示してREAD MORE
-
CSS｜要素の一部だけ全画面表示にする方法親要素にinnerで幅指定がついている場合などに、その子要素の一部だけ画面いっぱいに表示させるには、親要素から子要素を出してコーディングをする方法をとるなど、少し手間がかかる場合があります。 そんな場合に、CSSで一部の子要素だけ画面いっぱいにする方法があります！ イメージはこちら 設定は簡単です！ 画面いっぱいにしたい子要素に、CSSの以下を記述してください。READ MORE
-
第9回：アイテム（トピック）ページの使い方 – コメント機能｜リモートワークには必須、プロジェクト管理ツール「Podio」とは？第5回では、トピックページを作成する際にまず必要となるトピックタイトルやその担当者、リンクやカテゴリー選択といった基本設定を紹介しました。 アイテム（トピック）ページの使い方 – 基本設定｜リモートワークには必須、プロジェクト管理ツール「Podio」とは？ 今回は、Podioを利用した業務進行の基本となる、トピック内でのコメント機能について紹介します。 コメント機能の使い方 下図がトピックREAD MORE
-
スライダープラグイン［slick］を使用して、スライダーに動画を使用する方法 （自動再生）今回は、スライダーのプラグイン［slick］を使用して、スライダーに動画を入れ、自動再生してくれるように作成します。 初めに まずはどんな感じになるか、画像をクリックしてデモをご覧ください。 [video width="452" height="330" mp4="https://autoproject.nagoya/wp-content/uploads/Document-Google-READ MORE
-
スマホ表示｜スマホだけ動画が表示されない場合の解決方法今回は、PCだと表示されるのに、スマホになると動画が表示されないという場合の解決方法を紹介します。 設定は簡単で、HTMLのvideoタグに以下属性を入れるだけです。 autoplay 自動再生 playsinline ビデオをインラインで再生する muted 音が出ないようにする設定 上記を入れないとスマホでは動かないので、三点セットで入れてください。READ MORE
-
WordPress｜ブロックエディタの使い方今回は、WordPressのブロックエディタの使い方を紹介します。 ブロックエディタの一番の特徴は直感的に操作できることです。HTMLやCSSといった知識がなくても簡単にデザインを変更したり、追加したりすることができます。まずは基本的な操作を紹介します。 目次 ブロックの追加 ブロックの移動・削除 ブロックのグループ化と複製 ブロックの追加 まずはブロックを追READ MORE
-
第8回：必要な通知を受け取る設定方法｜リモートワークには必須、プロジェクト管理ツール「Podio」とは？前回は、タスクを一元管理するページについて紹介しました。 第7回：タスク一覧ページの使い方｜リモートワークには必須、プロジェクト管理ツール「Podio」とは？ 今回は、このようなタスクの期限や自分宛のコメントなど、Podioを利用していく上で必要な通知を受け取る設定方法について紹介します。 Podioの通知設定 ヘッダーの人物アイコンから、「アカウント設定」>「Eメール &READ MORE
-
第7回：タスク一覧ページの使い方｜リモートワークには必須、プロジェクト管理ツール「Podio」とは？前回は、作成したトピック内で担当者にタスク設定する方法を紹介しました。 第6回：タスクの作成方法｜リモートワークには必須、プロジェクト管理ツール「Podio」とは？ 上記では1つのトピックだけを例に挙げていますが、実際には進行している複数のトピックからタスクを自分に設定する／されることになります。 今回は、これらのタスクを一元管理するページについて紹介します。 確認が容易な「タスク」一READ MORE
-
WordPress用ECプラグイン「WooCommerce」、商品在庫管理の方法WooCommerceとは、WordPress上でECサイトを構築するにあたり、詳細な設定が可能な人気のプラグインです。 今回は、WooCommerceを利用した在庫管理の設定方法について紹介します。 1. WordPressにログインする まずはWordPressにログインします。 必要な情報 ユーザー名またはメールアドレス パスワード ログインボタンをREAD MORE