WordPressもHTMLだから ちゃんとタグは守ろう(´・ω・`)

こんにちは 圧倒的 かずまなぶ (´・ω・`)です。

いままで見出し部分は、見やすさで”引用”を使っていました。

でも、それはHTML的には邪道なので、ここからはちゃんとしていこうと思います。

<h2>大見出し1</h2>

下のimageに意味はありません。

基本構造は

  1. <a href=”https://○○”></a>で画像に対してリンクを貼ります。
  2. この<a>タグのパラメータとして target=”_blank” を追記し、別タブで開くようにします。
  3. その中に<img src=”https://○○.jpg”>で画像を入れます。
  4. 画像タグの内部には画像サイズを指定するwidth=”300″ height=”225″ を入れます。

<a href=”https://toyo-interest.com/wp-content/uploads/2019/01/old_map.jpg”><img class=”aligncenter wp-image-902 size-medium” src=”https://toyo-interest.com/wp-content/uploads/2019/01/old_map-300×225.jpg” alt=”” width=”300″ height=”225″ /></a>

<h3>中見出し1-1 リストの構造</h3>

<p1>ここは段落。文章を書いていく場所</p>

  • <ul><li>ここはun-order-list(順番なしのリスト項目)</li>
  •          <li>ここはun-order-list(順番なしのリスト項目)</li></ul>

<p1>ここはparagraph(段落)。文章を書いていく場所</p>

  1. <ol><li>ここはorder-list(順番ありのリスト項目)</li>
  2.          <li>ここはorder-list(順番ありのリスト項目</li></ol>

<h3>中見出し1-2 効果的なリンクの貼り方</h3>

2つあるので比較してみましょう。

<h4>中見出し1-2-1 アンカーテキスト</h4>

テキストを書いて、それにリンクを貼ります。

例えば   < グーグル >

 

でもなんか寂しいですね。次回はテーマを変更してみます。

webサイトの作り方の基本を再確認

こんにちは、かずまなぶです、2019年 あけましておめでとうございます。

初心に帰りまして、いままで乱雑に学んできてしまった、webサイトの作り方の基本を今一度確認しようと思います。

基本要素をふんだんに使ったHTMLサンプルコード

上記のHTMLだけでは下記のような、縦一列の体裁になる。あとでCSSが必要

CSSとリンクして体裁を整える

 

 

 

デザインの参考になるサイト:とにかく真似をする

io300.com

IKESAI.com

サイズと色を測る:chromeの拡張機能

measureIt

ColorZilla

chromブラウザの右上に常駐しますので、アイコンをクリックすると機能します。

HTMLエディタ

sublimetext3

DOCTYPE宣言:html5を使用する宣言  CSSの解釈が異なる

<!DOCTYPE html>

効果的なボタンやバナーのデザイン

 

 

HTMLの話

超基本的なものを張っておきますあ。