2022-01-01から1年間の記事一覧
画像補正に使う機能は主にレベル補正、色相・彩度、トーンカーブの3つです。 トーンカーブを使った補正 トーンカーブはデータの劣化をおこさずに細やかな補正ができます。トーンカーブを使えば「明るさ・コントラスト」、「レベル補正」でできることはもちろ…
wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させます…
Googleスプレットシートにはスクリプトを埋め込む機能が付いています。今回はこの機能を使って、自動返信メールを送ってみます。 function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------…
github.com
今回のフォームは、商品紹介ページに「商品A」「商品B」「商品C」の3つのコンテンツがあり、それぞれの購入ボタンをクリックして申し込みページに遷移した時、それぞれの商品のラジオボタンにチェックがはいっている状態にしたい。申し込みページ以降は基本…
コンテンツのインポート 新たにインストールしたWordPressにはコンテンツが何も無いのでオリジナルテーマを作成する前コンテンツのサンプルデータをダウンロードしましょう。 www.socym.co.jp もちろん自分で投稿記事などを入力する事も可能ですが、ここでは…
wordpressテンプレートタグを使う事で、静的なコンテンツを動的なコンテンツにする事が出来ます。wordpressテンプレートタグは1つ1つ目的が決まっているので、wordpressテンプレートタグの記述全てを覚えるのではなく、目的にあったwordpressテンプレートタ…
コーディングの質はSEOにも直結するので、デザインの質と同じくらい大事です。細かい部分も1つ1つ確認して行きましょう。 ファイル名はすべてindex.htmlになっているか フォルダ名は適切な名前になっているか ページ毎に適切なタイトルがついているか 適切な…
favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したも…
fancyboxは画像だけでなく動画やGoogleMap、htmlファイルといった様々なデータ形式がモーダルウィンドウで表示させられる高機能版モーダルウィンドウです。 web.archive.org 今回はこちらのCDN版を使用します。cdnjs.com ※cdnの場合はminファイルを使用する…
css3 jQuery プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>
ページネーション（pagination）とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.com html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </meta></meta></head></html>
WordPressとは wordpressとはヒューストンに住んでいた若者とイギリスに住んでいた若者がインターネットを通じてコラボレーションで開発を進めたオープンソースのプロジェクトです。2003年にリリース。 WordPressとは、オープンソースのブログソフトウェアで…
お問い合わせフォームの作成｜改訂版 PHP 今回のお問い合わせフォームはphpを使い、 入力画面 確認画面 完了画面 の3つを作成します。 入力画面の作例 https://codepen.io/yachin29/pen/ZEBNENN 万が一、確認画面からアクセスしてしまった際にそのままではpo…
EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。対面でのサービスが難しくなった今日「お問い合わせ…
UNIXタイムスタンプとは UNIXタイムスタンプとは、コンピューターのシステム時刻の一種で、協定世界時（UTC）での1970年1月1日（午前0時0分0秒）からの経過時間を指します。 time関数 現在のタイムスタンプを取得 strtoti…
基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 １、「どのような形式で」を指定できる関数：date関数（フォーマット文字列）２、「いつの日付を」を指定できる関数：mktime関数（タイムスタンプ） timezoneの設定 本…
ホームページを作る際にヘッダーやフッターなど各ページで共通のパーツを使う事が多々あります。各ページごとに記述してしまうと、万が一修正が発生した場合、全てのページに影響が及んでしまいます。そうならない様に「外部ファイル化」しテンプレート化す…
今回の項目は お名前（必須） メールアドレス（必須） お住いの地域（任意） お問い合わせ項目（必須） お問い合わせ内容（必須） input.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>入力画面</title> </meta></meta></meta></head></html>
画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン）- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com www.opendoodles.com en…
PHPとは？ HP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般…
jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。jQueryを適切に記述する事である程度の改善は出来るの…
www.aolani-ohana.com html <div class="box"> <div class="box-inner top"> <img src="https://picsum.photos/1000/400" alt=""> </div> </div> jquery $(function(){ $(window).on('scroll resize',function(){ var elmHeight=$('.box').outerHeight();//対象要素の高さ $('.box').each(function(){ var setElm=$(this).children…
jQueryで複数のオブジェクトに対して繰り返し処理を行う場合は、each() メソッドを使用します。 まとめて処理されるパターン <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script> $(function(){ alert($('li').text()); }); </script> jQuery.each() の使い方 複数あるli要素に対して…
アコーディオンパネル-jquery版 アコーディオンパネル-jQueryを使わない版
コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテ…
Canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…
参考資料 stock.adobe.com
<html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>srcsetとbxslider</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>
素材https://yachin29.com/school/0815test.zip レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。またブレイクポイントやメインのカラーコードを変数化する事で効率化が図…
