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

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

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

【こうしてプロジェクトは暗礁に乗り上げる】

ワイヤーフレームはサイト制作の骨格であり、 制作サイドとクライアントが唯一同じ情報を 共有して、「あーでもないこーでもない」を 相談できる設計図です。 だから、ワイヤーフレームで手抜きをすると、 後ろの工程であるデザインやコーディングで 必ず露…

【Webデザイン 売れ筋2位の本】

ついに2位3位4位を独占しました。 (Web、ビジネス実用ジャンル) 『WordPressのツボとコツがゼッタイにわかる本』 書店では、かわいいカエルのイラストを目印に 探してみてくださいね。 ↓Amazonですぐお買い求めいただけます。 http://amzn.to/2nd7Ia5 …

【3ジャンルで1桁ランクイン WordPressの本】

昨日からまたグッと総合順位が上がりました。 ジャンル別では3つとも1桁台に。 何が起こってるんだろう・・・ ↓1時間無料レッスン(残り2席) https://goo.gl/forms/XMI3KzsAzSWxnNPx2

【レスポンシブ案件の危険ポイント】

ディレクターがレスポンシブサイトの 制作手順について熟知していない場合、 PC用のデザインが出来上がった時点で コーディングの工程に入ろうとします。 するとコーディングの担当者は、 「このサイト、スマホで見たときは どんなレイアウトにすればいいの…

【画像の上に半透明レイヤーで文字を重ねる方法】

1年以上前から定期的にレッスンを受講しておられる 現役デザイナーさん。 HTML未経験の状態からスタートしましたが、 今ではレスポンシブ(スマホ対応)サイトの作成にまで ステップアップしていらっしゃいます。 先日のレッスンでは、今やブログ以外でもお…

【ワードプレスのご相談をいただきました】

インターネット検索でCODEMYのマンツーマンレッスンを お知りになった方からお問い合わせをいただきました。 ワードプレスで「こういうことがやりたい」という内容でした。 学ばれたい内容や、お薦めのレッスン方法、料金やお支払い方法 など、レッスンをお…

【スマホでの改行位置を自由自在に変更する方法】

スマホに対応したホームページやブログでは、 文章の途中で改行(折り返し)する場所が思い通りに ならないことがあります。 このように1行の文字数が少ない行は、 パソコンで見てもスマホで見ても、 同じ場所で改行されます。 このように1行の文字数が多…

【ワードプレスのテンプレートから投稿日を消したい】

ワードプレスのテンプレート(テーマ)の多くは、 トップページや記事ページに投稿日付が表示されます。 ブログやお知らせとして使うことができるために、 投稿日付の表示が付いているのですが、 サイトの用途や公開目的によっては投稿日付の表示を 無くした…

【jQueryでサイトにアニメーションを追加しよう】

アニメーションを追加するレッスンを行いました。 ページをスクロールさせるとブラウザの画面の右下に 「このページのTOPに戻る」とか「↑」みたいなボタンが 表示されるサイトを見かけませんか? 注意深く見ると、スクロールによる移動が一定の場所を 越えた…

【WordPressは何から学べばいいの?】

世界シェアナンバーワンのCMSとして 不動の人気を誇る「ワードプレス」。 誰にでも簡単にインストールできて、 デザインテンプレートやプラグインで 初心者でも1時間あればサイトの枠組みを 完成させることが可能です。 ・・・というのは言い過ぎです。 高…

【WordPressの正攻法は概念の理解】

「WordPressのカスタマイズにはPHPを勉強しないといけない」 「WordPressは難しいコードを知らなくても使える」 どちらも正しいです。 テンプレートをそのまま使うならコードは要りませんし、 テンプレートでできないカスタマイズをしたければ 目的にあった…

【WordPressのツボとコツが3位にアップ!】

5位⇒4位⇒3位とランクアップしています。 やはりWordPressは熱いですね。 なんと言っても、全世界のサイトの27.7%がWordPressだそうですから。 ↓W3techsの統計(毎日更新) https://w3techs.com/technologi…/details/cm-wordpress/all/all 昨日に続き、今…

【わかる楽しさ、できる喜びが得られる本を】

先月、WordPressの新刊を発表したばかりですが、 編集者様と次の本の企画を検討しています。 みなさんが普段ネットをしていて、 「この滑らかな動き、いいな~」 「これどうやってるんだろう?」 「私にも簡単に作れたらいいのに」 と感じたことはないでしょ…

【エクセルで○○を自動化】

もう少しでツールが完成。 プログラムは、頭で考えた手順を コードに置き換える作業なので、 出来上がったコードだけを見ても、 意味を思い出すのが大変です。 コードの目的や意味を思い出すのに 時間がかかるようでは、 拡張しやすいツールとは言えません。…

【疑似要素::before, ::after の使い道】

www.nxworld.net画像を使わないCSSデザインで多用します。 単色の小さなアイコンならともかく、 輪郭が滑らかな(アンチエイリアスが利いた)画像は 高解像度ディスプレイ向けの互換対応をしないと 荒れてダサく見えてしまいます。 PCだと綺麗に見えるのに、…

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

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

【WordPressはどこからカスタマイズするのか?】

WordPressのノウハウのほとんどはネットで見つかる といっても過言ではありません。 しかし、ノウハウは多岐にわたりますし、 みなさんのサイトの場合はこうすればいいという 個別のケースに応じた情報を探し出すためには それなりの知識と経験が必要です。 …

【マウスを乗せるとふわ~っと浮き出る画像】

ブログ記事のサムネイルやギャラリーに マウスを乗せると、ゆっくり画像が動く。 そんなエフェクト見たことありませんか? 原理は意外と簡単です。 javascriptとか難しそうなプログラムを 使わなくてもスタイルシートだけでOK。 例えばサムネイルの部分のHTM…

【スマホ向けYoutube埋め込み最適化のタネ証し】

まず前提知識から。 全てのウェブページはHTMLタグと呼ばれる構文を使って掲載内容を定義し、 CSSと呼ばれる構文を使ってページ上の配置などを設定することによって ブラウザの画面に表示されます。 ただし、Youtubeなど埋め込み型のコンテンツは自分のサイ…

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

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

【iframeを介してデータを伝える方法】

よそのウェブページの全体または一部分を 自分のウェブページに埋め込みたいとき、 簡単なのが iframe タグを使う方法です。 ↓自分のページに記述するHTMLタグ <iframe src="よそのページのURL"></iframe> こうすると、iframeタグの部分に対象URLの ページが埋め込まれたような表示になります。 でも、…

【Zen-Cartをダウンロードして思ったこと】

ショッピングカートのプログラムとして 有名(?)な、Zen-Cart。フリーです。 ダウンロードしてみて感じたのは、 「これはもはや単独のプログラムではなく1つのシステムと考えたほうがよい。」 ということです。 ただ単に商品をカートに入れて メールで注…

【CSSでinline-block指定時にできる隙間を消す方法】

ギャラリーとかスライドショーでサムネイルを横に並べるとき、 左右が折り返さないようにサイズを計算してCSSを書いたにも関わらず、 小さな余白が空いてしまってレイアウトが崩れた経験ありませんか? float: left ではなく display: inline-block で 横に…

【尋ねる前に調べることが大事】

エクセルを保存するたびに出てくる警告。 どうやって消すんだったかな? 忘れたので調べました。 とある企業様のご依頼でエクセルVBAの ツール作成をしているところなのですが、 プログラミングをしていると、 「あれ?これどうやるんだったかな?」 という…

【WordPressでjQueryのレッスン】

大変お世話になっている企業様からのご紹介で、 WordPressでサイト構築をされているデザイナーさんに スカイプでレッスンをさせていただきました。 かなり緻密に作られたテーマをご使用されているのですが、 特定の使い方をしたときに動作がおかしくなるよう…

【WordPressでタイトルのリンク先を変更するレッスン】

WordPressでブログサイトを制作中の生徒さん。 ページ上部に表示されるサイト名をクリックすると 公開ページではなくWordPressのインストールURLに リンクしてしまう問題をレッスンで解決しました。 発想の手順を学ぶことが一番大事なことです。 1.どのテン…

【ウェブサイトの本質を学ぶレッスン】

個人でホームページを持つことが当たり前の時代ですが、 昔に比べてブログやCMSのサービスが増えたため、 ウェブサイトの本質を知る機会が少なくなっています。 本質さえ知っていれば、「ああしたいこうしたい」を どうやって叶えたらいいのかという正しい道…

【サイドバーにタブメニューを追加する方法】

事業サイトの構築に取り組んでおられる生徒さん。 サイドバーに配置したコンテンツをタブで切り替え できるようにしたいということで、ピンポイントの レッスンをさせていただきました。 「タブをつけるにはどうすればいいか?」 という漠然とした疑問の答え…

【jQueryの本質がわかるレッスン】

レスポンシブサイトの作り方を学んでおられる生徒さん。 先日は、モバイル用メニューの作り方を扱いました。 その中で、 ・イベントの概念 ・jQueryとJavascriptの違い(関係) ・jQueryのメソッドの正体 ・JavascriptとCSSの関係 など、ウェブページで使わ…

【ウェブライダー松尾さんの本に迫る「WordPressがわかる本」】

「WordPressのツボとコツ~~」 Amazonの登録3ジャンルで今日も 2位-4位-4位という高ランク。 人気の“いちばんやさしい~~”シリーズを押えて、 ウェブライダーの松尾さんの本に迫っています。出版社様も、連日Amazonで好調なランクを 記録していることに、…

【今さら聞けないユーザーエージェントとは?】

モバイルユーザーを視野に入れたウェブサイトや アプリを作るとき、意識するかしないかに関わらず 触れることになる概念の1つが「UserAgent」。 私たちがPCやスマホなどのデバイスを使って インターネットの向こう側にあるサイトなどに アクセスするとき、…

【ワードプレスで特定のページ専用のコンテンツ】

ワードプレスでは、カスタムフィールドを使うと、 特定のページの特定の場所に特定のコンテンツを 表示させることができます。 さらに、コンテンツを編集するのにHTMLの知識を 一切不要にすることが可能です。 お客様に安心して更新していただけるサイトを …

【レッスン後記~はじめてのワードプレス~】

はじめてワードプレスで個人のサイトを 作ることに挑戦しておられる生徒さんと ワードプレスのレッスンを行いました。 <目に見えること> ・サイトの見た目をどこで変えるのか? ・テーマによってできることが違うのはなぜ? ・有料テーマと無料テーマ、メ…

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

ワードプレスで投稿や固定ページやカテゴリーに 独自のデータを追加できるカスタムフィールド。 その正体は、 データベースの 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%ずつの表示幅を持つよう スタイルシートが記…