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未経験の状態からスタートしましたが、 今ではレスポンシブ(スマホ対応)サイトの作成にまで ステップアップしていらっしゃいます。 先日のレッスンでは、今やブログ以外でもお…