小粋空間_カテゴリーリストにカスタムフィールドの画像を表示する
Movable Type検索結果画面のMTIncludeタグでファイルを読み込む方法を紹介します。 １．はじめに MTで再構築するファイルの拡張子を".php"にして、そのページの中で頻繁に更新される部分を、 <?php include('foo.html'); ?> で読み込むことで、ページ全体の再構築不要で情報を更新することができます。 ただ、検索結果ページはPerlのCGIで動作するため、PHPの方法を利用することができません。 ということで、検索結果画面のMTIncludeタグでファイルを読み込む方法を紹介します。 ２．検索結果画面のMTIncludeタグでファイルを読み込む １項のfoo.phpのパスを、仮に「/var/www/html/foo.html」とします。 このファイルを検索結果画面のMTIncludeタグで読み込むには、下記の手順が必要です。 まず、mt-config
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント
先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル（リンクは２項） 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。 １．はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま
Googleトレンドの使い方
Googleトレンドが、Insights for SearchとGoogleトレンドの統合により、2012年9月にリニューアルされました。 Googleトレンド ということで、基本的な使い方も含めて各機能について紹介します。 リニューアルに関する参考記事： Insights into what the world is searching for -- the new Google Trends Insights for SearchとGoogleトレンドの統合 １．使い方 Google検索と同様、トレンドを調べたいキーワードをフォームに入力します。 新しい検索結果画面は次のようになっています。グラフ類はHTML5ベースのものに変更されているようです。 グラフのA～Gはニュースのヘッドラインで、点線は今後の予測です。それぞれチェックボックスで表示・非表示を切り替えられます。 A～Gの部分を
jQuery.ajax()のまとめ
jQuery.ajax()について逆引きリファレンスっぽくまとめてみました。 まとめた理由は、ネットで「jQuery.ajax」や「jQuery.ajax サンプル」などで調べても、いい感じの内容がなかなかヒットしないことと、よくヒットするサイトの情報が古かったりする（1.4で止まっているとか）ためです。 ということで、2012年10月現在2014年10月現在の「jQuery.ajax()」などをざっと調べて作ってみました。 初心者向けの内容です。すべてのオプションは網羅できていません。とりあえずサンプルコードがほしい方は１５項をご覧ください。 若番から必要と思われるものを順番に並べているつもりですが、後半は適当です。また、各項のサンプルはなんとなく積み上げていく感じにしています。 調べている間にも3つくらい新しい発見（といっても古い情報ですが…）があり、jQueryが日々進化していること
CSS拡張メタ言語「LESS」の使い方
CSSを効率的に書くための拡張メタ言語「LESS」の使い方を紹介します。 LESS １．「LESS」でできること 簡単な例として、次のように変数「@xxx」を使って値を定義することができます。 @radius: 10px; @bg-color: #fff; @padding: 10px; .foo { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .bar { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-ra
JavaScriptの文字列置換とjQueryのDOM要素置換のまとめ
JavaScriptの文字列置換とjQueryのDOM要素置換について、まとめて紹介します。 特にJavaScriptの文字列置換はいつもやり方を忘れてしまうので、このエントリーに保存しておきます。 １．replace()による文字列置換 基本的な文字列置換は、JavaScriptのreplace()メソッドを利用します。 var text = "foofoo"; var result = text.replace('foo', 'bar'); 実行結果（resultの内容） barfoo ２．replace()の正規表現による置換 replace()メソッドの第1パラメータに正規表現を指定すれば、さらに強力な文字列置換が行えます。 var text = "foofoo"; var result = text.replace(/foo/g, 'bar'); 実行結果（resultの内容）
WordPress カスタムメニューの使い方（その1：基本）
WordPressのカスタムメニューの使い方について解説します。 カスタムメニュー機能で作ったメニュー 今回はTwentyElevenテーマを使った、管理画面でのカスタムメニューの作成方法について解説します。functions.phpの設定が必要なカスタマイズなどについては別エントリーで紹介したいと思います。 WordPressのバージョンは3.3.1を使っています。 １．カスタムメニューとは カスタムメニューとは文字通り、独自のメニューをカスタマイズする機能です。 カスタムメニューを利用すれば、固定ページ・カテゴリー・投稿・タグのリンクやカスタムリンク（管理画面上で作ったリンク）などを表示させることができます。またそれぞれのリンクを1つのメニューに混在表示させることも可能です。メニューの順序や階層表示も自由にカスタマイズ可能です。 ２．メニューの作成 まず、ページに表示するカスタムメニュ
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
FirefoxやChromeでブラウザのウインドウサイズを変更するブックマークレット
小ネタです。ブラウザのウインドウサイズを変えるブックマークレットを紹介します。ビギナー向けにブックマークレットについても簡単に解説しています。 １．ブックマークレットとは 「ブックマークレット」とは、JavaScriptで記述したちょっとしたプログラムのことを指し、ブラウザのブックマークやブックマークツールバーに登録して利用することからこの名称となったようです。 登録したブックマークをクリックすることでブックマークレットが機能します（一部Wikipediaより引用）。 Wikipedia - ブックマークレット ２．ウインドウサイズを変更するブックマークレット 以下のリンク（ブックマークレット）を左クリックしてブックマークツールバーにドラッグするか、右クリックして「お気に入り」や「ブックマーク」に追加します。 ①：1000 x 750 Chromeの場合は以下のブックマークレットを使用して
Facebookでよく使われるようになったインラインフレーム（iframe）の注意事項
これまでウェブサイトの制作であまり使ったことがなかったインラインフレーム（iframe）ですが、Facebookが登場してからiframeタブやソーシャルプラグインなどで利用するシーンが増えてきました。 ということで、インラインフレームについての注意事項をまとめてみました。 １．親フレームでインラインフレームのCSSは定義できない 「Facebookのコメントボックスを黒背景のブログで使えるようにする」でも書きましたが、親フレームで定義したCSSはインラインフレームに適用されません。 サンプル１ サンプルの枠上部にある「foo」という文字と枠内（インラインフレーム）の「bar」という文字に対し、親フレームで同じスタイルを与えていますが、インラインフレームには反映されていないことが分かります。 CSSを反映できるのはiframe要素までです。 ２．リンクターゲットに気をつけよう iframe
Movable Type 5で「サーバーに Image::Magickか、Image::Magickの動作に必要な他のモジュールがインストールされていません。」となる事象について
Movable Type 5で「サーバーに Image::Magickか、Image::Magickの動作に必要な他のモジュールがインストールされていません。」となる事象の対処方法を紹介します。ご質問をいただきましたので本エントリーで情報展開致します。 注：ホテルで借りたPCで動作確認しており、再起動するとインストールした環境がすべてクリアされてしまうため、再起動しないと確認できない部分は割愛しています。よって本エントリーの内容では解消できない可能性もあります。予めご了承ください。 2010.09.13追記 関連記事で「ActivePerl 5.10でImageMagickが正常に動作しない不具合の対処」をエントリーしました。 １．問題点 Windows+XAMPP環境でMovable Type 5を利用するとImage::Magickが認識されず、mt-check.cgiを実行すると、「
CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
JavaScript エラーを解消する
Windows IE6.0 でページを表示した時、ステータスバー左下に画像のような黄色いアイコンと「ページでエラーが発生しました」という情報が表示されることがあります。これがいわゆる「JavaScript エラー」で JavaScript の実装に問題があることを示しています。 エラーが発生するのは体裁の良いものではなく、場合によってはページが正常に表示されない場合もありますので、できれば解消したいところです。 ということで、JavaScript エラーの解消方法をご紹介します。ただしエラーを解消するには JavaScript の修正を伴うケースが少なくないため、プログラミングが苦手な方については原因発見までとなります（後はスクリプト配布元に問い合わせましょう）。 2013/7/31追記：最新ブラウザを使った「JavaScriptエラーを表示・確認する方法のまとめ」をエントリーしました。
小粋空間: Movable Type を始める前に設定しておきたい 10 の項目
Movable Type を初めてご利用になる方のために、「これだけは最初に設定しておきたい」という 10 項目を挙げてみました。１項から８項は設定の流れを考えて順序づけをしました。最後の2項目の優先度は低いですが、「そういう機能もあります」という意味で掲載しています。 「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。 2008.10.01 「Movable Type 4 を始める前に設定しておきたい 10 の項目」を公開しました。 １．管理画面を「詳細モード」に切り替える Movable Type の管理画面は「基本モード」と「詳細モード」の2種類があり、デフォルトは「基本モード」になっています。この状態では基本設定とプラグインの一覧しか表示されないため、コメント・トラックバックの受信設定や後に述べるアーカイブページのパス等や拡張子が変更できません。 と
カスタムフィールドのラジオボタンを横並びにする
Movable Type 4.2x で、ラジオボタン形式のカスタムフィールドを横並びにするカスタマイズです。 Movable Type 4.1x では、ラジオボタンのカスタムフィールドは横並びにできたのですが、4.2x ではラジオボタン（多分他も）のマークアップが順不同リストに変更されたため、縦に並びます。 Movable Type 4.1x Movable Type 4.2x ラジオボタンを横並びにするには、mt-static/css/main.css を任意のエディタで開き、次のセレクタを最後に追加します。 .custom-field-radio-list li{ float:left; margin-right:5px; } 次のように表示されます。 Movable Type 4.2x（修正後）
FFFTPでサーバ内でのファイルの移動やコピーを一発で行なう方法
FFFTPを使って、サーバ内でのファイル（やディレクトリ）の移動やコピーを一発で行なう方法を紹介します。 また、同一サーバ内だけでなく、異なるサーバ間でも、一発で移動やコピーを行なうこともできます。 １．サーバ内でファイルやディレクトリを移動 この機能は FFFTP 1.94 から標準で装備されています。ここでは、test1 ディレクトリにある hoge.txt を、同じディレクトリ配下の foo ディレクトリに移動する例で示します。 ファイル hoge.txt を選択し、移動先のディレクトリ foo にドラッグします。 ダイアログが表示されるので、「はい」をクリックします。 これで hoge.txt が foo ディレクトリに移動しました。移動後は、移動先の foo ディレクトリの内容が表示されます。 ファイルだけでなく、ディレクトリも同じ方法で移動することができます。 移動ができるのは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
