【テスト記事です】ブログを書くにあたってテーマをCocoonにしたので使う練習とカスタマイズテスト

CocoonとGutenbergの練習を兼ねたテスト記事です。目次がいまいちデザインになじんでないのでもう少しカスタマイズを施したいところ。

記事に集中してほしいと思ったのでシングルカラムにしました。後はシンプルにシンプルに。カテゴリはしばらくなしの方向で。記事にタグをつけて管理していく感じに。

後で整理して綺麗にしたいところ。

h2 color-mono 見出しが長い時はこうなるようです。

h3 color-mono 見出しが長い時はこうなるようです。

h4 color-red 見出しが長い時はこうなるようです。

h5 color-orange 見出しが長い時はこうなるようです。
h6 color-yellow 見出しが長い時はこうなるようです。

h4 color-green 見出しが長い時はこうなるようです。

h5 color-blue 見出しが長い時はこうなるようです。
h6 color-purple 見出しが長い時はこうなるようです。

見出しのカスタマイズをしたので良い感じに表示されているかな?

ブログカードカスタマイズ

1カラム アイキャッチがぼやけすぎて微妙

2カラム

3カラム

見出しH3 画像張り込み

Gutenberg使いやすくなってきた。慣れって素晴らしい。画像を貼りこんでいく。メディアファイルへのリンクはあったほうがいいのかな?は、ハゲじゃねえから!

見出しH4 ブログカード

ブログカードはこんな感じです。内部外部の表示を変えないようにチューニング。

ブログカードおすすめ
外部リンクはこんな感じ。
相手先の記事がトゥライ…
ブログカードテキストリンク化

どうかな?

Rinkerのテスト

Amazon等の商品陳列に丁度いいRinkerを設定していく。

API制限でまだ取れない…ので手動で設定しました。

最近炊飯器の調子がいまいちなので新しいのが欲しい…!

H4 コードハイライト

コードのハイライト表示のテスト。ソースコードブロックにするとよい。ハイライトスタイルは要変更かな。

/* コメント */
#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

カラーデザイン

テーブルの行頭もヘッダーにしたかったので自作。ついでに色バリエーションも用意。

<figure class="wp-block-table is-style-regular ">
<table class="color-mono">
<thead><tr><th>1あいうえおかきくけこ</th><th>2さしすせそ</th><th>3たちつてと</th></tr></thead>
<tbody>
<tr><th>4</th><td>5</td><td>6</td></tr>
<tr><th>7</th><td>8とうくはよくかきくうきゃくだ</td><td>9</td></tr>
<tr><th>10</th><td>11</td><td>12</td></tr>
</tbody>
</table>
</figure>

mono

h2 mono

h3 mono

h4 mono

1あいうえおかきくけこ2さしすせそ3たちつてと
8とうくはよくかきくうきゃくだ
101112
<figure class="wp-block-table is-style-regular ">
<table class="color-mono">
<thead><tr><th>1あいうえおかきくけこ</th><th>2さしすせそ</th><th>3たちつてと</th></tr></thead>
<tbody>
<tr><th>4</th><td>5</td><td>6</td></tr>
<tr><th>7</th><td>8とうくはよくかきくうきゃくだ</td><td>9</td></tr>
<tr><th>10</th><td>11</td><td>12</td></tr>
</tbody>
</table>
</figure>

red

h2 red

h3 red

h4 red

101112

orange

h2 orange

h3 orange

h4 orange

101112

yellow

h2 yellow

h3 yellow

h4 yellow

101112

green

h2 green

h3 green

h4 green

1あいうえおかきくけこ2さしすせそ3たちつてと
8とうきょよくかきくうきゃくだ
101112

blue

h2 blue

h3 blue

h4 blue

1あいうえおかきくけこ2さしすせそ3たちつてと
8とうくはよくかきくうきゃくだ
101112

indigo

h2 indigo

h3 indigo

h4 indigo

1あいうえおかきくけこ2さしすせそ3たちつてと
8とうくはよくかきくうきゃくだ
101112

purple

h2 purple

h3 purple

h4 purple

h5

h6

1あいうえおかきくけこ2さしすせそ3たちつてと
8とうくはよくかきくうきゃくだ
101112
タイトルとURLをコピーしました