WordPressのページ更新をするときに便利なツールあれこれ

   web入門, WordPress入門| 

まず、GoogleChromeはPCに入れておいてください

 

HTMLを編集するのにとても便利な機能がたくさんあります。

https://www.google.co.jp/chrome/browser/desktop/

画面の上で右クリックして「検証」
これで、スマホサイトのチェックが出来ます。

その後いくつか便利な拡張機能を入れておく

 

▼カラーピッカー ブラウザの上の色を拾うのに便利
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

▼MeasureIt  これでサイズが測れるので便利です
https://chrome.google.com/webstore/detail/measureit/pokhcahijjfkdccinalifdifljglhclm

▼フォトショップを持ってない場合はこのソフトが便利です

オンラインエディタ PIXLR EDITOR
https://pixlr.com/editor/

▼HTMLのことを勉強するならここ 登録してから、はじめてのHTMLを一通りやってみましょう
プログラミングをオンラインで学ぶ はじめてのHTML
http://codeprep.jp/

▼動画でマスターするドットインストール HTML入門

http://dotinstall.com/

▼HTMLエディタをPCにダウンロードするならこのソフトが軽くて便利です

Crescent Eve
http://www.kashim.com/eve/get.html

HTMLの基本を知っておく

HTMLの目的のひとつに「すべての人に平等に情報を」という使命があります。

それはPCを使っている人、スマホを使っている人、音声リーダーでホームページを読んでいる人、誰がどの端末を使って見ても、同じ情報が行き渡るようにするのがHTMLの役割なのです。

すべての「人」と書きましたが、ロボットが読んでも意味が理解できるのがHTMLです。

ロボットは文章を見たときに、どれが見出しなのか、どれが段落なのか、どこへリンクが貼られているのか、どの文字が強調なのか、タグを頼って意味を理解しています。

タグは世界共通の言語ですが、10年ほど前から細かいバージョンアップを繰り返しており、徐々にその記述の仕方に対して「今の推奨はこれですよ」という方法が変わってきています。

昔の書き方のタグでも、ちゃんと表示できるブラウザがあったりしますが、スマホでは表示できないとか、いろんなバージョンがあります。

逆に最新の記述方法では、古いブラウザが追いついていない、、などのデメリットもあり、
どこに基準をおいて、ほぼすべての人がちゃんと読める形というのを、コーディングをする人は意識してタグをつけています。

文章には決まりがあり、論文のように整理されているのが理想です
 

見出しには見出しの意味があり、ただ太字で大きな文字が見出しとはかぎらない
 

前提として、入力する文章は、決まりにそってコーディングされていること(正確なタグがついていること)
 

そのタグに対して、装飾をつけています。css(スタイルシート)と言います。
 

ブロックとインラインの違い

ブロックは箱、インラインは箱に入った文字など

ブロックは面積がある、マージンやパディングなどがある、

箱単位でスタイルを設定します。

ブロックには、見出し、段落、引用などがあります。

インラインは箱単位ではなく、その文字そのものへのスタイルです。

インラインには太字、リンク、イメージなどがあります
 

 

たとえば、見出しはブロック単位で適用されます

改行はブロックではなくインラインです。段落はブロックです。

Spanはブロックではなくインライン、divはブロックです。

スタイルにはブロック要素に効くスタイルと、インラインに効くスタイルがあるのでその違いを頭にいれておかないと、意図する形につくれません。

2016-07-21_001216

2016-07-21_001427

ここからここまでを見出し3にしようとしたら、ちゃんと前後に段落をいれて、ブロックをわけてあげないといけません。

 

   web入門, WordPress入門| 

  関連記事

ネットショップのクレーム対応

先日ネットショップのクレーム対応について、とある座談会で教えていただいたので自分へのメモとして書いて ≫続きを読む

Labカラーモードと調整レイヤーの使い方

Adobe Stockのチュートリアルに載っていたので、Photoshopでやってみたらほぼ同じだっ ≫続きを読む

facebookページの更新だけではもったいない

HTMLやcssの講習をした生徒さんが、ネットショップのオープンに向けてがんばってます。 こだわりの ≫続きを読む

環境設定ファイル

備忘録ですが、PCの引っ越しをしたり、いつもと違うパソコンで仕事をするときに、効率化が悪くなるのが、 ≫続きを読む

【ホームページの作り方】スクールサイト・教室・教育機関のホームページ作成

学校のホームページを作る時、何を目的につくるか、誰が対象か、更新は誰がどんな方法で行うか、この点が大 ≫続きを読む

【Q】ホームページのバックアップってどうすればいいですか?

バックアップについてお話する前に、ホームページには2種類あることを復習しますね。 1つは静的に作られ ≫続きを読む

スマホでfacebookしてるときにいきなり音がならないように

スマホでFBをチェックしてると、動画が表示されたとたんに音が鳴りはじめて焦ったことありませんか? 音 ≫続きを読む

阿智村商工会主催 ホームページ勉強会と相談会

「WEBサイトを作ったけど、自己流なのでどうしたら良いかわからない。 効果を上げられるホームページっ ≫続きを読む

古いバージョンのWordPressサイトを、新しいバージョンに上げ、データベースを移転する方法のメモ

サーバーの引っ越し。こまごまといろいろやらなければ行けないことがあって、よく手順を間違えたりしてロス ≫続きを読む

【Q】最近はdivというのを使ってホームページを作ると聞きました。何故以前のようなテーブルデザインではいけないんですか?

web標準でつくるホームページ テーブルデザインではなく、スタイルシートを使って制作する方法は、時に ≫続きを読む

▲ページ先頭へ