求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

はじめてのIllustrator

Adobe Illustrator ラーニングとサポート helpx.adobe.com ベクターイメージ Vectorとraster IllustratorはVector形式 Photoshopはraster形式 計算式を利用して描画するため、解像度に依存しないで再計算によりプレビューを構築するため、画質が低減しない r…

フォルダー・ファイル管理

Cドライブ内の管理フォルダー 例えばフォルダー名を「自分の名前」(英字表記)で作成 各プロジェクトごとのフォルダーが内包されている状態 「img」フォルダー内には、そのプロジェクト(フォルダー内)で使用する画像を入れる CSSファイルを内包する場合も…

Grow with Google

Grow with Google grow.google

PHP基礎 - まとめ

PHP

PHP学習コース I - Progate 基礎をまとめるためには「Progate」を受講してみましょう prog-8.com PHPの書き方 PHPの文法 文字列を出力しよう 計算してみよう データの種類 文字列と数値の違い 変数とは? 変数の役割 変数名の付け方 変数の更新 変数に数字を…

ローカルサーバーからリモートサーバーへデプロイ

ローカルサーバーでやるべきこと テキストの内容を最後まで完成させる XAMPP(MAMP)のデータベースをエクスポート 簡易のまま書き出します(SQLファイル) MAMPの場合、すでにphpMyAdminがバージョンアップされていることが前提です レンタルサーバー用に書…

WordPress - オリジナルテーマ例

オリジナルテーマ例 更新する投稿記事とそれ以外を区別します 各テンプレートは、WordPress関数でインクルードします サーバーにアップロード後、ダッシュボードの設定と微調整をおこないます 画像投稿は、アップロード後におこないます index.php <div class="container"> <main class="main"> <article <?php post_class(); ?>> <h2></h2></article></main></div>

かにのイラストを描く

イラストをトレースする準備 (1)新規ドキュメント作成 (2)[ファイル]メニュー → [配置] (3)「イラスト」→「かに下絵.tif」を選択する ※オプションは「テンプレート」のみ、チェックする。 (4)「レイヤー1」が選択されていることを確認して描き…

WordPressのテンプレートファイル化する

WordPressのテンプレートファイル化する テーマフォルダー「samplecafe」を作成 「index.php」「style.css」をテーマフォルダー内に作成 style.cssにコメントを記述 /* Theme Name: SampleCafe Description: HTMLからWordPressのThemeを作る */ 「screenshot…

WordPress化するHTMLデザインを作成

HTML+CSSでサイトのデザインを作る index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>Home | Sample Cafe</title> <link rel="shortcut icon" href="images/favicon.ico"> <link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet"> </link></link></meta></head></html>

テーマのファイル構成を理解する

WordPressのテーマ モジュール化された構造を持ち、テーマを切り替えることにより構造はそのままに視覚表現のみを変更できる仕組み 「wp-content/themes/」内にフォルダーを作成 今回は「NewTheme」とします ページを表示するためのテンプレートファイル i-n…

大きな画像を記事の横幅に合わせて表示 - カスタムテーマ

大きな画像を挿入する 中で挿入した画像を、「オリジナルサイズ」に置き換えてみる 《プレビュー》 記事の横幅に画像を揃えて表示する article img { border: none; max-width: 100%; height: auto; } 《プレビュー》横幅を小さく表示《プレビュー》 画像に…

記事の本文に画像を挿入する - カスタムテーマ

画像を用意する 画像は、redroof.jpg「800 × 534px」(テキストサンプル画像) 自動生成される画像の大きさを確認する ここでの大きさの変更は、アップロード済みの画像には適用されません 画像の挿入位置を指定する 記事の編集画面を開いて、記事を開きます…

WordPress - 繰り返し

繰り返し(ループ) 同じ処理や似たような処理を何度も行いたい場合 While文の書き方 while( 条件式 ){ 条件を満たす場合の動作 条件判定が最終的に偽になる変更を入れる } このコードでは、「1月2月・・・12月」と文字列を出力します。 $monthが、13にな…

WordPressテンプレートタグ

テンプレートタグとは WordPressでは、ユーザーが典型的な処理を手軽に行えるようにするため、さまざまな関数が定義されています 非常に多くの関数が存在するため、関数がいくつかのカテゴリーに分類されています なかでもテーマファイルでよく使われる関数…

無料レンタルサーバー【スターサーバーフリー】登録

無料レンタルサーバー【スターサーバーフリー】 ネットオウル登録 決済情報の登録 すぐには利用できません

wp_headerとwp_footerを追加する - カスタムテーマ

WordPressのテーマ作成では必須 と を追加する(必須) のちに、header.phpとfooter.phpを分離します </head> </body> これで、ログインしている時のみ、管理バーが表示されるようになります。《プレビュー》 管理バーを非表示にする 「サイトをみるときにツールバーを…

ヘッダーとフッターを表示 - カスタムテーマ

ヘッダーとフッターを表示 一般設定 ヘッダーを表示 サイト名を表示する <body <?php body_class(); ?>> <h1><a href="<?php echo home_url(); ?>"></a></h1> <div class="container"> 《プレビュー》 サイトの説明を表示する <body <?php body_class(); ?>> <h1><a href="<?php echo home_url(); ?>"></a></h1> <p><…</p></body></div></body>

トップページを表示 - カスタムテーマ

テンプレートタグの読み込み順序 「index.php」には、ダッシュボードで指定された数だけ投稿記事が表示されています その数を超えた場合に表示された表示されるのが「ページャー」です しかし、投稿記事の一覧には、「次の記事」「前の記事」という概念はあ…

前後の記事へのリンクを表示 - カスタムテーマ

前後の記事へのリンクを表示する 投稿記事のページャー(ページを移動する仕組み) $format(文字列) (オプション) リンクの文字列の書式 リンクの前後に追加する文字を設定できます 「%link」と文字列内に表記すると「$link」(次のパラメータ)に置き換…

記事の投稿日とカテゴリーを表示 - カスタムテーマ

記事の投稿日とカテゴリーを表示 日付の設定 記事の投稿日を表示する get_the_date() 「get_the_date()」は、現在の投稿(または指定された投稿)が書かれた日付を取得します the date() とは異なり、このタグは常に日付を返します 取得のみの関数のため、ec…

記事のデザインを指定する - カスタムテーマ

記事のデザインを指定する 「style.css」を編集する スタイルシートを適用する get_stylesheet_directory_uri() 現状のテーマで使われているスタイルシートの URI を返す関数です URIは、(http:// or https:// 等の完全な形の)ウェブアドレスです スタイルシ…

記事の一覧ページを作成 - カスタムテーマ

index.phpを編集する 基本構造の入力 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル</title> </head> <body> </body> </html> WordPressのテンプレートタグ 記事タイトルを表示 WordPressのif-else文 書き方としては、以下の4通りがありますが、いずれでも処理は同じになります

ローカル環境にWordPressをインストール

ローカル環境にWordPressをインストール 日本語 — WordPress ja.wordpress.org WordPressインストール手順 「XAMPP(MAMP)」内「htdocs」フォルダー内に「wordpress1207」という名前のWordPressフォルダーを配置します データベースの作成 「wordpress1207…

レスポンシブイメージ

レスポンシブイメージ マルチデバイスの条件下で最適化された画像リソースを提供する仕組み www.html5rocks.com <picture> Element Sample developer.mozilla.orgparashuto.com 実践例 幅を「w」で指定しない場合 376px以上 768px以上 960px以上 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブイ</title></meta></head></html></picture>…

グリッドレイアウト

グリッドレイアウト テキストP.141参照 Placeholder.com Placeholder.com: Placeholder Images Done For You [JPG, GIF & PNG] The Anatomy of a Grid uxdesign.cc Using Layout Grids Effectively www.designersinsights.com Color Crush osachados.com.br

Phoroshop - ねむい画像を補正

ねむい画像を補正をPhoroshopで補正 「ねむい」とは、明るい部分と暗い部分との差が少なく締まりがない写真を表現することば シャドウ・ハイライト 「イメージ」→「色調補正」→「シャドウ・ハイライト」 スマートシャープ 新規調整レイヤー 何度もやり直しが…

CSS3 - イメージフィルター

CSS3 - イメージフィルター Photoshopで画像加工を行わないで同じ効果を得る 元画像 <figure class="sample"><img src="img/01.jpg" alt=""></figure> <figure class="sample blur"><img src="img/01.jpg" alt=""></figure> <figure class="sample brightness"><img src="img/01.jpg" alt=""></figure> <figure class="sample contrast"></figure>

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ developers.google.com CodePen Fullscreen Youtube

Emmetの使い方

Emmetとは Emmetは、主にHTMLやCSSの記述・編集を効率化するプラグインです blogs.adobe.com テキストエディターの場合 Adobe Bracketsは、プラグインをインストールします VS Codeは、インストールされています Dreamweaverの場合 Emmetは、インストール済…

Adobe Blog IllustratorでWebデザインをはじめよう!

Adobe Blog IllustratorでWebデザインをはじめよう! blogs.adobe.com