Webdesigner-meetup2

2019,04,13

ワードプレスの基本的な使い方

  • ダッシュボード
  • 設定（インストール後の初期設定必須項目）
  • 記事の投稿
  • テーマの変更

WordPressインストール後の初期設定必須項目

https://cuusoolab.com/wordpress/basic_wordpress/initial-settings/

https://cuusoolab.com/wordpress/basic_wordpress/dashboard/

ダッシュボード（管理画面）を使う

ログイン

https://cuusoolab.com/wordpress/login/​

テーマの変更

  • XEORY
  • SNOWMONKEY
  • SANGO

https://xeory.jp/template/

https://app.box.com/s/yrcn8f2ivbgb78fs93o3bv3yt0i3g4xo

ドットインストール

https://dotinstall.com/lessons/basic_wordpress

HTML

HTMLの基本＝タグではさむ

<タグ名>と</タグ名>

例

<a>~</a>

<a href="url">~</a>

a アンカー

href エイチレフ

<a href="https://yahoo.com/">Yahoo!へジャンプ！</a>

HTML文書の宣言

<!DOCTYPE html>

html5

htmlタグでコード全体をはさむ

<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>~</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>
  • 「フォントの読み込み設定」
  • 「検索エンジンやブラウザがそのページを理解するための情報」
  • 「CSSファイルの読み込み設定」
  • アナリティクスのコード

titleタグは検索エンジンやブラウザなどに認識

<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>~</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・ol・liで箇条書き

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

idやclassを書く＝タグに管理名をつける

<p id="example">
<h2 class="name">

タグにclassやidを割り振ってつけることで、その管理する部分だけにcssのデザインを適応する

<タグ名 class=”好きな名前”>〜<タグ名>

 <タグ名 id=”好きな名前”>〜<タグ名>

<h1 class="見出し">

<h1 class="1title"> id名とclass名の先頭に数字は使えない

 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

divとspanは要素

ブロックやまとまりとして考える

span＝インライン要素

div＝ブロック要素

span＝改行なし

div＝改行が自動で入る

<div>~</div>や<span>~</span>はコードにまとまりを作るためのコード

HTMLクイックリファレンス

http://www.htmq.com/

css

<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>
セレクタ {
プロパティ：値 ;
プロパティ：値
}

セミコロン（;）で区切る

htmlのタグ名で適用先を指定

<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

 class名で指定

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タグの中にだけデザイン指定

Title Text

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
  • em：現在のフォントサイズに対する倍率
  • px：縦のピクセルの大きさで指定

 {font-size: ◯◯px or ◯◯em}

プロパティと値

  • font-size
  • 色名：英語の色名を書く
  • カラーコード：#+6ケタの英数字で書く

 {color: 色名orカラーコード}

https://www.colordic.org/

コメントアウト

/* この中の文章はCSSに反映されません */

記事を書く前に必ずキーワード選定

キーワード選定

ユーザーはある程度決まった形で検索をする

ユーザーの検索意図を把握する

ユーザーの共通のキーワードを見つける

検索するには理由がある

キーワードは必ず最初に決める

好きなカフェを紹介したいとき

[カフェ　おしゃれ][カフェ　景色]などユーザーの検索する理由に沿ったキーワードに設定しておく。

[カフェ　コーヒー]は特定のユーザーになります。

キーワード選定方法

  1. 主要キーワードを出す
  2. 主要キーワードの関連キーワードを書き出す
  3. 全ての月間検索ボリューム（imp）を書き出す
  4. 上記をスプレッドシートにまとめる
  5. impが100でシートを分ける
  6. ビッグキーワード・ミドルキーワード・スモールキーワードを選択
  7. 内部リンクの構造を考える

1, 主要キーワードを出す

記事に書くジャンルから主要となるキーワードを出す。

例えば、ブライダルなら「ブライダル」「結婚式」などの主要なキーワードを出す。

2, 主要キーワードの関連キーワードを書き出す

関連キーワード取得ツールを使って書き出す。

「全キーワードリスト」をコピー

関連キーワード取得ツール

https://www.related-keywords.com/

月間検索ボリューム

月間検索ボリュームとは

月に何回そのキーワードで検索されているか

例えば、「長崎 ラーメン」というキーワードで月間検索ボリュームが1,000だったら、「長崎 ラーメン」という検索が月に1,000回されているということです。

月間検索ボリュームの調べ方

Google ads キーワードプランナー

https://ads.google.com/aw/keywordplanner/home

キーワードリスト

  • [検索のボリュームと予測のデータを確認する]に打ち込む
  • [過去の指標]をチェック
  • キーワードの月間検索ボリュームが表示されるのでCSVでダウンロード
  • スプレッドシートに保存
  • impが１００を基準に分ける（削除しても良い）

キーワード

  • ミドルキーワードとビックキーワードを考える
  • 内部リンクの構造を考える

https://drive.google.com/open?id=1im1TWtTusGUmiT4hAn4tR42fd1bz6znE

Google Drive

どのキーワードを、どの順番で使用して、内部リンクを構築するかを考える。

キーワードの種類

  • ロングテールキーワード（imp100〜500）
  • ミドルキーワード（imp500〜3000）
  • ビッグキーワード（imp3000〜）

impが大きいキーワードで記事を書いてもなかなか上位に上がってくることがないので、ロングテール中心

ロングテールキーワード10記事

ミドルキーワードの記事を1つ

効果的な記事数

ミドルキーワード3記事

ビッグキーワードの記事を1つ

キーワード　内部リンク構造

内部リンク構造の考え方

関連性の高いロングテールキーワードを複数もつミドルキーワード

WordPress案件

  • 既存テーマで文章だけ入力
  • HTML：CSSをワードプレス化する
  • 既存テーマをカスタマイズ
  • オリジナルテーマ作成

キーワード選定

By EIJI ORIME

Made with Slides.com

キーワード選定

  • 287

More from EIJI ORIME