ワードプレス構築記6|STINGER8のデザイン・UIチェック

無題スティンガー, ワードプレス

ワードプレスでのSTINGER8テンプレートがどのように見えるのかを手っ取り早くチェックするためのタグ・メディア表示確認。

ワードプレスのエディターにある編集ボタンのチェック。

スティンガー8編集ボタン

h2:

「大見出し」

h3:

「小見出し」

h4:

「階層下大見出し」

h5:

「階層下小見出し」

テンプレートによっては見出しタグを付けると自動的に記事前半に「目次」を自動生成するものがある。

目次はいるのかいらないのかの判断。そして、見出しの装飾・デザインをチェック。

解:
見出しの装飾は個人的にはいまいち。
見出しタグを入れてもスティンガーは自動で目次が生成されることはない。

テキストも明朝体なのかゴシック体なのか、文字幅・文字高も確認。

解:
ゴシック体で読みやすさも良好。スマホだと丸ゴシック。

「リンクテキスト」チェック

【賢い引越し術】引越し先のインターネットの失敗しない選び方と契約手順

解:
標準的な表示。

「引用テキスト」チェック

引っ越し先のネット環境が「何もない」状態は当然ですが、
「インターネット対応」となっているところや、
「フレッツ光設備あり」「フレッツ光導入済みマンション」などといったものは、
基本的に自分でインターネット回線を契約する必要があります。

インターネット対応は「対応」はしてますというだけで自分でネット回線の契約が必要。
「設備あり」「導入済み」も建物内は回線工事済みという意味で「契約する時に工事費が安くなったりするかも。」ということでこれも自分で契約する必要がある場合が多い。

解:
引用部分のデザインは良い

続きを読むの分割の状態を確認。ここが分断点

解:
レイアウトのデザイン上、分断点を入れる必要が無い。

連続改行がちゃんと反映されるか勝手に省略されているかもチェック。

【注意】
brタグによる連続改行はキャンセルされる。テキストエディターで複数改行を何個入れてもpタグ1個に置き換えられる。

「画像」チェック
ライト

サイズ幅は600px

【注意】
スティンガー8テンプレートは、PC本コンテンツ横幅はおよそ640pxのようだ。スマホだと自動縮小。

画像周りのマージン・パディング。および装飾の確認。

「リンク機能付き画像」チェック

ライト
画像サンプル

解:
通常時の見た目の変化はなし。マウスオーバー時に少し画像がハイライトになる。

「動画」チェック

サイズ560px

解:
なぜか動画がコンテンツカラムおよそ640pxに自動的に合わせられる。

エディター画面の編集ボタンチェック

編集ボタンチェック
いらない

編集ボタンチェック
いらない

編集ボタンチェック
使う機会があんまない

編集ボタンチェック
いらない

編集ボタンチェック
ok

編集ボタンチェック
ok

編集ボタンチェック
いらない

編集ボタンチェック
何これ?

スティンガー8編集ボタン
画像に枠線、特にはいらない。

編集ボタンチェック

「記事タイトルデザイン」ボタン。超太くて大きい文字。

編集ボタンチェック

ok。センタリング

編集ボタンチェック

ok

編集ボタンチェック

ok

編集ボタンチェック

ok

編集ボタンチェック

いらんだろ

編集ボタンチェック

用途不明「table横スクロール要素」

編集ボタンチェック
用途不明「width100%リセット」