2019,04,13
WordPressインストール後の初期設定必須項目
ダッシュボード(管理画面)を使う
ログイン
HTMLの基本=タグではさむ
<タグ名>と</タグ名>
例
<a>~</a>
<a href="url">~</a>
a アンカー
href エイチレフ
<a href="https://yahoo.com/">Yahoo!へジャンプ!</a>
html5
<html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title>CSS練習</title>
</head>
<body>
<div id="headline">
<h1>CSS入門</h1>
<p>これは段落です。</p>
</div>
<div class="main">
<h2>これは見出しです。</h2>
<p>これは<span class="light">例</span>です。</p>
<p>
<a href="https://cuusoolab.com/">ホームへ</a>
戻ります。</p>
</div>
</body>
</html>
</html>
<head>~</head>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title>CSS練習</title>
</head>
<body>
<div id="headline">
<h1>CSS入門</h1>
<p>これは段落です。</p>
</div>
<div class="main">
<h2>これは見出しです。</h2>
<p>これは<span class="light">例</span>です。</p>
<p>
<a href="https://cuusoolab.com/">ホームへ</a>
戻ります。</p>
</div>
</body>
</html>
<title>~</title>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title>CSS練習</title>
</head>
<body>
<div id="headline">
<h1>CSS入門</h1>
<p>これは段落です。</p>
</div>
<div class="main">
<h2>これは見出しです。</h2>
<p>これは<span class="light">例</span>です。</p>
<p>
<a href="https://cuusoolab.com/">ホームへ</a>
戻ります。</p>
</div>
</body>
</html>
検索エンジンに表示されるページのタイトルも、基本的にはtitle内の文字が使われています。
SNSなどのサイトの認識
ここまではブラウザ画面内に表示されない
<meta charset="UTF-8">は日本語設定
<body>~</body>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title>CSS練習</title>
</head>
<body>
<div id="headline">
<h1>CSS入門</h1>
<p>これは段落です。</p>
</div>
<div class="main">
<h2>これは見出しです。</h2>
<p>これは<span class="light">例</span>です。</p>
<p>
<a href="https://cuusoolab.com/">ホームへ</a>
戻ります。</p>
</div>
</body>
</html>
bodyタグ内が表示される
<meta charset="UTF-8">は日本語設定
<p>~</p>段落
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title>CSS練習</title>
</head>
<body>
<div id="headline">
<h1>CSS入門</h1>
<p>これは段落です。</p>
</div>
<div class="main">
<h2>これは見出しです。</h2>
<p>これは<span class="light">例</span>です。</p>
<p>
<a href="https://cuusoolab.com/">ホームへ</a>
戻ります。</p>
</div>
</body>
</html>
<h1>記事のタイトル</h1>
<h2>サブタイトル</h2>
<h3>小見出し</h3>
h1〜h6で見出し
<ul>~</ul>箇条書きを挟む
<ul>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ul>
<li>~</li>の中に箇条書き文
<ol>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ol>
<!-- ここからGoogle analitics code -->
<!-- ここからGoogle analitics code END -->
<p id="example">
<h2 class="name">
タグにclassやidを割り振ってつけることで、その管理する部分だけにcssのデザインを適応する
<タグ名 class=”好きな名前”>〜<タグ名>
<タグ名 id=”好きな名前”>〜<タグ名>
<h1 class="見出し">
<h1 class="1title"> id名とclass名の先頭に数字は使えない
id:1つのHTML文書内で同じid名を使うことができない
class:何回でも同じclass名を使うことができる
<h1 id="title">というタグ書いたら、別のタグに<h2 id="title">と同じid名は使えない
<h1 class="title">と<h2 class="title">、<p class="title">はOK
ブロックやまとまりとして考える
span=インライン要素
div=ブロック要素
span=改行なし
div=改行が自動で入る
<div>~</div>や<span>~</span>はコードにまとまりを作るためのコード
<style>
body {
color: gray;
}
</style>
セレクタ {
プロパティ:値 ;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
</head>
</html>
<style>
body {
color: gray;
font-size: 21px
}
</style>
セレクタ {
プロパティ:値 ;
プロパティ:値
}
<p>~</p>
<a>~</a>
<img>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title>CSS練習</title>
</head>
<body>
<div id="headline">
<h1>CSS入門</h1>
<p>これは段落です。</p>
</div>
<div class="main">
<h2>これは見出しです。</h2>
<p>これは<span class="light">例</span>です。</p>
<p>
<a href="https://cuusoolab.com/">ホームへ</a>
戻ります。</p>
</div>
</body>
</html>
<style>
body {
color: gray;
font-size: 21px
}
p {
color:orange;
}
</style>
コードの間に半角スペースやtab、改行を入れてもOK
HTMLでは<タグ名 class="class名">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title>CSS練習</title>
</head>
<body>
<div id="headline">
<h1>CSS入門</h1>
<p>これは段落です。</p>
</div>
<div class="main">
<h2>これは見出しです。</h2>
<p>これは<span class="light">例</span>です。</p>
<p>
<a href="https://cuusoolab.com/">ホームへ</a>
戻ります。</p>
</div>
</body>
</html>
<style>
body {
color: gray;
font-size: 21px
}
.main {
color: orange;
}
</style>
.class名{〜}のように.ドット(ピリオド)を前につける
複数選択したいときは、タグやclass名、id名を半角コンマ,で区切る
divタグの中のpタグの中のaタグの中にだけデザイン指定
div p a{~}
.main p span {
color:orange;
}
<div class="main">
<h2>これは見出しです。</h2>
<p>これは<span class="light">例</span>です。</p>
<p>
<a href="https://saruwakakun.com/">ホームへ</a>
戻ります。</p>
</div>
{font-size: ◯◯px or ◯◯em}
{color: 色名orカラーコード}
/* この中の文章はCSSに反映されません */
ユーザーの共通のキーワードを見つける
検索するには理由がある
好きなカフェを紹介したいとき
[カフェ おしゃれ][カフェ 景色]などユーザーの検索する理由に沿ったキーワードに設定しておく。
[カフェ コーヒー]は特定のユーザーになります。
記事に書くジャンルから主要となるキーワードを出す。
例えば、ブライダルなら「ブライダル」「結婚式」などの主要なキーワードを出す。
関連キーワード取得ツールを使って書き出す。
「全キーワードリスト」をコピー
月間検索ボリュームとは
月に何回そのキーワードで検索されているか
例えば、「長崎 ラーメン」というキーワードで月間検索ボリュームが1,000だったら、「長崎 ラーメン」という検索が月に1,000回されているということです。
Google Drive
どのキーワードを、どの順番で使用して、内部リンクを構築するかを考える。
impが大きいキーワードで記事を書いてもなかなか上位に上がってくることがないので、ロングテール中心
ロングテールキーワード10記事
ミドルキーワードの記事を1つ
効果的な記事数
ミドルキーワード3記事
ビッグキーワードの記事を1つ
内部リンク構造の考え方
関連性の高いロングテールキーワードを複数もつミドルキーワード