はてなブックマーク

前回に引き続きwordpressネタです。 WPをインストールする際に/wp/フォルダを作り、そこに展開していましたが、 ルートパスで開きたいとか、/blog/hoge/で開きたいとかあると思います。 または、階層が同じでもディレクトリ名がwpのままだと URLは当然、http://samplehogehoge.com/wp/ となり、なんだかイマイチ・・ wp→blogとすれば解決なのですが、WPはWPと分かる構造のほうがいいです。 0．まずは、パーマリンクの設定 記事のURLをどのように吐き出すか設定します。 このとき、自動で作られる.htaccessが後で必要になります。 （/wp/直下に作られます。） 設定＞パーマリンク設定 1．管理画面の設定 設定＞一般　の WordPress のアドレス (URL) と サイトのアドレス (URL) を変更します。 例： WordPress の

epubを勉強している過程でaudio要素を使う機会があったので、試してみたところ「楽」の一言につきましたので、ネタ的には今さら的な感じがしますが備忘録を兼ね紹介しようと思います。 動画や音楽ファイルをWeb上で扱う場合は、FlashなりMediaPlayerなりの準備をする必要があるのですが、HTML５ではファイルをaudio要素（もしくはvideo要素）で指定するだけ。超かんたん。 <audio src="hoge/hoge.mp3" autoplay="" controls="" loop=""></audio> autoplay属性⇒ autoplay  もしくは autoplay=”” で自動再生を設定 controls属性⇒ controls もしくは controls=”” で制御用のプレイヤーを表示 loop属性⇒ loop もしくは loop=”” でループ再生を設定 （

WP3.2にバージョンアップしてから管理画面がリニューアルされてます。 ちょっとびっくりｗ メニューとコンテンツの完全2分割になってます。 それでは本題。 今回は、テーマのfuction.phpに書いたいろんなソースを忘れないようにメモエントリーします。 余計なヘッダ要素を消す。 <?php remove_action( 'wp_head', 'feed_links_extra', 3 ); remove_action( 'wp_head', 'feed_links', 2 ); remove_action( 'wp_head', 'rsd_link' ); remove_action( 'wp_head', 'wlwmanifest_link' ); remove_action( 'wp_head', 'index_rel_link' ); remove_action( 'wp_head

今回は、Photoshopの便利機能についてご紹介します。 使い始めの方は覚えておくと何か素敵なことがあるかもないかも。 「超カンタン!!オブジェクトを一瞬でスライスする方法」 1. スライスしたいオブジェクトを選択 （それぞれ1個ずつのスライスになってしまいますが；）複数選択可。 2. メニューから、レイヤー＞レイヤーに基づく新規スライス じゃん。 以上!!ではなく、 いちいちメニュー開くのもかったるいし全然一瞬じゃないですよねー なので、ショートカットを登録しておきます。 「オリジナルショートカットを登録する」 1. メニューから、編集＞キーボードショートカット 2. レイヤーグループの中にレイヤーに基づく新規スライスのコマンドがあるので、そこに好きなショートカットを登録 ショートカットキーを実際に押せば、登録できます。 んで、他のキーと被っている場合は注意書きが出るので、他の候補を試

トグル処理はON／OFF交互に入れ替わるような処理のことです。 jQueryの「toggle()　：表示／非表示」を使用すればすごく簡単に実装できます。 例えば #buttonの要素をクリックするたびに #textの要素を表示／非表示させたい場合。 <p id="button">これは#buttonの内容です。</p>　←ここをクリック <p id="text">これは#textの内容です。</p>　←これを表示／非表示させたい 上記のHTMLを用意したら、 「jQuery」と「下記の内容を入力したjsファイル」を読み込むだけで完了です。 $(function(){ $("#button").click(function(){ $("#text").toggle(); }); }); たったこれだけ。 以下がサンプルです。 これは#buttonの内容です。　←ここをクリック これは#tex

こんばんわ、yasuiです。 今回は初めてまとめネタ以外で記事を書こうと思います。 最近流行のfacebookのシェアについてです。 躓いたことがいくつかあったので、原因と解決方法をまとめておきます。 １．facebookの「シェア」とは？ facebookのウォールに表示される、リンクのことです。Twitterで言うところのつぶやきでのようなものです。 Twitterであればタイトル、URLしかつぶやけませんが、facebookのシェアでは画像とタイトル、説明文、URLをシェアすることができます。 ２．facebookのシェアに必要なこと facebookのシェアはとってもカンタンです。 まずやることの確認。 シェアのリンクを張る OGPを設定する これだけです。とってもカンタンですね。 それではまずは基礎的なところから…。 ３．シェアのリンクを張る <a href="http://ww

本日は「CSS3　PIE」についてです。 企業サイトでも、サイトマップなどでは特に CSS3で角丸にしてたりするのをみかけるので 重い腰をあげてそろそろCSS3を使用していこうと思い、 IE（6～8）にもCSS3の角丸やグラデーションを適用してくれる「CSS3　PIE」を使用してみました。 使用するには、 まず下記より「PIE.htc」をダウンロードし所定の位置に保存。 »CSS3 PIE 後はCSSに 「behavior: url(/パス/PIE.htc); 」 と追加するだけです。 ※ 読み込まなかった経験はないですが、http://～始まる絶対パスを記述しても反応しないこともあるそうです。 div{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; behavior: url(/PI

去る2011年6月18日、HTML5-WEST.jpの村岡正和氏が主催されている「第7回HTML5読書会」に参加してきました。第1回に参加してから実に6回ぶり。羽田野太巳氏の「徹底解説HTML5」を読み進める会です。色々と興味深い内容がありましたが、figure要素からの話の流れで、altコンテンツ属性（以下alt属性）について重要な議論がありました。今後のマークアップの考え方にも重要な意味があると思い、読書会と本の内容を踏まえつつ、独自に復習してみました。 ※alt属性を指定すると、画像がリンク切れなどで表示されない場合は代替テキストが表示されます。また、スクリーンリーダーはaltタグの文章を読み上げます。 以下のような画面のコーディングを考えてみましょう。 これまでのコーディング alt属性はHTML4では、画像の代替テキストとして使用されます。なので「ラベンダー畑の画像」などの文章を

IllustratorからPSD（Photoshop）ファイルの書き出しに関して 備忘録を兼ね紹介しようと思います。 プレーンテキストの部分 イラストレーターではMSゴシックにラスタライズをかけてプレーンテキスト部分を再現しますがラスタライズをかけたまま書き出してしまうと画像になってしまってテキスト編集できなくなるのでラスタライズを解除して書き出す。 そして、書き出した後にフォトショップでプレーンテキスト部分をまとめて選択してアンチエイリアスを「なし」にする。 テキストの部分 テキストの部分はPSDに変換した時点で、アンチェリアスが「シャープ」に設定されて、イラレ上で見るよりも細く表示されてしまうので、細さが気になるテキスト部分はアンチェリアスを「強く」に設定する。（気にならない場合はそのままにしてもいい） スライス設定を意識してレイヤーごとに分ける バナー、タイトル画、イメージ画、ボタン

こんばんは。blogがまとめネタばかりで更新されていくyasuiです。 でもまだ書きたいまとめネタがあるので、当分続きそうです。今回はphpのframeworkのまとめです。 お恥ずかしながら今までまともにframeworkを使っていませんでした。最近重い腰を上げて勉強しなければーと思い始めたので、 まずはどんなframeworkがあるか調べてまとめておきます。 MVC構造とは？ frameworkを調べているとよく目にする単語です。frameworkのまとめの前にこちらから。 MVC構造とは、ソフトウェアの設計モデルの一つで、処理の中核を担う「Model」、表示・出力を司る「View」、入力を受け取ってその内容に応じてViewとModelを制御する「Controller」の3要素の組み合わせでシステムを実装する方式です。 メインの処理はModelに実装し、Modelは画面出力などは行なわ

先日弾丸グアム社員旅行から無事に帰国してきたばかりの山田です。 2011年4月3日（日）に参加してきた関西のWEBクリエイターが結集した素晴らしいチャリティイベント「Untitled!!!!!!!!」で紹介されていたとっても作業効率化を図れそうな目からうろこのFireworksの機能拡張について書きたいと思います。 色々気になる拡張パネルの中で特に気になったものを以下にまとめてみました。 これを知ってると知らないとではずいぶん作業効率に差がでそうですね。 Placeholder 数値入りアタリ画像を作成できる拡張パネル Objfect グループ化したオブジェクトをグループしたまま中の１つを選択できる拡張パネル SequenceNumSlice スライスやオブジェクトをクリックするたびに連番をふる拡張パネル Guide Panel 画面サイズのガイドを自動的に作ってくれる拡張パネル Geom

CMSのインストールってサーバごとに癖があってなかなかうまくできないことが多いですよね。 今回は自分の備忘録も兼ねて、CPIのサーバにインストールする場合の手順・注意点をまとめてみます!! 長いです!! STEP1　インストールしよう 1.最新版のwordpress（以下WP）をダウンロードし、解凍 http://ja.wordpress.org/ 2.FTPでアップロード ルートディレクトリに、wordpressフォルダをまるっとアップします。（※） （個人的にフォルダ名を「wp」とするのが好きです。http://samplehogehoge.com/wp/となるように） ※注意 パーミッション（属性）の設定は以下のとおりにします。 フォルダ･･･755 PHPファイル･･･644 その他のファイルはデフォルトでOK。 アップロード時に設定したパーミッションに自動変換する方法はこちらを参

こんにちわ、中山です。 今回は、私がよく使っているPhotoshopのショートカットをご紹介します。 選択範囲をコピーする際[Ctrl]＋[C]でコピーすると、レイヤーパレットで選択中のレイヤーの内容しかコピーされず「あれっ」となったことはありませんか？ カンバスで見えているままの画像をコピーしたいときは[Ctrl]＋[Shift]＋[C]でコピーすると、 表示中のレイヤーが統合された内容がコピーできます。 私はこのショートカットを知らなかった頃はいちいちレイヤーを統合してからコピーしてレイヤーを統合を取り消して・・・という面倒なことをしていました・・・ <このショートカットの使用シーンは・・・> フォトショで作ったページデザインの中から、わざわざスライスを切るほどでもないパーツを切り出したいときなどに。 ・選択範囲ツールで選択し、 ・[Ctrl]＋[Shift]＋[C]でコピー、 ・[C

こんばんは！ハッピーバレンタイン！！ の今日は、三宮、吹雪いてました。寒い・・・ 今回は前回の続きで、Zen codingのデフォルトのインデントを消す方法を説明します。 ドアズは、基本的にノーインデントという方針上このデフォルトの設定が邪魔なのです。 Zen codingはDWにインストール済みですね？ 初めて使うという方は、こちらの記事をどうぞ。 まずは、Zen codingの設定類が入っているフォルダを開きます。 Windows7の場合はここ↓ C:\Users\コンピュータ名\AppData\Roaming\Adobe\Dreamweaver 9\Configuration\Commands\ZenCoding その他OSの方は、とりあえずAdobeのフォルダ＞DWのフォルダを探し当ててください（人任せ） その中から、zen_editor.jsというファイルを開きます。 この関数の

こんばんは 今回はたまには使うことがあるかもしれない？？twitter OAuth認証について書きます。 twitter側の手順 twitterアカウント作成します。 アプリを登録　　https://twitter.com/apps Consumer key :  　例99kmIfzxxxxxxxxxxxx Consumer secret:　例f1q0l7OAIxMD4xxxxxxxxxxxxxxxxxxxxx を取得します。 PHPライブラリ ↓はtwitter OAuth認証を簡単に設置できるPHPライブラリです。 abraham-twitteroauth PHPライブラリ側の手順 config.phpに「Consumer key」「Consumer secret」「OAUTH_CALLBACK」を記入 example index.php内に/* Some example calls

今回はネガティブマージンの便利な使い方について紹介します。 ※ネガティブマージンとは、CSSで、マイナス値が与えられたmarginプロパティのことを言います。 例1）3カラムのボックスを均等に並べる HTML <div id="container"> <div id="container-inner"> <div> カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1 </div> <div> カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム

こんばんは、fmです。 今回は、気になっているjavascriptのライブラリについて書きます。 Processing.js ビジュアルデザインの為のプログラミング言語「processing」がいつのまにかJSに対応していました。 processing.jsを使うとJavaScriptのみで図形描画、画像処理やアニメーションを作成することができます。 趣味でやってるフィジカルコンピューティングでも使えるので、仕事でも使えるといいなーと思って注目してます。 ↓その他の気になる javascript フレームワーク、ライブラリ　まとめ↓ アニメーションや様々な効果を加える事ができます。 Animator.js Burst Engine Canvas 3D Facebook Animation Library $fx() Glimmer GX jsAnim JSTweener moo.fx Pi

はじめまして。5月よりWEBデザイナーアシスタントとして入社致しました山田です。 今日はお仕事で活用したWebサイトやブログにつぶやきを表示する【twitter ウィジェット】について書いていこうと思います。 【1 】まずはWebサイトにアクセス Twitterにログインしている状態で、ウィジェットを配布しているページへ移動。 Twitter / ウィジェット ↑ここから各種設定を行いウィジェットを作成。 MySpaceやFacebookに表示するためのウィジェットも紹介されていますが、 ここでは汎用的に使える「自分のサイト」をクリックします。 【2 】プロフィールウィジェットをクリック。 【3 】プロフィールウィジェットをカスタマイズする。 ここでウィジェットの設定を行います。 （1 ）Twitterユーザー名を入力 ここでは、前から気になってはいるけどなかなか勇気をだしてお店に入ること

こんばんは。 さて、今回はDreamWeaverについてのネタです。 DWのライブラリー機能を使う中でリンク先を指定するときに/（スラッシュ）で終わる書き方（index.htmlを省略）をすると ライブラリを更新したときに、埋め込み後のリンクパスの/（スラッシュ）が消滅する現象が発生します。 こういうことです。↓ 【hoge.lbi】 <a href=”hoge/honya/”>hogeのページへ</a> 【xxx.html】（ライブラリを埋め込んだページ） <a href=”hoge/honya”>hogeのページへ</a> これを回避するには リンクパスの最後の/（スラッシュ）を￥（ほんとは半角）に変えてみてください。 すると、￥が/（スラッシュ）に変換されるので、正常なリンクパスとなります。 なんでこんな仕様になってるんでしょうかねぇ。 以上おはぎさんからでした。 （Mさん、ネタ奪取

nicholことデザイナーの勝田です。 デザインと構築が主な仕事で、このブログの作者です。 Wordpressの構築は素人なので、のめりこんで作ってたら、いつのまにかたかみーに初投稿を奪われていました。なんと。。 それはそうと、このブログのサイドに社長andチーフディレクターのブログがアーカイブされているのですが、ここでちょっとハマった問題について書きたいと思います。 RSSをアーカイブさせる方法は、大きく分けて 1.プラグインを使う 2.直接phpを書く があると思うんですが、「余計なプラグインを入れるな」というチーフディレクターからの命令により今回は後者の方法を選びました。 phpはまったくわからないため、ググってソースを探してたら、WebTecNoteさんで [WP]wordpressでRSSを取得して表示 という記事を発見。さっそくテンプレートに書き加えてみる。 これでRSS表示は

弊社（というか、ワタクシ）は日ごろの業務のほとんどがProgression 4 を使っての作業になっているのですが、 その中で最近のキーワードが、DoExecutor コマンドでチョー幸せコーディングです。 四の五の言わず、早速解説していきます。 Progression 4 の、WebConfig、および、BasicAppConfigを指定した場合として読んでください。 なお、この記事を読んだ後でも、そんなに幸せになれなかったとしても、当社では一切の責任を負いかねますのであしからず。 そもそも、ExecutorObjectってなによ？ Progression 3 でも、内部的には存在していた（と記憶してますが、曖昧です・・・）Executor系のインスタンスですが、バージョンが4になってから、表舞台に出てきました（アクセス制御子がpublicになった）。 で、ExecutorObjectが

本日、デュアルディスプレイデビューしました。おはぎです。 Mさんありがとうございました！ さて、今回もMTネタで。 「年別アーカイブのときに月ごとに区切って表示する」方法です。 参照元：エントリーの一覧表示で、月毎に見出しをつけたい <MTEntries limit="auto"> <MTEntriesHeader> <!-- thismonthに最新のエントリーの投稿月をセットします --> <MTSetVarBlock name="thismonth"><$MTEntryDate format="%m"$></MTSetVarBlock> <!-- 最初の見出し --> <h2><$MTGetVar name="thismonth"$>月</h2> </MTEntriesHeader> <!-- entrymonthにエントリーの投稿月をセットします --> <MTSetVar Blo

はじめまして。今年9月に入社しました、新人の【おはぎ】です。 隣のミツノブさんにしごかれながら日々頑張ってます。 疲労困憊で晩ごはんが作れません！私はとっても自炊がしたいのにっ！　　　　　・・・・えっ？ｗ さて、自慢の機器とか周辺機器にこだわりとかもあんまないので、ここでは仕事上で覚えたことを備忘録として書き込んでいこうかと思います。 サイトの最新情報とかでよくある、「日付・トピックス」というこの構成。 実はこの日付の部分に大きな罠がありました。 （日付をすべで半角英数にした場合）文字サイズを拡大すると、FireFoxで日付が折り返さず突き抜けていくんですね。どこまでも。 この件に関しては、珍しくIEのほうに軍配があがりました。 そもそも英語圏だと折り返さないほうが正しいのかもしれないんですが。IEはCSSでなんとかなるしそこは置いといて。 そこで、今回利用させていただいたのが、「word

こんにちは。 無料で使えるアクセス解析の代表格 Google Analyticsですが、 カスタムフィルタの設定で、さらに色々な情報が取得できるようになるとこをご存じですか？ 今日は Google Analytics の少し便利な使い方を説明しているサイトを紹介したいと思います。 ■Google Analyticsで検索順位を調べる方法 通常、どんなキーワードで検索されたかを調べることはできますが、 そのキーワードが検索結果一覧ページの何番目に表示されていたかまではわかりません。 このフィルタを設定することで、何番目に表示されていたキーワードなのか調べることができます。 http://susumukatachi.jp/archives/1125 ■Google Analyticsで参照元の完全なURLを取得する Google Analyticsではリファラー情報を 「http://dis.