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

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

WordPress/プログラミングレッスン

【プロのノウハウを効率よく盗むコツ】

学校のホームページをWordPressでリニューアルしている 生徒さん。 WordPressのことは他のスクールで学んだけれど、 途中で行き詰ってしまったそうです。 今、マンツーマンレッスンで困っているところだけ ピンポイントでお教えしているのですが、 CSSが苦手…

【プラグインの動作を抑止するスクリプト】

WordPressにjQueryのプラグインを導入して、 スタイリッシュな検索動作をサイトに組み込んでいる 生徒さん。 ユーザーの使い勝手を考えて、プラグインの動作を 一部変更することになりました。 「どこをどう書き換えればよいのか?」 この答えにたどり着くた…

【JavaScriptでHTMLを自由に読み取るレッスン】

ぐるなび風のレストラン検索サイトを教材として、 検索ボタンを押したときの動作をJavaScriptで作る レッスンをしました。 プログラミングは、小さな命令の組み合わせで作ります。 「検索ボタンのプログラム」 という、決まりきった答えがあるのではありませ…

【WordPressでプラグインが動かない原因の多くはjQuery】

一般的によく使われているプラグインなのに、 「私のWordPressでは動かないんです…」 これ、経験したことある方多いかと思います。 多くの場合、 ・お使いのテーマ ・お使いの(他の)プラグイン ・自分が改造したコード のいずれか、または組み合わせが原因…

【WordPressで絞り込み検索に使えるプラグイン】

isotope.jsというjQueryのプラグイン。 ↓使い方が載っているサイト on-ze.com検索対象をグリッド状に自動で並べるだけでなく、 フィルターによる絞り込み機能が使えます。 グリッドレイアウトだけならmasonry.jsも有名ですが、 フィルター機能がありません。…

【WordPressでモバイル対応のページを作る方法】

今日のレッスンでは、 ページビルダー系のプラグインの使い方と、 カスタムテンプレートの作り方 をお教えしました。 WordPressにはモバイル対応済みのテーマが多いので、 レスポンシブ対応のページが簡単に作れそうに思えます。 しかし、実際はそんな甘くあ…

【HTMLをWordPressへ載せ替えるサポート】

とある公共機関のホームページを WordPressに載せ替えるサポートを レッスンとして行っています。 レンタルサーバーの選び方や、 サーバー会社に事前確認すべき内容、 WordPressのインストール方法、 初期設定で気を付けるべきポイント、 などを初回レッスン…

【WordPressでウェブアイコンを使う方法】

FontAwesome(フォントオーサム)という 無料のウェブアイコンをWordPressで使う方法を レッスンしました。 ウェブアイコンというと何か特殊な印象を 受けるかもしれませんが、 Googleフォントに代表される、 ウェブフォントを利用する場合の方法と、 考え方…

【jQueryで検索処理の組み立て方を学ぼう】

HTMLとCSSをしっかり学び、レスポンシブなサイトが 構築できるようになった生徒さんが、次のステップ 「jQuery」の習得に励んでおられます。 レッスンでは、架空のイタリアンレストランのコース 検索ページを用意し、検索ボタンの動作をjQueryで 作成できる…

【ネットユーザーのニーズを調べる方法】

特定の商品をブログで紹介するにあたって、 インターネットユーザーの興味関心を リサーチした上で記事を書くことは とても有効なことです。 リサーチの1つの手段に、 『アンケートをとる』 ことが挙げられます。 ネットでどうやってアンケートをとるの? …

【コピペ厳禁!Youtube動画のレスポンシブ埋め込みコード】

Youtube動画のページで共有ボタンを押して 埋め込み用のコードをコピーします。 <iframe width="560" height="315" src="...."></iframe> これをブログやホームページに埋め込むと src="..." で指定された動画がページに表示 されますが、スマホで表示すると横幅が 画面をはみ出したり、縦と横のサイズの バランス…

【WordPressのセキュリティ対策レッスン】

WordPressは世界シェアナンバーワンのCMSなので、 利用者が多い反面、攻撃の対象にもなりやすいです。 これはどうしようもない事実です。 私たち個人ができるセキュリティ対策としては、 1.どんな攻撃方法があるのかを知っておくこと。 2.どんな対策方法…

【スタイルシートで簡単にグラフが描ける方法】

世論調査のようなアンケートページを 作成中の生徒さんから質問がありました。 「アンケートの結果をグラフみたいに 表示したいのですが、できますか?」 中級者以上なら、 ・HTML5のCanvasタグ ・JavaScript この2つを組み合わせれば グラフが描けることを…

【レストランの検索ページでjavascriptのレッスン】

今夜のマンツーマンレッスンの準備で、 架空のイタリアンレストランの検索ページを 作成しました。 レッスンの目標は2点。 ・javascriptを使って入力内容を取得する ・javascriptを使ってHTMLを自由に変更する 高度なことを実現するには、 単純なことを仕組…

【150万PV・VPSへサーバー移転】

マンツーマンレッスンで知り合った 起業家さんが運営していらっしゃる 月間150万PV越えの超人気メディア。 アクセス数が多く、 ピーク時に何度もサーバーダウン。 サイトの今後の成長を見据えて、 共用型のレンタルサーバーから VPSへの移転を提案しました。…

【ドメインのお引越し(移管)】

長年ウェブサイトを運営していると、 あっちで取得したドメインや こっちで取得したドメインが、 あっちのサーバーで使っていたり こっちのサーバーで使っていたり、 情報がバラバラになってきて ややこしいですよね。 「一箇所にまとめて管理したい」 そん…

【ウェブサイトをSSL化するレッスン】

現在、少数の生徒さんを動画講座や マンツーマンレッスンで継続的に お教えしていますが、 ひとりひとり目標も違えば、 毎回お教えする内容も違うので、 ちょうどいい人数と感じています。 明日は、ウェブ予約システムの設置を お教えした生徒さんに、 サイ…

【ウェブ予約システムを設置するレッスン】

・予約状況を見ることができる ・カレンダーから選択できる ・日付と時間帯が選択できる ・予約完了ページが開く ・予約メールが届く ・自動返信メールが届く そんなウェブ予約システムを ホームページに設置するレッスンを行いました。 英語のプラグインっ…

【スタイルシートを学んで表現のバリエーションを増やそう】

いろんなサイトを見て、 「自分でもこういうサイトを作れるようになりたい」 ということから、マンツーマンレッスンで HTMLとCSSを学んでおられる生徒さん。 『ホームページ作成のツボとコツがゼッタイにわかる本』 http://amzn.to/2bXJkbs を購入されて自習…

【ドラえもんの名言より】

今回、初めて正規の料金で ピンポイントレッスンを行いました。 生徒さんに金銭的な余裕が あったからではありません。 むしろ逆なんです。 ~~~~~~~~~~~~~ 今までオンラインスクールや 訪問レッスンをお願いして 多額の投資をしてきたので、 正…

【公共機関HPのワードプレス載せ替えをサポート】

勤務先でHPのリニューアルを 仕事として命じられた生徒さん。 なんと、勉強の期間も含めて1年 待っていただいているそうです。 「もう失敗はできない・・」 「最低でも半年で完成させたい・・・」 今日は第1回目のレッスンでしたが、 事前に質問事項をワー…

【仕事でワードプレスが必要な方へ】

勤務先のホームページをワードプレスに 載せ替えることになった生徒さん。 今まで有名なオンラインスクールや、 訪問レッスンを受けて、 多額の自己投資をされてきたそうです。 でも、残念ながら仕事で必要なレベルまで スキルアップすることはできませんで…

【ワードプレス以外でも使えるアンケートフォーム】

アンケートフォームやお問い合わせフォームなど、 ウェブの画面上で入力や選択した内容をメールで 送信できるものがありますよね。 ワードプレスなら、 プラグインとして配布されているものがあるので、 プラグインのインストールと設定のやり方さえ ネット…

【Googleアナリティクスとサーチコンソールを設定しよう】

ワードプレスでサイトを作っている生徒さん。 今日は、ワードプレスに2つの重要ツール ・Googleアナリティクス ・サーチコンソール を連携する具体的な設定方法と、 この2つのツールを ・どんなときに ・何のために ・どの画面で ・何を見れば ・どんな情…

【縦横が入れ替わるレスポンシブな表(テーブル)】

HTMLとCSSを学んでいただいている生徒さん。 今日は、スマホで表示したときに縦横が入れ替わる 表(テーブル)の作り方をお教えしました。 ランキングや一覧などを表にすると見やすいのですが、 列が多くなるとどうしてもスマホで表示させたときに 折り返し…

【TwitterのタイムラインをWordPressに設置する方法】

無料テーマを使ってWordPressでサイトを作る 勉強をしている熱心な生徒さん。 今日はサイドバーにTwitterのタイムラインを 表示する方法を学んでいただきました。 Facebookのタイムラインや、 Instagramの投稿など、 SNSの投稿と連動しているサイトって 結構…

【ワードプレスのインストールが失敗する意外な原因】

海外在住のデザイナーさんからメールで ご相談をいただきました。 「お名前.comで取得した独自ドメインを、 さくらインターネットのサーバーで使いたい」 「ワードプレスをインストールしたけれど、 画面が表示されない。403 Forbiddenが出る」 ウェブサイト…

【HTMLとスタイルシートの関係】

HTMLのテンプレートを使ってサイトを制作している 生徒さんと、スカイプで1時間レッスンを行いました。 文章やリンクを入れる程度しかHTMLを触っていないので、 「表を埋め込むにはどうしたらいいの?」 「ページ内にリンクさせるにはどうしたらいいの?」 …

【HTMLをピンポイントで学べるレッスン開始】

WordPressの5時間コースを 受講された生徒さんから、 「HTMLのレッスンを受けたい」 というご相談を いただきました。 お客様に紹介したい 商品があるそうです。 そのためのページを 作れる実力を、 しっかり身に付けたい と仰るのです。 とても向上心のあ…

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

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

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

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

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

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

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

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

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

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

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

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

【WordPressでjQueryのレッスン】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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