進捗報告 Simplicity2.x用skin optimize-sp

作ってる作ってると言いながら、その内容を報告していなかったのでここらでちょっと報告してみます。

名前は何にしようか色々考えていたんですけれども、面倒だったので「optimize-sp」としました。optimize、つまり活用するとか、できるだけ能率的に利用するみたいな意味ですけれども、そんなに汎用性はありません。

むしろどちらかというと、デフォルトのSimplicityをいかにカスタマイズするかをコンセプトにやってたりするので、後からプラグインで何かしたり、利用環境がSimplicityのデフォルトからかけ離れているとやはり問題が出てくるだろうと思います。

フォーラムで取り上げられたいくつかの内容も盛りこんであり、一部の人には有用な機能もあったりするかもしれませんが、万人向けではないのを予め書いておかねばなりません。またskinを更に自分好みにする余地が少ないかも知れないので、そこらも問題点の一つです。

optimize-spの特徴

表示幅が最大1000pxで完全レスポンシブ、PC表示から〜767pxまでサイドバーが表示されます。

Screenshot_from_2016-02-22 10_07_27
これはウィンドウをいくつか開きながら何かする時にかなりの余裕があると思います。完全レスポンシブではありますが広告についてはまだテストしてないのでサイズ的な問題が出る可能性があります。つまり、広告以外はレスポンシブに表示しているけども、広告はサイズが固定されている可能性が高いので、追従しないと言う感じです。何か方法を探してはいるんですけれども、未だ解決に至らず。

トップページのリストは2列表示

Screenshot_from_2016-02-22 10_19_54
なるべくスクロールを軽減するために、カードタイプで2列表示になっています。これは767px以下の時にレスポンシブに1列になります。

通常のリスト表示同様の項目が表示されますが、post-meta内categoryの表示が、アイテム数3つ以上の場合にselect方式に自動で変化します。これは、カテゴリが増えることで改行が発生し、左右のカードの(縦)サイズが異なるようになるのを軽減するための措置でもあります。

fixedヘッダー

スクロールが始まると、画面上部に固定されたヘッダーが表示されます。ここにはサイトタイトル、post-meta、SNSフォローボタン、トップへ戻るボタンが表示されます。

アイキャッチが入っている記事には、アイキャッチ部分のタイトルを超えると、fixedヘッダーのサイトディスクリプションが記事のタイトルになります。またアイキャッチの画像はfixedヘッダーの背景画像に自動で変換されます。mix-blend-modeと言うcssのプロパティを利用しているため、対応していないブラウザはそれなりにしか表示されません(笑)

トップへ戻るは、Simplicityのデフォルトとは違い、単純に上部にスクロールするだけではなく、まず左へ消えて右から現れた時にはスクロール位置がトップに戻っているというシロモノです。あまり他所で見ることのないトップへ戻る方法なので「何が起こった?」と思われるかも知れません。
一瞬でトップへ戻るため、戻ったという内容を表示するnoticeも追加してあります。これは戻った時に表示され、自動で消えます。

追従スクロール

Simplicityのデフォルトは画面トップにくっつくタイプですが、fixedヘッダーがあるために画面下部にくっつきます。

関連記事のスワイプ

関連記事は、その記事数が5つ以上になると、自動でスワイプ可能なスライダーに変わります。このスワイプはタッチデバイス・PC兼用です。関連記事によってコメントまでのスクロール量が増えるのを軽減するための措置です。
また、関連記事自体もデフォルトとはやや異なるデザインになっています(文字がやや小さくなったぐらい)。

検索フォーム

Screenshot_from_2016-02-22 11_30_15機能は普通の検索ですが、中のplaceholder(ブログ内を検索)などがフォーカスにより外に出ます。ちょっとしたお遊びです(笑)

フォローSNSボタンのサイズfix

Screenshot_from_2016-02-22 11_37_46
フォーラムにも以前投稿されましたが、fontAwesomeと他のwebfontのアイコンとでサイズが異なる事により、はてブ、feedlyのボタンが他より小さくまた背景画像で濃い色の背景の上にフォローボタンが乗った時に1px程度線が入ることがありました。これをサイズをなるべく同じにして、線が入らないようにfixしてます。

コメント部分の細かな修正

機能は何も変わりませんが、表示自体が若干大きいように思ったので、デザインに合うように修正しています(現在デフォルト掲示板のみ)。

ヘルパークラス

Simplicityにもいくつか入っていますが、独自にいくつかを入れてあります。ボタンとか、calloutなどのようなもの。
外部リンクも自動でアイコンが入るなどの措置がしてあります。

とまぁ、こんな感じです。結構内容が多岐にわたるので、テストが十分行えてない感じです。今後、実際にこのスキンでちょっと運営してみてどうなるかを試したいと思います。

またcssをscssにしてわかる人はよりわかりやすくcssの修正等ができるようにとも考えています。
場合によってはそれぞれの機能を別の何かしらの方法で適用できるようにもとも考えてますが、まだ配布できるような段階ではないので、それらはもう少ししてからになるかと思います。

タイミングが良ければ、cloud9で作成中のものを実際に触れられるかも知れません。

ひとまずこんな感じです。

スポンサーリンク

シェアする

フォローする