by echo  
スーパー超シンプルテンプレート8つの特徴

無料Seesaaブログ用 スーパー超シンプルテンプレートは、レスポンシブデザイン完全モバイル対応のアフィリエイト用テンプレートです。

スマホ版Seesaa広告にウンザリ、PC版をレスポンシブデザインにカスタマイズするのが面倒。仕方なくスマホ版を使っているけど出来れば何とかしたい。そういうSeesaaブロガー向けにカスタマイズしました。

その主な特徴をご紹介します。

[アイキャッチ画像:300px × 168px, float left]

スーパー超シンプルテンプレートの8つの特徴

Seesaaテンプレートがもう少し〇〇だったら、〇〇が出来たら...という改良したい〇〇な不満点をカスタマイズしたのがスーパー超シンプルテンプレートです。下記の8つの特徴があります。

1. Seesaa広告が表示されません

Seesaaスマホ版テンプレートの最大の不満点は広告の多さ。広告の数が抑えられれば、記事上下にSeesaa広告が出たらあなたのアドセンスはクリックされないのでは?

ネットでスマホ版広告を消す方法を探してカスタマイズしてもイタチごっこでまた別の広告が。こういったSeesaaスマホ版広告の悩みから解放すべく、スーパー超シンプルテンプレートはスマホ版テンプレートをまったく使っていません。スマホユーザは直接PC版へアクセスするのでスマホ版の広告を見ることすらありません。

もちろんPC版はSeesaa広告が表示されない設計なので、あなたのSeesaaブログにアクセスしたスマホユーザにはSeesaa広告がひとつも表示されません。

2. モバイルアクセスをPC版に自動転送

スマホからのアクセス( /s/ 付きURL)を例外なくPC版へ流すように設計されています。スマホ版にアクセスしたユーザは何も操作をすることなく自動的にPC版へ移動します。

スマホ版には JavaScript で挿入された広告とてもたくさんあるためPC版への移動までまれに時間が掛かることがあります。ページが閉じられないように画面上にはメッセージとPC版への移動リンクが表示され、自動移動しない場合でもスムースにPC版へ移動できるようにしています。

2回目以降のアクセスではクッキーが保存されているのでスマホ版を経由することなく瞬時にPC版が開きます。

3. 完全レスポンシブ対応デザイン

スマホからのアクセスもPC版へ飛ばしますから、iPhone をはじめ Android 端末ユーザにも違和感なくコンテンツが表示されていなくてはいけません。

スーパー超シンプルテンプレートは完全なレスポンシブデザインでカスタマイズされていますから、スマホ、携帯ゲーム端末、ファブレット、タブレット、そしてパソコンとあらゆるアクセスの表示で最適化されています。

4. 記事コンテンツに集中させたSEO

Google などの検索エンジンに、記事、カテゴリ、タグ、過去ログがインデックスさせるのが一般的です。スーパー超シンプルテンプレートでは記事とインデックス(トップ)ページの1ページ目しかインデックスさせません。

カテゴリやタグなどの一覧表示形式ページは重複コンテンツとなることがあり、サイト全体の品質を低下させることがあるようです。インデックスを記事に絞り込むことで重複コンテンツを回避しサイトの品質を落とさないようにしています。(※簡単な修正でインデックスさるように修正も可能です)

またユニークな発想で Wordpress の All in One SEO PackのようなエッセンスをSeesaaブログに取り入れることで既存テンプレートよりSEOを格段に強化しています。

5. schema.org マークアップ済み

メジャー検索エンジンにコンテンツを正確に伝えるためスーパー超シンプルテンプレートでは schema.org(スキーマ)に準拠し HTML をマークアップしています。マークアップの内容については、とある秘密ブログの更新うぇぶろぐで確認してください。

» SeesaaブログのSchema.org構造化データマークアップサンプル集〜HTML編
» SeesaaブログのSchema.org構造化データマークアップサンプル集〜コンテンツ編

6. 読み込み処理の高速化

スーパー超シンプルテンプレートは HTML の無駄を省き、必要な JavaScript の配置なども最適化することによりできる限り読み込み速度を速めるようにカスタマイズしています。中位機種のスマホアクセスで、通信速度が遅かったりスマホ自体のパフォーマンスが高くなくてもストレスになりません。

またGoogleは「モバイルフレンドリー」という概念を導入し、サイトがモバイル端末からのアクセスに適しているか判断するようになりました。その結果、スマホからのGoogle 検索結果には「スマホ対応」という案内表示が追加されています。

スーパー超シンプルテンプレートは、GTMetrix や Google Pagespeed Insight、モバイルフレンドリーテストなどで非常に高いパフォーマンスが証明されています。

パフォーマンステストについては、スーパー超シンプルテンプレートのパフォーマンスを参照ください。

7. アドセンス広告配信停止を回避する記事ごとの広告切り替え機能

スーパー超シンプルテンプレートはアドセンスに最適化されたテンプレートです。

アドセンスサイトを運営する上で一番気を使うのがポリシー違反によるアドセンス広告配信停止やアカウント停止ではないでしょうか。

広告配信停止になる多くのケースはコンテンツ不足。記事単体のコンテンツが貧弱すぎるというケース以外にも、カテゴリページ、タグページ、過去ログページ、検索結果ページなどでコンテンツがほとんど表示されていないのにアドセンス広告が表示されているケースでも広告配信停止になることがあります。特に Seesaaブログではタグページのコンテンツ不足で広告配信停止になるケースが非常に多く見られます。

スーパー超シンプルテンプレートは5段階の広告の表示・非表示レベルを設け、記事ごとに広告の表示をコントロールできるように設計されています。これによりポリシー違反による広告配信停止を極力回避できるようにしています。

記事ごとの広告表示パターンの切り替えについては、「広告表示・非表示検証記事」カテゴリの各記事で比較してください。

Seesaaブログで広告配信停止になりがちなパターンはこちらの記事で解説しています。
» タグページだけではない!! Seesaaブログのコンテンツ不足によるAdSense配信停止の危険性
» 「サイトへの AdSense 広告配信が停止されています」への具体的な対策

8. 最悪なカスタマイザビリティ(´・ω・`)

上記の機能を実装した結果、スーパー超シンプルテンプレートは独自のカスタマイズに根気が必要です。

難関はテンプレートの目玉でもある広告の設定。広告切り替えのためにアドセンス広告とASP一般広告とをダブルで持っている個所があるので、間違えずに広告コードを貼り付けなくてはいけません。

またスタイルシート(CSS)も中身を見たらギョッとするかもしれません。補足するために HTML や CSS には出来る限り多めにコメント行を追記するようにはしています。

HTMLの編集に不慣れなかた向けに Microsoft Excel で簡易設定シートを同梱しました。必要事項を埋めるだけで HTML と 記事 HTML が自動的に完成します。
» スーパー超シンプルテンプレートVer.1設定シート配布開始

スーパー超シンプルテンプレートのダウンロード

コメント

3 件
さっそく使わせていただいてます。
本当に感謝の気持ちでいっぱいです。

さて、設定はマニュアル通りにやれば簡単に出来ましたが、
やはり、カスタマイズが困難を極めますね…(;´Д`)

例えばロゴを挿入したい場合、
どうすればいいんでしょうか?

headerのブログタイトルの下に自由形式で画像を貼っても
表示されないですし、
h1#blog-titleにtext-indentもdisplay:noneも適用されないです。
というか、どの部分に対してもcssが効かない気がします。

とんでもなく初歩的なミスを犯しているのでしょうか?

よろしければアドバイスをお願いいたします。
Posted by クルミット at 
とんでもなく初歩的なミス、というのは
echoさんのことではなく、
もちろん、当方が、と言う意味です。
誤解を招くような書き方ですみません。

それで、すみません!
ちゃんと適用されるようになりました!
やはり私の方のミスでした。
すみませんでした。
Posted by クルミット at 
クルミットさん、こんにちは。
返事が遅れてすみません。解決済みのようで。

CSSはホントに分かりづらいと思います。
当初、メディアクエリも含めてHTMLの出現順に書いてたんです。
で、公開する段になって、それじゃ分りにくいかなと思い直し、機能ごとというか、レイアウト、フォントサイズ、配色、表示・非表示、広告などのブロックに並べ替えていくうちにボク自身もよく分かんなくなってきて現在に至ると。
なので同じクラスセレクタが色んなところに何度も出てきます。
それから、どうしても反映しないときは HTML に書いている style に定義されているかもしれません。
お手数ですがCSSだけではなく、HTMLの <style> も検索してみてください。
分りにくくて本当にすみません。

ヘッダーのロゴについては解説記事を書きました。
http://supersimple-template.seesaa.net/article/418972148.html

でも、ご質問をよくよく読み返すと、ロゴ画像ですよね?
ボクの解説はバナー画像のことでした。マトハズレ。

ちなみにクルミットサンの仰るロゴってどこに入れるものですか?
参考にしたいので是非教えてください。

小さいサイトロゴのことだとしたら、bootstrapメニューの左側に入れるパターンがあります。というか多くはこのパターンのようです。

HTMLのbootstrapメニューにこれ↓がありますよね。
<noscript><span class="navbar-brand">Menu</span></noscript>
noscriptで非表示にしてますけど、このMenuのところにロゴ画像を入れます。

ご参考まで。
Posted by echo at 
コメントをどうぞ
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

トラックバック

0 件
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/418145939
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

スポンサーリンク