2025年04月クラス
「.htaccessファイル」を使った動的配信モバイルファースト インデックスに関するおすすめの方法 | Google 検索セントラル | Documentation | Google for Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス…
WordPressの投稿データにはカテゴリーを設定でき、カテゴリーごとに記事を表示させられます。似た機能でタグという機能もありますが、カテゴリーは親子関係を設定出来るのが特徴です。 wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」…
WordPressではCSSファイルを更新したのにブラウザには反映されない、という事がよくあります。原因はブラウザのキャッシュ機能が古いCSSファイルを読みに行っているので、「スーパーリロード」をする事で解決は出来ますが、CSSファイル名を変更すれば「スー…
ここに必要事項を記入して、提出して下さい。 特にURLは間違いの無いように送信する前に必ず確認する癖をつけましょう。 forms.gle
元々は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になります 呼び出した…
以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexやvw、vhを使う事でレスポンシブにも簡単に対応出来ます。www.nike.com スクロールの方向とスナップの種類(親要素に指定) scroll-snap-type: y mandator…
今ではpcでもspでも最適に表示されるレスポンシブサイトは当たり前で、最近はむしろspでの表示を優先させ、pc時は画面いっぱいの固定背景（多くはbody要素を固定）を置き、モバイル幅の中にコンテンツを入れるようなspファースト、もしくはスマホ特化型のの…
ics.media Sassとは？ Sass(Syntactically Awesome Stylesheets）とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 Sassを使うメリット 自作関数などプログラム的な使い方が可能 メンテナンス性が高い 記述量を減らし、…
OGP（Open Graph Protcol）とは、SNSでシェアされた時に表示されるサムネイル画像です。 検索キーワードを使用する場合とは違い、SNSで気になるサイトや記事を見つけた場合、クリックする・しないの判断はOGP次第なので、とても影響のある要素です。 OGPの設…
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
webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。 3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。 初心者にとって配色は難しい部分ですが、まずは既存のサイトやサ…
CMSとは？ CMSとは、コンテンツ・マネジメント・システムの略で、Webサイトを管理・更新できるシステムのことをいいます。 Webサイトの更新は、テキストや画像の情報だけでなく、HTMLやCSSと呼ばれるプログラム言語の専門的な知識が必要で、他のページからの…
最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryのアニメーションはカクカクでちょっと重い jQueryの特徴の1つ…
min-max-calculator.9elements.com これまで文字サイズはpxを使って指定してきましたが、font-sizeをpxで指定してしまうと「font-sizeをpxで指定するとブラウザの文字調節機能が作動しない」という問題が起こります。Chrome だと「設定 → デザイン → フォン…
プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <button class="hamburger " id="ham-btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button>
最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 URLの正規化 例えば、キリンのwebサ…
