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フルサイズ |
| ハミングバード | フルサイズのみ |
ヘッダー背景設定
ハミングバードからストークに変更はできるのか？
互換性が高いので基本的には可能です。但し、下記の点には注意して下さい。
- ヘッダー周りの画像やテキストを設定し直す必要がある
- ウィジェットが異なるので配置し直す必要がある（移動）
- フォントの種類とサイズが異なるので改行が増える
- サムネのサイズが異なるので見切れる可能性がある
ヘッダー周りの設定（設定していなければ必要なし）とウィジェットの配置は見直す必要があります。他は気にならなければそのままで問題ありません。
後は、ハンバーガーメニューとスマホのグローバルメニューを設定して下さい。
最後に
細かい違い「ヘッダーのデザイン」「スライダーのデザイン」「アニメーションの違い」は他にもありますが、一言で言うなら「ストークはハミングバードの上位互換」です。
機能面を比較しても、間違いなくストークの方が優れています。
どちらにしようか迷っているなら、僕は断然「ストーク」をおすすめします。
最近のコメント