WordPressのクラウド版(wordpress.com)の話。WPのインストール版(wordpress.org)ではない。

あと、なぜWordPressを選んだのかは、語るのが面倒だし自分の備忘録にならないので、省略。

♣目次


  1. Themeはどれにする?
    1. Themeを選ぶ基準
    2. Theme別評価ランク
    3. Theme善し悪し詳細
  2. 手動カスタマイズ素材


♣Themeはどれが良いか?


日本語のブログ用語だと「テンプレート」と呼ばれることが多いかも。無料Themeをあれこれ試してみた。

殆ど気に食わないものだった。

なので、ダメだったものを含めて、メモっておこう。今度テンプレートを変えたいなと思った時に、同じ過ちを犯さないように。

♠Themeを選ぶ基準

  • 日本語フォントがキレイ
    • WPは英語主体なので、日本語化すると文字がバカデカくなる傾向
    • トップページ、ブログ記事タイトル、Heading、本文のフォントスタイル統一
  • トップページ(ブログ記事一覧)は、記事画像とExcerpt(サマリ)の配置バランスが良い
    • できればタイル式表示で、スクロールしなくても記事を一望できる
    • タイルでなければ、記事タイトルが一望しやすいデザインで妥協
  • ブログ記事本文は、長文でも読みやすく、頭にスっと入ってくる
    • Headingと本文のコントラストが効いている
    • Quote(引用)がシャレたデザイン
    • 箇条書き(中黒や数字)のインデント幅が適切
  • PC、タブレット、スマホの3デバイスの互換性に優れている

♠Theme別評価ランキング

  1. Aランク: (不満はあるが)合格点
    • Baskervill
    • Shorditch
    • Sequential
  2. Bランク: 悪くはないけど、私の基準に合わない
    • Dyad
    • Rowling
    • Argent
    • Revelar
    • Expound
    • Motif
    • Cols
  3. Cランク: 論外でダメ
    • Twenty Fourteen
    • Gazette
    • Gateway
    • Edin
    • Orvis
    • Franklin
    • Apostrophe
    • Canape
    • Museum
    • Saga
    • Quintus
    • Flounder
    • Responsive
    • Resonar

♠Theme善し悪し詳細

Aランク: Baskervill

  • プロフェッショナル向けでいい線行っている。
  • Topがタイル表示で画像とExcerptのバランスが良い。
  • ただし、ブログの日本語記事で文字が大き目なのと、Quoteのメリハリが悪い点が残念。

Aランク: Shorditch

  • 個人用でいい線行っている。ブログの日本語記事でBaskervillの欠点を補っている。
  • Topはタイル表示ではないのが残念。あと、記事画像の縦横サイズ比率を選ぶのが、やや面倒。
  • 記事本文は、Headingのメリハリ不足、水平線が薄くて見えないなどのプチ欠点があるが、手動で補正できる範囲。
  • 記事本文ページで、PC用が横幅が少し足らないので、スクロールが増えるのがやや残念だが、フォントの乱れがなく読みやすいので、妥協できる範囲。スマホ用は良好。

➡ PC用のフォントサイズが大きすぎるので、Admin Page上で本文のフォントサイズをNormalからSmallに変更。これにより、PC用は読みやすくなった。その分、スマホ用の文字は小さくなり、ちょっと読みづらいかもしれない。

Aランク: Sequential (Bランクから昇格)

  • Topはタイル表示ではないが、画像 + Excerptのみなのでスッキリ。
  • Topのタイトル下のTaglineがHeader画像と被らないので、Taglineの文字カラーが際立つ。
  • 色はモーブ系で落ち着いているが、フォントスタイルはポップさもあって、クラシック過ぎないのも良い。
  • 各ブログポストのイメージ画像の大きさ不揃いが目立ち、格好悪い。

➡ ブログ各記事のイメージ画像を使用しない、プレーンなテキスト文章中心のブログであれば、Sequentialは見やすい。


Bランク: Dyad

  • Topは良いが、記事本文が2カラム形式で、左半分が全て画像になるため、文章が長くなると左余白を無駄遣いしている気になる。

Bランク: Rowling

  • Topでタイル表示は良いが、Excerptが表示されないため、写真ギャラリーなどのブログに向いている。
  • 全体的なデザインは良いので、惜しい。

Bランク: Argent

  • Topはタイル表示ではないがスッキリしていて良い。
  • 日本語フォントもゴシックで読みやすく、サイズも最適。
  • 記事個別だと、横幅が狭くなって読みづらくなるのが惜しい。

Bランク: Revelar

  • Topでタイル表示は良いが、Excerptが表示されないため、写真ギャラリーなどのブログに向いている。

Bランク: Expound

  • Topのタイル表示に強弱があって面白いが、フォントが明朝で垢ぬけない。

Bランク: Motif

  • Topはタイル表示ではないが、画像 + Excerptのみで見やすい。
  • 記事個別は、フォントが小さすぎる(PC版の場合)、箇条書きのインデントが効いておらず左に寄りすぎ、Headingに強弱がないのでメリハリが効かない、といった点があり、章立てに凝った長文になると頭に残りづらい。
  • Quoteは斜体、かつ左側に縦線が入っているので分かりやすい。

Bランク: Cols (Aランクから降格)

  • 画像やデータなしで、テキスト文章の長文だけで何かを発信したい時(小説や日記など)、Colsはオススメ。
  • Topは左に画像、右にExcerptとHighlight(Read Moreより前の文章)が掲載される2カラム方式なので、Highlightの文章を長めにしても圧迫感が出ないのが特徴的。
  • 記事本文も2カラム方式(PC版のみ)は、おそらくColsだけの特徴。スクロールが減るので、A3にフォント10で文章ダラダラ書いて、1枚で1記事というのであれば、Colsが最適なTheme。
  • フォントはゴシックで統一感があるが、唯一Headingだけはバカデカすぎる。2段階落とさないと読みづらい。
  • 箇条書きのインデントは読みやすく、Quoteは自動で斜体になる(ただしQuoteの左側に縦線が入らない)ので、やはり小説向きか。

Cランク: Twenty Fourteen

  • 画面崩れまくりでNG。

Cランク: Gazette

  • Topはタイル表示だが、画像 + Excerpt + Highlightのため、タイルの意味をなしていない。
  • どちらかというと写真ギャラリーブログ向き。

Cランク: Gateway

  • Argentみたいにスッキリだが、左寄せで画面が崩れている。日本語フォントも明朝なので垢ぬけない。

Cランク: Edin

  • あまりにあっけなさすぎ。
  • 文章Blogとしてやる気を感じさせない。写真ギャラリーブログ向き。

Cランク: Orvis

  • あまりにあっけなさすぎ。
  • 文章Blogとしてやる気を感じさせない。写真ギャラリーブログ向き。

Cランク: Franklin

  • Topの画像デカすぎ。

Cランク: Apostrophe

  • 全体的にダサいデザイン。特に日本語だと垢ぬけなさが際立つ。

Cランク: Canape

  • Topの画像デカすぎ。
  • 文章Blogとしてやる気を感じさせない。写真ギャラリーブログ向き。

Cランク: Museum

  • Topはタイル表示だが、Excerptが表示されない他、画像が正方形前提で縦横比率が崩れる。
  • 日本語フォントが明朝で垢ぬけない。

Cランク: Saga

  • Topはタイル表示ではないが、画像 + Excerptのみでスッキリしている。
  • 日本語フォントがバカデカすぎる。

Cランク: Quintus

  • Topは、画像設定不可でExcerpt + Highlightなので日記ブログ向き。
  • 記事本文は明朝で、Headingがゴシックのちぐはぐ。
  • Customizationの選択肢が他と比べて限定的。

Cランク: Flounder

  • 3カラムなので、本文の横幅が短く、読みづらい。

Cランク: Responsive

  • 全般的に文字や配色のセンスが悪くてあか抜けない。

Cランク: Resonar

  • Topはタイル表示ではないが、画像と文章(Excerpt + Highlight)のバランスが良い。
  • 記事個別だと、横幅が狭く(PC版の場合)、フォントスタイルも明朝で垢ぬけないし、Header部分に巨大画像が表示されるため、スクロールも面倒。

♣手動カスタマイズ素材


残念ながら、どのThemeも満足いかなかったのが

  • 記事本文のHeadingのデザイン強調
  • 水平線の見やすさ、区切りとしての意味

の2点だった。

1点目はCSSを直接書き換えないとダメなので、無料Themeではムリなのであきらめる。

代わりに、Headingのデザイン強調は、Headingの冒頭に♣や♠などの特殊文字を入れることにした。これだけでかなり強弱がはっきりする。

また、フォントスタイルを少し凝った筆記体風にしたことで、英語に関してはメリハリが効くようになった(日本語は変わらないんだけど。。。)

2点目の水平線は、単純にHTMLの<hr>タグにsizeやdashedなどのコマンドを追記しても、CSSでOverrideされるので、きちんとCSSに沿ったスタイル設定をしないとダメなようだ。

Source: 水平線(区切り線)のコードの書き方と見栄え 紹介記事

♠コードの書き方と見栄えのチェック

  • ドット(点線)、太さ1ピクセル、上から赤・グレー・緑・青




➡ PC上だと、点線なのか実線なのか、区別が殆どつかない。

  • ダッシュ(破線)、太さ1ピクセル、上から赤・グレー・緑・青




➡ 破線に変更すると、PC上で破線が適度な感じで見える。が、スマホだと破線がすこし強調されて見える。

  • ダッシュ(破線)、太さ2ピクセル、上から赤・グレー・緑・青




➡ 太さを1から2ピクセルに上げると、さすがにPC上でも破線が強烈で、水平線としては、ちょっとセンスを感じないレベル。

  • ダブル(二重線)、太さ1ピクセル、上から赤・グレー・緑・青




➡ 点線や破線の代わりに二重線はどうだろうと思ったが、二重になっているようにはPC上からもスマホ上からも見えない。

  • ダブル(二重線)、太さ2ピクセル、上から赤・グレー・緑・青




➡ 太さを変えれば二重線が見えるかと思ったが、やっぱり二重には見えず、単に太い棒。

  • アウトセット(逆はめ込み)、太さ2ピクセル、上から赤・グレー・緑・青




➡ PCだと若干分かりづらいかもしれないが、若干透明がかった雰囲気になる。色彩が適度に淡くなるので、特にスマホでキレイに見えるので、アウトセットが良さそう。

参考までに、ソースコードも。
Source: Think & Createさんが紹介した記事をベースに加工

ドット(点線)、太さ1ピクセル、上から赤・グレー・緑・青

<br /><hr style="border: 0; border-top: 1px dotted red;" />



<hr style="border: 0; border-top: 1px dotted grey;" />



<hr style="border: 0; border-top: 1px dotted green;" />



<hr style="border: 0; border-top: 1px dotted blue;" />

ダッシュ(破線)、太さ1ピクセル、上から赤・グレー・緑・青

<br /><hr style="border: 0; border-top: 1px dashed red;" />



<hr style="border: 0; border-top: 1px dashed grey;" />



<hr style="border: 0; border-top: 1px dashed green;" />



<hr style="border: 0; border-top: 1px dashed blue;" />

ダッシュ(破線)、太さ2ピクセル、上から赤・グレー・緑・青

<br /><hr style="border: 0; border-top: 2px dashed red;" />



<hr style="border: 0; border-top: 2px dashed grey;" />



<hr style="border: 0; border-top: 2px dashed green;" />



<hr style="border: 0; border-top: 2px dashed blue;" />

ダブル(二重線)、太さ1ピクセル、上から赤・グレー・緑・青

<br /><hr style="border: 0; border-top: 1px double red;" />



<hr style="border: 0; border-top: 1px double grey;" />



<hr style="border: 0; border-top: 1px double green;" />



<hr style="border: 0; border-top: 1px double blue;" />

ダブル(二重線)、太さ2ピクセル、上から赤・グレー・緑・青

<br /><hr style="border: 0; border-top: 2px double red;" />



<hr style="border: 0; border-top: 2px double grey;" />



<hr style="border: 0; border-top: 2px double green;" />



<hr style="border: 0; border-top: 2px double blue;" />

アウトセット(逆はめ込み)、太さ2ピクセル、上から赤・グレー・緑・青

<br /><hr style="border: 0; border-top: 2px outset red;" />



<hr style="border: 0; border-top: 2px outset grey;" />



<hr style="border: 0; border-top: 2px outset green;" />



<hr style="border: 0; border-top: 2px outset blue;" />

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中