OPENCAGEの有料テーマ「旧ストーク」と「ハミングバード」の違いをまとめておきます。
をおすすめします。Contents
旧ストークとハミングバードの大きな違い
機能の比較は、公式サイトの各テーマ機能比較表
を参考にして下さい。
価格
旧ストークの方が2,820円高いです。
| 旧ストーク | 10,800円 |
|---|---|
| ハミングバード | 7,980円 |
コンテンツの背景色
個人的に一番気になる部分です。
| コンテンツの背景 | サイト全体の背景 | |
|---|---|---|
| 旧ストーク | 白 | 自由に設定可能 |
| ハミングバード | 共通（自由に設定可能） | |
ハミングバードを使っているこのブログを見てもらえば分かると思いますが、ハミングバードはサイト全体の背景とコンテンツの背景が共通です。別々に設定することはできません。
中には、「コンテンツは白背景じゃなきゃ嫌だ！」って方もいると思います。
ですが、ハミングバードでコンテンツを白背景にするには、「サイト全体を白背景にする」及び「CSSをカスタマイズする」方法しかありません。一応、CSSでカスタマイズする方法が公式サイトハミングバードでコンテンツ背景を白色に変更するCSSカスタマイズに載っていますが、メインコンテンツの横幅が余白分狭くなるので、あまりおすすめはできません。また、このブログの様に画像を全て728pxで調整している場合も変更を躊躇ってしまいます。
理由は下記記事を読んでもらえると分かります。
その点旧ストークは、コンテンツの背景は白のまま、サイト全体の背景を自由に変更できます。
旧ストークのメインコンテンツは白背景
コンテンツを白背景にしたい方には、「旧ストーク」をおすすめします。
スマホのグローバルナビとメニュー
スマホデザインの大きな違いです。
| グローバルナビ | メニュー | |
|---|---|---|
| 旧ストーク | あり | ハンバーガーメニュー |
| ハミングバード | なし | サイドメニュー |
ハミングバードもスマホに特化したデザインになっていますが、グローバルナビを設定することができません。メニューはPCと共通で「サイドメニュー」が表示されます。
ハミングバード（スマホ表示）
その点旧ストークは、スマホにも横スクロール可能なグローバルナビを設定することができます。また、メニューはウィジェットで管理できる「ハンバーガーメニュー」が表示されます。
旧ストーク（スマホ表示）
グローバルナビは、PCとスマホで別々に設定することができます。また、ハンバーガーメニューはウィジェットで管理しているので、広告を載せることも可能です。
どちらも載せたい情報を自由にカスタマイズできるのが特徴です。
デザインは好みの問題ですが、使い勝手がいいのは間違いなく「旧ストーク」です。
旧ストークとハミングバードの互換性
メインコンテンツとサイドバーの横幅
デフォルト2カラムの横幅「728px」とサイドバーの横幅「336px」は共通ですが、1カラムとLPの横幅が若干異なります。また、ハミングバードに「バイラル風」の設定はありません。
| 2カラム | 1カラム | バイラル風 | LP | |
|---|---|---|---|---|
| 旧ストーク | 728px | 1026px | 728px | 1100px |
| ハミングバード | 728px | 1068px | ━ | 1068px |
記事レイアウトとサムネの大きさ
旧ストークの方が記事一覧で表示されるサムネが若干大きくなっています。
また、ハミングバードには記事レイアウト「マガジン型」はありません。
| シンプル | カード型 | マガジン型 | ビッグ | |
|---|---|---|---|---|
| 旧ストーク | 298px | 356px | 349px | 728px |
| ハミングバード | 259px | 354px | ━ | 728px |
※記事一覧で表示されるサムネの横幅（縦幅はアイキャッチ画像によって若干変動）。
フォントの種類とサイズ
どちらも「font-family」のプロパティが定義されていますが、旧ストークは「Arial」と「游ゴシック」、ハミングバードは「Lato」と「メイリオ」が優先されています。
| 英語 | 日本語 | サイズ | |
|---|---|---|---|
| 旧ストーク | Arial | 游ゴシック | 16px（103%） |
| ハミングバード | Lato | メイリオ | 16px（100%） |
フォントが異なるので、ぱっと見の雰囲気が異なります。
また、旧ストークは「font-weight: 500;」と「font-size: 103%;」が定義されているので、本来より若干文字が大きく太く見える様に設定されています。
ショートコード
旧ストークとハミングバードのショートコードはほぼ共通です。
| 旧ストーク | ショートコードの使い方 |
|---|---|
| ハミングバード | ショートコードの使い方 |
但し、中には旧ストークでしか使えない吹き出しアイコン周りに色をつける機能もあります。
基本的にハミングバードのショートコードは旧ストークで全て使えますが、旧ストークのショートコードは一部ハミングバードでは使えません。
ヘッダー下お知らせテキスト
旧ストークは「表示」「非表示」を選択できますが（リンクを貼ることもできる）、ハミングバードは設定できません。
| ヘッダー下お知らせテキスト | |
|---|---|
| 旧ストーク | 表示or非表示 |
| ハミングバード | なし |
ヘッダー下お知らせテキスト
パンくずナビ
旧ストークは「表示」「非表示」を選択できますが、ハミングバードは「表示」のみです。
| パンくずナビ | |
|---|---|
| 旧ストーク | 表示or非表示 |
| ハミングバード | 表示のみ |
パンくずナビ
ヘッダーテキストロゴサイズ
旧ストークは「小さめ」「標準」「大きめ」から選択できますが、ハミングバードは変更できません。
| ヘッダーテキストロゴサイズ | |
|---|---|
| 旧ストーク | 小さめor標準or大きめ |
| ハミングバード | 変更不可 |
ヘッダーテキストロゴサイズ
ヘッダー背景設定
旧ストークは「コンテンツ幅」「フルサイズ」を選択できますが、ハミングバードは「フルサイズ」のみです。
| ヘッダー背景設定 | |
|---|---|
| 旧ストーク | コンテンツ幅orフルサイズ |
| ハミングバード | フルサイズのみ |
ヘッダー背景設定
ハミングバードから旧ストークに変更はできるのか？
互換性が高いので基本的には可能です。但し、下記の点には注意して下さい。
- ヘッダー周りの画像やテキストを設定し直す必要がある
- ウィジェットが異なるので配置し直す必要がある（移動）
- フォントの種類とサイズが異なるので改行が増える
- サムネのサイズが異なるので見切れる可能性がある
ヘッダー周りの設定（設定していなければ必要なし）とウィジェットの配置は見直す必要があります。他は気にならなければそのままで問題ありません。
後は、ハンバーガーメニューとスマホのグローバルメニューを設定して下さい。
最後に
他にも細かい違い「ヘッダーのデザイン」「スライダーのデザイン」「アニメーションの違い」はありますが、一言で言うなら「旧ストークはハミングバードの上位互換」です。
機能面を比較しても、間違いなく旧ストークの方が優れています。
どちらにしようか迷っているなら、僕は断然「旧ストーク」をおすすめします。
