初期設定

＊ h2 タイトルの文字はそのままでは大きすぎるので 20pt にする。

＊ 文字の検索をする時は Command ＋ F。

1. Google Analytics について

Google Analytics はPHPに直接書き込まなくてOK。

header/bodyにタグを挿入できる「HTMLタグ設定」の欄がある。

次の、updateの時に、サイトのアクセス統計をとるツールを再度コピー・ペーストする。

2. 記事のアイキャッチ画像を非表示にするには

カスタマイズの「記事のデザイン設定」の下にある「記事に自動で納入されるアイキャッチ画像を非表示にする」にチェックを入れる    

3. 記事一覧を横長にするには

① トップページのレイアウト選択を「２カラム」にする（＊ 重要）

② トップページの記事一覧デザイン選択を「ベーシックスタイル」にする

＊ ① で「２カラム」にしないと横長にならない点に注意

4. スマホのフッターメニューの設定

公式HPの「スマホフッターメニュの設定方法」を参照。

Font Awesomeを貼り付けるときは fas fa-book（中身だけ）にすること。  

5. reCAPTCHAのバッジを消すには

reCAPTCHA v3のバッジは消しても問題ない。

基本的な設定は「reCAPTCHA v3のバッジは消しても平気だった【Google公式】」参照のこと

6. タイムライン

Youtubeの英会話動画を紹介するために使用予定。

コードは「HTMLとCSSでタイムラインデザイン！WordPressでショートコードも！」をそのまま転用した。

7. ビジュアルエディタの編集

「設定＞TinyMCE Advanced」で、Classic Editor(TinyMCE）をクリック。

あとは必要なものを下からドラッグする。

8. キーボードスタイルの表示がデフォルトで可能に

9. ボックス表示に関して

以下はCSSに追加したもの。

色・柄の設定はCSSの方にある。

1. 大きな四角カッコ

<div class="box">
<p style="text-align: left;">大きな四角カッコ</p>
</div>

2. ボックスウサギ（真ん中）

<div class="figure-caption-icon-wrap figure-caption-icon-3">
<figure>
<div class="simple-box4">
<p>ここに文章を打ち込む</p>
</div>
<figcaption class="img-caption"><span class="img-caption-text">ここにセリフ</span></figcaption>
</figure>
</div>

3. ボックスウサギ（右端）

<div class="figure-caption-icon-wrap figure-caption-icon-3">
<figure>
<div class="simple-box4">
<p>上にうさぎが乗っているボックス</p>
</div>
<figcaption class="img-caption"><span class="img-caption-text">がんばれ〜</span></figcaption>
</figure>
</div>

4. ボックスの中にイラストを入れる（ピンク）

イラストは簡単に入れ替えることが可能。

<div class="iconbox iconbox-bg-none">
<div class="box-title">今回のまとめ</div>
<div class="iconbox-wrap">
<div class="box-content">頑張ろう 頑張ろう 頑張ろう</div>
<div class="iconballoon">
<div class="icon"><img src="http://eigo-banchou.com/wp-content/uploads/2020/03/800_04_honyomu.png" alt="" width="300" height="300" class="alignnone size-medium wp-image-428" /></div>
</div>
</div>
</div>

今回のまとめ

頑張ろう 頑張ろう 頑張ろう

5. ボックスの中にイラストを入れる（ブルー）

イラストは簡単に入れ替えることが可能。

<div class="iconbox iconbox-blue">
<div class="box-title box-head-blue">今回のまとめ</div>
<div class="iconbox-wrap">
<div class="box-content">
<p>【頑張ろう 頑張ろう 頑張ろう】</p>
</div>
<div class="iconballoon">
<div class="icon"><img src="http://eigo-banchou.com/wp-content/uploads/2020/03/800_02_sashibou.png" alt="" width="300" height="300" class="alignnone size-medium wp-image-428" /></div>
</div>
</div>
</div>

今回のまとめ

【頑張ろう 頑張ろう 頑張ろう】

6. 右下に透かしたウサギを入れる

<div class="fixed-wrap"><img src="http://eigo-banchou.com/wp-content/uploads/2020/03/800-1.png" alt="" width="300" height="300" class="alignnone size-medium wp-image-674" /></div>

7. ひとこと ボックス

<div class="hitokoto"><span class="hitokoto-circle1">ひ</span><span class="hitokoto-circle2">こ</span>
<p>ここにテキスト</p>
</div>

8. 大きな丸括弧

インテンドを増やした方が見やすい気がする。

<div class="brackets-box">
  <p>ここにテキスト</p>
</div>

以下の 11 と 12 は「上下の比較ができるリストボックスを作る【コピペカスタマイズ】」から

9. 矢印のついたボックス（オレンジ）

<div class="compare-list-box compare-list-yellow">
<div class="compare-list-box-title">タイトル</div>
<div class="compare-list">
<span class="compare-unit-top">高</span>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<span class="compare-unit-bottom">低</span>
</div>
</div>

10. 矢印のついたボックス（ブルー）

<div class="compare-list-box compare-list-blue">
<div class="compare-list-box-title">タイトル</div>
<div class="compare-list">
<span class="compare-unit-top">高</span>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<span class="compare-unit-bottom">低</span>
</div>
</div>

11. ボックスの中に箇条書きを入れる

JINオリジナルBOXを利用。テキストモードにして、画像のコードを直接コピペする。

12. 文字の左右に棒がある

＊ 将来的には、カスタマイズ。色柄のバリエーションを増やす。

<p class="barbar">テキスト</p>

文字を入れるとこうなる

13. 下線の引き方

UME search【CSSコピペ集】文字に色々な下線を引く方法（一本・二本・点線・破線・蛍光マーカー）を参照にした。

下線を文字の色（#877179）に合わせた。

二重線（HTMLのみで表現）

<p>本日の天気は晴天。<span style="border-bottom:4px double #877179;">さわやかな秋風</span>が気持ち良い</p>

本日の天気は晴天。さわやかな秋風が気持ち良い

点線（HTMLのみで表現）

<p>本日の天気は晴天。<span style="border-bottom:2px dotted #877179;">さわやかな秋風</span>が気持ち良い</p>

本日の天気は晴天。さわやかな秋風が気持ち良い

14. 音声を読み上げる

行間が詰まる時はスペースを追加する。

ショートコード→余白（上から４段目）にある。

カラーは調節できる。