Creator Note

Design & web

  • index
  • web code
  • design
  • blog
  • その他

  • あ行

  • か行

  • さ行

  • た行

  • な行

  • は行

  • ま行

  • や行

  • ら行

  • わ行

その他

  • before,afterを使ってhoverで画像を表示する方法
  • WP(ワードプレス)でカスタムフィールドにでアップロードする特定のファイルにベーシック認証をかける方法
  • codepen アニメーション特集
  • CSSで文字ごと、行ごとに色を変更する
  • スマホでhoverアニメーション実装時にhoverを効かせる方法
  • Yahoo!ショップトリプルでサイト作成時のポイントをまとめてみた~part03~
  • スマホメニュー開閉時にうしろのブロックがスクロールする
  • SCF(スマートカスタムフィールド)でグーグルマップを表示したい
  • WordPress(ワードプレス)のサイト内検索で表示される結果から固定ページを除外する方法
  • WP(ワードプレス)で外観>メニューを作成した場合にサブタイトルを表示する方法
  • IEのみサイトを表示しない方法:IEサポートを行わない
  • [WordPress(ワードプレス)]年別で月別アーカイブリストを表示
  • 私がSCSSでまとめているソースもろもろ

ア

  • 【アクセシビリティ対策】コントラストを変更する
  • 【アクセシビリティ対策】文字サイズを変更できるJS
  • aspect-ratioプロパティがすべてのブラウザで対応となったのでメインで使っていく
  • appletouch-iconやfavicon画像を作成するときに便利なツール
  • Advanced Custom Fields画像のループ
  • ACF(Advanced Custom Fields)でタクソノミーにフィールドを追加し表示する
  • ACF(Advanced Custom Fields)で1つ目のみ表示方法を変更する
  • ACF(Advanced Custom Fields)でフィールドタイプ「関連」でタイトル以外の情報も表示する
  • Advanced Custom Fieldsギャラリーの書き出し方
  • アニメーション終了後にサイトを表示させる方法
  • ある一定の場所まできたらナビゲーションを上部に固定する

イ

  • ECCUBEで商品画像が小さくガニガニしてる…大きくしたい!
  • EC-CUBE2系で製品一覧のタイトルを変更したい
  • 一行かくだけで!すべてのリンクをtarget=”_blank”にする方法
  • 今更だけど…レスポンシブ対応!背景にvideoタグで動画を設置したい!
  • 今話題のtailwindを使用してみた
  • inview.jsを使用してchart.jsを1ページに複数実装する
  • inputの入力の有無でボタンの表示&非表示をCSSで調整する

ウ

  • WYSIWYGエディターに記述されたYoutubeのiframeを自動でレスポンシブ対応する方法
  • ウェブ制作で直近で得たことTip
  • ウェブアクセシビリティへの取り組みについて
  • ウェブサイトで画像の保存を禁止する方法
  • ウェブサイト内のボタンデザインで迷ったときはhover.cssで何とかしちゃおう!
  • ウェブサイトに動画を埋め込む際に引っかかったところ
  • 動く!かわいいアニメーションのSVGアイコンが商用無料!

エ

  • HTMLでこんなことまでできる!最近覚えたHTML技法
  • httpサイトでリダイレクト設定したけど、httpsにするとapatchのエラーページが表示されたのでこれもリダイレクトしたいときの話
  • SSIの利用方法
  • SCSSでまとめてkeyframeを使用する方法
  • 【歓喜】SVGがfaviconに対応!これでいろんなサイズの画像を用意しなくてOK!
  • MW WP FORMで選択した項目ごとにメールアドレスを変更する
  • MW WP FORMでメールフォームを作成しBogoで多言語したときに送信内容が文字化けしたときの対処法
  • MW WP FORMをページ内に埋め込んだときに確認ページへ遷移するとページのトップに戻ってしまう!
  • PowerCMSで各カテゴリごとに年別アーカイブを表示する方法

オ

  • お問い合わせなどのテキストエリアに入れるplaceholderを改行させる
  • (JS)お問い合わせフォームで各必須項目にスペースが入力されたときに制御する方法
  • odometer.jsで数字をカウントさせながら表示する
  • odometer.jsで数字をカウントさせて、出力結果が一桁の場合あたまに0を付ける方法
  • オモシロ&大胆なWEBサイト10選

カ

  • 会員サイトが簡単に作成できるWP-Memberを実装してみた!
  • 開発環境のPHPのバージョンを7.2に変更したらハマった話
  • 【css】counterを利用した自動ナンバリングのあれこれ
  • カスタム投稿タイプのURLを数字に変更したい!
  • カスタム投稿タイプと通常の投稿をトップページに全部表示する方法
  • カスタムフィールドで投稿した項目ごとに別ページでまとめて表示する方法
  • 画像が入った円形のボックスにcssでグラデーションをかけてみた
  • 画像の高さを取得して指定サイズ以下の場合クラスを付与する
  • 画面をタップして動画の再生・停止を行う
  • colorboxを使用してポップアップしたあとに動画を自動再生したい
  • colorboxで表示した動画を再生終了したら自動で閉じるようにしたい
  • column-countプロパティでずれが生じたときの対応方法
  • (うわ…!?)calcだけじゃない!CSSの数学関数が増加する!サイン・コサイン・タンジェント!?

キ

  • きた!EdgeがChromiumを採用してリリースされる!!と、個人的に言いたいことを書いてみた。
  • canvasjsを使用して簡単にグラフを表示させよう!
  • canvasを使用して波を作成してみた

ク

  • Googleアナリティクスのでサイトを分析・改善するための考え方について
  • グーグルアナリティクスで検索キーワードを取得する方法
  • Googleの音声入力の文字おこしに挑戦してみた
  • Googleフォントのサブセット化
  • グーグルマップでAPIを取得後の設定について
  • Gutenberg(グーテンベルク)を使ってみた
  • CreativeCloudDesktopが開かない、ロードのまま表示されないときの対処法
  • クリックして表示したメニューを異なるところをクリックすると非表示にする
  • グリッドデザインをするときに助かる!jQuery
  • clip-pathで円を作ってみる
  • ChromeがアップデートしてなんだかCSSのblurの動きがおかしい
  • クロスドメインでiframeを調整しようとしてどうにもならなかった話

コ

  • cosha.jsでおしゃれにカラーシャドウをつけよう!
  • codepenのおすすめTimelineを集めてみた
  • 固定ページの子ページ一覧を表示させる方法
  • 「この投稿を先頭に固定表示」のチェックボックスを削除する
  • 【これで解消】「overscroll-behavior」プロパテを使ってブラウザがこれ以上スクロールできない場合の挙動を制御する
  • これでブラウザの高さいっぱいに表示できる!CSSのテクニック
  • contacrform7で送信完了URLをリダイレクトする方法
  • コンテンツが少なくてもフッターを一番下に固定する方法

サ

  • 最近のWEBデザインの流行りについて考察してみた
  • サイトに取り入れたい!codepenの秀逸なスライドアニメーション
  • Sassの除算はsass:mathを使用しよう
  • safariでborder-radiusがhover時に効かない!なんでか解除される…
  • 左右にループするスライドを実装してみた
  • thanksページなどに直でアクセスされた場合にリダイレクト処理を行う方法

シ

  • CSS Grid Layout Module グリッドコンテナについて
  • CSS Grid Layout Module グリッドアイテムについて
  • CSS Grid Layout Module いろいろな書き方
  • CSSでモーダルウィンドウをつくろう!
  • CSS Grid Layout Module IEに対応する
  • cssでli要素などのときに奇数、偶数、番目以降などを整理してみた
  • CSS3でフェードで画像が切り替わるフルスクリーンスライドショー
  • CSS3 キーフレームアニメーションについて
  • css1つで最近の流行りのアニメーションを実装できるvhs
  • CSSアニメーションで図形のまわりをまわる文字を作成してみた
  • CSSコンテナクエリについて
  • CSSだけで円グラフを作成する
  • CSSだけで斜めにスライドさせる方法
  • CSSだけで Horizontal Accordionつくってみた
  • CSSでいろんなまわし方をしてみた
  • CSSでウェブページのすべてを構築できるCJSS
  • 【今更だけど…】CSSで円、半円をつくる方法
  • CSSで3点リーダーを追加してみた
  • cssのみでスタイルの分岐をしよう
  • cssでbr削除すると半角スペースが入る!
  • CSSでマスクをかけよう!
  • CSSで文字数制限したい
  • CSSのみで画像を永遠ループする
  • SVGで作成した文字をアニメーションするときにIEだけ動かない問題にハマった話
  • JSとCSSで桜を降らせてみた
  • JS(jQuery)でidを付与して、0からはじまる連番をつけてみた
  • jquery.cookie.jsを使用して、最初のみオープニングアニメーションを稼働させる方法
  • jQueryでaタグのtelをPCのみ削除する
  • 自分でホームページをつくる、ということ
  • javascriptを使用してマウスの動きに合わせて背景の画像を動かしてみた
  • シンプルなニュースティッカー”SimpleTicker”の使い方
  • Simple.Timer.jsで簡単にカウントダウンタイマーを設置する
  • simpleParallax.jsでさくっとパララックスを実装しよう

ス

  • Zoomでミーティングを録画したのに[.zoom]という拡張子で録画が再生できなくなったお話
  • skewを使用してnavigationをつくる
  • スクロールすると文字がふわっとでてくる方法
  • スクロールスナップを使ってみる
  • 【CSS3】素敵な演出!ぼかしを使用したWEBデザイン
  • 素敵な横スクロールのウェブサイト
  • SCF(スマートカスタムフィール)でオプションに基本情報をまとめて登録する
  • スマートカスタムフィールドをグループで表示させるときになぜかでなかった場合の対処法
  • スマートカスタムフィールド(SCF)で画像無しの繰り返しループ出力時に項目が空だった場合にテキストを表示する方法
  • スマートカスタムフィールド(SCF)でPDFをループさせる
  • スマホサイトを作成するときはフォントサイズにvminを使おう!
  • スマホメニュー開閉時にメニューボタンがずれるのをなんとかしたい
  • スライド3つを同時に動かす方法
  • すりガラスっぽいデザインをCSSで実装
  • slicknavのメニューを固定する
  • slicksliderで無限ループしてみた
  • 【解決】slickでなぜか縦ならびのままスライドする…
  • slicknavを実装して左側にロゴを入れたい!
  • slicknavを実装して左側にロゴを入れ、さらにロゴにリンクを設定したい
  • swiperで画像を2つセンターに表示してスライドさせる
  • swiperで文字も一緒にスライドさせる方法
  • swiperのスライドショーで1枚の時はスライドしないようにする方法
  • swiperを使用してズームしながらフェードアウトしてみた
  • 【第2弾】swiperを使用してpararax sliderを実装してみた
  • swiperを使用してpararax sliderを実装してみた

セ

  • 選択させて結果的に答えが出る『心理テスト』型JS組んでみました

タ

  • 多言語サイト作成時に中国語フォントに対応する方法
  • 縦書き文章のレスポンシブについて考えてみた
  • 縦に半分分割しているレスポンシブ対応のつくりかた
  • タブの切り替えコンテンツをふわっと表示する方法
  • WP-PageNaviでアーカイブページにページネーションを出す
  • wp_nav_menuでsingleページにもcurrentをつける
  • wp_nav_menuでsingleページにもcurrentをつける(改良版)
  • wp_nav_menuでメガメニューを作成する

チ

  • 中国語のみ指定している明朝体フォントがあたらない場合の対処法
  • 直前のページに戻りたいときにhistory.back()を使うときにおこる問題

ツ

  • tweenmaxを使用してスライドショーを作成してみた
  • TweenMax.jsとThree.jsを使用してホバーに面白いアニメーションを加えてみた

テ

  • D2Cってなに?通販サイト?を説明できるようにブログを書いてみた
  • display: grid;で役に立つチートシートをご紹介
  • datailとsummaryでつくるアコーディオン
  • テキストのカラーをcssで半分ずつ表示してみた
  • text-shadowを使っておしゃれなトップ画像をさくっとつくろう
  • デザインに悩んだときに見る!WEBデザインまとめサイト5選

ト

  • 動画制作にあたって考えたこと
  • 投稿したタイトルを五十音順に並び替える
  • 特定の要素が可視範囲から消えたら別の要素を表示する方法
  • toggleで要素を表示するときの応用編
  • toggleを使ってメニューをつくってみよう
  • transform プロパティでcssがガタつくときの対処法
  • translateやfilterを親要素に設定するとposition: fixedが効かない
  • Dreamweaverが重い…重すぎる!

ナ

  • なめらかにカタログページをめくる動きを実践できるturn.js

ニ

  • 2,3,6,7,10の項目に色をつけたい
  • 2020年上半期、アクセスが最も多かったページ!ベスト15!!
  • 2段階スライドショーを実装してみよう!

ハ

  • particles.jsを複数設置する方法
  • pug(旧jade)についてわかったことをいろいろまとめてみた
  • はちぇめちゃに便利!超軽量のプログレッシブCSSフレームワーク!!
  • parallax(パララックス)でカーソルに合わせて斜めにスライドさせたい
  • Vanta.jsを使用しておしゃれな背景アニメーションを実装してみた

ヒ

  • PHPバージョンの確認を!PHP5のサポートが2018年で終了。
  • PCやスマホなどの端末にサイト画像を当て込んでレスポンシブ表示する方法
  • videoタグをSetTimeoutで遅らせて自動再生させる方法
  • Vue.jsってなんぞ?というところから触ってみた
  • 表示される要素の数に応じてスタイルを変更する
  • 表面がゆらゆらゆれる水(アクア)系のripples.jsを実装してみた
  • ピラミッドチャートをCSSだけでつくってみよう!

フ

  • Firefoxでscrollbar-width: none;が効かない!なんで!?
  • Firefoxでfirst-letterが効かな時の解決法
  • fotoramaで画像にリンクを設定する方法
  • fotorama.jsを使って、背景フルスクリーンのスライドショーをつくる
  • fontawesomeが登録しないとできなくなったのでやり方見直し&社内共有しよう!
  • fontawesomeをダウンロードして使用する方法
  • ”ブランド”について考える
  • 古いバージョンのWPしか使えないときのOGP設定
  • flexboxをIE8やIE9にも対応させたい!
  • [エラーコード -1609760768]PremiereProでレンダリングエラーが出る
  • flocssを使ったコーディングルールについて

ヘ

  • ページ読み込み中のローディング画像をつくってみた
  • ページ遷移がおもしろい!Morphing Page Transitioの使い方
  • headerとナビゲーションを交互に表示する
  • 【便利なCSS】min(), max(), clamp()使ってる?

ホ

  • box-shadow(ボックスシャドウ)以外でCSSでshadowを設定する方法

マ

  • Microsoft Edgeの電話番号にリンクが貼られる問題について
  • マウスオン(ホバー)でサブメニューなどを横から出す
  • magnificpopupでページ内の画像のポップアップギャラリーを作成してみる
  • マルチデバイスに対応したflickityでスライドを作成してみた

ミ

  • みんなcanonicalの設定どうしてる?
  • minmax()関数を理解する

ム

  • MTのパン屑リストプラグインをカスタマイズする
  • ムーバブルタイプにカレンダー機能を設置して少しだけカスタマイズしてみた
  • MovableTypeでカテゴリに記事が存在しないときの表示を分けたい

メ

  • メールアドレスをエンティティ化する方法(WordPress)
  • メディアクエリを設定していて、スタイルシートの落とし穴にはまったので見直してみた

モ

  • もう「inline」や「inline-block」を使わなくてもいい!コンテンツサイズにあわせる新しいCSSの対応方法

ヤ

  • Yahoo!ショップトリプルでサイト作成時のポイントをまとめてみた~part01~
  • Yahoo!ショップトリプルでサイト作成時のポイントをまとめてみた~part02~
  • Yahooストアでなぜか画像が追加できない、という時の解決方法

ユ

  • UXデザインとは何か?について考えてみた
  • 油彩画や水彩画をwebデザインに取り入れよう!Topaz Impression

ラ

  • LP(ランディングページ)などでMW WP FORMを使用した時の位置調整

リ

  • React.jsについて学んだことをまとめてみた
  • リダイレクト設定ができる「Redirection」プラグイン&.htaccessが管理画面から編集できる「Htacccess Editor」

レ

  • レスポンシブで作成したWEBサイトを印刷に対応させるには?
  • レンダリングのパフォーマンスを上げよう!CSS[content-visibility]プロパティ

ロ

  • ロイヤリティフリーの写真素材サイトをまとめてみた
  • ロイヤリティフリーのアイコン素材サイトをまとめてみた

ワ

  • WordPressでRSSフィードが突然表示されなくなったときの対処法
  • WordPressでSVGを使用したい
  • WordPressで同じタグをもつ記事を「おすすめの記事」として一覧で表示する
  • WP(ワードプレス)で親ページか子ページかを判断して表示をわける
  • WP(ワードプレス)で勝手にpタグやbrタグが削除されてしまう
  • WordPressで記事を書いた人を変更する
  • WP(ワードプレス)で記事を固定表示したときの表示件数の調整
  • WP(ワードプレス)でslideout.jsを使用したときのスマホ用のメニュー実装の備忘録
  • WordPressでタグの一覧を表示する
  • WordPressで投稿された記事に『いいね!』を実装する。
  • WordPressで本文からdescriptionを取得する方法
  • WP(ワードプレス)でメンテナンス表示を出す方法
  • WPでユーザー一覧を表示する
  • WordPressに静的ページを設置したい!
  • WPの管理画面をちょっとカスタマイズする
  • WPの固定ページのエディタを非表示にする方法
  • WP(ワードプレス)の投稿アーカイブを任意のURLで出力する
  • WordPress(ワードプレス)の投稿のラベル名を変更する
  • wow.jsを使用して様々なアニメーションを取り入れよう!
  • 私が最近覚えたCSS
  • 私が最近覚えたCSS 第2弾!
  • 私が最近覚えたCSS 第3弾!
  • index
  • web code
  • design
  • blog