最強の無料WordPressテーマ「Sentry」〜AMPにも対応したスマホファーストテンプレート〜

sentry-banner



ダウンロードコア:Sentry-Void



ダウンロード子テーマ:Sentry

デモサイト

Contents

Sentryの特徴

プラグインを入れるだけで、様々な機能がセットアップ不要で使えます!

AMP対応

プラグイン「AMP」をインストールするだけで最適化されたデザインのAMPページが完成。SNSボタンや関連記事も表示されます。
カスタマイザーからの簡単な操作で、Google AnalyticsやAdsenseの設定も可能です。
デモサイト

SNSボタン(投稿数付)

記事の上部と下部にSNSボタンを表示。プラグイン「SNS Count Cache」をインストールすると自動的に各SNSでの拡散数が表示されます。
Twitterとはてなブックマークはカウント数をクリックすることで、コメントを見ることもできます。

対応SNS:Facebook, Twitter, はてなブックマーク, Google+, Pocket, LINE

デモサイト

タブ型の人気記事ウィジェット

サイドバーやフッターに設定できるオリジナルのウィジェットです。
プラグイン「WordPress Popular Posts」をインストールすることで、「週間」「月間」「全期間」のランキングが自動的に生成されます。また、トップページにはデイリーランキングが表示されます。
デモサイト

ログインユーザー向けのサイドバー

プラグイン「WordPress Popular Posts」をインストールすると、ログインユーザーにだけ表示される管理者向けのサイドバーが表示されます。サイドバーには各記事の「日間」「週間」「月間」「全期間」のページビューが一覧表示され、すぐに編集画面を開くことができるリンクも設置しています。
デモサイト

広告表示も可能な関連記事

関連記事の表示はプラグイン「Yet Another Related Posts Plugin(YARPP)」を利用しています。
記事毎の関連記事の制御も簡単に行えるうえ、関連記事の一部を広告に置き換えることも可能です。「Nend」などのASPを使ってランダムな記事を表示させることも可能ですし、「テキスト」ウィジェットを使って自由にカスタマイズすることもできます。

お問い合わせページ

プラグイン「Contact Form 7」をインストールすることで、簡単にお問合せページを作成することができます。デザインは自動的にSentryに最適化されるので設定は簡単です。

自動生成される目次

ページに目次をつけたい場合はプラグイン「Table of Contents Plus」を利用することができます。見出しから自動的に目次を生成し、デザインもSentryに最適化します。
デモサイト

簡単な手順でいろんなところを自由にカスタマイズ!

収益に最適化した広告表示エリア

スマホ・PCどちらも収益の最大化につながる広告の配置を簡単に設定することができます。また、Googleが推奨している「ページ単位の広告」のもカスタマイザーから簡単に設定することができます。他にも、記事内の好きなところに広告を設定できるショートコードや、関連記事内に広告を表示させることもできます。

ウィジェットテキストPCのみ、スマホのみによる柔軟な表示制御

汎用性の高い「テキスト」のウィジェットを拡張したオリジナルのウィジェットを使うことで、スマホとPCで情報を出し分けることができます。例えば、広告エリアでPC版には「600×300のバナー」を表示させ、スマホには「300×250のバナー」を表示させるといった表示の出し分けが簡単に設定できます。

テーマカラーのカスタマイズ

サイトのイメージを決める「メインカラー」をカスタマイザーから設定することができます。1つのメインカラーを設定するだけで、適切な配色に自動的に設定されます。

Facebookいいねboxウィジェット, Twitter, LINE@, push7, feedlyにも対応

最近のブログには欠かせない、すべての記事の下に設置するFacebookの「いいね!」を促すボックスも、ウィジェットとして簡単に設定することができます。また、Facebook以外にもTwitterやLINE@、Feedly、push7のフォローや購読のためのウィジェットも設定することができます。
デモサイト

カスタム可能なトップページ

デフォルトのトップページは「注目記事」「日間ランキング」「新着記事」「カテゴリー一覧」から構成されていますが、表示順を並び替えたり、特定のセクションを非表示にしたり、バナーなど独自の要素を追加したりといったトップページをカスタマイズすることができます。
(初歩的なHTMLやPHPの知識は必要になります。)

最新記事(画像つき)ウィジェット

標準だとテキストしか表示されない「最新記事」のウィジェットを拡張し、アイキャッチ画像を自動的に表示する「最新記事(画像つき)」のウィジェットを利用できます。
デモサイト

記事の装飾に使える様々なショートコードを用意

投稿内でショートコードを使うことで、文字の装飾や広告の設置などが可能です。利用できるショートコードは

font:太字・斜字などの文字装飾、文字のサイズ、文字の色をカスタマイズ
marker:蛍光ペンマーカーのように文字の背景に線を引くおことができます。線の色や太さも変更可能です。
post:サイト内の他の記事へのリンクを簡単に設定することができます。サムネイル付きのリンクと、”関連記事””PickUp”のタグが付いただけのシンプルなテキストリンクを選択できます。
notification:テキストを角丸の四角で囲んだパネルのようなデザインで表示させることができます。文字と同様パネルの色を選択できます。
ad:記事内の好きな場所に広告を設置するためのショートコードです。実際の表示内容はウィジェットで設定します。

ヨメレバ、ポチエバ、カエレバの対応

Sentryは、Amazonや楽天のアフィリエイトを利用している人にとってはおなじみのツール「ヨメレバ」「ポチレバ」「カエレバ」に対応しています。ヨメレバ、ポチレバ、カエレバの各ツールが発行するコードを貼りつけるだけで、PC・スマホともに最適なデザインで表示されます。
デモサイト

youtube埋め込みが自動でレスポンシブ対応

YoutubeのURLを貼りつけるだけで、PC・スマホともにピッタリのサイズで表示されます。Youtube以外にも「vimeo(ヴィメオ)」の動画や、Twitter、VineなどSNSの埋め込みもページからはみ出ることなく最適なサイズにフィットした状態で表示することができます。
デモサイト

ユーザーエクスペリエンスを最大化させるデザイン&機能

一覧ページは無限読み込み

新着記事の一覧や、カテゴリー、タグ、アーカイブページは、ページネーションでページを遷移するのではなく、同一ページ内で次々に記事を読み込む仕様になっています。「1ページ目」「2ページ目」というようにページが分かれている場合と比べるとユーザーの離脱を抑えることができます。

機能性に優れたハイブリッドなヘッダーを用意

ページを下方向にスクロールすると、自動的にヘッダーが非表示になります。隠れたヘッダーは上方向に少しスクロールすると、再度表示されます。記事の表示エリアが画面最大になるため読みやすく、すぐにヘッダーが表示されるのでナビゲーションの機能性も高いハイブリッドなヘッダーです。

また、ヘッダーにはメニューも設定することができます。最近のスマホ向けサイトだと「メニュー」はボタンだけしか表示されていないサイトが多く、あまり使われていないケースが多いのですが、Sentryのメニューはスマホでもメニューのアイテムが表示されます。アイテムが多い場合は、PCやスマホなど各デバイスの横幅に合わせて、最適なデザインでメニューを表示することができます。

トップへ戻るボタン+シェアへのスクロールボタン

ページ内で上方向にスクロールすると、隠れていたヘッダーが表示されるのに合わせてページ下部に2つのボタンが表示されます。「トップへ戻る」ボタンは最近のサイトなら標準装備に近いので良く目にすると思いますが、もう一つ「シェア」ボタンも表示されます。「シェア」ボタンをタップすると、記事の下に設置しているSNSボタンへスクロールして、すぐに投稿をシェアすることができます。

サイドバーは固定表示

PC版のサイドバーはスクロールに合わせて最適な位置で固定表示されます。長文の記事であっても、常にサイドバーが表示されることにより、サイト内で無駄なスペースが生まれないので、ユーザーの離脱を防ぐことができます。
(固定したサイドバーに広告を掲載することは広告の規約違反になる場合があるのでご注意ください。)

パンくずリストはscheme org(JSON-LD版)対応

Googleの検索結果に適切な情報を表示するための「構造化マークアップ」に対応しています。現在Googleが推奨しているscheme org仕様のパンくずリストで、JSON-LD版を採用しています。現在は様々な書き方が混在している構造化データですが、将来的に最もGoogleから優遇される可能性が高い書き方です。

トップページには注目記事を表示するスライダーを設置

トップページ上部には「注目記事」が表示されるスライダーを設置しています。記事を投稿する際に「先頭に固定表示」にチェックを付けた記事+新着記事を最大15件表示します。スライダーはPCでもタブレットでもスマホでも、最適に表示され、動作します。

トップページ下部にカテゴリー一覧を設置

トップページの下部にはカテゴリーの一覧が表示されます。各カテゴリーの最新記事のアイキャッチ画像が自動的に設定され、それぞれのカテゴリー毎の記事数も表示されます。リンクをクリックすると、各カテゴリーの一覧ページが表示されます。

プロフィールの簡単カスタマイズ

プロフィールページには「Twitter」「Instagram」など各SNSのアカウントを設定することができます。カスタマイザーの設定項目から「プロフィールを表示する」にチェックを入れるだけで、最適なデザインでプロフィールが表示されます。

LINEに送るボタンでLINE@アカウントをプロモート

実店舗を持つサービス以外ではなかなかうまく活用している事例が少ない「LINE@」ですが、簡単にプッシュを送ることができるうえにプッシュの開封率が非常に高いことから将来性の高いSNSと言われています。LINE@のアカウントを持っていれば、カスタマイザからアカウントを設定することで、記事内の「LINEで送る」ボタンに自動的にアカウント名とリンクが付与されます。
「LINE@」はなかなかフォロワーを増やすのが難しいSNSですが、シェアから自然に導線を設けることで、フォロワー増につながるSentry独自の機能です。

約半フォント(Yaku Han JP)採用

かぎかっこ(「」)や、句読点(、。)などの”約物”を美しく表示するためのフォント「Yaku Han JP」を採用しています。不自然なスペースが無くなることで、日本語の文章を美しく表示することができます。

IEには非対応

こちらは賛否両論あるかもしれませんが、SentryはInternet Explorerに非対応です。(最低限の表示はもちろん可能ですが、意図したデザインどおりに表示できることは保証しません。)

参考リンク→https://webrage.jp/techblog/pc_browser_share/
上記ページにもあるように、Internet Explorer(IE)の利用率が高いのは日本だけのガラパゴスな現象です。なぜ、こういう状況が生まれているのかといえば、そこにあるのは日本人の「サービス精神」。「使っている人がいるのだからちゃんと対応しよう!」ということで、最新バージョンのIEはおろか、すでにWindowsがサポートしていないバージョンのIEでの表示まで確認して開発することが少なくありません。
ただ、この旧ブラウザへの対応をやり続けることが、開発現場の疲弊を生んでいるのも事実。開発に時間やお金がかかることで、Webの最大の魅力であるはずの情報のスピードを損なってしまうケースや、新しい仕組みの導入が実現できないこともあり、Web業界自体が世界から一歩遅れたガラパゴス化してしまっているんです。これって開発者だけじゃなくユーザーにとってもデメリットが大きいこと。ユーザーを幸せにするための”サービス精神”のはずが、最終的には誰も幸せにしていないことに個人的にすごく違和感を持っているんです!
そういう意味では、モダンブラウザへの乗り換えを強要しているかのようにも見える世界のスタンスの方が本当の意味では”優しい”といえるのかもしれません。。

そんな個人的な想いから、SentryはあえてIE非対応!Chrome、Safari、Firefoxでのみ表示を保証するテーマにしました。
(とはいえ、実はSentryをIEに対応させるのはそんなに難しいことではなかったりもするので、どうしてもIEで動作させたいという人はご連絡ください。。。)

Sentryをダウンロードする

SentryはSentryの本体にあたる「Sentry-Void」と、カスタマイズ用の子テーマ「Sentry」の2つのテーマで構成されています。



ダウンロードコア:Sentry-Void



ダウンロード子テーマ:Sentry