2017-04-23

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

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

１年以上前から定期的にレッスンを受講しておられる
現役デザイナーさん。
　
HTML未経験の状態からスタートしましたが、
今ではレスポンシブ（スマホ対応）サイトの作成にまで
ステップアップしていらっしゃいます。
　
先日のレッスンでは、今やブログ以外でもお馴染みの、
　
『サムネイル画像の上に半透明のレイヤーで文字を重ねる』
　
というUIデザインの作り方を学んでいただきました。
　
　
＜サムネイル画像に文字入りレイヤーを重ねる方法＞
　
１．文字入りレイヤー用のタグを記述する。
２．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-04-22

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

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

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

インターネット検索でCODEMYのマンツーマンレッスンを
お知りになった方からお問い合わせをいただきました。
　
ワードプレスで「こういうことがやりたい」という内容でした。
　
学ばれたい内容や、お薦めのレッスン方法、料金やお支払い方法
など、レッスンをお申し込みされる前に必ずスカイプの無料相談で
詳しくお話をさせていただいております。
　

PR

知りたいことだけ学べる個人レッスンです。

　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
　

HTML/CSS/JavaScriptの基本が身に付くレッスンです。

↓無料体験はこちら
http://bit.ly/2hw7mIy

2017-04-21

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

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

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

スマホに対応したホームページやブログでは、
文章の途中で改行（折り返し）する場所が思い通りに
ならないことがあります。
　
このように１行の文字数が少ない行は、
パソコンで見てもスマホで見ても、
同じ場所で改行されます。
　
このように１行の文字数が多い行は、パソコンで見たときとスマホで見たときとで、
改行される場所がずれてしまいます。
　
もしも、
　
「パソコンで見たときはこの場所で改行したい」
「でもスマホで見たときはここで改行したい」
　
というように、改行する場所を別々に指定できたら、
誰が見ても違和感なくすっきりと文章を見てもらえます。
　
実は、ごく基本的なHTMLとCSSを知っておくだけで、
パソコンとスマホの改行場所を別々に指定することが
可能になってしまいます。
　
　
・改行を表すHTMLタグ
・HTMLタグの表示方法を指定するCSS
・パソコンとスマホでCSSを分ける書き方
　
　
この３つの基本を組み合わせると、
改行の場所だけでなく、ありとあらゆる表示を
パソコンとスマホで分けることができます。
　

PR

知りたいことだけ学べる個人レッスンです。

　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
　

HTML/CSS/JavaScriptの基本が身に付くレッスンです。

↓無料体験はこちら
http://bit.ly/2hw7mIy

2017-04-20

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

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

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

ワードプレスのテンプレート（テーマ）の多くは、
トップページや記事ページに投稿日付が表示されます。
　
ブログやお知らせとして使うことができるために、
投稿日付の表示が付いているのですが、
　
サイトの用途や公開目的によっては投稿日付の表示を
無くしたい場合もあるでしょう。
　
ですが、よほど気の利いたテンプレートでなければ、
　
「トップページから投稿日付を消す」
「記事ページから投稿日付を消す」
　
といった、細かい設定ができる機能は付いていません。
　
　
こういうところが、目的に合わないところなんですね。
デザインは気に入っているけれど、カスタマイズしないと使えない・・・。
　
そこで、
　
どんなテンプレートでもどんな種類のサイトでも使える
HTMLとCSSの実用スキルが役立つわけです。
　
先日のレッスンでは、
　
「こっちのページの２記事目以降だけタイトルを消す」
「あっちのページは１記事目からタイトルを消す」
　
といった独自のカスタマイズを、テンプレートには一切
変更を加えることなく実現する方法と考え方をレッスン
させていただきました。
　

PR

知りたいことだけ学べる個人レッスンです。

　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
　

HTML/CSS/JavaScriptの基本が身に付くレッスンです。

↓無料体験はこちら
http://bit.ly/2hw7mIy

2017-04-19

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

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

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

アニメーションを追加するレッスンを行いました。
　
ページをスクロールさせるとブラウザの画面の右下に
「このページのTOPに戻る」とか「↑」みたいなボタンが
表示されるサイトを見かけませんか？
　
注意深く見ると、スクロールによる移動が一定の場所を
越えたとき表示され、上までスクロールで戻ると消えます。
　
『よくサイトで見かけるけどどうやって作るのかな？』
　
という疑問を根底から解決して、
　
『私にもわかる！私にも作れる！』
　
ようなレッスンでした。
　
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