Google Fromに自動返信機能を付ける

5-10 Googleスプレットシートにはスクリプトを埋め込む機能が付いています。今回はこの機能を使って、自動返信メールを送ってみます。 function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //-------------------------------…

エキスパート サンプル問題をやってみる

5-10 www.sikaku.gr.jp felica29.starfree.jp

GoogleサーチコンソールとGoogle アナリティクス

5-10 Google Search Consoleとは Search ConsoleとはWebサイトの検索結果の状況とそれに付随する情報(Webサイトの改善案・被リンク数・キーワードなど)やGoogleが認識しているページ数、Googleクローラーのクロール状況が把握できるツールです。Search Con…

フォーム-ラジオボタンが選ばれた状態でページ遷移させる

5-09 今回のフォームは、商品紹介ページに「商品A」「商品B」「商品C」の3つのコンテンツがあり、それぞれの購入ボタンをクリックして申し込みページに遷移した時、それぞれの商品のラジオボタンにチェックがはいっている状態にしたい。申し込みページ以降は…

pushStateとajaxを使ってSEOに強い無限スクロールページを作成する

5-07 SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が…

新しいcssを使ってみる

ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。ただ、新しいプロパティはブラウザごとに対応状況が違う…

ロゴを作成しモックアップに載せる

5-02 www.anthonyboyd.graphics photoshopvip.net note.com www.youtube.com

タイムラインをサイトに埋め込む

4-28 年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCo…

プラグインを使ったwordpressのデプロイ

4-27 以前、バックアップを取って、sql文を使ってwordpressのデータを移動させましたが、今回はプラグインを使ってデプロイさせます。 ja.wordpress.org このプラグインは検索 & 置換操作中に発生する、あらゆるシリアライゼーションの問題も解決します。と…

wordpressの作業データ

4-25 トップページ front-page.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>wp-blogのトップページ</title> </meta></meta></meta></head></html>

wordpressで特定のカテゴリー記事を表示させる

4-25 wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させ…

wordpressの投稿記事をループさせる

4-25 wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させ…

スクロールを促すスクロールダウンアニメーション

04-23 www.nxworld.net See the Pen scroll-down-animation by yachin29 (@yachin29) on CodePen.

フォントサイズを画面幅に応じて可変にする

4-23 emを使ったフォントサイズ emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。 remを使ったフォントサイズ 次にremを使ったフォントサイズの指定…

LPの作成・実践編

4-21 テクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 LPのアウトライン(あくまでも一例) Attention部分のコンテンツ タイトル(ロゴ画像orテクニカルアカデミーwebサイト制作科) キャッチーなコピーが入ったリード文(テクニ…

LP(ランディングページ)の作成

4-21 ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のこ…

PDFをIllustratorから書き出す

4-16 ポートフォリオをPDF形式で面接先の会社にメールで送りたいのにPDFのデータが非常に大きく、困ってしまう。就職活動中によくある事です。IllustratorからデータをPDFで書き出す場合、書き出す形式に気をつけないと、必要以上にデータ量が大きくなってし…

Illustratorでロゴを作る

4-16 Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これ…

Gitを使う

git

4-15 Gitとは? Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか?」や「リリース予…

4月14日作業データ(パーティクルその2)

4-14 index.html <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>particles.jsその2</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

srcsetを使って画像を切り替える

4-14 img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイス…

background-attachmentを使ってパララックス風のサイトを作成する

4-14 cssの「background-attachment」を使う事で画面をスクロールする際、指定した要素の背景画像をその位置に固定する事が出来、パララックス風のサイトに簡単に出来ます。 例 frankiessportsbar.com 記述としては背景画像を固定したい要素に background-at…

Canvasでパーティクルを表現する

4-14 Canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実…

Sassを使ってレスポンシブサイトをコーディングしてみる

4-11 素材https://school.yachin29.com/0815test.zip レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。またブレイクポイントやメインのカラーコードを変数化する事で効率化…

自身のスキルを説明する

4-11 自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しまし…

投稿記事をトップページに出力させる

4-08 front-page.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>wp-blogのトップページ</title> <link rel="stylesheet" href="style.css"> </link></meta></meta></meta></head></html>

WordPressを始めるための下準備

ここでは、WordPressのオリジナルテーマを作成する為の下準備を行います。 WordPressのインストール ダウンロードした「wordpress」フォルダーをテストサーバーの「htdocs」フォルダー内にコピーし、新規データベースを作成する。テストサーバーにアクセスし…

既存のhtmlをwp化する

4-07 1.既存のhtmlデータをphp化及びデータ構成やファイル名をwp用に合わせ、wpテーマ用の構成にする 例 トップページはfront-page.php style.cssは管理フォルダー直下に screenshot.jpgを作成 2.wp内にデータを移し、必要な個所をワードプレステンプレート…

htaccessを使った動的配信

4-05 felica29.starfree.jp 「.htaccessファイル」を使った動的配信 動的な配信 | 検索セントラル | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分け…

トンマナを合わせたバナー作り

4-04 トンマナ とは、「トーン&マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ 」は企業部 ブランディング においても重…