正直に書くブログ

2012年9月からフリーランス活動開始しました。
今後もマニアックでも有用な情報を提供出来るように頑張ります。

html

クリップボード拡張+入力支援ツール「Charu3」

個人的にはWordPress、MovableTypeをブログ用CMSとして使っていますが、Livedoorブログもデザインをカスタマイズできる点、複数名で一つのブログを編集できるの点で気に入ってます。自前のWebサーバーを持っている身としては、Livedoorブログが無料だからというのは大した理由ではないです。使いやすさとカスタマイズ性を評価しています。

さて、今日は当ブログでエントリーする際の超基本的ルールを紹介したいと思います。当ブログで意識しているのはたった一つのタグです。理由は一字字下げをする定義をCSSで設定しており、空行を無駄に入れないためです。その為に便利なのが「Charu3」という入力支援ツールです。

段落を意識する(Pタグ)

HTMLで最も基本的なタグの一つとしてpタグがあります。pタグを使用する事により、段落を意識したマークアップが出来ますので、いちいち空行を入れなくても段落を開けることが出来ます。段落と段落のスペースはCSSの定義で調整すれば、ブログ全体で統一させることが出来るので便利です。

Livedoorブログの場合、pタグを入力するためには、HTMLボタンをクリックしてHTMLソースエディタからpタグを入力しなくてはなりません。その際にいちいち<p>段落の文章</p>てな感じで手入力してから始めるのは手間です。もちろんIMEなどに登録して一発で呼び出せる様にすれば効率は上がります。

しかし、Charu3なら更に便利なテンプレート機能がありますので、段落の文章を入力した後に、pタグで前後を挟むことが可能です。つまりpタグを入力し忘れた後でも一発でpタグを前後に挿入することが出来ます。これは慣れるともう手放せなくなってしまう機能です。下の編集はCharu3で一瞬で出来ます。

一段落目を入力しました。
<p>一段落目を入力しました。</p>

Charu3を単なるタグテンプレートとして使用しても構いませんし、より発展的な用途に使用してもいいですね。クリップボードの履歴も便利です。いずれにしてもソースレベルでブログを記入するということを意識し始めた人にとっては、HTMLソースエディタを開いて、直接ソースをいじることが多くなる筈ですから、似たような作業が増えるものです。

Livedorブログの旧入力画面は、改行した時に前のタグを継承してくれる点が便利ですし、見た目も段落と段落が少し開いているので段落を意識した記事入力が出来て便利なのです。段落の中で強制的に改行したければ、SHIFTキーを押しながらENTERで強制改行<br />できます。実に便利です。

残念ながら最近リリースされた新画面では段落がビジュアル的に分かりづらくなっています。みんなで改善要望を出せば改善させるかも知れませんね。(私は要望を出しましたが・・やっぱり旧入力画面を使っています。)

どっちが作業しやすいと感じますか?私はもちろん・・

livedoor Blog

OLD-livedoor Blog

参考

窓の杜 - 【Review NEWS】マクロ拡張機能が追加されたテキスト入力支援ソフト「Charu3」v3.02.01

HTMLインラインでスタイルを書くという制限

今日はいくつか仕事をやりましたが、てこずったのはラケットプラザYahoo!店の作業でした。

大手ショッピングモールは色々と制限がありまして、Yahoo!ストアではストアマネージャにログインして、ページを管理できます。ページを構成する要素(ソース)を入力する欄がいくつかあります。レイアウトを選んでしかるべき欄にソースを入力するとページが出来上がります。しかしその欄には文字数制限があって、10000バイトしか入らないのです。

10000バイトという事は、半角文字だと10000文字、全角文字(日本語とかの2バイト文字)なら半分の5000文字です。普通に考えれば問題なさそうなのですが、大きな落とし穴があります。

外部スタイルシート(CSS)ファイルはおろか、HTMLソースとしてのCSS定義も出来ません・・インライン要素として、style定義するしかないのであります。これが結構きつい・・・っていうか普通はインラインで書かないからマジに悩んだ。効率悪いし・・

今日作ったのはサイドナビゲーションで商品カテゴリーのところです。普通に考えて、ul->liでリスト表示させて、頭にアクセントとなる画像を表示させるべくCSSを定義するでしょう。恐らく背景には画像を配置するなりしてナビゲーションであることを目立たせます。ごくシンプルに作っていたはずなのですが・・・
list-style-image:url(http://lib.shopping.srv.yimg.jp/lib/hoge/mark.gif)
これをliに一行ずつ書くとPATHが深いので文字数どんどん食いつぶして最悪なことになります。divで囲ってみたところ何が悪かったのか、隙間が出来てしまいこれじゃあダメだと思い込んでしまい、どうしたら10000文字以内に収まるのか・・苦戦しまくりました。

結果的にはブラウザの挙動のせいだったみたいで遠回りしちゃいましたが、div->ul->liのネストで、divに「list-style-image」を指定しておけば、liに一行ずつ指定しなくても済み文字数を節約できました。普段こんな書き方しないから分からないよって言いたくなる。だけど制限の中で工夫するってのはある意味重要というか、理解を更に深める要素になるんだなと実感した次第です。

中途半端にスクラッチから書けると無駄の多い書き方しちゃってるって事あるんだなと再認識した次第です。

余裕が出来た文字数でfont-sizeやら、paddingやらの微調整が出来て期待通りに作ることが出来ました。ちょっとしたことだけど10000文字の制限をクリアできたって事でなんとなくコーディングの自信がついたかな。こういうことの積み重ねがプロとして大切なんだろうなって思います。私はWEB制作の仕事に携わって半年位なもんだし、実際のコーディングはデザイナーさんにほぼ任せているので、時々はこういうのを手がけるのも大切だなと思いました。

PHPやらPythonの学習も重要だけど、身近なXHTMLもボチボチ理解度深めて行くぞっと(超基本的なことは学習したけど応用となるとね・・)。
記事検索
月別アーカイブ
SEO的な実験
RSS

ブログランキング

track feed 正直に書くブログ
最新コメント
スポンサードリンク
QRコード
QRコード
  • ライブドアブログ