投稿者: 工藤

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 Easy Form Makerって? まずはEasy Form Makerにつ […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! Event Calendar Mak […]

スマホアプリ

高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 みまもりシルバーはなにができるの? みまもりシル […]

WordPress

WordPressで権限やユーザーごとに管理画面のサイドメニュー表示を切り分ける

デフォルトだといろいろな項目が表示されているWordPressの管理画面のサイドメニュー。 慣れていない人にはわかりづらいですよね。 また、権限によってデフォルトで非表示にしてくれたりもしますが、この部分は見せたくないな…ということも多いと思います。 今回はWordPressで権限やユーザーごとにサイドメニューの表示を変更する方法をご紹介します。 権限の種類について まずはデフォルトの権限の種類についてご紹介します。 基本的には5つの権限が用意されています。 この権限を使用し […]

スマホアプリ

お子さまの安全を守るアプリ「みまもりキッズ」をリリースしました!

お子さまが学校や習い事、遊びに出かけたあと、「ちゃんと安全に過ごしているかな?」と心配になったことはありませんか? 不審者による事件が後を絶たない昨今、お子さまの安全を守るために、常に高い意識を持たれている保護者の方も多いのではないでしょうか。 そんな中、親子の安心をサポートする新しいアプリ「みまもりキッズ」が登場しました! 基本無料で、カンタンに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 みまもりキッズは何ができるの? みまもりキッズを使 […]

WordPress

WordPressの会員限定記事配信プラグイン「Simple Analytics」をリリースしました!

WordPressのイベントカレンダープラグイン「Simple Analytics」をリリースしました! ※この記事は2024年10月現在の情報です。 Simple Analyticsとは? 「Simple Analytics」はGoogle Analyticsと連携して簡単にアクセス解析ができる、WordPressプラグインです。現在は日本語にのみ対応しています。 このプラグインをサイトに導入すると、Google Analyticsにログインすることなくアクセス解析をWor […]

WordPress

WordPressの会員限定記事配信プラグイン「Limited Post Maker」をリリースしました!

WordPressのイベントカレンダープラグイン「Limited Post Maker」をリリースしました! ※この記事は2024年10月現在の情報です。 Limited Post Makerとは? 「Limited Post Maker」はオウンドメディアやブログで会員限定の記事を配信できる、WordPressプラグインです。現在は日本語にのみ対応しています。 WordPressで作成をした記事に対してショートコードを記述するだけで、簡単に会員限定購読の記事を配信することが […]

WordPress

WordPressのフォームプラグイン「Easy Form Maker」をリリースしました!

WordPressのイベントカレンダープラグイン「Easy Form Maker」をリリースしました! ※この記事は2024年10月現在の情報です。 Easy Form Makerとは? 「Easy Form Maker」はお問合せやアンケートなどのフォームをWebサイト上に簡単に設置できる、WordPressプラグインです。現在は日本語にのみ対応しています。 WordPressの管理画面でフォームを作成するとショートコードが生成され、表示をさせたい場所にコードで記述をするだ […]

WordPress

WordPressの予約プラグイン「Reserve Calendar Maker」をリリースしました!

WordPressのイベントカレンダープラグイン「Reserve Calendar Maker」をリリースしました! ※この記事は2024年10月現在の情報です。 Reserve Calendar Makerとは? 「Reserve Calendar Maker」は予約フォームと連携したカレンダーを設置できる、WordPressプラグインです。現在は日本語にのみ対応しています。 WordPressの管理画面でイベントを登録。そしてそのイベントは予約フォームと連携した形になって […]

WordPress

WordPressのイベントカレンダープラグイン「Event Calendar Maker」をリリースしました!

WordPressのイベントカレンダープラグイン「Event Calendar Maker」をリリースしました! ※この記事は2024年10月現在の情報です。 Event Calendar Makerとは? 「Event Calendar Maker」はイベントカレンダーをWebサイト上に簡単に設置できる、WordPressプラグインです。現在は日本語にのみ対応しています。 WordPressの管理画面で簡単にカレンダーを作成して、イベントを登録することができます。 イベント […]

Webサイト制作

Webアクセシビリティの基本を学ぼう!

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 そもそもWebアクセシビリティってなに? 『Accessibility』はweb関連で日本語で翻訳したときに「アクセス可能性」「アクセスのしやすさ」などの意味があります。 Webアクセシビ […]

マークアップ

疑似クラス:has()を活用してみよう!

CSSの疑似クラスである:has()がようやく全ブラウザに対応してくれました! 「:has()ってなんだ?」という方もいらっしゃるかもしれません。 例えば通常は水色のボックスである『#abc』の中に『.xyz』が現れると『#abc』の背景をピンクにする、ということができます。 これまでは親要素に対して子要素が影響を与えることはJavaScriptなどに頼る必要があり、cssのみでは困難でした。 けれど:has()すべてを解決してくれます。 活用方法-チェックボックスの装飾 個 […]

マークアップ

【CSSのみ】スムーススクロール+アンカーリンク時の固定ヘッダーのずれを調整

今までの流れで、何となくスムーススクロールやアンカーリンク時の固定ヘッダーのずれをjsなどで処理していませんか? 実はCSSのみで対応できるようになっています。 主要なブラウザには対応していて、なおかつ簡単にできるので、ぜひ使っていきましょう。 CSSだけでスムーススクロールをする まずはcssだけでスムーススクロールをする方法についてご紹介します。 といっても1行書くだけです。 このようにhtml要素に対してscroll-behavior: smooth;と指定するだけです […]

Webデザイン

【Photoshop】生成塗りつぶしを使ってみよう【AI】

Photoshop 2024(ver.25)から本格的にAIによる生成機能が追加されました。 今回はどんなことができるか、基本的なものをご紹介していきます。 対象のものを削除したい ではまず、対象のものを削除する方法です。 Photoshop 2024(ver.25)で生成塗りつぶしに使いたい画像を開きましょう。 画像を開いたら、削除をしたいものを選択ツールを使用して範囲選択します。 範囲を選択したらコンテキストタスクバーが表示されるので、『生成塗りつぶし』をクリックします。 […]

マークアップ

実際のサンプルでアニメーション解説 [オープンキャンパス特設サイト]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した『受験生向け女子大学のオープンキャンパス特設サイト』のサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベ […]

マークアップ

実際のサンプルでアニメーション解説 [焼肉用のお肉ネット通販特設サイト編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、[焼肉用のお肉ネット通販特設サイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから 動画再生 メインビジュアルで動画を再生させています。 JSなどで再生させる方法もありますが、今回はCSSだけで対応してみます。 HTML CSS とりあえずvideoタグで動画を設置します。 #mainVisualで大元を括ります。 […]

マークアップ

実際のサンプルでアニメーション解説 [ホームセキュリティ編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成した、ホームセキュリティサイトのサンプルを使用しながら解説していきます。 初心者向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。 一緒にjqueryの読み込みも […]

マークアップ

実際のサンプルでアニメーション解説 [採用サイト編]【CSS/JS】

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。 今回は弊社で作成したサンプルを使用しながら解説していきます。 初歩的なアニメーションの知識はある、という方向けの記事です。 参考にするサンプルサイトはこちらから inview.jsを読み込ませる 今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。 これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。 一緒にjqueryの […]

マークアップ

Intersection Observer APIを使って要素をアニメーションをさせてみる【初めての人向け】

今回はIntersection Observer APIを使用してのアニメーションの方法をご紹介します。 正直この記事を書いている私も今手探りの状態なので、完全に初心者の方向けの記事です。 一緒に勉強していきましょう。 Intersection Observer APIってなに? まずIntersection Observer APIってなに?という方もいると思います。 日本語交じりで言うと『交差オブザーバー』。 上記仕様書から抜粋すると 交差オブザーバー API (Inte […]

マークアップ

スクロールバーをCSSで装飾しよう!【chrome・edge・Firefox】

CSSでのスクロールバーの装飾。 以前はchromeとあたりの対応だけだったのが、いつの間にかFirefoxも対応していたので今更感もありますがまとめておきます。 chrome・edge・safari まずは手始めにchrome・edgeの方法をご紹介します。 See the Pen Untitled by kkdd (@kk8kk) on CodePen. コードとしてはこんな感じです。注釈で書いてある通りですが ::-webkit-scrollbar ここでスクロールバー […]

プログラミング

ChatGPTを使って文章を作ってもらう時のアイディア

今まで何となく触っていただけのChatGPT。ちょっと色々と文章を作成してみる機会があったので、私なりのアイディアやコツなどを書いてみます。 もう少しシステム的な記事はこちらをご確認ください。 ChatGPTに登録をする とりあえず登録していない人のために手順をご紹介します。 1.ログイン/サインアップページを開く まずはログイン/サインアップページを開きましょう。 『Sign up』をクリックして、登録画面を開きます。 2.登録するメールアドレスなどを入力・選択する 登録の […]

マークアップ

hoverや時間経過などでグラデーションをアニメーションさせよう!

webサイトのサイトデザインでもよく使うようになったグラデーション。 例えばボタンに使った時にhoverしたとき、背景に使用したときなどにグラデーションの色をアニメーションさせながら変化させることができます。 hoverしたときにグラデーションが動く hoverしたときにグラデーションが左の方に流れていくようなイメージです。 それでは実際のHTML・CSS、動作を見てみましょう See the Pen グラデーションボタン by kkdd (@kk8kk) on CodePe […]

WordPress

【WordPress】カスタムフィールドを使って記事をピックアップ表示しよう

WordPressで記事をピックアップして掲載したいということがあるかと思います。 そんな時はカスタムフィールドを使うと便利です。 カスタムフィールドを用意しよう カスタムフィールドを用意する方法はなんでもいいですが、今回はAdvanced Custom Fieldsを使います。 Advanced Custom Fieldsをインストールしたら管理画面のサイドメニューに『ACF』というメニューができているので設定をしていきましょう。 今回は『真偽』を使用します。 チェックボッ […]

マークアップ

cubic-bezierを使ってアニメーションの雰囲気を変えてみよう!

cssをよく使う人なら既におなじみ、transitionプロパティによるアニメーション。 例えばhoverをしたとき、スムーズに画像を拡大等してくれます。 コードの例 使用比較 See the Pen デフォルトアニメーション by kkdd (@kk8kk) on CodePen. これでもアニメーションが滑らかになって十分ではあるのですが、アニメーションをがっつり使うならcubic-bezierというイージング(動きの加減速)をさらに細かく自分で指定できる関数を使用した方 […]

マークアップ

色が敷かれてから画像やテキストが表示されるアニメーションを作ってみよう!

Webサイトを見ると最初に色が敷かれてから画像などが表示、そのあと敷かれた色は非表示に…というアニメーションをよく見かけると思います。 言葉にするとややこしいですが図にすると下のような感じです。 これは、CSSのアニメーショと少しのjsで対応できます。 早速作り方の詳細を見ていきましょう。 実際にアニメーションを作ってみよう とりあえず実際に作成したデモと、これから使用するコードをまとめておきます。 js CSS HTML 上記のものを使用して解説していきます。 jquery […]

1 2 3 9