Seesaaブログ新デザインシステム

スーパー超シンプルテンプレート関連で検証用の新しいブログを作ろうとしたときに図のような見慣れない画面が。

2015年5月12日にお知らせでリリース情報が公開されていたんですね。ちょっと気になったので新しいデザインシステムを使ってブログを作ってみました。

まだよく見てませんけど、これはかなり良さげです。使い方というかカスタマイズするためにユーザインタフェースの違いを理解するのにちょっと時間が掛かるかも。

せっかくなので新デザインシステムでひとつブログを作って、弄ってみたファーストインプレッションを書いてみます。

Sponsored Link

Seesaaブログ新システムのファーストインプレッション

まず最初に既存のデザインと新デザインシステムの違いを箇条書きで挙げてみます。

    ブログ管理
  • ブログの新規作成方法は同じ
  • ブログ一覧に表示される新旧ブログの区別はない
  • テンプレートはまだシンプルのみ(現時点で65パターン)
  • スマホ版からHTML5以外のテンプレートが消えた

    カスタマイズ
  • デザイン設定のCSSとHTMLとコンテンツHTMLが1画面にまとめられた
  • ブログタイトル、ブログ説明、記事の各コンテンツが固定(実際には表示すらされない)で削除できない
  • XHTMLからHTML5に移行された
  • レスポンシブデザインになった
  • アイキャッチ画像の扱いが強化され、最近の記事、関連記事にサムネイルが表示されるようになった
  • 広告は相変わらず多い。けどこれまで通りCSSで消せ(ry

ブログ管理上の全体イメージには大きな変化は感じません。一方、デザインの管理は結構大きく変わった印象です。ブログの見た目ですが、ほぼ Wordpress です。HTML5に移行したということもあるんでしょうが、例えば #container系 が #wrapper系 に変わるなど Google Blogger や Wordpress のテンプレートに見られるクラスセレクタの使い方に寄った感じです。

構造化データですから article とか section とか aside とか XHTMLに慣れている Seesaaユーザがカスタマイズするときにちょっとした戸惑いがあるかも。

あと HTML5 の role 属性でマークアップされていますが、schema.org(スキーマ)のマークアップは無いです。

参考までに新デザインステムで「シンプルA.ホワイト」という一番最初にあったテンプレートで作った実物のがこちらのブログ。アイキャッチ画像をちょこっと弄った以外はデフォルトです。既存のデザインシステムでカスタマイズした「スーパー超シンプルテンプレート」がこっち。ふふふふふ、似てます。

新デザインシステムのブログ管理はほぼ変更なし

既に取得済みの Seesaa ID で新しいブログを作って、公開済みのブログと一緒に管理する模様。このブログ管理系にはほとんど変更なしという印象です。

ブログの新規作成方法は同じ

新しいブログを作成するときに冒頭の「Seesaa BLOG 新デザインシステム登場」メッセージ画面が表示され、[ブログを作る]をクリックすると新しくなった管理画面に移行します。ここで[やめる]を選択すると今まで通りの管理画面へ。

ブログの新規登録方法はこれまでと全く同じ。

ブログ一覧に表示される新旧ブログの区別はない

ブログ作成後、管理画面にはブログ一覧が表示できますが、ここには特に新デザインシステムで作成されたという表示は無く、既存デザインのブログと新デザインシステムのブログが区別なく今まで通りに表示されています。

運営しているブログの数が多くなってくると覚えていられませんから、デザインを開かないとどれが既存デザインでどれが新デザインシステムなのか分りません。別に新旧どちらのシステムだったか把握しておく必要もありませんが。

Seesaa新デザインシステム−ブログ一覧のスクリーンショット

テンプレートはまだシンプルのみ(現時点で65パターン)

今使っているデザイン豊富なテンプレートは一切ありません。シンプルのみです。

Seesaaヘルプ−新デザインシステム:テンプレートの追加(変更)方法

上図のようにSeesaaの公式ヘルプだとデザイン選択のタブがたくさんありますけど、ボクの管理画面にはシンプルしか出てきません。

クラスの中に thumnail と B を落としているのがあったけど、それを修正しているのでしょうか? というのは冗談ですが。
» 新デザインシステム:テンプレートの追加(変更)方法

2015年5月17日現在 確認できた公開テンプレート(拡大はしません)


シンプルA.ホワイト

シンプルA.パステルアクア

シンプルA.パステルブルー

シンプルA.パステルグリーン

シンプルA.パステルオレンジ

シンプルA.パステルピンク

シンプルA.パステルパープル

シンプルA.パステルイエロー

シンプルB.パステルアクア

シンプルB.パステルブルー

シンプルB.パステルグリーン

シンプルB.パステルオレンジ

シンプルB.パステルピンク

シンプルB.パステルパープル

シンプルB.パステルイエロー

シンプルB.ホワイト

シンプルC.ホワイト

シンプルD.ホワイト

シンプルD.パステルアクア

シンプルD.パステルブルー

シンプルD.パステルグリーン

シンプルD.パステルオレンジ

シンプルD.パステルピンク

シンプルD.パステルパープル

シンプルD.パステルイエロー

シンプルA.アクア

シンプルA.ブラック

シンプルA.ブルー

シンプルA.ブルーグリーン

シンプルA.グレー

シンプルA.グリーン

シンプルA.オレンジ

シンプルA.ピンク

シンプルA.パープル

シンプルA.レッド

シンプルB.アクア

シンプルB.ブラック

シンプルB.ブルー

シンプルB.ブルーグリーン

シンプルB.グレー

シンプルB.グリーン

シンプルB.オレンジ

シンプルB.ピンク

シンプルB.パープル

シンプルB.レッド

シンプルC.アクア

シンプルC.ブラック

シンプルC.ブルー

シンプルC.ブルーグリーン

シンプルC.グレー

シンプルC.グリーン

シンプルC.オレンジ

シンプルC.ピンク

シンプルC.パープル

シンプルC.レッド

シンプルD.アクア

シンプルD.ブラック

シンプルD.ブルー

シンプルD.ブルーグリーン

シンプルD.グレー

シンプルD.グリーン

シンプルD.オレンジ

シンプルD.ピンク

シンプルD.パープル

シンプルD.レッド

シンプルというのは要するにヘッダーバナーや見出しタグなどの背景画像を一切排除したということなんじゃないかなと。

コレよくわかります。レスポンシブデザインなので背景画像などグラフィックの扱いが凄く面倒なんですよね。今までのようなコラボ系のデザインをレスポンシブ対応にさせるには工期が掛かりそうなので、取りあえず画像なしのシンプルからスタートしたということだと思います。今後期待です。

テンプレート内で使われているアイコンがグレースケールで Font Awesome とか GLYPHICONS っぽく見えたけど、従来通りblog.seesaa.jp/img/ 内の画像アイコンセットを使っていました。

スマホ版からHTML5以外のテンプレートが消えた

スマホ版のテンプレートは basic 系が中心。

Seesaa新デザインシステム−スマートフォンテンプレート

2世代前のグリーン、ピンク、グル―、グレーがなくなり、アニメ・コラボ系もなくなり、HTML5系だけ残ったという感じです。

Seesaa新デザインシステム−スマホ版トップページ Seesaa新デザインシステム−スマホ版記事ページ
スマートフォン版トップページと記事ページ。先行してHTML5なので特に変更点は見当たらず。

以上、すでにSeesaaブログを運営しているのであれば特に迷うことは無さそうですね。でも気になるのがテンプレートの数。公式ヘルプを公開した時点(2015年5月12日)では「キュート、フォトグラフ、フォト、クール、コラボ」のタブもあって今はないということは、何らかの事情でひっこめたということですか。さすがにシンプル系だけでは一般ウケは難しいのかと。

続いてカスタマイズ関連についてのファーストインプレッションです。

コンテンツまわりのカスタマイズに最初は戸惑いが

リリースを見て衝撃的だったのが、ブログタイトル、ブログ説明、記事の各コンテンツが固定されて削除できないという事実。ボクはヘッダー部のブログタイトルやブログ説明は HTML に直接書いてしまうので、コンテンツが削除できないということはダブるのかなとビビりました。

確かに消せないというかコンテンツの中に存在すらない。でも何のことは無い、HTMLに変数でヘッダー部を挿入する方式から、HTML にハードコーディングしてあるだけでした。なのでそれを編集すればよい。編集不可の隠しファイルで持っているわけではありません。

これ以外に提供終了のブログパーツや機能がたくさん。

一部の機能は提供を終了させていただきます。

主立ったものとして、以下機能は提供を終了させていただきます。ご利用頂いていた皆様には申し訳ございませんが、ご理解ご了承の程お願いいたします。
・ダイエットログ機能
・コメント投稿時の確認ボタン機能
・フィーチャーフォンでの動画再生機能
・エキスパートモード(コンテンツ)機能
・表示ページ指定(コンテンツ)機能
・コンテンツの上部下部挿入テキスト機能
・タグクラウドコンテンツの0件指定(全件指定)機能
・コンテンツ各種
占いランキング(血液型)
占いランキング(星座)
今日の運勢(血液型)
今日の運勢(星座)
ブログ画像
ダイエットグラフ
天気
QRコード
Blogtimes
ゆるカワパーツ
電力使用量
※ブログタイトル,ブログ説明,記事,Powered Byの4コンテンツはデフォルトでブログに設置され、削除することとさらに追加することはできません。
【Seesaaブログ】新デザインシステムリリースのお知らせ)

これらのブログパーツを重用しているシーサーブロガーは新規ブログ作成で従来のシステムを利用すれば良い話。

新デザインシステムのコンテンツ画面
Seesaaブログ新デザインシステム−コンテンツデザイン

CSSとHTMLとコンテンツHTMLが1つのデザイン画面に

従来のデザインでそれぞれ独立していた CSS, HTML, コンテンツHTML が1つの画面のタブ切り替えになりました。これまでデザイン設定で CSS を選んでいたあの場所から、すべてのHTMLが編集できるようになったというイメージです。

Seesaaブログ新デザインシステム−デザイン編集画面

この変更によって、コンテンツはあくまでも配置と基本設定のみに機能限定。これまでのようにひとつひとつコンテンツを開いてコンテンツHTMLを編集するという煩雑な作業がなくなりました。
Seesaaブログ新デザインシステム−コンテンツHTMLの簡略化

「デザインからコンテンツを選び記事コンテンツを開いてコンテンツHTML編集」と進んでいたやり方が、「デザインから適用しているデザインを選んでコンテンツHTML編集」という流れになります。

ただ、既存デザインの「ページ条件分岐」の簡易設定がなくなりました。コンテンツにあった「トップページ(ト)」、「記事ページ(記)」、「カテゴリーページ(カ)」、「過去ログページ(過)」の非表示オプションが廃止、CSSで各ページごとの記述もありません。

ページの条件分岐はすべて HTML の page_name 変数で書きなさいということのようです。しかし、コンテンツの中身を部品箱として利用しているユーザには不便になりますね。自由形式コンテンツを追加してコードを貼り付ける。また使うかもしれないから削除はしないで全ページで非表示にして。という使い方が新デザインシステムではできない。ゴミ箱に移してから戻すと挙動不審になることがありますけど、ゴミ箱の精度が良くなっていれば一時保管場所に使えそうですけど。どうなんでしょ?

あとは使っているパーツがコンテンツHTMLのどれに相当するのか覚えないといけないですね。あ、既存のコンテンツという呼び方が「パーツ」になってるみたいです。だったら、コンテンツHTMLという呼び方もパーツHTMLにすればよかったのに。

コンテンツHTMLの新変数 parts_name=='XXXXX'

コンテンツHTMLをざっと見渡すと part_name という新しい変数が目に留まります。

新デザインシステムのコンテンツHTML内 新しい変数(出現順)

<% if:parts_name=='archives' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='recent_article' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='recent_comment' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='article_search' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='blog_category' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='blogclick' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='blopita' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='calendar' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='category' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='link' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='profile' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='qrcode' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='rdf_summary' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='recent_trackback' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='rss' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='rss_affiliate' # START parts -%> 〜 <% /if -%>
<% if:affiliate_type==0 -%> 〜 <% /if -%>
<% if:affiliate_type==1 -%> 〜 <% /if -%>
<% if:affiliate_type==2 -%> 〜 <% /if -%>
<% if:parts_name=='rss_radio' # START parts -%> 〜 <% /if -%>
<% if:parts_name=='tag_cloud' # START parts -%> 〜 <% /if -%>

番外編
<% article.first_image.page_url_thumbnail -%>

パーツ名を見ればどのコンテンツなのかだいたい分ります。

最終行に番外編で <% article.first_image.page_url_thumbnail -%> 変数を記載しましたが、コレ、アイキャッチ画像のことですね。スーパー超シンプルテンプレートを作っているときに、「アイキャッチ=記事中の最初の画像の取得」がどうしてもできなかったけど、新デザインシステムでは画像がデータベース管理されるようになったようで、アイキャッチやそのサムネイルの取り扱いができるようになりました。

詳しくは後述しますが、ことハードにカスタマイズしているSeesaaブロガーはこのアイキャッチが変数で取れるようになったという1点だけで新デザインシステムへ移行する価値は十分にあると思われます。

ブログタイトル、ブログ説明、記事の各コンテンツが固定(実際には表示すらされない)で削除できない

これは既に取り上げましたが恐るるに足りないと。要するに間違ってコンテンツから削除(保存)してしまうことへの防止策のようで。コンテンツ画面にないということは HTML にしか書いてないということで、それをカスタマイズすればオッケー。

XHTMLからHTML5に移行された

これまでのデザインでもスマホ版はHTML5でしたね。今回の新デザインシステムではPC版もHTML5に完全移行です。

レスポンシブデザインになった

これが新システムデザインの目玉ですね。

CSS内のメディアクエリを見るとブレイクポイントは3つ。

0 - 320px
321px - 767px
768px - 1024px

この他に -ms-high-contrast: active), (-ms-high-contrast: none) という見たことのないメディアクエリがあったので研究します。

アイキャッチ画像の扱いが強化され、最近の記事、関連記事にサムネイルが表示されるようになった

新デザインシステムの準目玉がコレ。既存デザインで既にレスポンシブにカスタマイズしているSeesaaブロガーにとってはこれが超目玉となるアップグレードです。

アイキャッチ画像がデータベース化されて変数で取れるようになってます。

<% article.first_image.page_url_thumbnail -%>

この変数を使ってサイドバーの最近の記事、記事中の(カテゴリ内)最新記事にサムネイルが付きます。

一覧ページをグリッド表示にしたとき、記事タイトルよりも上にアイキャッチ画像を出したくてできなかったんだけど、この変数を使えばできそうです。

アイキャッチ画像はSeesaaブログにアップデートされた画像のみ

新デザインシステムで試しにブログを作ってみて最初に悩んだのが、このアイキャッチ画像がまったく認識されなかったこと。

記事には画像が入っているのに、トップページには表示されない。最新記事やカテゴリ内関連記事のサムネイルには no image の代替画像が出るだけ。画像のまったくない学術論文みたいなブログの様相。

で、色々試してみたら該当の Seesaaブログにアップロードした画像しか認識しないことが判明。データベース管理だから当たり前といえば当たり前なんですが、ボクは記事の最初の img タグで拾うとばかり考えていたので。

ボクのようにブログに挿入する画像は Picasa ウェブアルバム(Google+)に置いているパターンや、他のサイトからリンクで引っ張ってきてアイキャッチにしているパターンでは article.first_image.page_url_thumbnail は効きません。

更に、同じ Seesaa ブログでも他の Seesaaブログにアップした画像もこの変数では認識できない。

http://サブドメイン.up.n.seesaa.net/xxxx.jpg?d=aユニークな画像ID

という画像URLのサブドメインと画像IDで管理されているようです。で、テスト用のブログでは画像をアップし直してサムネイル表示を確認。

Seesaa同士のブログ引越しはかなり要注意です(あまりやらないとは思いますけど)。FC2あたりからの引っ越しはちょっと前に引っ越し機能が強化されたみたいだし、画像の自動インポートがありますから大丈夫なんでしょう(未確認)。

広告は相変わらず多いけどこれまで通りCSSで消せ(ry

消えます。先のお試しブログでは記事下には広告が表示される記事もありますけど、あれは検証のために設定で広告を有効にしているので表示されているだけ。

問題は広告テンコ盛りのスマホ表示。新デザインシステムでもボクはPC版に飛ばしてしまう(動作確認済み)ので、転送されるまでの一瞬だけ表示される画面がスッキリしていれば良いのであります。

デフォルトだと色んなものが表示されてましがCSSで消えました。

iframe{display:none!important;height:0!important;width:0!important}
.menu-btn,.nav-menu,.article-list,.pagination{display:none!important}
[id*="adroute_ads_adblock_4675_1"]{display:none!important;visibility:hidden;height:0}
[id*="adroute_ads_frame_adblock_4675_1"]{display:none!important;visibility:hidden;height:0}
[id*="adingo_ad_area_v1411201400"]{display:none!important;visibility:hidden;height:0}

多分このあたりかと。
※スマホ版の全広告ではないです。PC版にリダイレクトするときに表示されるトップページで、新デザインシステムで新たに追加されたっぽい広告のみです。

新デザインシステムは導入すべきか

スーパー超シンプルテンプレートを作るくらいボクはシンプルで Wordpress っぽいテンプレートが好きなので、新しいテンプレートデザインは嫌いではありません。アイキャッチのサムネイルが取れるようになったのは大きいです。

なんですが、65パターンあるテンプレートは色違いと一覧表示ページのデザインが若干違うだけ。選択肢はかなり狭いです。シンプルが好きなシーサーブロガーは1つくらいは導入してもいいかしら?

新デザインシステムに望む改善点

  • HTMLのデザイン画面にあった「タグのハイライト表示 ON/OFF」を復活して欲しい
    新デザインではこのオプションが消えました。OFF にしないと検索が掛からなくてすごく不便。まあ HTMLの編集はテキストエディタにコピーしてから作業するのでさほど支障はないんですけど、ちょっと検索したとき見落とす可能性が高い。

  • デザインを豊富に
    そのうち増えるんでしょうけど。でも画像の扱いが面倒なので、シンプルだけで終わるのかも...ってことは無いですよね。

  • デザインのバックアップ機能が分りにくい
    新たにスタイルシート、HTML、コンテンツHTMLの各デザイン要素をバックアップする機能が追加されました。バージョン管理に良さげなんですが、バックアップファイルの情報が日時だけなんで、どの時点のバックアップファイルなのか全然分らない=どれを復元していいのか分からない。ちょっとヤバいかなこの修正というときにバックアップして失敗したら直前の状態に戻すという使い方? 書くと長くなるのでバックアップの使い方は要検討ということで。

  • 既存システムの維持
    これまで作ったブログを新デザインシステムに移植してみたんですけど、Google Blogger みたいにシッカリHTMLの文法チェックしてエラーは保存させない仕様。コメントまわりの既存の変数を一部受け付けずエラーになりました。そのあたりを考えると既存のブログをすべて新デザインシステムに強制移行するのは不可能と思われ、既存システムと既存ブログはそのまま残りますね、たぶん。

すでに運用しているブログを新デザインシステムみたいな感じにしたいなら

スーパー超シンプルテンプレートがおススメです

今回のシーサーブログ新デザインシステムですけど新しく作るブログへの対策ですね。今のところ既存ブログのアップグレードではないです。先述の通り未対応の変数がありますからアップグレードサービスはまず出てこないと見ました。

では既存ブログをレスポンシブでSeesaa広告を非表示ごにょごにょしてというのであれば、ボクが作ったスーパー超シンプルテンプレートをおススメします。

新システムのテンプレートを見ると超シンプルテンプレートと似た感じです。ボクは主にWordpressのテンプレートを参考に作っているし、HTML5になったら似るのは当たり前ですけど。

新しいブログは新システムを試すにしても、すでに運用しているブログをレスポンシブにしたいという方は是非、無料で完全レスポンシブデザイン、SEO強化済みのスーパー超シンプルテンプレートをお試しください(宣伝モード)。

» スーパー超シンプルテンプレート
» お試しで作ってみた新デザインシステムのブログ

並べて比べてみてくださいね。似てますから。

ページ表示/非表示オプションが追加されていたので追記

オプションが無かったコンテンツデザイン画面

2015年5月25日現在、PC版、スマホ版ともにコンテンツに「オプション」として「ページ表示/非表示」が追加されていました。

ファーストインプレッションを執筆した時点で図のように「広告パーツ」の下は「ゴミ箱」でオプションはありませんでした。

追加されたページごとの表示/非表示機能は対象となるページの種類が増えています。

Seesaa新デザインシステムに追加されたページ表示/非表示オプション

新たに「タグページ」、「画像詳細ページ」、「認証ページ」が非表示対象。Seesaaはタグページでアドセンスポリシー違反が多発しましたから、その対策としてのアップグレードと思われ、これはカナリありがたいですね。

最終更新日:
Sponsored Link

この記事へのコメント

4件
はじめまして。私も新デザインシステムでブログを投稿したのですが、全文表示にはできないのでしょうか?
すう at
すうさん、こんにちは。

> 全文表示にはできないのでしょうか?
すみません、全文表示って具体的に何のことですか。

トップページやカテゴリページ、タグページに追記を含めた全文を表示するということでしょうか?
echo at
知識0からシーサーでやってきたのですが、あなたのブログを見て衝撃を受けています。 こんなこともできるんですね! 有益な情報しかないのでこれからも参考にさせてもらいます!!!
Esu at
Esuさん
これからも御ひいきに、よろしくお願いいたします。
echo at
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link