プログラミング初心者がJavaScriptを1分で実行する方法
プログラミング初心者がJavaScriptを1分で実行する方法を紹介します。 JavaScriptはブラウザ上で実行できるので、ブラウザを利用します。ブラウザはIE8/IE9またはGoogle Chrome、Firefoxのいずれかを使います（FirefoxはFirebugのインストールが必要です）。 プログラミング初心者にプログラムのサンプルを見せるときにも使えるかもしれません。 １．IE8/IE9で実行する WindowsであればIE8/IE9がデフォルトでインストールされていると思うので、もっとも手っ取り早いです。 ブラウザを起動して任意のページを表示します。この状態でF12を押下すると、次の画面が表示されるので、「コンソール」タブをクリック。 （画面をクリックすれば拡大します。以下同様） 一番下の行に実行したいJavaScriptを記述してリターン。ここでは「document.wr
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
WordPressのTwenty Elevenテーマ解説：メインインデックスのテンプレート (index.php)
WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説してみたいと思います。確認バージョンは3.2.1です。 メインインデックスのテンプレート (index.php) Twenty Elevenテーマの「メインインデックスのテンプレート (index.php)」で出力されるページは次のようになります。 テンプレートのソースコードは次のとおりです。 <?php /** * The main template file. * * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a pa
エントリーアーカイブのページ分割
MTPaginate プラグインを利用したページ分割はかなり普及していますが、このプラグインはひとつのエントリーをさらにページ分割することも可能です。 ということで、エントリーアーカイブ（個別エントリーアーカイブ）のページ分割をご紹介します。エントリーが長文になる場合の分割はもちろん、例えばアフィリエイトで Movable Type を利用している場合、カテゴリーアーカイブに複数の商品を紹介してエントリーアーカイブではひとつの商品を表示するというのが一般的と思われますが、エントリーアーカイブで複数の商品をすっきりと表示することも可能になります。 まず画像を使って完成イメージをご説明します。 左のサンプルはデフォルトテンプレートを使ったページ分割イメージです。上がタイトル、その下にカスタマイズで追加された分割ページのリンクがあり、その下が本文です。サンプルでは計3ページ（3段落）に分割されて
Movable Type 5 関連記事
Movable Type 5 の発表、おめでとうございます。 当サイトでも以下のエントリーでこっそりアナウンスしてましたが、分かりにく過ぎましたね（画像をクリックすれば答えが出ますが、クリックする前にみつけてください）。 ということで、関連記事でした（笑）。
Movable Type 4.1x から 4.2 へのアップグレード
ローカル環境で、Movable Type 4.13 から 4.2 へアップグレードしてみました。簡素な環境ですが正常にアップグレードできたことを確認できたので、手順を紹介します。 なお、アップグレードは個人の責任で行ってください。正常にアップグレードできなかった場合、申し訳ありませんが当ブログに質問を頂いても解決するお手伝いをすることはできません。作業前には１項に示すバックアップ作業などを行い、ブログのバックアップを行ってください。 １．ブログのバックアップ 4.1 の状態でブログのバックアップを取得します。 注：ブログのバックアップファイルは4.1と4.2で互換性がありません。ドキュメントにも次のように書かれており、4.2 で復元する場合は、4.2 のバックアップファイルしか対象にできません。 Movable Type 4 ドキュメント - バックアップしたブログの復元 バックアップファ
「CMSとして使うMovable Typeガイドブック」執筆
Movable Type 4.1 対応のカスタマイズ本を執筆致しました。 昨年の12月中旬に突然舞い込んだ話で、1ヶ月半で170ページほどを一気に執筆しました。で、ついこの前校了したばかりで、発売までかなり時間が空くと思っていたら、なんと来週の金曜日、3月14日に発売される予定です。 CMSとして使うMovable Typeガイドブック 黒野 明子 荒木 勇次郎 翔泳社 2008-03-14 Amazonで詳しく見る by G-Tools 今回は、Webデザイナー・黒野明子さんとの共著で、黒野さんが Chapter4～6、私が Chapter1～3 と巻末のテンプレートタグリファレンスを担当しています。 １．書籍の概要 今回の書籍は、前書の「Movable Type WEBデザインの新しいルール」のように、MT全体を俯瞰した内容ではなく、300ページの大半をテンプレート、およびテンプレート
小粋空間: Movable Type が WordPress に負けた本当の理由
Movable Type と比較して WordPress が人気なのは、「再構築が不要」とか「インストールが簡単」とか「デザインが豊富」とか、国内ブロガーの評価を頼りにしていましたが、下記の記事の一文を読んで、米国で Moovable Type の人気が急激に落ち、WordPress にシェアを明け渡した本当の理由を知りました。 Movable Type 4.0 ベータ、ローンチ―第3四半期にもオープンソース化へ MTユーザーとSixApartの間には波乱の歴史がある。Movable Typeは決してオープンソースプラットフォームではなかったのだが、MT 3.0のリリース以前は多くのユーザーがMTをオープンソースであるかのように扱っていた。2004年のMT 3.0のリリースと同時にライセンス契約が強制されるようになったことでユーザーコミュニティーからは激しい非難の声（私の声もかなり声高に混
親カテゴリーにサブカテゴリーのエントリー数の合計を表示する
Movable Type のサブカテゴリーリストで、親カテゴリーのエントリー数に、サブカテゴリーのエントリー数を合計して表示するカスタマイズです。SubCatCount プラグインを利用します。当サイトでは右側にあるカテゴリーリストの ( ) 部分に、サブカテゴリーとのエントリー数の合計を表示しています。 １．プラグインのダウンロード 下記のサイトの本文下の方にある「download」のリンクからアーカイブをダウンロードします。 Don't Back Down：Sub-Category Counting ２．プラグインファイルのアップロード ダウンロードしたアーカイブを解凍して、その中にある SubCatCount.pl を plugins ディレクトリにアップロードします。 ３．テンプレート修正 各テンプレートのサブカテゴリーリストを表示しているタグを下記のように修正します。 ３．１ デ
IE7の自動更新をブロック／無効にする方法のまとめ
IE7の自動更新が2008年2月13日より順次開始されるようです。 IE7をインストールする場合は自動更新画面にしたがって進めば良いので、ここでは、 IE7をインストールしたくない IE7をインストールしたけれどもIE6に戻したい という方のために、IE7の自動更新を回避する方法を簡単にまとめました。*1 また、IE6とIE7を共存する方法についても併せて掲載しています。 １．IE7をインストールをしたくない場合 IE7が自動更新が開始すると「更新をインストールする方法を指定してください」というウィンドウが開きますので、 高速インストール カスタムインストール のいずれかを選択して、次の説明 「高速インストール」を選択して「インストール」をクリックした場合 → １．１項へ 「カスタムインストール」を選択して「インストール」をクリックした場合 → １．２項へ にそれぞれ進んでください。 どち
WordPress で「続きを読む」の折りたたみ Web2.0
WordPress で追記文章を書いた時、「続きを読む」のリンクをクリックすると、スライドダウンで本文下に続きを表示するカスタマイズをご紹介します。 １．特徴 JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「Read more（続きを読む）」のリンクをクリックすると追記文章をスライドダウンで表示します。 JavaScript が無効の場合は記事ページにジャンプします。 「Hide more（続きを隠す）」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。 スクリプタキュラスのライブラリを編集せずに、折りたたみ速度の変更が可能です。 ２．サンプル 以下にサンプルを作りましたので、動作をお試しください。折りたたみ速度は0.5秒に設定しています。 追記文章の折りたたみ 2.0 サンプル ３．Word
小粋空間: RSS フィードにスタイルシート（CSS）を適用する
ブログで配信する RSS/Atom フィード（index.xml や atom.xml）にスタイルシートを適用する方法です。 ブログを始めてちょっと経った頃、このテクニックについての記事を見たことはあったのですが、特にエントリーしていませんでした。今回ご質問を頂きましたので、このエントリーで紹介致します。 １．概要 RSSリーダーが普及した現在、RSS/Atom フィードのリンクをクリックして驚く人は少なくなったのかもしれませんが、ブログ（Movable Type）を始めた頃、ページ右下に表示されている「Syndicate this site」の index.rdf のリンクをクリックすると XML フォーマットの文書が表示され（あるいはダウンロードのダイアログが表示され）、「これは一体何だろう？」と不思議に思ったものです（下）。 このリンクは RSSリーダ／アグリゲータ等が認識するための
CSS のフォントサイズ指定が table に反映されない問題
CSS で px 指定のフォントサイズ等を設定している場合、IE.5.5/IE6.0 ではその子要素として記述された table（th/td）にフォントサイズが反映されないという問題があります。 この不具合を回避するには2通りの方法があります。 １．ページ先頭のXML宣言を削除する ひとつめの方法は、テンプレート1行目にあるXML宣言 <?xml version="1.0" encoding="utf-8"?> を削除します。 XML宣言が記述されているとブラウザが「後方互換モード」として動作するため、これを削除して「標準準拠モード」として動作するようにします（「後方互換モード」と「標準準拠モード」については後述）。 ２．th 要素、td 要素に直接プロパティを設定する 後方互換モードのままでも、例えば th, td { font-size: 10px; } と設定することで、プロパティの
ブログツール比較（Movable Type / Serene Bach / WordPress）
これまでに使ってみた、Movable Type / Serene Bach / WordPress の比較を行ってみました。評価項目は色々あると思いますがかなり主観的です。その分評価自体に主観的な要素はできるだけ含まないようにしています。 ここでは 3 種類しか取り上げていませんが、どれを利用すれば良いか悩んでいる方の参考になれば幸いです。 Movable Type 以外のツールは実際に運用していないため、実験サイトやウェブの情報をもとにしています。認識誤り等ありましたらご指摘ください。 ◎：対応（特に良い）／○：対応／△：一部対応／×：未対応／－：なし 評価項目Movable TypeSerene BachWordPress データベースBerkeleyDB MySQL PostgreSQL SQLite－MySQL ページ（アーカイブ）の種類◎○○ テーマ数未調査 テーマ切替○ *1◎
小粋空間: IE7 の CSS ハック
「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する（=他のブラウザと表示を合わせる）場合、該当のセレクタの前に *:first-child+html を付与します。例えば、IDセレクタ #banner に適用させる場合、 *:first-child+html #banner { ： [IE7用のスタイルを記述] ： } となります。 なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します（下記）。この順番を間違えると期待する表示にならないのでご注意ください。 #banner { ： [IE7以外のスタイルを記述] ： } *:first-child+html #banner { ： [IE7
小粋空間: Internet Explorer 6 と Internet Explorer 7 を共存させる
はてなブックマーク経由で「IE6 と IE7 の共存はできませんか？」という類の質問をいくつか頂きまして、ネットを検索してみたところ、簡単に共存できる方法が書かれたサイト（下記）をみつけましたので、本エントリーにて IE6 と IE7 を共存する方法をご紹介します。 Tredosoft：Internet Explorer 7 running side by side with IE6. (standalone) 「共存」というのはやや誇張した表現ですが、IE7 Standalone 版を本来の IE のインストールフォルダとは異なるフォルダにインストールするというものです。またインストーラを利用するので簡単にインストールできます。アンインストールも可能です。当然ながら対応 OS は Windows XPのみです。 上記のページには2つの方法が紹介されていて、このエントリーでは「インストーラ
小粋空間: Firefox 1.5 と Firefox 2.0 を共存させる
Firefox 2.0 がリリースされまして、当サイトを Firefox で閲覧されている方の約 50% がすでに 2.0 をお使いのようです。 私もリリースと同時に Firefox 2 をインストールしまして、直感的ですが閲覧機能に限っては（というか他は深く試してません）1.5 よりかなりいい感じです。 ただし拡張機能の差分や、CSSの表示の違いも若干あるようで、個人的には 1.5 と併用したいと思いました。ということで、ここでは Firefox 1.5 と Firefox 2 をひとつのPCで共存させる方法をご紹介します。 今後のバージョンアップでも同様の方法で共存させることができるかもしれません。 参考サイトは下記です。ありがとうございました。 Firefox 1.5と2.0を共存させる方法 Firefox 2.0 RC 1とFirefox 1.5を共存させる方法 なお、Firefo
ドラッグ＆ドロップできるサイドメニューの折りたたみ（その1：基本設定）
「Docking boxes」という、JavaScript + CSS でサイドメニューの折りたたみとドラッグ＆ドロップを実現したスクリプトの紹介です。WordPress をお使いの方は管理画面で利用されているのでご存知の方も多いのではないかと思います。 本記事では一般的な設定方法を紹介し、「その2：ブログへの適用」で Movable Type 等への設置方法について説明します。 配布元にサンプルがありますのでお試しください。 １．スクリプトのダウンロード Docking boxes(dbx) のページの「Get the Script」からアーカイブをダウンロードします。アーカイブを解凍した中から下記のファイルのみを使用します。 dbx.css（または dbx-allrules.css） dbx.js dbx-key.js 他のファイルおよび画像はサンプルのためのものです。全てをアップロー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
