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

  関連記事

【Q】携帯サイトを初めて作ることになりました。まず何からやれば?どこで勉強したらいいですか?

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

【Q】ホームページをCMSにするとSEO対策に不利と聞きましたが・・・・。普通のHTMLで作って置いた方がいいんでしょうか?

「アドレスがhtmlじゃなくなると検索に不利なのでは・・?」「CMSで作った動的ページはSEOで不利 ≫続きを読む

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

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

【ホームページの作り方】建築・建設・施工・造園業等のホームページ作成

個人的な印象ですが、建築、建設会社さんで、ホームページを上手に活用しているところは、他の分野に比べて ≫続きを読む

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

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

パラコードアクセサリー製作入門! in 駒ヶ根高原・ヴァンドール

突然ですが、パラコードって知ってますか。 パラシュートを結ぶ紐なんですが、弾力があって柔らかいのに、 ≫続きを読む

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

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

Q:ドメイン移管の手順を教えてください

ドメインの移管(ドメインの管理者を移動すること)の手順は、転出と受け入れ先のそれぞれのレジストラ業者 ≫続きを読む

初めてのWordPressにおすすめ twentytwelve

かわいいネイルサロンのホームページを作成させていただきましたので紹介します。 長野県駒ヶ根市のネイル ≫続きを読む

Q)3Dセキュアって何?お客様がクレジットカードのパスワードがわからないと問い合わせがあります。

ネットショップでお買い物をするときのクレジット決済、「3Dセキュア」ってご存知ですか? 事例をあげて ≫続きを読む

▲ページ先頭へ