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%;」が定義されているので、本来より若干文字が大きく太く見える様に設定されています。
ショートコード
ストークとハミングバードのショートコードはほぼ共通です。
| ストーク | ショートコードの使い方 |
|---|---|
| ハミングバード | ショートコードの使い方 |
但し、中にはストークでしか使えないショートコード「ボックス」や吹き出しアイコン周りに色をつける機能もあります。基本的にハミングバードのショートコードはストークで全て使えますが、ストークのショートコードは一部ハミングバードでは使えません。
table（表）タグの横スクロール
スマホでtableタグを表示した場合、ストークもハミングバードも自動で最適化されます。
ですが、tableタグがあまりにも大きすぎるとスマホでは見切れてしまいます。この際、ストークはCSSを追加してtableタグの周りに「div.tscroll」を追加するだけで、横スクロール可能なtableタグになります。ハミングバードは非対応です。
やり方は、tableタグを横スクロールできるようにするカスタマイズを参考にして下さい。
| tableタグの横スクロール | |
|---|---|
| ストーク | 対応 |
| ハミングバード | 非対応 |
パンくずナビ
パンくずナビ
ストークは「表示」「非表示」を選択できますが、ハミングバードは「表示」のみです。
| パンくずナビ | |
|---|---|
| ストーク | 表示or非表示 |
| ハミングバード | 表示のみ |
ヘッダーテキストロゴサイズ
ヘッダーテキストロゴサイズ
ストークは「小さめ」「標準」「大きめ」から選択できますが、ハミングバードは変更できません。
| ヘッダーテキストロゴサイズ | |
|---|---|
| ストーク | 小さめor標準or大きめ |
| ハミングバード | 変更不可 |
ヘッダー背景設定
ヘッダー背景設定
ストークは「コンテンツ幅」「フルサイズ」を選択できますが、ハミングバードは「フルサイズ」のみです。
| ヘッダー背景設定 | |
|---|---|
| ストーク | コンテンツ幅orフルサイズ |
| ハミングバード | フルサイズのみ |
ハミングバードからストークに変更はできるのか？
互換性が高いので基本的には可能です。但し、下記の点には注意して下さい。
- ヘッダー周りの画像やテキストを設定し直す必要がある
- ウィジェットが異なるので配置し直す必要がある（移動）
- フォントの種類とサイズが異なるので改行が増える
- サムネのサイズが異なるので見切れる可能性がある
ヘッダー周りの設定（設定していなければ必要なし）とウィジェットの配置は見直す必要があります。他は気にならなければそのままで問題ありません。
後は、ハンバーガーメニューとスマホのグローバルメニューを設定して下さい。
最後に
細かい違い「ヘッダーのデザイン」「スライダーのデザイン」「アニメーションの違い」は他にもありますが、一言で言うなら「ストークはハミングバードの上位互換」です。
機能面を比較しても、間違いなくストークの方が優れています。
どちらにしようか迷っているなら、僕は断然「ストーク」をおすすめします。
最近のコメント