複雑系レトリック~自営業白書~ -64ページ目

タケノコと鶏の炊き込みご飯 リニューアル関連の小ネタ

炊き込みご飯

こんにちは。複雑系自営業者コンプレクソロジストです。ごきげんいかが?

昨日は彼女がご飯を作ってくれました。
最近は彼女の仕事がべらぼうに忙しい時期を脱したので、作ってくれる機会が増えています。

これはタケノコと鶏の炊き込みご飯。自慢ですけど、これすげぇうまいんです。
旅館で出せるレベルに達していると思います。

あとはこれ、ホタテの佃煮。んーーナイス!
ホタテ佃煮




昨日、柚未さんのところで聞き捨てならない情報を拝見しました。
それによると、IDに - (ハイフン)が含まれていると、モブログできない可能性があるとのこと。

こういった現象は、確かにシステム開発でよく起こる問題です。
そして、これを発見した柚未さんはとりあえずすごいです(笑

これって試験行程でプログラマがやる仕事ですよ。それを1ユーザが発見したってのは本当にすごいです。まじで、3ヶ月の研修で相当な使い手になる逸材とお見受けしました(笑



しかし、しかしですね、この不具合が試験から漏れてしまうのってどうなんですか?
はっきりいって、最悪です。



私が一人で試験したとしても、これは絶対に見落としません。ていうか、試験のやり方に相当問題があります。
私の彼女も相当に有能なPC技術者ですが、この話をしたら驚いていました。

このバグを残してリリースしたことに驚いてるんですね。
ていうかね、プログラムを作る段階でこれは普通なら気づきます。
「まったく試験していないレベル」といってもいいです。

技術者、特にプロとしては最悪!!この業界やめた方がいいです。
はっきり申し上げて見込みが御座いません。


今、アメブロの開発現場はどえらい騒ぎになっていると思います。
中途半端なマニュアルが放置されているのも、お知らせメールがこないのもこのためでしょう。

もう、それどころじゃないんですね。自業自得です。



しかし、これらの不具合で心をかき乱されているユーザーはたまったもんじゃありません。

私は100人いたらトップ5に入るPC技術者ですが(笑)それでもユーザとしては対策ができないこともありますので、今回の改修内容には本当にイライラさせられます。

でも、昨日も言いましたけど、みんなやめないでね(笑
寂しくなっちゃう。


私も出来ることはします。惜しみなく知っていることはご提供する所存。
だからやめないでおくれ!(笑




さて、今回の改修では自動的にログアウトする時間が前より短くなりました
セキュリティー上の理由とかなんでしょうが、ちょっとあまりに短くないですか?
長い記事書いてたらログアウトしちゃいますよこれ。

一応、対策は出来ます。

まず、ブラウザ(インターネットエクスプローラーなど)の別画面で、もう一つ管理画面を開いておくんです。
CtrlキーNキーを同時に押すと、新しい画面が開きます。


記事を書いて、保存する前にこの別の画面で記事一覧・編集のリンクをクリックします。
このときにもしログアウトしていた場合は「ログインしてください」というメッセージとともにアメブロのトップ画面が開きますね。
つまり、この別画面はログイン状態が保持されているかどうかを確認するため「だけ」に用意するんです。

インターネットエクスプローラーの場合はShiftキーを押しながらリンクをクリックすると、別の画面でそのリンクを開くことが出来ます。
(これ、便利ですから是非覚えて下さい)


私の場合、記事をだーーーっと書いていて、それで保存する前に必ず「記事一覧・編集」のリンクをShiftキーを押しながらクリックします。
そうすると別画面で記事の一覧が表示されるのですが、この時にログアウトになっていたら、その画面でログインします。

その後に書いた記事を保存します。

アメブロが重たいときにエラーが出たりしますが、この方法でエラーも回避しています
重たいときは記事保存しないようにしているんです。


この方法はアメブロに限らず、ログインが必要なサイトで利用できる場合があります。
(銀行系や、クレジットカードなどのホームページでは出来ないことがありますから注意してください)


これも所詮は対処療法で、こういったことを強要するシステムはうんこです。うんこ以下です。

記事の編集が終わった時点で、「HTMLタグを表示」っていうボタン(下のほうにあるやつ)をクリックすると、タグ付きのデータが表示されます。
保存をする前にこの内容を全部コピーして、メモ帳に保存しておくという方法もオススメです。



それと、コメントの文字数制限がだいぶ厳しくなっています。以前はかなり沢山コメント書けましたけど、今は500文字の制限がかかっています。
まぁ、こちらからお伺いしてコメントするときはそのくらいでだいたい大丈夫なんですけど、中にはコメントレスでお困りの方がいらっしゃると思います。

全てのコメントレスを、一個のコメントにまとめて長ーーいコメントレスを入れる場合は500文字制限にひっかかる場合がりますので注意してください。
これはユーザがどうのこうのして対応できる話ではありません。


アメブロは改修の際に「どうやってブログが使われているのか」っていう調査をしたんでしょうか。
多分、全くしていませんね。設計段階にもやはり問題が大アリです。



それと、お気に入りブログの表示件数が最大15件に変更されていて、巡回に苦労されている方も多いと思います。
これは全部表示することが出来ませんのでもうしょうがありません。

一つだけ、私がやっている対策をご紹介します。
皆さんグーグルご存じですか?  こちら
最大級の検索サイトです。

これはリニューアル前のグーグルのキャッシュを持ってくるという方法です。これで分かる方はやってみて下さい。
分からない方のために今から説明します。
それと、リニューアル前から全部のブログをお気に入りに表示していない設定の方は、この方法が使えません。


まずはグーグルでご自分のブログを検索してください。
私の場合だと「複雑系レトリック」っていうタイトルで検索します。

それと、リニューアル前の記事タイトルを同時に検索キーに指定します。だいたい3日くらい前のやつがいいと思います。3/28とか3/27くらい。

最終的な検索キーは

「複雑系レトリック 敬虔なコーヒー党員」

となります。検索してみて、結果が表示されましたか?

そしたら上の検索結果から順番に「キャッシュ」と書いてある所をクリックしてみて下さい。
表示されたのはgoogleが保存しているあなたのブログです。

表示された画面の一番上をみてみてください。
私の検索結果の場合は

「このページは、G o o g l e で 2005年3月27日 13:27:54 GMTに保存された ・・・」

となっています。

この日付の部分が4/1より前になるまで探しましょう。
具体的には記事の日付を一日ずつ戻していく感じ。一日ずつ、前のタイトルとブログのタイトルを検索するんです。

これで見つかったページはアメブロリニューアル前に保存されていますので、すべてのお気に入りブログが表示されていると思います。
(もちろんそれ以降にお気に入り登録したブログは表示されません)


インターネットエクスプローラーをご利用の方は、この画面を表示した状態でCtrlキーSキーを同時に押して下さい。

それで適当に短い名前を付けて、適当な場所に保存します。

これでこのページはまるごとあなたのパソコンに保存されました。これからはいつでも好きなときに、保存したファイルをダブルクリックしてその画面を見ることができます。

もし、この方法をやってみようと思うのであれば早いほうがいいです。
なんせグーグルが保存している期間は一定ですから、そのうちに古い状態のデータが消えてしまいます。
あんまりスマートな方法じゃないので、もっといい方法があるかもしれませんが、とりあえず私はこの方法でやっています。


ブログを巡回するときも、Shiftキーを押しながらリンクをクリックすると便利ですよ。
いちいち別画面が開きますから、お気に入りブログ一覧をそのままにしておくことができます。


それにしても、ここまで工夫を要求するシステム。ほんとなんとかならんのかな。

CSS攻略第二弾!「フォント重なりまくり」 インセンティブ

ジェットコースター

みなさんこんにちは。複雑系自営業者コンプレクソロジストです。ハロー。


コメントの文字拡大は結構皆さん困っていたようで、私としてもお役に立ててとても嬉しいです。
ご自分のブログで質問された際に、こちらを紹介してくださってもちろんかまいません。リンクも無断でご自由にどうぞ


リニューアル後2日経ってみて、いろいろと問題が浮き彫りになってきた感があります。


とりあえず記事を書く機能は極悪(笑
皆さんかなりの不便を感じていらっしゃることと思います。


表示面では、大きなフォントを使ったときに文字が重なってしまう場合があります。これは後ほど解決方法をご説明したいと思います。
それと、最悪なのがスキンによってはコメントのリンクをクリックしても、コメントが全く表示されない(私が確認したのはエターナルサンシャインのスキン)。

これって、不具合としては最悪レベルだと思います。私が勤めていたところでリリース後にこの問題が出たら始末書で済むかなぁ・・(笑

システム開発において最も重要な行程は試験(テスト)ですが、アメブロのシステムはこの試験のレベルがあまりにも低いことが分かりました。

試験の品質が低いということは、システムの品質が低いということです。

はっきりいって、システム開発のリーダーを変えるしかないと思いますね。誰かしらんけど(笑
もしどこかに発注を出しているのなら、まるごと変えたほうがいいです。



昨日は彼女と二人で買い物にいってまいりました。
近所にかなりでっかいショッピングセンターがあるんですが、いつもは必要なお店だけ行くんですよね。
昨日はいつもは行かないような所も回ってみたんですが、前と比べて子ども服やらおもちゃやらを売っているところが増えていたことに気づきました。


子ども関連のお店が増えてるんです!


このショッピングセンターには、他のスーパーや百貨店では考えられないくらいに子ども連れの方が沢山います。
ざっと見回して、子ども10人くらいは数秒で見つけられるほど子ども密度が高いのです。
昨日は本当に産まれたばっかりと思われる、すんげーーーーーーーーーーーー小さい子どもをクビからぶら下げて、さらにもうちょっと大きい子どもを2人連れているお父さんをみかけました。

ちなみに以前この記事でご紹介した通り、私は背後になんか憑いているらしく、子どもに凝視される体質(?)です。

このショッピングセンターに行くと、私は注目の的!アツイ視線を感じまくります。


もちろん、子ども連れの方が多いのはショッピングセンターの企業努力によるものです。
子どもをお持ちの方が行きたくなるような環境を整えています。


まず、車みたいな形の妙なショッピングカートがあります。
子どもをここに格納して上に商品を載せられるような構造をしています。
内部にはハンドルなんかがついていて、子どもが楽しめます。

「おうちかえりたーぁいーーーーかえりたぁーーいいー」と言い出すのを防止するすばらしいアイデアです。

センター中央の広場には子どもが遊べるようなところがあり、トイレには(男子用でも)子どもホルダー・・・なんていうの?あれ(笑)。
なんか、子どもを一旦座らせる場所があったりします。あ、そうそう、確か授乳室なんかもありますよ。


私はインセンティブという言葉が好きです。

日本語に訳すと、誘因(ゆういん)とかいうわけわからない言葉(笑
誘因の意味は

(1)ある作用をひき起こす原因。ある物事が成立する原因。

となります。

このショッピングセンターは、子ども連れを集客するためのインセンティブとして車の形をしたカートを用意しています。広場も、トイレの子どもホルダーも、授乳室もすべて子連れ客を集めるインセンティブと言えます。



私はもうアメブロのランキングから抜けていますが、上位を狙っている方にとっては、ランキングはブログを続けるためのインセンティブになっていると思います。

また、更新や作成が簡単であることは、多くの人にとってブログを続けるための重要なインセンティブであるはずです。
逆に言うと、簡単だからブログをやっているわけです。



CSS編集は本来上級者向けであるはずの機能ですが、昨日の記事でご紹介した「コメントが小さい」とか、今日ご紹介するCSS対策はこれを行わないと不具合が生じるような内容のもの。

私は、インセンティブを失ったブロガーがアメブロを離れていくことを懸念しています。
別にアメブロを運営しているサイバーエージェントの心配をしているわけではなくて、せっかく仲良くなれた方がいなくなるのが寂しいのです。



正直言って私にプログラマの経験がなかったとしたら、これらの対応は相当しんどいと思います。

上級者向けの作業を強要するようなクサレシステム。
ユーザのインセンティブを奪う矛盾したサービス。


これはなにをおいても早急に対応する必要があります。

そして、授乳室があるショッピングセンターには、子連れ客が集まるのだというビジネスにおいて基本的なことをもう一度考え直してもらいたいものです。


私の予想ですが、来週のサイバーエージェントの株価は下がると思います。
株価の下落がまともなシステムを作るためのインセンティブになってくれればいいなぁなんて思ったりして(笑。

 


 



さて、今日ご紹介する対応は、フォントが重なってしまう現象の対策。

私は記事を書く際にあまりフォントを大きくしませんが、多くの方がこのくらいのでかいフォントを使っていらっしゃいます。

今回のリニューアル後からでかいフォントで長い文章を書いた場合に、文字が重なってしまう不具合があちこちで発生しています。

具体的には


このような状態になってしまいます。
重なり画像



これもやはりスタイルシート(CSS)の問題点です。今日はこの現象を解決する方法をご紹介します。


まず、CSS編集初心者の方は私の昨日の記事をご覧下さい。この内容を把握している前提で説明致します。
今日の修正は2カ所必要です。

CSSの編集画面を開いて下さい。CSS本文の中から

line-height:

を検索してください。

多分、多くの方のブログでは

.entry .contents{
line-height: 150%;
}


こんな風に書かれていると思います。この 150% のところを 1.5 に修正します。

.entry .contents{
line-height: 1.5;
}


このようになります。
ちなみに、この1.5という数値は、元の150%を●●倍に変換した数値となります。
150%だったら1.5  もし200%だったら2と記述してください。

この修正が終わったら、続けて同じように

line-height:

を検索します。CSS全体で、5~6件該当するところがあると思います。
その最後のほう・・・

.entry .contents p,
#message .contents p{
font-size: 12px;
line-height: 150%;
}


このような部分が見つかるまで飛ばして下さい。
見つけるポイントとしては .entry .contents p と書いてあるところを探す感じ。

ここもさきほどと同じように 150%1.5 に修正します。200% の方は 2 にします。

.entry .contents p,
#message .contents p{
font-size: 12px;
line-height: 1.5;
}


最終的にこのようになります。


先ほどの箇所とあわせて2点、修正が完了したらプレビューで確認をしてみて下さい。
変更する前と比較すると、他の文字の位置もほんのわずかだけずれるのですが、大した違いはないはずです。

確認できたら保存ボタンを押して、作業完了です。


この修正についてはいくつかのスキンで試してみましたが、全てを網羅しているわけではありませんので必ずプレビューしてみて下さい。

 

CSS攻略第一弾!「コメント文字が見にくいんですよ~」

コタツマン

こんにちは。昨日はスタイルシートをいじくりすぎて、クドすぎるんじゃないかと薄く感じている複雑系自営業者です。ごきげんいかが?

あ、忘れないうちに言っておきます。昨日の書籍化の話なんですけど、お手数ですがもう一度昨日の記事をご覧いただけますでしょうか
それで、書籍化のことが書いてある部分の左端を、縦に読んでみてください
そういうことです。


昨日、夜中までブログをいじくりまわしていたわけですが、コタツに入ったまま、隣で寝てしまっていた彼女が、寝言で・・・



「ありがたい、1996年のケースそのままだな・・・」



って言ってました。いったいどんな夢なんだ!寝言ですよ、寝言
そしてしばらくして、今度は



「ちょっと、オオバのホームページおもしれぇーー・・ヘッヘッヘ」



って笑ってるんですよ。オオバって誰?(笑

幸福です!幸福がここには存在します。
見ている私もさすがにこれは笑いが漏れてしまいます。

すると私が笑ったのが聞こえたんでしょうね。さらに彼女が


「ハッハッハ」


って笑い出したじゃありませんか。さらに私も笑います。そしてそれを聞いた彼女がまた笑って、それをみた私が笑って


最終的には夜中に二人で大爆笑!しかも片方は寝ています


あー変なカップル。最後に彼女が自分の笑い声で「ハゥ」とかいって目覚めました。
「なに?なに?」とか言ってました。

 


 



さて、昨日の予告どおり、今日はCSS(スタイルシート)についてとりあえず必要なところからご説明したいと思います。
いきなり全然知らない人が用途に応じて修正できる内容を目指します。


CSSスタイルシートという二つの言葉は同じものを指します。だから同じもんだと思ってください。
今後はスタイルシートのことをCSSと統一して表記します。



【CSSって、なんか?】

CSSはブログの書式や色なんかを定義するファイルのことです。例えば私のブログを見ていただくと、スクロールバーが普通の色じゃなかったり、記事のタイトルに影がついていたり、コメントの投稿ボタンの色が違ったりしていますね。
あとは、ブログタイトルもメラメラと熱い情熱を発しているじゃありませんか。

たとえばブログタイトルなんかはアメブロの設定画面でどういじくっても、文字の色すら変えることが出来ません。
もちろんスクロールバーも、コメントの色も変えられません。

CSSはこういった、記事で変えることが出来ない書式を自分で変更することができる便利なものです。
CSSは一つのブログに対して一つしかありません。ブログ自体の書式を変更できるものですから、当然といえば当然ですね。



【どこで修正するとですか?】

アメブロのCSSは管理画面から修正が可能です。
管理画面から > デザインと機能 に移動してください。

右の列に 「スキンの選択、サイドバーの設定」などなど、いろいろ用意されていますので、その中の「CSS編集」をクリックします。
すると、なにやら呪文のようなものが記述されたボックスが表示されますね。

そうなのよ、それがあなたのブログのCSSなのよ。

これを編集し、下にある保存ボタンをクリックすれば修正が可能なわけです。
また、プレビューボタンで内容を事前に確認することができます。



【注意するべきことがあったら教えてほしいとです】

CSSを編集する際にはいくつか注意点があります。
ちょっとややこしい内容になりますが、これはとても大事ですから是非読んでおいてください

まず、CSSは一旦保存してしまうと元に戻すことはできません。
もし変な記述をしてしまって、保存してしまうと自力で元に戻す必要があるんです。
ですから、編集に際しては十分注意してください。

また、スキンを変更すると、それまでに修正したCSSの内容は全部なくなります
初期状態に戻ってしまうので、タイトルの色の変更などは再度行う必要があります。

逆に言うと、変な修正をしてしまって「あーもうだめー、誰かたすけてー」っていうときは、スキンを変更してしまえば問題ありません。これで全部元通りになります。


さきほど開いたCSSの内容を見てみます。ちょっと一部を取り出してみますね。

body {
color: #FFFFFF;
font-size: 11px;
}


これは、bodyという名前の書式を定義してあるところ。

CSSの構造は

名前 { 
 内容 1
 内容 2
   ・・・


このようになっています。これにてらして上のやつを見てみてください。

また、それぞれの内容は

書式の種類: 書式;

となっています。

できればここで覚えていただきたいのは、まず 名前 { }というものが1つの書式を設定しているということ。閉じる  を消してしまったりするとおかしなことになります。{ } でくくられていることを確認して編集しましょう。
これだけ守っていれば、とりあえずそんなに変なことにはなりません。

また、編集する際には、一旦CSSの内容をメモ帳なんかに貼り付けておくといいでしょう。失敗しても元に戻せるようにしておきたいものです。



【コメントの文字が見にくいとです】

今後、数回に分けて不定期にCSS攻略法をお届けする予定ですが、それぞれ具体的な使い方をご紹介したいと思います。

まず、今回はコメントの文字の大きさを変更することから始めたいと思います。

スキンにもよりますが、コメントの文字が小さくなって見にくくなったという方が結構いらっしゃると思います。
これは、コメントのフォントサイズが11px(ピクセル)に設定されており、リニューアル前よりも1ピクセル小さくなったのが原因。
ピクセルというのは画面上での大きさを示す単位です。

なんで小さくしたのかアメブロに小一時間問い詰めたいところです。


先ほど開いた方法で、CSSの画面を見てください。
適当に内容をクリックして、内容の検索を行います。
インターネットエクスプローラーをお使いの方はCtrlキーFキーを同時に押すと、検索窓が開きます。

ここで

each_comment

という文字を検索してみてください。ありました?

内容はスキンによって異なりますが、だいたい

#comment_module .each_comment {
margin-bottom: 10px;
font-size: 11px;
}


こんな感じで記述されていると思います。さっきご説明したとおり、{ }で囲まれていますね。
このeach_commentの部分が、コメント本文の書式を設定している場所なのです。

さて、中身をみていただくと、3行目

font-size: 11px;

そう、この部分が問題なんですよ!ね、ね、ね。
はっきりいって11pxは小さいです。見にくいと思います。

font-size: 12px;

このように修正しましょう。あとは保存ボタンをクリックするだけです。
これであなたのコメントはリニューアル前と同じサイズになります。

追記:
 そもそも、 font-size: 11px; という記述自体がないスキンがあるようです。
 その場合は 

#comment_module .each_comment {

・・・・(いろいろ書かれている)

}


ここに font-size: 12px; を追加してください。
場所は { と } の間であればどこでもかまいません。
(上げ郎さんサンクス)



さきほど「プレビューボタンで事前に確認ができる」ということを申し上げましたが、コメント欄やトラックバックはプレビューすることができません
コメント欄の修正は、いきなり保存して確認するしかありませんのでご注意ください。

さて、とりあえず今回はこんな感じでお届けしました。いかがでしたか?
不明な点などコメントしていただけると幸いです。

また、ここが困っている!などという書式上の問題も、今後の記事のネタにさせていただきますので是非お寄せください。

パレット

桜        標準スタイル
桜        太字
桜        斜体
桜        小さいフォント
桜        小さい太字
桜        でかいフォント
桜        でかい太字
桜        でかいフォント
桜        でかい太字



水平線




この記事は「記事を書くための書式」を集めたものです。今後も書式を追加していきますので是非使ってやってください。
こんなに書式は沢山いらないよー っていう方はご自分で作ってみるのもいいでしょう。この記事をグオーっと全部コピーして、記事を書く画面で貼り付けるとそっくりそのままコピーできます。
必要なところだけを残して、いらないところは削ってください。

 




使い方:


①まず、 自分が使いたい書式文字を選択してください。インターネットエクスプローラーだと、ダブルクリックすると選択できます。

パレット1


こんな風に、反転しますよね。
この状態でCtrlキーCキーを同時に押して、コピーします。
もちろん、右クリックからコピーでもかまいません。

コピーしたら、記事を書く画面でCtrlキーVキーを同時に押して、貼り付けます。
同じく、右クリックから貼り付けでもかまいません。

パレット2


ね!ちゃんと書式もコピーされています。
次に自分が入力したい本文を打ち込みます。
このときに、すぐ隣から入力するようにしてください。
(貼り付けたときは1文字分だけ右にずれていますから、一つ左に戻す感じ)

パレット3


そして最後に、コピーした文字(この場合は「桜」)を選択して削除します。

パレット4

とりあえず、この方法でマックをお使いの方でも、タグを打つよりは簡単に文字装飾が出来ると思います。

それと、水平線というのを用意しました。これはHTMLタグでいうと<HR>です。
左のオレンジの線をコピーして同じように貼り付けてください。

ちなみに、HR水平線については私のブログではオレンジで表示されているのですが、コピーすると普通のやつが表示されます。ご了承ください。
(これはCSSでスタイルを指定しているんです)

申し訳ありませんが、この記事のコメントについてはレスを割愛させていただきます。
ほんとに多くの方がお困りだったのを痛感しました!ガンガン使ってやってください。
リンクなども好き放題ぃー どうぞーーー

なお、こんな書体があったら便利なのにーっていう意見も受け付けております。コメントにご記入下さい。 

技術情報マップ

リニューアルに伴う一般的な情報
リニューアルに伴う周知事項

 記事を書く画面の基本的な使い方を解説しています。
タケノコと鶏の炊き込みご飯 リニューアル関連の小ネタ

不便になったお気に入りブログの管理。もしかしたら役に立つかもしれません。





CSS(スタイルシート)攻略特集
CSS攻略第一弾!「コメント文字が見にくいんですよ~」

CSS編集の基本、そしてなぜか小さくて見にくくなったコメントを元に戻す方法。
CSS攻略第二弾!「フォント重なりまくり」 インセンティブ

でかフォントをお使いの方はこちらをご覧ください。
CSS攻略第三弾!『タイトル画像』 メランコリーなスキン

タイトル画像を自分でかえることが出来ます。


技術的な質問はこちらのコメント欄で受け付けいたします。