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入門| 

  関連記事

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

<小さなネットショップでも大きく成功できる通販サイト> セミナー開催のお知らせです。講師はwebの森 ≫続きを読む

Facebookで、自分の過去の投稿を探したい場合

え~、、っと、あの記事はたしかFacebookで投稿したはず。 あの時の写真を使いたい、あの時にリン ≫続きを読む

長野ADC主催のデザイン会議

昨日は長野ADC主催のデザイン会議に出てきました。会場が素敵で、古い酒蔵をくつろぎスペースに改造・再 ≫続きを読む

【Q】リニューアルしてページ名がindex.htmlからindex.phpに変わります。名前が変わると、過去にいろんな別サイトやブログからリンクしているので、リンク切れが起きてしまうんですが、どうすれば!?

リニューアルでindex.htmlをindex.phpに変更することって結構ありますね。静的HTML ≫続きを読む

質問:迷惑メールが多くて困っています

私がお客様からいただく相談メールでかなり多いのがこの質問です。 ドメインで作った大事なメール、お客様 ≫続きを読む

フラワーアレンジメント体験記

スタジオボレロさんにて、フラワーアレンジ作りの体験をさせてもらいました。 ウェディングの相談はこちら ≫続きを読む

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

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

おめでとうございます! Chrome ユーザー調査 というのが出たら詐欺

GoogleChromeをお使いの方、こんな画面が出たら詐欺なので注意してください。 ─────── ≫続きを読む

質問:わたしのホームページ検索で出てこないんです・・・その原因

先日、「うちのホームページ、検索しても出てこないんです」という相談をされ、見てみたところ、本当に、サ ≫続きを読む

Lightboxが動かない場合はこれを試して

久々にLightboxを使おうとしたら、何故か動かなくてはまってしまったので、メモしておきます。 1 ≫続きを読む

▲ページ先頭へ