主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

GitHubで「gh-pages」ブランチを切ってページ公開

たまにGitHubっぽいURLで公開しているデモページとかがあって、どうやってるのかな、と思っていたのですが、どうやら、「gh-pages 」という名前でブランチを切って、数分待つだけでできるようです。 この画面の入力フォームのところに「gh-pages」と入力して…

デタッチド・イン・マイ・ヘッド状態

なるべくGit慣れしようとSourceTreeでいろいろやっていたときに、いまいちHEAD、とかmastarとか、ブランチを切るとか、チェックアウト、の意味をよくわかってなくて、それでもまぁ、一方向で作る分には知らなくても使えてたのですが。 ちょっと調子のってブ…

英語とJavaScriptとRebuild.fm

行きの電車で英語アプリのヒアリング、帰りの電車でJavaScriptの本を読む(今はjQuery)。というのがなんとか習慣化してきました。今まで両方ともやろうやろうと思っていてずっと3日坊主だったもの。 たとえ行き帰りの26分であっても、このまま1年ぐらい続…

語学学習のやり方について

今日、たまたま日本語、英語、中国語(勉強中)、を話せるという留学生の人と話す機会があって、最後に(この会の趣旨とは全然関係ないけど)「どうやって語学の勉強してるの?」という質問をした答えがなるほどっと思ったので、メモ。 まず、参考書とか本を…

ペーパープロトタイピングしたものを実際に動かせるアプリ「POP」と「Prott」

ペーパープロトタイピングしたものを実際に動かせるアプリ「POP」がすごい良さそう。 特徴のページがすごくアニメーションを使ってわかりやすいので、どういうアプリかは説明しませんが。 他にも有料のサービスでGoodpatchさんから「Prott」というのも出てて…

人が働く動機

最近、毎週水曜の23:25からやってる『オイコノミア』という、経済とかお金のことをわかりやすくおしえてくれるEテレの番組を見始めたのですが、先日の放送「イコノミア「“0円”のナゾ」(後編)」で、ちょっと興味深かったので書きます。 人が働く動機には「…

WindowsマシンでGitインストールから秘密鍵・公開鍵、GitHub、nodo.js&Gruntインストールまでの手こずりを体験してみた

リアルフロントエンド勉強会 vol.1にて、秘密鍵・公開鍵を作成するのにWindowsマシンの人が手こずってたことを書きましたが、実際、自分がWindowsマシンでやってみたらかなり手こずったので、メモしておきます。 WindowsでGitインストールする 参考:Windows…

リアルフロントエンド勉強会 vol.1

会社ではTortoiseSVNを使ってバージョン管理をしているので、今、業界で賑わっているGit話とかがピンとこない。それをクリアにしていくため、みんなで集まってやってみようということでこれまでLINEベースだったフロントエンド勉強会をリアルに開きました。…

はてなブログで見出しの横にはてブ数出す(でも個別ページにしか出せない)

はてなダイヤリーのときは出ていた見出しの横のはてブ数出したいなと思いました(そんなついてないけど)。以下のスクリプトを「デザイン」設定から「記事」の「記事上下のカスタマイズ 」の記事上に下記を挿入。<script type="text/javascript"> $(".entry-title a[href *= '{Permalink}']"</script>…

インターネットが無限に広がっている感覚

技術的なこととかいいつつ、ほぼ放置で、たまに備忘録程度にしか書いていなかったはてなブログですが、今日からはライクワーク*として、ざっくばらんにアウトプットしていこうと思います。最近は、自分が何をしたいのかとか、いろいろ考えることも多くて、…

Windows、OS Xの共通フォント

CSS

Arial Arial Black Comic Sans MS Courier Courier New Georgia Impact Times New Roman Trebuchet MS Verdana 引用元:CSSでのフォント指定について考える(2014年) - DTP Transit(Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント)

LINEスタンプ実は2つも作ってました

はてなブロガーさんが作ったLINEクリエイターズスタンプ×12種類を紹介するよ! かわいい! シュール! 押しまくりたい!? - 週刊はてなブログ はてなブログのLINEスタンプクリエイターさんを紹介 第2弾 おもしろいスタンプ、かわいいスタンプをどんどん押され…

PhotoshopCS5からCCになってつまづいたことメモ

PhotoshopCS5からCCになってつまづいたことメモを書いていきます。 パス選択ツールがレイヤー選択できない 左上の矢印の横の選択:のプルダウンで「アクティブなレイヤー」から「すべてのレイヤー」に変えると前みたいにどこからでもカスタムシェイプやパス…

Chromeはローカルでcookieを発行できない

jquery.cookie.jsでタブ的なやつのクッキーやってたんですが、Chromeはローカルでcookieを発行できないので注意です。コマンドでできるようになるみたいですが、めんどうくさいので、Safariとかでやりましょう。参考:jquery.cookie.jsが便利 | NeGiMeMo.net

JQueryで、外部サイトを背景に読み込む

背景に外部サイトを読み込みたいなぁ。っていうのを考えていて、Displaying source code with AjaxっていうJQueryプラグインを見つけました。ただ、これはリンクをクリックしたら読み込む、っていう感じで、僕がやりたかったのは、ずっと背景に読み込まれて…

WordPress3.0から新機能の、カスタム投稿タイプで、post.phpが真っ白になる現象

おひさしぶりです。ひさしぶりにWordPressをいじっていたら、タグの条件分岐がわからず;WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろという記事を参考にさしてもらってたんですが、下のほうで、WordPress 3…

WordPress 3.1にアップデート後、カテゴリとタグのリンク切れが発生

WordPress 3.1にアップデート後、カテゴリとタグのリンク切れが発生しました。大方、カテゴリ関係のプラグインをアップデートすることで解決するみたいですが、僕はMy Category Orderぐらいしかいれておらず、アップデートしても直りませんでした。幸いアッ…

Google Map API v2 を使って、ページに地図を表示する(マーカー付けて)

<script src="http://maps.google.co.jp/maps?file=api&hl=ja&v=2&key=取得したAPIキー" type="text/javascript"></script> <script type="text/javascript"> //

〜の中にinput要素を入れてしまう衝撃!

フォームのチェックボックスなんかで、チェックボックスの横の文字をクリックしただけでチェックが入ったりするのは、ユーザビリティを高める手段として当然の嗜みであるとおもうのですが。関連付けする先の入力フォームのidをfor属性で指定する方法と、次の…

CSSと画像で、気の利いた点線ボックスを作る

CSS

ボックスにドットのボーダーつけると、ブラウザによって微妙にドットの種類が変わります。知ってたけども、最近、改めて「おっ」と思ったのは、background:url("../images/bg_dot_white.gif") 0 0 #ボーダー色;という感じで、ボックスに白い斜線の背景をつけ…

WordPress 3.0 したら、タグの一覧ページがカテゴリーの一覧ページのようにならない

WordPress3.0にアップデートしても、大方、問題は何も起こらなかったのですが、タグの一覧ページだけ、それまでカテゴリーの一覧ページと同じように表示されていたのに、されなくなりました。こういうアップデートで問題が起こるのは、おそらく、パーマリン…

WordPressでquery_postsを使ったページ送りでNot Foundになる件

WordPressで、下記のように、query_postsを使って1記事あたりに表示するエントリー数を設定したページのページ送りで「次のページ」がNot Foundになる件ですが(ややこしくてすいません)。どうやら、下記のようなことが起こってるみたいです。たとえば、全…

フォーム内のテキストを枠内で縦方向に中心にする

フォーム内のテキストを枠内で縦方向に中心にするには、padding と line-height をうまく組み合わせないと、全部のブラウザで綺麗にそろわない。

WordPressの管理画面の表示が崩れる

WordPressを、あんまり有名じゃないレンタルサーバーとかにインストールしてみたら、管理画面のCSSが効いてないのかくずれました。ソースを見たら、load-styles.phpから読み込んでるらしいので、その辺を調べましたが、結局、わからず。ググったら、.htacces…

HTML5の新しいタグで、IE系のブラウザにCSSを適応させる

HTML5でコーディングすると、IE系はcssが効かないので放置してたんですけど、下記のjavascriptを読み込ましておけばcssが効くみたいです。document.createElement("section"); document.createElement("article"); document.createElement("aside"); documen…

CSSと、パラメータでFLASHを背景にする

最近、使いそうになったので、書いておきます。FLASHの上に画像をかぶせる方法です。SWFobject2.1でやる方法は、下記のようにパラメータを設定したらできました。<script type="text/javascript"> var params = { wmode: "transparent" }; var embed = { wmode: "transparent" }; swfobject.</script>…

WordPressで、カテゴリのリンク付き見出しと、リストを5件表示する

<h2></h2> <ul> <li><a href="<?php the_permalink(); ?>"></a></li> <li>記事はありません</li> …</ul>

WordPressで「下書きをプレビューする権限はありません。」が出たら

WordPressで、記事を書いて下書きプレビューを押しても、下書きをプレビューする権限はありません。と表示されて出ないときは、同じドメインで、いくつかWordPressを管理していて、IDやパスワードが同じだと、クッキーが残ったりして、WordPressがどのWordPr…

Windows版safariだけ、font-family: serif; でもセリフ書体にならない

CSS

font-family:Georgia,"MS 明朝","Hiragino Mincho Pro W3","ヒラギノ明朝 Pro W3",serif;font-family:Georgia,"MS 明朝","Hiragino Mincho Pro W3","ヒラギノ明朝 Pro W3",serif;MSが小文字やったりする。それでも、効いたり、効かなかったり。safariだ…

WordPressで、カテゴリベースを変更後、500エラーで表示されないとき

WordPressは(大概のCMSはそうですが)、システムファイルとは別のディレクトリで表示ができます。いろいろ制作後、表示URLをディレクトリの上位に変更してから、いろいろ.htaccessなどの設定をしても、カテゴリだけがなぜか、ずっと500エラーが出て表示され…

IE6とIE7でdisplay:inline-block;で並べたリストがうまく並ばない場合

IE6とIE7でdisplay:inline-block;で並べたリストがうまく並ばない場合は、IE 5 ~ 7 では置換要素はdisplay が inline で、hasLayout が true にすると、横に並びます。display: inline-block; /display: inline; /zoom: 1;(/はIE6とIE7のみハック)フロート…

slideViewerPro 1.0の導入するときの-+の送りが出なかった

jQuery slideViewer 1.1 via kwoutslideViewerPro 1.0っていう、上の画像のjQuery slideViewer 1.1を元にして作られたJsスライダーがサムネイルとか出ててきれいなので使ってみようと思ってやってたら、デモみたいに、サムネイルの横の-+が出なくて、スクロ…

_zoom: 1; と overflow: hidden; ってなに?!

最近、IE6とIE7で変な隙間とか余白が出たり、とりあえず、変なことが起こったら、_zoom: 1; overflow: hidden; このふたつを入れてみると、うまいこといくことが多い。特に、リスト要素をフロートさせたり、ネガティブマージンを使ってなんかするときなんか…

WordPressで、今までに書いた全記事を一覧にして表示させる

WordPressで、今までに書いた全記事を一覧にして表示させるには、個別ページとして、例えば「全記事一覧」というタイトルだけつけた記事を新規作成、公開して、indexテンプレートの適当なところに、以下の一文を加えると全文ダーっと表示できます。 <ul> </ul> 月で…

WordPressにdiggっぽい評価プラグイン「Vote It Up」を導入してみる

WordPressにdiggっぽい評価プラグイン「Vote It Up」を導入するとき、WordPressをインストールしたディレクトリとは別のディレクトリにホームページを設定(WordPressを/wordpress以下に置いて、/xyz以下で表示させてる場合とか)していると、CSSやJSのパス…

LightBox風ポップアップ「LightWindow」で同じドメインの下層ページを読み込む場合

僕が選んだわけではないですが、HTMLページをLightBox風にポップアップさせるのに、「LightWindow」というprototype.jsのライブラリを使ってみました。別ドメインのページなら、URLをそのまま書くだけでOKだったのに、同じドメインの下層ディレクトリからペ…

IE7、同じウィンドウズXPマシンなのに、文字サイズが大きいときは

IE7で、同じウィンドウズXPマシンなのに、なぜか一台のPCのIE7でだけ文字サイズが大きい(そのPCのFirefoxとかではちゃんと文字サイズ同じ)ときは、ブラウザの設定かと思いきや。CSSのフォントファミリー「MS Pゴシック」が「lr oSVbN」とかに文字化けし…

2009年度版 携帯サイトのコーディングまとめ

各キャリアがだいたい対応してきているというだけで、「XHTMLでコーディングしなければいけない」っていう理由がいまいちわからなかったんですが、いろいろ調べてみると、どうやら、CSSを使うためには、XHTMLでコーディングしないとダメで、携帯ではdocomoが…

IE6で絶対配置の要素が消えるバグ

▼ヘッダーはじまり(position: relative;) タイトル(float: left;) ディスクリプション(position: absolute;で、タイトルの上に持ってきてる) 検索窓(float: right;) グローバルメニュー(clear: both;) ▲ヘッダー他の人がコーディングしたやつで、…

ホームページに文字サイズの調整ボタンJavascript

ホームページに、文字の「大」「中」「小」みたいなボタンをつけて、文字サイズを変更できるようにしてあるのをけっこう見ますけど、僕はあんまり好きじゃなくて(そういうことをさせないようにあらかじめ作るという意味で)。でも、介護とか眼科とかのサイ…

ひさしぶりにsafariで見たら背景が表示されてなかった

CSS

ひさしぶりにsafariで見たら背景が表示されてなかったので、css見てみたけど、特に変なことはしてないので、まったくわからず、ちょっと悩んでよーく見たら @charset "utf-8";@の前に半角スペースがまぎれてました。Firefoxとかはそういうとこけっこうゆるい…

WordPressで、インデックスとアーカイヴ&検索結果で条件分岐する

WorePressのブログで、インデックスはタイトルや本文全部表示させて、アーカイヴ&検索結果は、タイトルと概要文だけにして表示件数も10件にする条件分岐。インデックスページ / 個別ページの表示内容 アーカイヴ&検索結果ページの表示内容WordPressは、テ…

IE6とIE7でリストをフロートさせたときにできる変な下の余白

IE6とIE7でリストの中にゴチャゴチャと詰め込んでそれをフロートさせて並べたときにできる下の余白は、よくあるパディングやマージンのあれやこれやではなく、clearfixを適用させると消えます。フロート+背景のブロック要素なら、clearfixを事前にかけてるの…

macでsafari4.0.xからFirefox3.5.xのブックマーク読み込む方法

アドオンとかいれすぎて、Firefoxから離れられないようになってしまいましたが、やっぱりそのぶん重いので、何かとクラッシュしてしまいます(たぶんPCが限界なのもある)。なので、普通にネットサーフィン程度なら、たぶん、safariの方が快適なんではないか…

jCarouselのエラーの原因はCSSにあった

jQueryでカルーセル表示させるjCarouselをカスタマイズしようと、とりあえずCSSを読み込まずに組み込んでみたらjCarousel: No width/height set for items. This will cause an infinite loop. Aborting... というエラーが出て動かなかったので、いろいろ探…

WordPressでサムネイル付き記事一覧を表示する。

WordPressでポートフォリオやフォトログ的なサイトを作りたいときは、やっぱりトップにサムネイルを並べてみたいというのがみんなの意見ではないでしょうか。WordPressでサムネイル付き記事一覧を表示したいときは、Post Thumbというプラグインを使うと良い…

Google AJAX Feed API を使ってRSSリストをページに表示させる。

MTとかワードプレスとかはそういうプラグインがありそうですが、普通の静的なページにRSSからの更新情報などを表示させたいときは、Google AJAX Feed APIというやつを使えば手っ取り早いみたいです。表示方法はいくつかあるみたいで、XMLとかでも吐き出せる…

IEでz-indexの解釈違うのはわかったけど。

普通にやっていて、こんなケースになることは稀だれとおもいますが、ブログシステムとか、プログラムでソースを吐き出してくるところでタグとかを触れない場合は、仕方なくCSSでなんとかユーザビリティを高めようと思うわけです。それで、ある画像と見出しリ…

iPhone向けにウェブページを最適化する。

CSS

せっかくiPhoneを買ったので、PCのウェブページを、CSSだけ振り分けてiPhone向けのページにしてみようと思ってやってたんですが。なんかスムーズにいかないです。<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-device-width: 481px)" /> </link>

Firefox3.0だけ背景が1pxズレるバグ?

CSS

先日、背景が1pxズレるということがあって、たしかIEで背景が1pxズレるというバグがあったような気がしたので、それかなぁ、と思ったんですが、Firefox3.0だけズレてるのでおかしいのなぁ、と思って調べてみると、bodyに対して背景をしくと、ウィンドウサイ…