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

  関連記事

Dreamweaverで携帯サイトを作る方法

携帯(ガラケー)サイトの作り方なんてもう不要な技術なのかもしれませんが、自分でも、この記事の中身をも ≫続きを読む

【Q】お店のfacebookページを作ったのですが、記事を投稿しても、反応があまりないし、誰が見てくれているかわからないんですが・・・?

《2016年2月補足》サイトリニューアルにあたり、旧記事を整理していますが、アクセスの多い記事は残し ≫続きを読む

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

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

一番簡単なスマホ対応ページの作り方

スマホに対応したホームページの作り方(手法)はたくさんありますので、一概には言えませんが、超初心者向 ≫続きを読む

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

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

長野県中小企業振興センター主催、ネットショップ経営者のための売上向上セミナー

8月5日(金)13:30~ ホテルメトロポリタン長野で、このようなセミナーがあります。主催は(公財) ≫続きを読む

no image
TinyMCEにスタイルを追加する

自分への備忘録なので丁寧な記事ではなくてすみません。 function.phpに下記を追加 /**  ≫続きを読む

ヤマト宅急便「配達時間帯」の指定枠変更のマーク

【重要なお知らせ】宅急便「配達時間帯」の指定枠変更についてというメールが、ヤマトさんを利用しているネ ≫続きを読む

(WEB制作入門1)静的サイトと動的サイトの違い

静的サイトの作り方 2000年くらいのこと。わたしがWEB制作をお仕事としてやり始めたころのことです ≫続きを読む

フォトショップでバウンディングボックスを自動表示

これ・・・意外と便利なのに、初期設定ではそうなってないので知らずに使っている人が多いかもしれません。 ≫続きを読む

▲ページ先頭へ