読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

サイト制作スキルを伸ばしたい方へ

【ウェブデザイナーもコーディングできなければならない理由】

2017年にWebデザイナーが認識しておくべき5つの変化|ferret [フェレット]『デザインは静止画だけではない』という話です。 以下、記事からの抜粋です。 少し前であれば、「デザイナーだからコーディングはできません」は通用したかもしれませんが、今の時代…

【覚えるのではなく理解すればラクできる】

ワードプレスでパスワード保護しているページを 一覧に表示させないようにする方法、 というTipsが載っている記事を見つけたのですが、 2通りの方法がコードで紹介されています。WordPressでパスワード保護している投稿を一覧から除外する方法 丨 京都のフ…

【たった1行のコードに隠された沢山の基礎】

ウェブ制作者にはおなじみの「スライドショー」。 必要なファイルを読み込んだ上で、 たった1行のコードを追加するだけでOK! そんな超便利な「プラグイン」が配布されています。 でも、はじめてスライドショーに挑戦する方には その「たった1行」がすごく…

【スマホ向けYoutube動画の表示サイズ最適化】

賢威など有名テーマの使い方を解説した ノウハウサイトでよく見かけませんか? .embed-youtube { position: relative; height: 0; padding-top: 56.25%; } .embed-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } よく…

【jQueryを最速でマスターするコツ】

jQueryはjavascriptを拡張したようなものなので、 オリジナルのjavascriptには無いメソッドや構文が たくさん用意されています。 「覚えるのメンドクサイ」 「新しいこと勉強する時間がない」 という理由で避けてきた方も多いのではないでしょうか? 私もそ…

【jQueryを使ったエフェクトの正体】

昨晩、WebデザイナーさんとjQueryのレッスンでした。 レスポンシブなサイトによくある、スマホメニューを 開いたり閉じたりする動作をjQueryで作成しました。 ボタンをタップするとメニューがふわっと表示され、 もう一度タップするとふわっと消えていくメニ…

【CSS/jQueryアニメーションの基本原理】

CSSやJavaScript(jQuery含む)のセレクタを使って HTMLタグにスタイルシートを設定すると、 ブラウザの表示に変化が起こりますね。 その変化を、最初から発生させるのではなくて、 ユーザーの操作やページの表示状態が変わった タイミングで発生させるのが原…

【CSS/jQueryアニメーションのメリット】

ウェブでよく見かけるアニメーションを大別すると ・動画 ・画像(GIFアニメ、SVGアニメ) ・CSSによるアニメーション ・jQueryによるアニメーション などがあります。 動画や画像は、それ自体が1つのコンテンツなので、 配置した場所で再生されます。 しか…

【文法ではなく論理を「見る」】

昨年ピンポイントでWordPressのカスタマイズを ご依頼いただいた方から突然のご相談が入りました。 「WordPressのコメントが入力エラーになります」 確認すると、ちゃんと名前を入力しているのに 「名前とメールアドレスが入力されていません」 というエラー…

【ワードプレスで管理画面のメニューを消す方法】

外注のライターさんに記事作成を依頼する場合など、 ログインの権限に応じて管理画面のメニューを見えないように したいことがあるかと思います。 テンプレートの設定など、本来は管理者にしか使えないメニューは 何もしなくても自動的に消えますが、プラグ…

【ページの“仕掛け”の正体はJavaScript】

「販売終了まであと○時間○秒」 というカウントダウンタイマーや、 ブラウザを閉じようとすると 「本当に閉じてもいいのですか?」 というメッセージが表示されたり、 スマホ用のハンバーガーアイコンを タップするとメニューが右からヌルッと現れたり、 画面…

【WordPressとHTMLサイトを効率よく管理する発想】

既存のHTMLサイトでSEOの強化と情報発信を したいというクライアント様からのご依頼で、 WordPressでブログページを構築しました。 既存のテーマ(テンプレート)ではなく、 オリジナルテーマですが、 1日で構築できたのには理由があります。 テンプレート…

【ホームページのドメイン変更で絶対忘れてはならないこと】

ドメインとは、ホームページのアドレスの一部です。 例:ホームページのアドレスが http://oldpage.com/ の場合、 oldpage.com がドメインです。 もし、ホームページを公開してから後でアドレスを変えたいと思ったら、 新しいドメインを取得して切り替えます…

【マリオでJavaScriptを楽しく学ぼう】

世界中で愛されているキャラクター、 マリオを使うとJavaScriptの基本が学べます。 プログラミング的な考え方がいっぱい 詰っているんです。 世代に合わせて、他のキャラクターもOK♪ キン肉バスターをかける「キン肉マンスクリプト」、 ペガサス流星拳をはな…

【PostCSSを推奨するわけじゃありません】

www.webprofessional.jpPostCSSという、CSSを効率よく書けるようにする仕組みについて紹介された記事なんだけど、私はこの手の情報に両手をあげて賛同はしかねます。もちろん、技術を紹介する側の人たちは実際にそれを使うことで便利さを感じていたり、将来…

【プログラミングで探偵気分♪】

今日のタスクやっと完了した♪ ・サーバー移転のご相談対応 ・WPプラグインのカスタマイズ ・PHP製メールフォームの実装 ・スマホ版&PC版を切り替えできるレスポンシブ対応 細かな仕事ばかりだったけど、 1つ1つの対応でググって調べた 時間のほうが長かっ…

【jQuery+CSS3アニメーションが面白いサイト】

CSS3の transform: rotate(); を使うと、指定したHTML要素を任意の角度に傾けて表示することができます。 これをjQueryと組み合わせると、ユーザーがページをスクロールした量に応じてページの中身が変化するアニメーション的な効果を表現することができます…

【Web制作の品質アップに役立つ知識】

これ実務でウェブ制作に関わる人は 知っておいて損はしない情報。 10数年ウェブの開発に関わった経験 に基いているので間違いない。 システム開発ではV字モデルという 工程を経て、無事に稼働を迎える。 これはサイト制作にもLP制作にも あてはまる共通不変…

【気付かない=制作漏れ=手戻り】

少し前の投稿で、ウォーターフォールと アジャイルという、モノ作りの方法論を お話しました。 予算や納期が厳しい案件は、 要件を漏れなく情報共有して手戻りなく 確実に作り確実に検収が行われるように ウォーターフォールが望ましい。 10数年の開発現場経…

【カスタムフィールド Let's Join!!】

ワードプレスの店舗検索ページで フリーワード検索(曖昧検索)を 実現する考え方。 【1】 1つ1つの店舗の情報は、 店名や住所、電話番号などがあるので カスタムフィールドに保存しておく。 【2】 カスタムフィールドは1つの記事に 対して複数が紐づく…

【jQuery無しでハイセンスなロールオーバー】

↓ページ中央の写真にマウスを乗せると... http://designstub.com/livepreview.php?pid=406いい感じにロールオーバーアクションが発生します。 具体的に何が起きるかというと、 ・写真が1.2倍に拡大する ・写真の上に水色のレイヤーが浮かび上がる ・水色のレ…

【楽をしたい人ほど言い訳をする】

月曜の個人レッスンの準備で、WordPressのトップページにカスタムフィールドの内容を新着順に表示するサンプルを作りました。 やり方だけなら1時間あればノンプログラマさんでも可能かも知れません。 でも、生徒さんはサイト制作を仕事にしている方なのです…

【たかがプログラムの話じゃありません】

画像のリンク範囲をレスポンシブに! っていうjQueryの無料プラグインが ありますが、順序立て考えていくと 自作できます。 いえ、私がではなく個人レッスンの 生徒さんがです。 そう、教材として無料配布されてる プラグインと同等な機能をjQueryで 1から…

【直リンクを強制的に禁止する方法】

イラストや写真とか作品を自分の ホームページに掲載している人は 無断で作品を他サイトに掲載され たらどう思いますか? 「そ、それ私のーーーー!!」 「何であんたが作ったことになってるのよーー!!」 ですよね(^^; だからよく、イラスト素材屋さん の…

【言葉が分からなかったらガン無視?】

道端で外国人と目が合って、 道を聞かれたらどうしますか? 「面倒なことに関わりたくない」 「間違ったこと教えたらかえって迷惑になる」 とか、都合のよい理由をつけて ガン無視しますか? 目が合って声もかけられたのに? ちょっと後ろめたいような 後味…

【自己投資の価値を10倍にする2つのコツ】

自分のため、事業のために新たな スキルを手に入れたりさらに磨き をかけたい、という前向きな方は 大勢おられます。 読書をしたり、 セミナーに出たり、 人に遭ったり、 やり方はいろいろですが、 スキルアップは将来の自分の人生や、 ひいては家族の生活向…

【初心者という免罪符】

ネットで調べごとをしていると、 Yahoo知恵袋みたいなフォーラムに 行き着くことがあると思います。 「初心者です。質問があるのですが...」 とか、 「~~~を教えてください。 ちなみに初心者です。」 とか、身分証明書のごとく初心者と いう言葉を使いた…

【どんなに複雑なHTMLでも打ち負かす方法】

プログラミング講座で扱っている HTMLの実習課題は比較的階層が 浅いものばかりですが、実務では 添付のように10階層以上の深~く 折りたたまれたコードに遭遇する ことがよくあります。 「こんなの理解できないし書けないよ!」 と尻込みしてしまいそうにな…

【気が利くWebデザイナーと言われる方法】

ホームページやランディングページの 目に見えるデザインは、もちろん Webデザイナーさんの腕の見せどころ。 しかし、それは誰もが意識すること。 やって当たり前、できて当たり前と いうのがお客様のスタンスでしょう。 では、制作したサイトやページがSNS…

【WordPressのご相談はお気軽にどうぞ】

サーバーのマニュアルの通りに WordPressのお引っ越し作業を したけれど上手くいかない....。 ということで、とある企業様から 調査のご依頼をいただきました。 ざっと30分ほど調べたところ、 データベースの引っ越しが正常 にできていないことが判明。 い…

【ホームページ制作コンサルティング後記】

オムレツ関係のサイトに関わって おられる生徒さん(Sさん)に、 サイト制作のコンサルティングを 行いました。 Sさんご自身が制作者としてお客様を リードしていく上での、様々な不安や 疑問にアドバイスをさせて頂きました。 特にSさんにとって印象的だっ…

【Cookieの保存と取得でカウントダウンタイマーを実装】

今日はWordPressのサーバーエラー調査に引き続き、 Cookieを使ったカウントダウンタイマーを実装しました。肝になるのがCookieの書き込みと取り出しです。 Cookie(クッキー)とは? Cookie(クッキー)とは、一人一人のパソコンに個別に 保存されるデータの…

コーディングとプログラミングの違いとは?

コーディングとプログラミングの違いとは? HTMLやPHPなどを使ってウェブページを作る作業は コーディングと呼びますが、プログラミングとの 違いはあるのでしょうか?個人的な意見ですが、コーディングはデザインを 形にすることを指し、プログラミングはそ…

CSSを勉強している皆さんへ

新しい情報を追いかけるときの注意点です。 「前提条件を意識する」 例えば、 '-webkit 等のベンダープレフィックスがついたスタイルは、 まだ標準化されておらず、特定のブラウザ向けの独自の 実装であることを忘れてはいけません。 jQuery のようにインタ…

ワードプレスが簡単だなんて誰が言ったのか

ワードプレスはホームページとブログがセットになったようなもの。 だから、ワードプレスで作るページには ・固定ページ(ホームページ) ・投稿ページ(ブログ) の2種類があり、投稿ページにだけ、カテゴリーという概念があります。 サイトの目的や運用方…

「A」が「A'」になっても通用する力

プラグインを紹介しているブログなどを見ると、「これを使えば簡単にできる!」と書いてあることが多いです。 これは、2パターンあると思うんですよ。 ━━━━━━━━━━━━━━━━━━━ 【パターン1】 ━━━━━━━━━━━━━━━━━━━ そのブログを書いた本人が、プラグインの使い…

ドットインストールで挫折したことがある方へ

個人的にお教えしている生徒さんが、実はドットインストールの 有料会員だったそうです。 この生徒さんはなぜ、有料サイトで学びつつ、 さらに私に教わろうと思ったのでしょうか? ドットインストールって比較的安いと思うし、 動画もわかりやすいとは思うん…

【CodeMY プログラミング講座】無料モニター残り9名

プログラミング講座 ご質問にお答えします 昨日から無料モニター会員の募集を開始しましたプログラミング講座ですが、 定員枠20名のところ、既に11名の方からご応募いただいております。この場をお借りして御礼申しげます。 ありがとうございます。▼プロ…

【HTMLの知識ゼロでもWordpressに設置できるブログパーツ】

ボタンをクリックすると大吉や中吉といった結果が、 画像と文章で表示され、さらにその下には合わせて 読んでもらいたい関連記事へのリンクが自動的に 表示されるブログパーツです。いわゆる「おみくじスクリプト」と呼ばれるもので、 ネット上には javascri…

【HTMLレッスン後記 生徒さんの成長】

生徒さんの成長を感じた1時間 毎週1時間ですが継続してレッスンを受けていただいている生徒さんに今、 ブログのトップページをイメージしたHTMLページを1から作ることを教えています。今日ようやくヘッダーエリアが完成。 ヘッダーは初学者にとって学びが…

【本当に役立つノウハウ記事とは?】

プログラミングのお話です。 「こういう動きをさせたいときは こういうふうに書けばオッケー」 みたいなノウハウ、ネットにたくさん 落ちていますよね? 私も行き詰まったときは必ずネットで 調べるので、そういうノウハウ記事を 大いに参考にします。 けれ…

【形から入るプログラミング】

私は常々、基礎が大事だと言っています。 しかしそれは、基礎をこれから学ぶ人には 必ずしも当てはまらないと思っています。 知識というのは、1度インストールしたら 終わりではなく、何度も上書きしていく ことによって深まるものだからです。 プログラミン…

【ブラウザが裏で何をしているか】

HTMLの階層構造を辿って特定のタグに アクセスし、表示内容やCSSを強制的に 変更・削除できる仕組みをDOMと言い、 DOMは様々なプログラム言語から操作 できる汎用的な仕組みです。 典型的なのはJavaScriptやjQueryでDOM を操作することですが、書き方によっ…

【人に指示するために必要なスキルとは?】

Webサイトを作るとき、『設計』という 作業が各工程に存在します。 商用サイトなら販促にどう結びつけるか、 位置付けをどうするかという戦略を考える のも設計だと言えます。 制作工程でも設計の連続です。 レイアウトを決めるのも設計ですし、 レイアウト…

【よく耳にするマルチサイトって何?】

Wordpressで多言語向けのサイトを作るなら マルチサイトにすれば良いというアドバイス がネット上に散見されます。 私は一長一短だと断言致します。 こういうことをしたいなら、こうしたらよい という答えに安易に飛びついて良い場合と そうでない場合がある…

【プログラムアレルギーの克服法】

得体のしれないモノへの拒否反応 先日、新規の生徒さんがWordPressをカスタマイズしたいというので 簡単なCSS変更のコードをお見せしたところ、「うわ・・・英語・・(´Д`)」と、拒否反応を示されました。テーマに備わっているカスタマイザーをダッシュボー…

【最近の取り組み、調べたこと】

Bootstrap3のグリッドレイアウトについて ・仕組みの理解 ・実務での使いこなし スライダーの応用について ・画像の上にテキストレイヤーを乗せる ・レスポンシブ対応の位置合わせ (position:absoluteで四方の座標を%指定) Wordpress4.3とプラグインの非…

【古い知識は塗り替えるためにある】

あちこちのサンプルで見かけた定型の記述を なんとなく「こう書くものだ」と思いこんで しまうと、知識の塗り替えの妨げになります。 「なぜそう書くのか」「記述の意味は?」 という素朴な疑問を持って調べ、 自分なりに納得できる解説を見つけておく。そう…

【「習うより慣れよ」の意味】

やってみた結果行き詰った人が「●●ができるようになりたいです!」を口にするのなら 「人に学んで基礎を身に付けてください」と言いたいです。 でも、まだ何も行動していない人が「●●ができるようになりたいです!」を口にするのなら 「まずやってみてくださ…

【名探偵は本質を見抜く】

本日最後のホームページ制作レッスンを終えました。今日の生徒さんのお悩みは スライダーのカスタマイズ サブメニューの開閉動作について スマホ用メニューの動作について トピックスとしてはプラグインとjQueryですが、結局修正したのはCSSでした。 気持ち…