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

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

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

【ワードプレスのカスタムフィールドの正体】

ワードプレスで投稿や固定ページやカテゴリーに 独自のデータを追加できるカスタムフィールド。 その正体は、 データベースの wp_postmeta テーブルです。 このテーブルには、どのページのデータなのかを 表すページIDが付いているので、ワードプレスは 投稿…

【カスタムフィールドの正体】

ワードプレスで投稿や固定ページやカテゴリーに 独自のデータを追加できるカスタムフィールド。 その正体は、 データベースの wp_postmeta テーブルです。 このテーブルには、どのページのデータなのかを 表すページIDが付いているので、ワードプレスは 投稿…

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

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

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

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

【ワードプレスのスラッグは日本語NG】

ワードプレスのページやカテゴリーにはスラッグという ものがあり、公開ページのURL末尾に自動で付きます。 例)「日本語のスラッグ」というスラッグのページ http://xxxx.com/日本語のスラッグ ブログサイトなどでよく見かけますよね? ワードプレス自分で…

【モバイルファーストなCSS】

モバイルファーストとは、モバイルデバイス向けの 最適化を優先したウェブページの作り方を言います。 コーディングにおいては、 モバイルでアクセスしたとき最小限のリソースのみ 読み込むようにすることで、表示速度を無駄に遅く しないという配慮もモバイ…

【<img>タグのレスポンシブ&Retina】

<img>タグを画面サイズに応じてレスポンシブに切り替え、 なおかつiPhoneのようなRetinaディスプレイの場合は高解像度版の 画像を選択的に読み込ませる方法です。 <picture> <source media="(min-width: 768px)" srcset="images/main_visual_l.jpg"> <source media="(min-width: 320px)" srcset="images/main_visual_m.jpg 1x,images/main_visual_m@2x.jpg 2x"> </source></source></picture>

【ディベロッパーツールでリアルタイム保存コーディング】

使ったことがない方はぜひお試しください。buchineko.website プレビューしながらCSSが書けるから、 ピクセル単位の微調整もラクラク。 入力候補が出るので少し文法を忘れてもOK。 愛用しています。

【WordPressで画面が真っ白になる原因と対策】

WordPressが他の無料ブログと決定的に違う点は、 自分のサーバーにインストールして使うことです。 その分、間違った変更をするとログインできなくなったり、 サイトが真っ白になることがあります。 真っ白になるのは、そのページを表示するための HTMLが正…

【見積交渉におけるRetina対応とレスポンシブ】

レスポンシブという言葉は浸透してきましたが、 Retinaディスプレイへの対応をするかしないかで 制作の手間が変わることや、Retina対応の必要性を 考えておられるクライアント様は少ないようです。 そんなクライアント様と見積交渉する上で、 Retina対応の必…

【CTA自動表示プラグイン 技術サポート後記】

WordPressには、お問い合わせなどのCTAを ブログ記事の下に自動で表示することができる プラグインがあります。 CTAの表示内容をプラグインの画面で変更すると 全てのページに一斉に反映されるので便利です。 しかし、お使いのテーマによっては 「投稿」以外…

【javascriptでスマホメニューを作ろう】

アイコンをタップするとメニューが表示され、 もう一度タップするとメニューが消える。 レスポンシブなサイトで必ず見かけるスマホメニューを 初めて javascript を学ぶ生徒さんにお教えしました。 きちんと改行しても、 たった10行程度のプログラムで作れる…

【動画とマンツーマン~HTML基本講座の風景~】

在日観光客へのガイドとなるウェブサービスを 立ち上げるべく、WordPressを土台に各種APIの 組み込みに挑んでおられる生徒さん。 いきなりAPIと言っても、ウェブの基本である HTMLやCSS、Javascriptがわかっていなければ 組み合わせるための『発想』が生まれ…

【全ブラウザ対応 CSS3で作る「流れるテキスト」】

HTML4にあった「marquee」タグを使うと、タグの中に書いたテキストを 右から左へ自動でスクロールさせることができます。ホームページの「新着情報」などによく使われていますね。しかし、「marquee」タグは元々、IE(インターネットエクスプローラー)独自…

【ECサイトの送料ルール変更プログラム】

某スイーツショップのECサイトで 複数エリアへの配送に対応するように プログラムをカスタマイズしています。 プログラムは考え方1つ間違えると どこかで必ず不具合が起こるので、 通常のパターンだけ動作確認してOKでも 安心できません。 プログラムが想定…

【5つ☆評価をいただきました】

サイト構築案件についてクライアント様から 評価をいただきました。良くも悪くも、直接 自分への評価を頂けるのは、フリーランスの 醍醐味ですね。 感謝☆☆☆☆☆

【2カラムを3カラムに変更するカスタマイズ】

最新記事のサムネイルが2列(2カラム)で表示される テンプレートをカスタマイズして、3列(3カラム)に なるようにスタイルシートを追加しました。 2カラムのレイアウトでは、 1つ1つのサムネイルが、50%ずつの表示幅を持つよう スタイルシートが記…

【データベースの見方を知っておく理由】

今日は生徒さんからワードプレスのページで 不具合があるとご連絡をいただきました。 とあるプラグインを入れたあと、 プログラムが正しく動かなくなったのです。 でも、そのプラグインを停止しても症状は 変わらないので、何が原因なのかわからない 状態で…

【FullCalendarでイベントをポップアップ】

某Web学習サービスのフロントコーディング。 大きな山場を超えて明日、納品予定です。 BootstrapをCSSのグリッドシステムだけでなく、 アイコン(ウェブフォント)やナビゲーション、 スライダー、モーダルなど各種コンポーネントを ふんだんに活用したサイ…

【高機能なイベントカレンダープラグイン】

仕事で出会った便利なカレンダープラグインをご紹介します。日別にイベントを挿入できるjQueryのカレンダーです。ビューや日付のレンダリング完了イベント(コールバック関数)が 用意されているので、動的にカレンダーの中身を書き換え可能です。イベントデ…

【出版とプレゼントのお知らせ|WordPressのツボとコツ】

お待たせしました。WordPressの本がいよいよ発売です。 『WordPressのツボとコツがゼッタイにわかる本』 出版社:秀和システム 定価:2400円(税別) 約380ページの大ボリュームです。 全国の書店には来週ぐらいに並ぶと思います。 Amazonなら今すぐ…

【チェックボックスの状態は prop ? attr ?】

jQueryでチェック状態に応じて処理を分けたいとき $.prop("checked") $.is(":checked") $.attr("checked") どっちだったか迷ったときの道しるべ。 http://taneppa.net/jquery-prop/ 要するに、attr() はDOMの属性にアクセスするもの。 だから、DOMが変化しな…

【吹き出しの先端を中央寄せするCSS】

画像でもCSSでもどちらでも可能ですが、 吹き出しなどの先端を中央寄せする方法。 <親要素> <子要素> </子要素> </親要素> のように、吹き出しの枠に相当するボタンなどを 親要素とし、その内側に子要素を配置して先端を 表示するタグの役目を負わせます。 親要素の位置を基準…

【コーダーに求められるスキル】

スマホユーザー層を取り込むために、 Webのアプリやシステムのフロントを レスポンシブにする需要が多い模様。 必然的に、スマホでの操作に反応して スライドやメニューを動かす「動作」を 組み込むことも求められています。 かつての、デザイン通りの「静止…

【CSSはセレクタを先に書いてしまうのがポイント】

HTMLでタグを構造化したあと、 その構造を外側から内側に向かって過不足なく 辿りながら、CSSのセレクタを書き出します。 そうすると、 「あ!ここもスタイル付けなきゃ!」 「えっと、ここはどういうセレクタがいいかな?」 とか、行き当たりバッタリに悩む…

【ツールチップ連動&レスポンシブなプログレスバー】

達成率を表すとき使われるプログレスバー。 バーの表示原理は意外とシンプルです。 ・背景色の違う2枚のボックスを重ねる ・手前のボックスに style="width:80%;" のように 横幅をパーセントで指定する これだけです。 バーの幅をCSSファイルに記述しないの…

【WordPressにヘッダー画像を組み込もう】

苦労して探してやっと見つけたテンプレート。 でもヘッダー画像が入る場所がありません。 WordPressのテンプレートを探していて、 希望通りのパーツが全部揃ったものが見つかる ことはまずありません。 オリジナリティを求めれば求めるほど、 テンプレートと…

【CSSで繰り返しブロックの余白設定に使えるセレクタ「+」】

こんなページがあったとします。 ============== ヘッダー ============== <section>ブロックA</section> ============== ←ここ <section>ブロックB</section> ============== ←ここ <section>ブロックC</section> ============== ←ここ <section>ブロッ</section>…

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

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

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

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

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

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

【カスタム投稿でWordPressの使い勝手を向上させよう】

WordPressにはブログページに相当する「投稿」と、 それ以外の固定のページに相当する「固定ページ」の 2種類の投稿タイプが最初から用意されています。 この2種類だけだと使い分けに不便な場合もあります。 例えば、 「新着情報」「ブログ」「リリースノ…

【2045年、シンギュラリティ到来で仕事がなくなる?】

近年、シンギュラリティ(技術的特異点) という言葉をよく見かけます。 コンピューターの人工知能(AI)が人間の 頭脳を上回る瞬間、という意味かと。 この、シンギュラリティに関する意見には 「今まで人間がやっていた仕事が奪われる」 という否定的な意…

【WordPressで自分のサイトを作ろう】

思い描いたレイアウトに近いテンプレートを 探すのは意外と大変です。 このテンプレートは トップページは理想どおりだけど、 メニューの周りが希望とは違う・・・ あのテンプレートは メニューの周りは理想どおりだけど、 フッターの周りがイメージと違う・…

【先頭を1マス空けましょう】

小学校で作文の書き方を習ったときに、 「文章の出だしは1マス空けましょう」 と習ったと思います。 何のために1マス空けるのでしょうか? 「ここから新たな文章が始まるよ」 ということを明確にするためですね。 それと同じことをプログラミングでは イン…

【WordPressでサイトを作るために知っておくべきこと】

WordPressの更新はしたことがあるけれど、 自分のサイトを1から作れるようになりたい。 という方は少なくないと思います。 今日は、WordPressで自分のサイトを作るために 知っておくべき重要なことをレッスンしました。 ・ページには種類がある ・種類ごと…

【オブジェクト?プロパティ?メソッド?】

JavaScriptに限らずプログラミングの世界では 作りたいものや表現したい目的に応じて、 オブジェクトと呼ばれるものを利用します。 オブジェクトの定義は、 ・プロパティ(=属性とも言う) ・動作(=メソッド、関数とも言う) この2つを兼ね備えたデータ…

【開発環境??プログラム言語??】

よく誤解されるので、補足しておきます。 プログラムを作るには、 private class foo extends hoge {...} みたいな「プログラム言語」を書けばいい と思っていらっしゃる方が多いと思います。 しかし、プログラム言語は私たち人間が 理解できるように用意さ…

【開発環境を提供していただきます】

ホームページのカスタマイズやメンテナンスで 何度も何度もお世話になっている某企業様から この度、ホームページをiPad Pro向けに最適化 したいとご相談をいただいたのですが、当方に 実機がない(普通のiPadしかない)旨をお伝え したところ、 「弊社で購…

【WordPressのページが開けなくなった】

WordPressのセキュリティを高めるために、 プラグインでログイン履歴を保存したり、 サーバーの設定ファイルでIP制限をするなど 対処をしていた生徒さん。 先日、突然サイトが開かなくなったそうです。 管理画面には入れるのに、公開ページが開けない。 レッ…

【JavaScriptで抑えておきたい8つのポイント】

JavaScriptの概要をレッスンさせていただきました。 ブラウザで表示するページに動きのある効果を加えたり、 クリックやスクロールなどブラウザ上での任意の操作に 応じて何かを行うには、JavaScriptを使います。 jQueryに代表されるように、純粋なJavaScrip…

【レスポンシブに対応できるウェブデザイナーに】

レッスンを始めて2年目のデザイナーさんに、 レスポンシブサイトの作り方をレッスンさせて いただきました。 目標は、レスポンシブウェブデザインを身に付けて モバイル対応の案件を受注できるようになること。 その先にはワードプレスを使ったサイト制作を…

【jQueryプラグイン「slick」でスライドショー】

美容室の紹介サイト(ワードプレス)で、 ヘアカタログをスライド形式で掲載するために jQueryのプラグイン「slick」の組み込み方を レッスンさせていただきました。 プラグインの使い方は配布サイトにサンプルが 載っているのですが、自分のサイトにコピー…

【駅すぱーとAPIで路線図を表示しよう】

「駅すぱーと」は全国の路線データを ウェブで扱えるようにしたウェブAPIです。 これを使うと、 任意を駅を中心とした、 任意の縮尺率の路線図をウェブサイトに 表示させることができます。 APIは1日あたりの使用回数が制限された 無料プランがあるので、 使…

【ディベロッパーツールでCSSをサクッと作成】

ブラウザに付属している開発用ツール 「通称:ディベロッパーツール」 これを使うと、スタイルシートの作成を劇的に 効率アップすることができます。 さらに、この使い方を自分のモノにしてしまえば、 他所のサイトの構造を解読して、自分のサイトに 移植で…

【チャットワークでピンポイント個人レッスン】

プログラムのレッスンでは、 プログラムの方針を考えて試し、 失敗しては方針を考え直すという 試行錯誤を経験することが大事です。 そのため、じっくり考えて取り組めるように 時間を決めて行うのではなく、 チャットワークを使うことがあります。 <チャッ…

【ワードプレスでレビューサイト構築レッスン】

プログラムを勉強して、ワードプレスで レビューサイトを制作中の生徒さんに チャットワークやメールでピンポイント サポートをしています。 プラグインでレビュー機能を追加し、 データベース検索のSQLとPHPの構文を 組み合わせてレビューページの制作に 取…

【合法的にHTML・CSS・JavaScriptのスキルを盗めるツール】

日頃インターネットで見かけたホームページやブログで、 「あ!このエフェクトいいな~」 「どうやったらできるんだろう?」 と感じたことはありませんか? でも、自分のサイトじゃないからどう書いたら良いのかわかりません。 HTMLでできるのか? スタイル…

【HTML5を勉強する意義とは?】

比較的古いウェブサイトではHTML4が使われていますが、 これからホームページやウェブのプログラミングを 勉強する方は、HTML5から勉強することをおすすめします。 その理由は2つです。 <理由1> 「HTML5は文法的にはHTML4と同じ」 HTML5は、HTML4を少しだ…

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

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