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

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

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

【プロから学ぶべきは「着眼点」である】

ドラえもんの名言のひとつに こういうのがあります。 ~~~~~~~~~~~~~~~ 人にできて、きみだけにできない なんてことあるもんか。 ~~~~~~~~~~~~~~~ いい言葉ですよね。 今すぐにはできないことでも、 どうすれば克服できるかが…

【ウェブページで外部のリソースを借りるには?】

添付のようなアイコンは、 画像として配布されているものもあれば、 ウェブフォントとして配布されているもの もあります。 画像の場合は、色が変更できませんし、 CSSで大きさを変更するため引き伸ばすと 画像がひどく荒れてしまいます。 しかしウェブフォ…

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

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階層以上の深~く 折りたたまれたコードに遭遇する ことがよくあります。 「こんなの理解できないし書けないよ!」 と尻込みしてしまいそうにな…