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でやってみたらほぼ同じだっ ≫続きを読む

【ホームページの作り方】地域密着型のお店のホームページ作成

どの町にもある小さなお店、地域のお店…ふとん屋さん、本屋さん、ケーキ屋さん、中古車販売店。 ネットで ≫続きを読む

illustratorでキャラクターに色を塗る方法

illustratorで、キャラクターに色を塗る方法を紹介します。 1)線でイラストを描きます。後ろ ≫続きを読む

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

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

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

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

環境設定ファイル

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

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

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

Canvaを使ってみました。「イラレやフォトショがなくても、簡単な画像くらいなら自分で作成したい」方のための….

私はEC実践会の自主勉強会や、お客様の指導で、HPの作り方をレッスンすることもあるのですが、そんなと ≫続きを読む

エックスサーバーでWEBフォントの提供開始

私が愛用しているエックスサーバー http://www.xserver.ne.jp/ で、ウェブフォ ≫続きを読む

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

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

▲ページ先頭へ