2017-05-18

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

f:id:wp-lesson:20170416214716p:plain

HTMLとCSSを学んでいただいている生徒さん。
　
今日は、スマホで表示したときに縦横が入れ替わる
表（テーブル）の作り方をお教えしました。
　
ランキングや一覧などを表にすると見やすいのですが、
列が多くなるとどうしてもスマホで表示させたときに
折り返してしまい、見辛くなってしまいます。
　
そこで、CSSを使ってスマホで表示したときだけ表の
縦と横を入れ替える方法を、
　
「考え方」→「書き方」
　
の順番で学んでいただきました。
　
縦横を入れ替えるといっても、
実現のやり方は何通りもあります。
　
考え方次第でやり方は変わるからです。
　
ですから、マンツーマンレッスンで考え方から学んで
いただくことに価値があるのです。

PR

CODEMYのマンツーマンレッスンでは、WordPressや
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『WordPressのツボとコツがゼッタイにわかる本』
　
▼Amazonで概要を見る
http://amzn.to/2nd7Ia5
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
　
▼Amazonで概要を見る
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
　
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓無料体験はこちら
http://bit.ly/2hw7mIy

2017-05-17

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

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

f:id:wp-lesson:20170416214534j:plain

無料テーマを使ってWordPressでサイトを作る
勉強をしている熱心な生徒さん。
　
今日はサイドバーにTwitterのタイムラインを
表示する方法を学んでいただきました。
　
Facebookのタイムラインや、
Instagramの投稿など、
　
SNSの投稿と連動しているサイトって
結構ありますよね？
　
連動には２通りあります。
　
・SNSに投稿するとサイトにも表示されるもの
・WordPressに投稿するとSNSにも投稿されるもの
　
Twitterのタイムラインを埋め込むのは
前者に該当します。
　
Twitterのアカウントさえあれば、
たった10分でできてしまいます。
　
【手順】
　
1.Twitterにログイン
　
2.設定とプライバシーを開く
　
3.ユーザー情報のウィジェットをクリック
　
4.新規作成->プロフィールを選択
　
5.URL欄に自分のアカウントトップページのURLを入れる
例）https://twitter.com/[あなたのアカウント名]
　
6.Here are your display options（表示オプション）で
「Embedded Timeline」（タイムライン埋め込み）を選択
　
7.「Copy Code」をクリック
埋め込み用のコードがコピーされます
　
8.WordPressの概観->ウィジェットを開く
　
9.サイドバーに「テキスト」のブロックを追加
　
10.内容欄に7.のコードを貼り付ける
　

PR

2017-05-16

【更新しやすいホームページとは】

サイト制作実務の話

f:id:wp-lesson:20170414131507j:plain

診療時間や料金表など、
追加や変更が生じやすい箇所を
全て画像で作ってしまうと、
　
ホームページが制作者の手を離れて、
画像ソフトを使えないクライアント様の
手に引き渡したあとで困ります。
　
「ちょっと文字を変更したいだけなのに、
　画像ソフトがないから更新できない・・」
　
何もかも画像にするのではなく、
枠や背景だけ画像にして、
　
表の中身はHTMLとCSSで作って
上に重ね合わせると、
　
以降はHTMLをテキストエディタで
開いて文字を書き換えるだけで
変更ができるので、
　
保守がしやすい作りになります。
　
　
添付は、とある整骨院様のサイト。
　
構築した当時のデザイナーさんが
１枚の画像にしていたところ、
診療時間の変更が生じたため、
　
HTMLとCSSで作った新しい表を
CSSで画像の上に重ねることで
対応しました。

PR

2017-05-15

【プログラミングの面白いポイント】

雑記

f:id:wp-lesson:20170414131318j:plain
　
今日もVBAプログラムと格闘です。
　
手作業やマクロではできない
複雑な処理をプログラムで自動化するのですが、
　
そのプログラムを組み立てるための
ロジックを考えるのが面白いです。
　
～～～～～～～～～～～～～～～～～
　
このデータをこっちに詰め込んで・・
次にこういう風に加工して・・
もしこうだったらああして・・
・・
次にこのデータをこのデータと照合して・・
最後にこうやったら完成するはずだ！
　
～～～～～～～～～～～～～～～～～
　
みたいなストーリーを考えるんですね。
そして、それをプログラムに置き換えて
動作確認をしながら完成に近づけていく。
　
最後まで組みあがって想定通りに動くと
　
「筋書通りにうまくいった！」
　
みたいな達成感が得られます。
　
なんていうか、
コツコツと論理を積み上げて、
緻密なプログラムに置き換えていく
その過程が楽しいですね。

2017-05-14

【脳ミソが沸騰しそうです・・・】

ツール開発

f:id:wp-lesson:20170414131216j:plain

CSVを読み込んで、マスターと照合して
どうのこうのするツールを作成中です。
　
もちろんお仕事です。
　
プログラムの中で取り扱うデータ構造は
自分で考えて決めることが多いのですが、
　
なるべくシンプルに心がけても、
実際のロジックはなかなか複雑になる
ことが多いです。
　
実務のプログラムですから、
当然といえば当然かもしれませんが。
　
　
ループが３重４重になってくると、
　
「これ、どのデータとどのデータの
　何番目と何番目を照合してるの？」
　
と、自分で書いていても混乱してきます。
　
超集中モードのときに一気に進めないと
次の１行がなかなか書けません。
　
筋道が経っていない状態で何を書いても
正しい動作になるはずがないからです。