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

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

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

scofield
この記事で紹介している旧ストークとストーク19は別テーマです。ストークの購入を検討されている方は、リニューアルされたストーク19をおすすめします。

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

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

価格

旧ストークの方が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%;」が定義されているので、本来より若干文字が大きく太く見える様に設定されています。

ショートコード

旧ストークとハミングバードのショートコードはほぼ共通です。

旧ストーク ショートコードの使い方
ハミングバード ショートコードの使い方

但し、中には旧ストークでしか使えない吹き出しアイコン周りに色をつける機能もあります。

基本的にハミングバードのショートコードは旧ストークで全て使えますが、旧ストークのショートコードは一部ハミングバードでは使えません。

ヘッダー下お知らせテキスト

旧ストークは「表示」「非表示」を選択できますが(リンクを貼ることもできる)、ハミングバードは設定できません。

ヘッダー下お知らせテキスト
旧ストーク 表示or非表示
ハミングバード なし
ヘッダー下お知らせテキスト

ヘッダー下お知らせテキスト

パンくずナビ

旧ストークは「表示」「非表示」を選択できますが、ハミングバードは「表示」のみです。

パンくずナビ
旧ストーク 表示or非表示
ハミングバード 表示のみ
パンくずナビ

パンくずナビ

ヘッダーテキストロゴサイズ

旧ストークは「小さめ」「標準」「大きめ」から選択できますが、ハミングバードは変更できません。

ヘッダーテキストロゴサイズ
旧ストーク 小さめor標準or大きめ
ハミングバード 変更不可
ヘッダーテキストロゴサイズ

ヘッダーテキストロゴサイズ

ヘッダー背景設定

旧ストークは「コンテンツ幅」「フルサイズ」を選択できますが、ハミングバードは「フルサイズ」のみです。

ヘッダー背景設定
旧ストーク コンテンツ幅orフルサイズ
ハミングバード フルサイズのみ
ヘッダー背景設定

ヘッダー背景設定

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

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

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

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

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

最後に

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

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

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

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