パンパでガウチョ

移転したけど「小ネタ」は新鮮…のつもり。「パンパ」や「ガウチョ」についての情報は一切存在しません。

Tips of Blog

reflect.js : 画像を下側に鏡面反射させて見せるスクリプト

reflect.js- 画像をサクサク鏡面仕上げ(OpenStratus Archive)

外部JavaScriptファイルのアップロードが許されないlivedoor Blog(無料版)でもできるかな…?

というわけでやってみました。

Firefox・Opera9・Safariしか対応していないので、Win IEだと見えません。

サンプルに選んだ画像がひどいのはいうまでもないのですが(笑)、背景は黒の方が映えるでしょうね。これじゃ、Web2.0っぽくないのは確実です。望ましいのは非矩形の絵柄で背景を透過させた画像だと思います。

続きを読む

新livedoor Blogサポート同盟

新livedoor Blogサポート同盟

金白さんの運営されていた『livedoor Blogサポート同盟』の閉鎖に伴い、私(doga)が同盟を引継がせていただきました

『新livedoor Blogサポート同盟』なんていうセンスを疑ってしまうような名前ですがよろしくお願い致します

dogaさん、引き継ぎご苦労様です。

トップページのバナーのリンク先も変更しておきました。誰かバナーを作ってあげてください…と他力本願モード(笑)

livedoor BlogのデザインをカスタマイズするWiki」などのlivedoorが公式で運営しているサイトを先刻初めて見たのですが、なかなか強力ですね。特殊タグがちゃんと最新のリストになっていたり、リンク先の民間サイトも頑張っていて、隔世の感を持つとともにわが身の怠慢を思い知りました。過去記事のメンテンナンスなんて、もうやんね(笑)

The 10 Best Resources for CSS : CSSについて参考になる10のサイト

英語ですけど…ね(笑)

The 10 Best Resources for CSS (SiteProNews)

さっそく列挙してみます。

  1. CSS Zengarden
  2. The Web Developer's Network
  3. Official Cascading Style Sheets Level 2 Specification
  4. CSS from the Ground Up
  5. Listamatic
  6. CSS Vault
  7. CSS Layout Techniques
  8. Ruthsarian Layouts
  9. PositionIsEverything
  10. StyleGala

超有名サイトばかりなので、さすがにこのブログでも言及・紹介したことがあります。

で、上の10番目の"StyleGala"から辿った下記のページから始まる一連の記事群がとても興味深かったです。

Colored boxes - one method of building full CSS layouts(Max DesignColored boxes)

まったくの何もないところから、CSSレイアウトを完成させるまでの作業手順を丹念に説明されています。英語があまり読めなくてもその段階に応じてサンプルが提示されますので何をやっているのかはよくわかります。モチーフがブログっぽいページなので参考になるかも…です。

CSSに限れば、日本語サイトだとベスト10はどうなるんでしょうね。

参考サイト(日本語)
CSS はじめの一歩(Academic HTML)
もっと進もう CSS(Academic HTML)
続きを読む

「はなげ」を頂けるようにする

はてなブックマークではてなポイントを贈る(はてなブックマーク)

はてなポイントによる投げ銭だから「はなげ…(笑)

過去記事「Webサイトへはてなidを埋め込む」で触れたことが正式に実施されました。

面白がって早速導入してみました。8月9日にはHTMLテンプレートを修正しておき、新仕様への切り替えを見込んで、再構築を一切やっていませんでした。でも、まだ新仕様に切り替わっていないんですね(笑)

個別記事ページのHTMLテンプレートに下記のような文字列を仕込んでおります。

個別記事ページにだけ書き込めば十分だと思いますが、特殊タグ"$ArticlePermalink$"に替えて、"$BlogUrl$"として、トップページにも記述しておくのもアリかもしれません。

はてなポイントの支払い方法は、クレジットカード限定ではないので、私も購入する可能性はあるので入れた次第です。多分、頂いたとしても他の方への「はなげ」として差し上げることになるでしょう。

下記のように「はてなポイント」での支払いを受け付けるようになったサービスもあります。

利用料のお支払をはてなポイントでもできるようになりました(DI:DO開発日誌)

そういえば、シェアウェア作者さんの中にも「はてなポイント」や「Amazonギフトカード」での支払いに応じておられる方もいますね。

Greasemonkeyを使ったlivedoor Blog外部リンクへの確認ページ抑止

『付けた文字列をまた剥がす』という資源の無駄遣いですし、どうも不要になりそうな匂いもしてきましたが、とりあえず作ってみました。

livedoor Blogの全ての記事ページを開いたときのみ動作し、確認ページを介さずに直接リンク先に移動できるようになります。

PRO版は対象外となる予定なので、独自ドメイン運用のブログでは動作しません。

Greasemonkeyは結構危険なので、上記以上の説明がなくても理解・導入できる方がお使いください。もっとも、そんな方はこんなの使わなくても自分でなんとでもされるのでしょうが…(笑)

LDAntiRedirect.user.js


さて、昨日判明した事実が4つあります。

  1. livedoor未来検索の検索結果ページにリストアップされた外部サイトへのリンクに現れた確認ページがなくなった。
  2. 社長日記」の外部サイトへリンクが、livedoorの検索結果ページに飛ぶように改められた。
  3. 新着ブログのリンクでは無料/PROのいずれでも確認ページが挟まれていない。
  4. 「BlogClick」との提携が発表され、既に「BlogClick」広告が表示されている。

上の事実から、よりマシな事態に振れる可能性を見たいところです…(笑)

儲けは儲けとして追求すればいいし、「BlogClick」やそれ以上の広告表示を少なくとも無料版の全ブログに義務づければいいと思っています。

続きを読む

livedoor Blogの真似をするスクリプト

他のサイトへ飛ぶときに確認ページを表示する。そこでアフィリエイト(こども(てれび))

自分でやってみると、あの仕様がいかに面白すぎるかよくわかります。

『全画面ポップアップ広告』という表現がしっくりきます。

外部リンクは確認ページへリダイレクト : livedoor Blogの仕様変更

livedoor Blog からの外部リンクについて(ブログ別!作成・カスタマイズ講座)

livedoor blog から、他のサイトへリンクを貼り、そのリンクをクリックすると、

『livedoor Blogから外のページにアクセスします。(中略)』

という確認ページを挟むようになりました。

アンカータグ("a")の"href"を書き換えているだけのようです。

詳細に検証などしていませんが、下記のようなごく短いスクリプトを各HTMLテンプレートの末尾に仕込めばいいのでしょう。置換対象文字列の正規表現はゆるゆるにしてます。

同日追記
適当に書いてしまったのできっちりとした正規表現パターンを使って描きなおしました。
livedoor Blogの管理者ID(このブログなら"kyorecoba")を書き込む必要があります。
PRO版のサブドメインでもこれでいいと思いますが、どうなんでしょう?
2005/07/19追記
下記のスクリプトは不完全です。
リンク先が検索エンジンの結果ページの場合には正しくリンクしないことを教えていただきました(コメント欄ご参照)。修正版はこのブログが新仕様に移行して十分なテストが行えるようになったら公開するかもしれません。

まあ、ユーザーがこんなスクリプトを仕込むのをlivedoorは許したくないでしょうね。怪しげなブログが細工をしているフシがあれば、指導し、そうでもないところでは黙認…ということにしてもらえればいいですけど、それも難しいかもしれません。

自分だけのことなら、GreaseMonkey(Firefox)やUserJS(Opera)でなんとでもなるのですが、他の個所への影響が少し心配かなぁ…。

続きを読む

livedoor Blogリニューアルのその後

新規登録ブログにはリニューアル後の機能が提供されているようなので、様子はかなり分かってきたようです。といって、私はさすがにさらに新規登録する気はありません(笑)

…と、思っていたら3カラムレイアウトにしている実物発見。

GIEN・ざ・くりーまー【別館】

最初に目に付くのが、ブログ上端にあるlivedoor提供のメニューバーです。

ただ、このメニューバーは強制的に付加されるものではなさそうですね。メニュー内の各項目は新たなHTML特殊タグとして提供されるのかもしれません。

あと、3カラムレイアウトでは角丸志向のためにdiv厨だったり、個別記事のサイドバーはJavaScriptではなくなったのか…とか、サイドバーのidはleft, right…とか、livedoor御製のバナーがオサレになっていたり…と間違い探し気分でなかなか楽しめます。

なんにせよ、livedoor内での移行作業は粛々と続けられているようで重畳です。

livedoor Blogの3カラムのユニークな手法

livedoor Blog 3カラム化New!!(のほほんティッカー)

上の記事はとても面白い手法で、JavaScriptなしで3カラムを実現されようとしています。まるでパズルです。

記事をご覧になれば、あらましは理解されると思いますので、やってみました。

HTMLの階層構造を図示すると、おおよそ下記のようになります。覚えたてでうれしがっているだけですが…(汗)

  • body
    • #container
      • #banner//タイトル領域
      • #contentbox//記事左部分
        • #content//記事本文部分
          • .blog
            • .blogbody(以下略)
            • .posted(以下略)
        • #links//左サイドバー
      • #links2//右サイドバー
      • #footer//フッター

一方のサイドバー領域(#links)と記事部分(#content)とを、それぞれにfloat指定しながら、ひとつの領域(#contentbox)でくるみ、さらにこの領域(#contentbox)と他方のサイドバー(#links2)とをそれぞれfloat指定するという、3カラムレイアウト手法を採られています。

同様の手法は、FC2ブログのカスマイズマニュアルにも書かれていて、より確実な手法とされています。

さらにボックスモデルについても記載があり、WIN IEとそれ以外のモダンブラウザとの間で異なる表示にならないような注意が必要でしょう。記事本文部分とサイドバーとの間に境界を設けたい場合は、できれば背景画像を使うなどの配慮がいると思います。

livedoorより正式サポートがアナウンスされたブログの3カラムレイアウトですが、実質的にどんな手法で実現されようとしているのかわからないわけで、気にいらない場合に備えていろいろな手法を覚えておきたいところです。

記事本文の可変幅は本当にやっかいです。

livedoor BlogのCSSアレンジ(3)

livedoor BlogのCSSアレンジ(2)」から1年と5ヶ月の歳月を経ての続編…(爆)

上の記事に掲載した画像とどっちが分かりやすいでしょう?

カレンダー部分はちょっとわかりやすくなったかもしれません。

というか、この図はどこかで見た記憶があるので、きっと既にどなたかが描いておられるでしょう。まあせっかく書いたのでエントリーします。

参考にさせていただいたのは下記の記事です。

はてなブックマークの構造(?d:kamioka)

  • body
    • #container
      • #banner//タイトル領域
        • .blogtitle//ブログのタイトル
          • a
        • .description//ブログの説明
      • #content//記事部分 ※トップページのみ
        • .blog
          • .date//投稿日付
          • .blogbody
            • .title//記事タイトル
            • .main//記事本文
              • img.pict//記事中画像
              • span.main-continues//「続きを読む」
                • a.acontinues//「続きを読む」のリンクスタイル
            • .posted//投稿情報
              • a.aposted//投稿情報リンクスタイル
          • .pagetop//「ページトップへ」
            • a.aposted
          • .title//「この記事へのトラックバックURL」
          • .trackback-url//当該記事のトラックバックURL
          • .trackback-body//トラックバック元記事要約
          • .trackback-post//トラックバック元記事情報
            • a.atrackback-post
          • .comments-head//「この記事へのコメント」
          • .comments-body//コメント本文
          • .comments-post//コメント者情報
            • a.aposted//コメント者リンクスタイル※変な命名(笑)
          • table.form//コメント投稿フォーム
            • tr
              • td
                • input#author
                • input#email
                • input#url
                • input#author
                • input#bake
                • textarea#text
      • #links//サイドバー ※トップページのみ
        • .sidetitle//コラムタイトル
        • .side//コラム本体
          • .sidebody//コラム項目
          • .photo//プロフィール画像
          • .nickname//プロフィール名前
          • .message//プロフィール本文
        • a.aside//サイドバー内リンクスタイル
        • .powered//livedoorバナー
        • .syndicate//RSSリンク
        • table.checkers//チェッカーズ表示用テーブル
        • .calendarhead//カレンダータイトル
        • table.calendartable//カレンダー本体テーブル
          • tr
            • td
              • table//カレンダー曜日テーブル
                • tr
                  • td
                    • span.calendarweek//曜日文字
              • table//カレンダー各日テーブル
                • tr
                  • td
                    • .calendard//無投稿日
                      • span.calendar
                    • .calendardbg//投稿日
                      • span.calendar
                        • a.acalendar//投稿日リンクスタイル
      • #footer//フッター
続きを読む
  • ライブドアブログ