2025年04月クラス
See the Pen cssでモーションパス by yachin29 (@yachin29) on CodePen. ics.media index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>offset-pathを使ったモーションアニメーション</title> <style> *{ margin: 0; padding: 0; box-sizi…</meta></meta></head></html>
今回は以前制作したWordPressサイトのトンマナを合わせたバナーを作成します。 トンマナとは？ トンマナ とは、「トーン＆マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザイ…
「.htaccessファイル」を使った動的配信モバイルファースト インデックスに関するおすすめの方法 | Google 検索セントラル | Documentation | Google for Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス…
WordPressの投稿データにはカテゴリーを設定でき、カテゴリーごとに記事を表示させられます。似た機能でタグという機能もありますが、カテゴリーは親子関係を設定出来るのが特徴です。 wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」…
WordPressではCSSファイルを更新したのにブラウザには反映されない、という事がよくあります。原因はブラウザのキャッシュ機能が古いCSSファイルを読みに行っているので、「スーパーリロード」をする事で解決は出来ますが、CSSファイル名を変更すれば「スー…
元々はhtmlでdata-category=""に値を入れていたものをWordPressのタグのスラッグに変更する <div class="works-box" data-category="ex"> これをテンプレートタグに差し替える <div class="works-box" data-category="<?php $flag = get_the_tags(); foreach ( (array)$flag as $tag ) { echo $tag -> slug; } ?>"> タグの名前を表示させる </div></div>
カスタムフィールドを使う事でwordpress内で簡単にデータの更新が可能になります。 投稿記事を作成しカスタムフィールド機能を使い、項目名と項目内容を設定、記事のIDを確認 投稿記事のID確認 URLのpost=xx の数字部分が投稿記事のIDになります 呼び出した…
SEO的にページ毎に適切なタイトルを付ける事はとても重要です。 WordPressの場合、header.phpに固定ページのhead部分などをテンプレート化する事が一般的なので、そういった場合、titleタグにテンプレートタグを複数使用する事でページ毎にユニーク（一意的…
umeume.stars.ne.jp ダッシュボードでの操作 ダッシュボードの設定→パーマリンクから 「パーマリンク構造」を「数字ベース」に変更する ファイル構成 WordPressはファイル構成が複雑になってしまうので、注意が必要です。 ※最終的にはnews.txtとscroll.html…
基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 １、「どのような形式で」を指定できる関数：date関数（フォーマット文字列） ２、「いつの日付を」を指定できる関数：mktime関数（タイムスタンプ） timezoneの設定 本…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Felica Donut&Salad</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
コーポレートサイト umeume.stars.ne.jp スマホ特化型サイト umeume.stars.ne.jp
特定のカテゴリー記事を出力する 出力する記事のフォーマット指定 4, // 表示する件数 'orderby' => 'date', // 日付でソート 'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示 'category_name' => 'news', // 表示したいカテゴリーのスラッグ…
お知らせ 1. 旬の味覚を堪能！季節限定ドーナツが登場！ 7月10日（木）より、夏にぴったりの季節限定ドーナツが新登場します！ 今回は、太陽の恵みをたっぷり浴びた国産レモンと、甘酸っぱいブルーベリーを使った爽やかなドーナツをご用意しました。 ひとつ…
cgworks.jpmunihoikuen.net 要素が画面に表示されたらその要素にクラス名をaddするというアニメーションです。 ここで重要なのはどうしたら要素が画面に表示するタイミングを取得出来るかです。要素が画面に表示するタイミングを取得には以下の4つの値が必要…
作例 umeume.stars.ne.jp
See the Pen 入力画面 by yachin29 (@yachin29) on CodePen. EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指…
2023.stateofcss.com ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。 ただ、新しいプロパティはブラウザごと…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Felica Donut&Salad</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
配色には色々なルールがありますが、まずはこの3つを覚えましょう 1、コントラスに気を付ける 2、色数を抑える 3、トーンを合わせる HSBを使った配色 photoshopではRGB以外にもHSBやLabといった数値でも色の調整が出来ます。特にHSBは配色時によく使うので是…
webサイトデザインAI入門科umeume.stars.ne.jp
CMSとは？ CMSとは、コンテンツ・マネジメント・システムの略で、Webサイトを管理・更新できるシステムのことをいいます。 Webサイトの更新は、テキストや画像の情報だけでなく、HTMLやCSSと呼ばれるプログラム言語の専門的な知識が必要で、他のページからの…
min-max-calculator.9elements.com これまで文字サイズはpxを使って指定してきましたが、font-sizeをpxで指定してしまうと「font-sizeをpxで指定するとブラウザの文字調節機能が作動しない」という問題が起こります。Chrome だと「設定 → デザイン → フォン…
最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 URLの正規化 例えば、キリンのwebサ…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3連ガチャをJavaScriptで作成</title> <link rel="stylesheet" href="css/style.css"> <link rel="apple-touch-icon" href="touch-icon.png" sizes="192x192"> </link></link></meta></meta></head></html>
JavaScriptで乱数を取得したい場合には「random関数」を使います。 覚えるメソッド Math.random Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.floor()は、小数点…
for文は繰り返し（ループ）処理です。 for ( 変数ｉの初期値 ; 繰り返し条件 ; 変数の変更 ) { 処理の結果 } 記述例 <script> for (var i = 1 ; i <= 100 ; i++) { console.log( i ); } /* for ( 変数の初期値； 繰り返し条件； 変数の変更(最後は;がいらない) ) { </script>…
「 new Date()」を使う事で、現在の時間を取得することが出来ます。 <script> let date = new Date(); document.write(date); </script> 実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。 このままでは使いづらいので「 new…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>split-layoutの作成</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ホバーアニメーション2</title> <style> *{ margin: 0; padding: 0; } button{ margin-bottom: 50px; } .box{ width: 200px; height: 200px; background-color: cadetblu…</meta></meta></head></html>
