Serene Bach記事リストにNewアイコン
clover in pocketのトップページに、Newアイコンをつけた犯人ですこんにちは。
このPocketのトップページは、8人のインクローバーブロガーの8個の各ブログの最新記事リストの集結です。ブログのトップページではありません。
なので、外部htmlから読み込む記事リストにNewマークを表示させる方法をとりました。
要は、「小粋空間｜新着表示プラグイン（最新記事リスト版） for Serene Bach」さんのアレンジです。
■Serene Bachの外部htmlに読み込む場合のソースは
<script language="javascript" type="text/javascript" src="/log/entry.js" charset="EUC-JP"></script>
です。
（個別記事に吐き出されてる最新記事リストのjsファイルを呼び出してるわけです）
【必須条件】
- ログの保存方法は「個別記事ごとにhtml生成」
- lib/sb/content.pmの中のエントリーリスト生成部分を書き換えるので、entry.jsで吐き出されているリスト以外に、blog内のentrylistブロックエリア内の記事リストにも、同じマークがつきます。そこはご了解の上お願いします。
faviconマニア
インクローバーオフィシャルサイトや、in clover LINEを見てお気づきの方も多いと思いますが、faviconを変えてみました。こんなカンタンに作れるなんて、Webの人間のくせに、知りませんでした^^；
16px四方のgif画像を作って、拡張子を「.gif」→「.ico」に変えるだけでfaviconファイルに変換できるんですね。
favicon.icoを読ませたいサイトのルートに「favicon.ico」の名前で置いておけば、
<link rel="shortcut icon" href="favicon.ico" />を書かなくても表示できるとか。うわー、便利なんですねー。
ウェブマーケティング用語集
ウェブマーケティング用語集自分の社内だからってわけじゃなく、本当に、こういうのはチェックする価値、大有りだと思います。
学生時代から、今もそうだけど、単語力・語彙力の無さにはほんとわれながら情けなくなります（涙）勉強します。
良かったら、ご愛用のRSS Readerに追加しとくと便利かも。
RSSも配信されてます。
→ウェブマーケティング用語集 basic.xml
テーブル、セルの幅指定のワナ
<table border="0" cellspacing="0" cellpadding="0"> <tr> <th width="22%"> </th> <td> </td> </tr> <tr> <th> </th> <td> </td> </table>「一番上の行に、幅を指定」
↑これでthの幅を固定できた、と思ってると、思わぬワナが待っています。
お客様から修正事項がやってきて、たまたま一番上の項目を削除してください、とか。<tr>〜</tr>からソース上で消せばいいじゃない〜と安易に消してしまい、うまい具合に調整していた幅指定も、うっかりごっそり消してしまって、たまたまプレビューも怠り、本UPへ…。
後から「ちょっと狭いんで直してください」「ちょっと広すぎるんで調整してください」といわれてしまい、コーディングセンスを疑われる羽目に…。
コーディングしたときは、ちゃんとしてたのに…。と悔しい思いをします。（実体験…涙）
クリップつけてみたのですが…
エントリーごとに、clipをつけやすくしてみたんですが、記事タイトルを出力するタグがまずいようで、clipしようとすると、タイトルが文字化けしてしまってます(-_-;)
でももう週末も終わってしまいます…。直したくても力尽きてしまったので、少なくとも来週までこの無様な状態だと思いますが、ご勘弁を…。
（ていうか、その前にclipしてもらえるような記事を書けよっていう話ですけどね…）
スペースの数でインデントを表現したいとき
項目と内容を、左右に分けてhtmlで書きたいとき、テーブルを使う人も多いですが、簡単に書きたいときはスペースをいくつか入れて、インデントや左余白をつけて書くことがよくあります。
しかし、そこでこんな感じにつまづくこと、ないですか？
たとえば、ソースは↓こんな具合にスペースを文字数分入れて書いて、
<p>
場所 インクローバーカフェ<br />
時間 4月14日 午後2時<br />
15日 午後4時
</p>
場所 インクローバーカフェ
時間 4月14日 午後2時
15日 午後4時
場所 インクローバーカフェ 時間 4月14日 午後2時 15日 午後4時
↑のように、日付の部分などが、ずれてしまったり。それは、通常webサイトやブログなどが、「ＭＳ Ｐゴシック」などといった、プロポーショナルフォントで書かれているからです。
全角・半角でスペースをいくら書き込んでも、文字によって幅が異なるので、思ったよりスペースが細く表示され、たくさん入れたとしても、同じ幅のスペースを入れることができないのです。
なので、こういうときは、等幅フォントを指定してあげることをオススメします。
Dreamweaver ファンクションキー
Dreamweaver ファンクションキーのメモ。
もしかしたら、表現おかしいかもしれないけど…。
使えそうなのに色つけてみました。
F1→ヘルプ
F2→CSSレイヤー開閉
F3→検索ウィンドウ開
F4→サイドパネルが開閉
F5→更新
F6→拡張テーブルモード始・終
F7→結果ウィンドウ開閉（検索も含む）
F8→ファイルウィンドウ開閉
F9→タグウィンドウ開閉
F10→選択中のコードソースが手前に出現
F11→アセット開閉
F12→プレビュー（お馴染み）
ctrl＋F3→プロパティ開閉
ctrl＋F8→リンクチェック
Serene Bach スクリプトパスを後から変えたい
本サーバ環境にSerene Bachを設置しておきたいけど、公開日までは裏でプレビューするだけで、本公開日になってからみせたい。
具体的な例をいえば、
公開は ：http://www.inclover-inc.comなんだけど
公開日までは：http://www2.inclover-inc.comでチェックする、みたいな状況。
だから、SBをインストールしようと思うと、インストーラーで必ず
スクリプトパス（後から変更不可）http://www.inclover-inc.com サーバパス（後から変更可）http://www.inclover-inc.comを設定させられることになり、wwwを設定すると、公開日まで管理画面に入れないから困るわ、www2に設定すると、公開日以降見れないから設置しなおしすることになって困るわ、どっちにしろ困る状況に陥りました。
ならば、www2に設定して設置し、公開日に手動でデータを改ざん(？)してUPする、ちょっとアブナイ方法しかないなと思い、見つけました。
インストール後、
data/configure.cgiをDLしてきて、
■8行目あたり
conf_srv_cgi http://www2.inclover-inc.com
■33行目あたり
conf_srv_base http://www2.inclover-inc.com
この２箇所を変更してUPしなおせば、変更可能です。
正式な方法じゃないと思うので、もしかしたらヤバイかもしれないけれど、この状況を脱出する方法は今はこれしかないと思います。
カラーピッカー＆文字リサイズ for Serene Bach
ごめぷろぐ | Serene Bach管理画面のカラーピッカー作ってみました♪
こちらで紹介されていたカラーピッカーを参考に、さらにカスタマイズしてみました。
DL：FontresizeColorpicker.zip
FontresizeColorpicker/lib/resource/ja/
entry.html
script.js
style.css
が入っています。
Serene Bachを置いているディレクトリにアップすれば、管理画面が変わります。
手動でカスタマイズしたい方は、続きへ↓
心配な方、自信のある方も、バックアップはとりましょうね。
-------------------------------------
【追記】
記事（エントリー）に絵文字を使う for Serene Bach
sb絵文字入力支援スクリプト
などを導入されている方は、手動でentry.htmlにソースを挿入しないと、絵文字がが使えなくなってしまいます。私自身絵文字は導入してなかったもので詳しくなかったので、既にうっかり上書きしてしまった方がいらっしゃったらごめんなさい(-_-;)
DW2004MXがbrをフォーマットしそこねる
Dreamweaverは賢いので、以下のようにhtml→xhtmlに変更して、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ソースフォーマットをすると、
<img>→<img />
<input>→<input />
<br>→<br />
閉じタグのないタグは、上のようにいい具合にスペースと/>をつけてくれて、自動整理してくれます。
しかし、Dreamweaver2004MX（以前？全部は試してないですけど）だと、
<br>→<br/>
スペースが抜けます…。
<input>→<input />これもたまに<input>→<input/>となってるのを見かけます。
Dreamweaver8は問題ないようなのですが。
最後にいちいち
<br/>→<br />
という置換えをしなくちゃならないのかしら。