My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

Webマーケティングが学べる講座まとめ

Webマーケティングとは Web(サイトやツールなど)を活用して儲けを生む仕組みを作る集客・販売戦略活動 SEOやリスティング広告など、 Web制作に関わる以上、 日々、Webマーケティングのスキルアップの必要性を感じます。今日は、仕事に活かせそうなWebマーケ…

WordPress 海外テーマ適用時に表示される ??????? の解消方法

WordPress 海外テーマ適用時に表示される ??????? の解消方法について WordPressの海外テーマを適用している時、マルチバイトテキストが ??????? となってしまう現象が発生。今日は、この現象の解決方法に関する備忘録です。 原因・解消方法 原因: 原因は、…

数字型リストマーカー (箇条書き)

<目次> 数字型リストマーカー 標準的な数字タイプ (decimal) 2桁数字タイプ(decimal-leading-zero) ローマ数字[小文字] タイプ(lower-roman) 漢数字タイプ (cjk-ideographic) 数字型リストマーカー 今日は以下のような数字型の箇条書きをマークアップする…

【JavaScript】ページ遷移元情報取得用 パラメータ引き継ぎスクリプト

パラメータ引き継ぎスクリプト 今日は、現在のページに埋め込まれたリンクから遷移先にジャンプした際、遷移先で遷移元ページURLをパラメータで取得するためのJavaScriptをご紹介します。【目的】 遷移元URL情報が引き継がれているため、 どういった被リンク…

【Photoshop】Photoshop で枠線を描く

Photshopで枠線(塗りつぶしなし)図形を描く方法 マニュアルの説明書作成時など、 読み込んだ画像の一部に枠線でマーキングする際に使用する方法です。MSペイントでは難なくできるようなことが、慣れないと意外と分からなかったりします。「今さら?」という…

ファイルの更新状況を管理したい時に役立つサンプルマクロ

ファイルの更新状況を管理したい時に役立つExcel用マクロ 日々ファイルを作成・更新していると、フォルダ内のファイル更新日時を一覧化したいって思うことが度々あります。が、Windowsのエクスプローラー標準機能には、残念ながらそのような機能はありません…

Google AnalyticsをWordPressサイトに設置する ~All in One SEO (プラグイン)編~

All in One SEO (プラグイン) で設置する場合 [準備] 1. All in One SEOがインストールされていない場合には、まずインストール、有効化します。All in One SEO Pack — WordPress プラグイン : https://ja.wordpress.org/plugins/all-in-one-seo-packja.word…

Gmail でリマインド(同報)メールを送信する

5月13日 以下記事の続編です。 times-diary.hatenablog.com Yet Another Mail Merge(Chrome 拡張)で、リマインドメール送信 Google Chrome 拡張機能の「Yet Another Mail Merge」を利用すると、Googleメールから一斉同報メールを簡単に送信することができま…

無料でここまでできる! Googleフォームで作るセミナー受付システム

1. 本システムの機能 ================================= 1). セミナー申し込みフォーム 2). 参加者リスト自動生成 3). 受講票兼自動返信メール作成・送信 4). 関係者宛 受付通知メール送信 5). リマインドメール送信 2. システムの流れ ===================…

プラグインなし WordPressにカスタム投稿タイプを作成する

カスタム投稿タイプ作成方法 WordPressのカスタム投稿タイプという機能を活用すると、 通常の投稿タイプとは区別して記事を作成・掲載していきたい場合に便利です。 、 カスタム投稿タイプの作成には、以下、「Custom Post Type UI」といった有名で非常に便…

パスワード認証による閲覧制限 2つの方法

<目次> パスワード認証によるページ閲覧制限方法 1).基本認証による方法 2)、JavaScriptによる方法 パスワード認証によるページ閲覧制限方法 1) 基本認証による方法 2) JavaScriptによる方法 1).基本認証による方法 1).基本認証による方法は、4/7の内容を…

「.htaccess」ファイルを設置する(基本認証編)

サイトに「.htaccess」ファイルを設置しました。 「.htaccess」とは Webサーバーに設置すると、設置したディレクトリ以下に対して制御することができます。 ※Webサーバーに「Apache」を使用していることが前提「.htaccess」ファイルでできること 主な用途と…

【WordPress】カスタムフィールド活用術:記事ごとにCSSを設定する

個別の記事にCSSを設定する カスタムフィールドを活用すると、作成中の記事に独自のスタイルを設定することができます。 WordPressの記事単体に独自のスタイルを設定したい場合、 エディタ内でCSSを書いてもスタイルを設定することはできますが、 これは推奨…

【CSS3】 アニメーションボタン

CSS3によるアニメーションボタン No.2 拡大・縮小するアニメーションボタンを作成しました。 Demo css3 アニメーションボタン(拡大・縮小) | WebStock 以下、ソースを記載します。[ソース] html <a href="#"><img class="area-main-topbtnr" src="http://サイト/パス/画像ファイル名" width="100%"></a> ※上記、サイト名、パス、画像ファイル名は適宜変更してくださ…

【現場テク】カンバスサイズから画像を指定サイズに加工(縮小)する方法

カンバスサイズから画像を指定サイズに加工(縮小) Photoshopの「イメージ」-「カンバスサイズ」から、画像を指定サイズに変更(縮小)する方法です。 【手順】準備: ※この作業時、「選択したレイヤーのバウンディングボックスを表示」はチェックしておいてく…

ヒートマップ一覧

ヒートマップを利用する 無料でも使えるサービス 自作しようと思う時に参考になる情報 はてなブログユーザーなら使いたいヒートマップツール「Ptengine」 WordPressでヒートマップを使おうと思う時に参考になる情報 ヒートマップを利用する 「ヒートマップ」…

Google Apps 更新日自動入力

更新日自動入力機能をGoogleスプレッドシートに追加 Googleスプレッドシートは、最近仕事でチーム利用することが多くなりました。今日は、スプレッドシートで管理している表中の値が更新された場合、その更新日を記録したいとのメンバー要望により、該当行に…

【CSS3】 アニメーション(ゆらゆらバナー)

ECサイト設置用 CSS3のアニメーションバナー ECサイト設置用にCSS3のアニメーションバナー、 作りました。 ※以下はDemo用ダミーです。Demo 以下、サンプル用のソースを共有します。 <style> /* 基本設定 */ html, body { margin: 0; padding: 0; } body { font-fami…

CSSで実装するハンバーガーメニュー

ハンバーガーメニュー CSSで開閉動作付きハンバーガーメニューを作成しました。 Demo 備忘録として、ソースを掲載しておきます。【ソース】html <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="/css/style.css" type="text/css" /> <script></link></meta></meta></head></html>

【CSS3】transparent で右向き三角を表現する

CSSで右向き三角ボタンを作る transparentを使って下のボタンを作ってみました ECサイトなどに使えそうなボタンです。 備忘録として、ソースを記載します。 [ソース] html <a href="#" class="see_detail">詳細を見る</a> [ソース] css a.see_detail { width: 160px; font-size: 16px; } .see_de…

【近況】 Webデザイナーとして転職しました

2017年より、広告代理店勤務、Webデザイナーとして新たな一歩を踏み出しました。 職業訓練校でのWeb制作科卒業後から2年半、 その間はなかなかWebデザイナーとしての就業の機会が得られず、訓練校前と同様、システム開発の仕事に携わっていました。 (Web制…

MACにGoogle日本語入力を入れてみました

MAC

Google日本語入力をインストールしました。 以下、手順を記載します。 1. 以下サイトより、プログラムファイルをダウンロードします。www.google.co.jp 2. 以下、ダウンロードしたプログラムファイルをダブルクリックし、インストーラを起動します。 GoogleJ…

Surface 3 購入: 感想 / Surfaceのファンクションキーを使いやすく設定する

Surface3を購入しました。 まずは、その感想です。 1) 感想 [ 良かったこと ] タブレットとPCの両方の性質を兼ね備えていること。 スペックがそんなに良くなくても、意外とWeb制作にも使えてます。 軽い! 薄い! キーボードはなかなか快適! [ イマイチだっ…

【本】PHPによるWordPressカスタマイズブック―3.x対応

PHPによるWordPressカスタマイズブック―3.x対応著者 : 藤本壱ソシム発売日 : 2010-09ブクログでレビューを見る»WordPressをカスタマイズするにあたり、 特に、カスタム投稿タイプ、カスタムフィールドの利用について参考にしたくてこの本を購入しました。購…

2015/02/24 Excelのセル内改行をいっぺんに取り除く方法は?

【本日のWeb制作 学習メモ】ひとつ前の記事の関連となりますが、 phpMyAdmin で CSVインポートがうまく行かなかった原因の一つに、 元データとして受け取っていたExcelシートにセル内改行が含まれていたという問題がありました。数百件に及ぶデータの中から…

2015/02/23 phpMyAdminを用いてCSVファイルでインポートする方法

【本日のWeb制作 学習メモ】 phpMyAdminを用いてCSVファイルでインポートする方法(覚書) CSVデータの読み込みに意外と手こずってしまったので、、、ということでの覚書です。いろんなサイトを参考にさせていただきながら試行錯誤した何とか成功。なお、実…

2014/12/28 jQueryのプラグイン「DataTables」を使ってみた

DataTables とは、HTMLテーブルをとっても高機能にしてくれる jQueryのプラグインたとえば、以下のような機能がとっても簡単に実装できます。 テーブルヘッダにソート機能を付け、列ソートができます。 フィルター機能で、検索がとっても簡単にできます。 1…

2014/09/10 RSSフィードをサイトに実装する

RSSフィードを簡単にサイトに表示するには Google Feed APIを使って、簡単にRSSフィードをサイトに表示する方法Google Feed APIを使うと、簡単にRSSフィードをサイトに表示することができると知りました。 試しに、自身のブログサイトからfeed用URLを取得し…

2014/09/05 本日のWeb道 学習メモ

【本日のWeb制作 学習メモ】 MACを使いこなす(ファンクション編) jQueryを使ったWebページ制作 mysql 文字化け対応 1. MACを使いこなす(ファンクション編)WindowsからMACを使うようになって困ったことWindowsでは普通に使えていた入力変換ができない!?…

2014/08/08 ショッピングサイトを作る

PHP

【本日のWeb制作 学習メモ】 ショッピングサイトを作ってみる PHPの演習として、ショッピングサイトを作ってみます。作成ページ(ページ遷移)は以下の通り 1.スタッフ追加画面 2.入力チェック画面 3.スタッフ追加完了画面 4.スタッフ一覧画面 5.スタッフ ロ…

2014/08/07 ロジックとデザインの分離(送信した値を出力)

PHP

【本日のWeb制作 学習メモ】 [PHP] ロジックとデザインの分離 PHPをHTMLに組み込む際、ロジックとデザインを分離してコーディングするように配慮する。理由: チームで分業の場合など、WEBデザイナーがPHPを理解できるとは限らない。 ソースのわかりやすさも…

その後のWeb制作活動について

2014年7月に制作科受講終了以後の活動について、その後の活動は、「まだまだ続くよ…」でと告知していましたが、 やっぱり引き続きこちらで続きを投稿します。引き続きよろしくお願いいたします。

はじめに

改めまして 求職者支援訓練後も続く、My Web道…Web制作に関する学習メモを公開していきます。

2014/07/25 修了日

修了日を迎えて… 6ヶ月に及ぶWeb制作科の授業が終了しました。毎日9時から14:25までの5コマの授業、 開始当初は結構長いと思われた6ヶ月は、始まってしまえば、あっという間の6ヶ月でした。 修了後、Web制作に関わるのか、全然違う職場に行くのかは、人それ…

Bootstrap サイトにメールフォームを作成

Bootstrapテンプレートで作成したサイトに、 メールフォームを設置しました。 《index.php》以下を、htmlの直前に記述

7/15 Portfolio 制作に向けて (2)

本日の授業テーマPortfolio制作に向けて 本日の授業内容プログラマー志望の場合のアプローチは?プログラムを公開する以下のサイトを活用するjsdo.it - Share JavaScript, HTML5 and CSS : http://jsdo.it/ ポートフォリオ制作に向けてポートフォリオ制作時…

7/14 Portfolio 制作に向けて (1)

本日の授業テーマ Portfolio制作に向けてポートフォリオ制作に向けての学習メモ 本日の授業内容 [Tips] マウスオーバーhoverがうまくいかないときに参考にしたいサイト hover疑似クラスは宣言順序に注意が必要です - Web標準普及プロジェクト http://www.moz…

6/27 [PHP/SQL] データベース(DELETE / UPDATE)

本日の授業テーマ [PHP] データベース(登録内容削除) [PHP] データベース(登録内容修正) 本日の学習内容 [PHP] データベース(登録内容削除) SQLでデータを削除する(DELETE文) SQLでテーブルからデータを削除するには? DELETE FROM `items` WHERE `ite…

6/26 [PHP/SQL] データベース (INSERT / DELETE)

本日の授業テーマ [PHP] データベース 新規商品登録 (INSERT) 登録商品削除 (DELETE) 本日の学習内容 [PHP] データベース (前回のおさらい) ここまでの処理の流れを確認(ログインから新規商品登録完了まで) 新規商品登録確認画面 (entry_confim.php) [処…

6/25 [CSS3] 確認テスト/ 入力フォーム

本日の授業テーマ [CSS3] 確認テスト 入力フォーム 本日の学習内容~まとめと感想~ [CSS3] 確認テスト(演習ドリル10) 以下、昨日の確認テストで学んだ内容の復習テストです。 【問題】【01】CSS3で影をつける場合のプロパティ名を書きなさい答え: box-sh…

6/24 CSS確認テスト / Webフォントの活用 / Zen-coding(Emmet)の活用

本日の授業テーマ CSS3確認テスト Webフォントの活用 SVG画像の活用 Syntax Highlighter Zen-coding(Emmet)の活用 本日の学習内容 CSS3確認テスト 【問題】【問1】CSS3で影をつける場合の、2つのプロパティ名を書きなさい答え: box-shadow text-shadow参…

6/19 Sublime Text3 日本語化 / [PHP]データベース(ログイン・ログアウト・商品情報登録)

各種ソフトインストール・日本語化(Sublime Text3 インストール・日本語化) [PHP]データベース(ログイン・ログアウト・商品情報登録) [課題] ▼各種ソフトインストール・日本語化 Sublime Text3 インストール・日本語化 Eclipseインストール・日本語化 + …

6/18 [Portfolio] Web制作者としての就職活動心得 / ポートフォリオ制作

本日の授業テーマ Web制作者としての就職活動心得 ポートフォリオ制作 本日の学習内容~まとめと感想~ Web制作者としての就職活動心得 Web制作者としてのアピール効果の高い履歴書・職務経歴書の作成 ポートフォリオを制作する 職務経歴書 デザイン会社に応…

6/17 [HTML5/CSS] レスポンシブサイト(固定レイアウト)/ [CSS3] 角丸 / [PHP] 各種RSSを取得

[HTML5/CSS] レスポンシブサイト(固定レイアウト) [CSS3] 角丸 [PHP] 各種RSSを取得 [HTML5/CSS] レスポンシブサイト(固定レイアウト) 以下リンク先の演習課題によりレスポンシブサイトの作成方法を学びました。[課題] 固定レイアウトパターン:構造 - W…

6/16 [PHP] 確認テスト(データベースへの接続) / [HTML5/CSS] レスポンシブサイト(可変レイアウト)/ [CSS3] シャドウ

[PHP] 確認テスト(データベースへの接続) [HTML5/CSS] レスポンシブサイト(可変レイアウト) [CSS3] シャドウ(ボックス・テキスト) [PHP] 確認テスト(データベースへの接続) 前回の授業の復習として、以下の課題を実施 【課題】 ブラウザの画面に、以…

6/13 [PHP] 商品管理データベース(try catchステートメント/ログイン情報の照合)

[PHP] 商品管理データベース [PHP] 商品管理データベース 商品登録データベースを作成します。 【機能】 認証(ログイン・ログアウト)機能 登録商品一覧画面 新規商品登録 登録内容修正 登録商品削除 【作業・確認事項】[作業の流れ]1. テーブル作成(phpMy…

6/12 [HTML5] 習得度確認テスト / [PHP] メールフォーム

6/12 授業 [HTML5] 習得度確認テスト [PHP] メールフォーム [HTML5] 習得度確認テスト 【問1】HTMLの最新バージョンは? 【答】 HTML5参照: http://app-review.jp/news/159165【問2】見出しの要素は6種類あります。すべて記述しなさい。 【答】 h1, h2, h3,…

6/10 [HTML5] レスポンシブWebデザイン

[HTML5] レスポンシブWebデザイン 参照: http://d.hatena.ne.jp/web-0127/20140701/p1 レスポンシブWebデザイン デバイスごとのマルチソースではなく、ワンソースで対応する参考: slideshare 「レスポンシブWebデザインの基礎」 http://www.slideshare.net…

6/9 HTML5(構造化要素) / WordPress(カスタマイズ)

HTML5(構造化要素) WordPress(カスタマイズ) HTML5(構造化要素) 講師ブログ(対象ページ) http://d.hatena.ne.jp/web-0127/20140601/p1 http://d.hatena.ne.jp/web-0127/20140602/p1 参考サイト: slideshare http://www.slideshare.net/myakura/html…

6/5 [PHP] メールフォーム

[PHP] メールフォーム [PHP] メールフォーム 今日は、メールフォーム設置時に考慮すべきセキュリティ面についての学びです。 それらを考慮のうえ、引き続き、作成中のメールフォームに機能を追加していきます。 send_mail について WordPressではできない。 …