16色のカラーパレット

category-icon

こんばんは。コメントで、ppBlogのエディタのカラーパレットが、色が豊富すぎるのでは?というご指摘があり、確かにそう思っていました。計算上は、1677万色程度の指定が可能ですので。

 ブログの文章で、そこまでの色数が必要かというとそうではないでしょうね。なので、基本となる16色のみに絞ったバージョンも用意してみました。スクリーンショットを挙げておきます。

base16
こんな感じの16色です。

 これを有効にするには、editor.jsの6行目にある変数を有効にします。

var useBasicColor = true; // これで簡易パレットになる

 false(あるいは0)を指定すれば、従来のカラーパレットです。

 ちなみに、簡易パレットの色は、editor.jsの593行目で指定しています。

var cols = '', bcolors = ['red','blue','yellow','black','green','silver','lime','gray','olive','white','maroon','navy','purple','teal','fuchsia','aqua'];

 お好みの順番や色に変えても良いでしょう。

 試されたい方はどうぞ。何か不具合を見つけましたらお知らせください。

添付ファイル: editor.jsattachedIcon 

— posted by martin at 06:26 am   commentComment [6]  pingTrackBack [0]

ppBlog1.8.7リリース

category-icon

 こんばんは。久しぶりのエントリーです。ppBlogがバージョンアップしてv1.8.7になりました。前バージョンは1.8.5で、バージョン1.8.6はありません。それなりにいじったのと、例によって奇数好きなので。

 v1.8.5との差異ですが、既知のバグに対するものと、後、使い勝手の向上の部分がメインです。既知のバグとしては、画像のアップロードに関してですが、いつのバージョンからか、大きさ(縦横のサイズ)が小さい画像をわざわざリサイズして大きい画像にしたりしてたので、その辺りを修正しています。画像アップロードに関してですが、JPEG写真であれば、それの縮小時に品質を指定出来るようにしました。初期値は75ですが、お好みに合わせて、85から90あたりを指定するとリサイズされた写真でも綺麗に仕上がるかと思います(参考エントリーLink )。

 後は、タグの文字種(タグに半角括弧を含んでいたりとか)によっては、タグのエントリーが上手くピックアップ出来ないのにも対処しています。このためにindex.phpのタグ表示部分に少し修正が入っています。

 他には、アクセス解析のデータは、3-4か月分のストックにしました。それ以前の古いアクセスデータは自動的に削除されます。従来は、削除されずにどんどん溜まっていましたが、多すぎるログファイルは、パフォーマンスにも影響しますし。バージョンアップをすると、古いデータ(stat/dataディレクトリの中)はすべて削除されますので、残しておきたい方は、予めFTPソフトなどでダウンロードしておいてください。

 動画貼り付け支援関連でも修正が入っています。動画投稿サイトも、いつの間にやらサービスが終了していたところは削除してます。テクノラティのサービスも終了するLink ようで、ppBlogではこの機能も少し取り入れていたので残念といえば残念ですが仕方ないですね:(

 使い勝手の向上ですが、目に見える部分では、エントリー作成でのエディタ部分ですかね。スクリーンショットを挙げておきます。
EditorShot1
フォント修飾系が増えてます。B,S,Eとか。

 従来は、太字にする「B」ボタンで、<strong>foo</strong>みたく入力されていましたが、これは文字通り<b>foo</b>となるようにしました。このB要素ですが、

<span style="font-weight: blod">foo</span>
という出力にしようかと迷ったのですが、こう書くとひとつは冗長なのと、後、視覚的強調のためにわざわざ用意してあるのだから、あえて使ってみようという思いもあります。一般的には、視覚的強調ならCSSで代用すべきLink という意見が多いように思いますが、B要素を使うことでアクセシビリティの低下を招くとも思いませんし、HTML5でも採用されているので存在意義があるんでしょう。個人的には、日本語文中のアルファベットや数字なんかに使うと視覚的に見やすいのでは思っています。これまでは、特に論理的強調でもないのにstrong要素ばかりを使っていたので、それはちょっと反省しています。

 で、strong要素は、「S」というボタンで入力できます。同様に、EM要素Link を入力する「E」ボタンも付けました。なんだかBSEで狂牛病みたいですが、たまたまです。なお、強調の度合いとしては、EM要素より強い強調にはSTRONG要素という使い分けのようです。

 アルファベット圏では、EM要素内の文字列はイタリック体(斜体)として表示されますが(もっともブラウザ依存です)、少なくとも日本語では、斜体文字という文化はないようで、例えばメイリオフォントには斜体は存在しませんし、スタイルシートでイタリック体を指定しても無視されます。じゃどうやって、「強調」であることを示すかというと、よくあるのは、文字列に読点を打つとか括弧でくくるとかでしょうか。この点では、EM要素は「強勢」と呼ぶほうがふさわしい気もします。

 ppBlogのベーシックテーマでは、このEM要素に対しては、ドットを付けるという風にしています。スタイルシートを用いて、EM要素の背景にドット画像を指定しているのですが、長さの調整とか文字列との位置関係とか難しいです。

これはEM要素で囲まれた文字列です

 ここでは文字列の下にドットが来るようにしていますが、上に置いてもよいでしょう。上だと、なんとなく小学生の頃に音楽の授業で習ったスタッカートWを思い出しますね:) 確か、アマリリスを笛で弾くときに意識するように言われた覚えがあります。ラリラリラリラ~♪でしたっけ?

 エディタ関連でもうひとつ。これは前から実装しないといけないなぁと思っていたんですが、カラーパレットで色を選択した際に、その最後に選択した色を覚えておく機能です。最後に選んだ色は、左側に表示させるようにしました。この部分をクリックすることで、同じ色指定が可能になります。

EditorShot2
こんな感じです。

 こんなところでしょうか。v1.8.5との差分ファイルを添付しておきます。

 

追 記 2009/10/16 13:47:24

 強調のために、文字列に打つ点は、「圏点W」と呼ぶらしいですね。Wikipediaのページにある圏点は参考になるのでは思います。
添付ファイル: DIFF185_187.zipattachedIcon 

— posted by martin at 09:55 am   commentComment [12]  pingTrackBack [1]

T: Y: ALL: Online:
Created in 0.0043 sec.
prev
2009.10
next
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31