ストークとハミングバードの違い!どちらを購入するか迷っている方へ

ストークとハミングバードの違い!どちらを購入するか迷った方へ

OPENCAGEの有料テーマ「ストーク」と「ハミングバード」の違いをまとめておきます。

ストークとハミングバードの大きな違い

機能の比較は、公式サイトの各テーマ機能比較表を参考にして下さい。

価格

ストークの方が「2,820円」高いです。

ストーク 10,800円
ハミングバード 7,980円

コンテンツの背景色

コンテンツの背景 サイト全体の背景
ストーク 自由に設定可能
ハミングバード 共通(自由に設定可能)

個人的に一番気になっている部分です。

ハミングバードを使っているこのブログを見てもらえば分かると思いますが、ハミングバードはサイト全体の背景とコンテンツの背景が共通です。別々に設定することはできません。

中には、「コンテンツは白背景じゃなきゃ嫌だ!」って方もいると思います。

ですが、ハミングバードでコンテンツを白背景にするには、「サイト全体を白背景にする」及び「CSSをカスタマイズする」方法しかありません。一応、CSSでカスタマイズする方法が公式サイトハミングバードでコンテンツ背景を白色に変更するCSSカスタマイズに載っていますが、メインコンテンツの横幅が余白分狭くなるので、あまりおすすめはできません。また、このブログの様に画像を全て728pxで調整している場合も変更を躊躇ってしまいます。

理由は下記記事を読んでもらえると分かります。

フィギュアレビューサイトが絶対やってはいけない写真の掲載方法

2017.04.09

その点ストークは、コンテンツの背景は白のまま、サイト全体の背景を自由に変更できます。

ストークのメインコンテンツは白背景

ストークのメインコンテンツは白背景

コンテンツを白背景にしたい方には、断然「ストーク」をおすすめします。

スマホのグローバルナビとメニュー

グローバルナビ メニュー
ストーク あり ハンバーガーメニュー
ハミングバード なし サイドメニュー

スマホデザインの大きな違いです。

ハミングバードもスマホに特化したデザインになっていますが、グローバルナビを設定することができません。メニューは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フルサイズ
ハミングバード フルサイズのみ

ハミングバードからストークに変更はできるのか?

互換性が高いので基本的には可能です。但し、下記の点には注意して下さい。

注意
  • ヘッダー周りの画像やテキストを設定し直す必要がある
  • ウィジェットが異なるので配置し直す必要がある(移動)
  • フォントの種類とサイズが異なるので改行が増える
  • サムネのサイズが異なるので見切れる可能性がある

ヘッダー周りの設定(設定していなければ必要なし)とウィジェットの配置は見直す必要があります。他は気にならなければそのままで問題ありません。

後は、ハンバーガーメニューとスマホのグローバルメニューを設定して下さい。

最後に

細かい違い「ヘッダーのデザイン」「スライダーのデザイン」「アニメーションの違い」は他にもありますが、一言で言うなら「ストークはハミングバードの上位互換」です。

機能面を比較しても、間違いなくストークの方が優れています。

どちらにしようか迷っているなら、僕は断然「ストーク」をおすすめします。

スポンサーリンク
スポンサーリンク