goto_jp さんのアバター 542views

JavaScript:onResizeでウィンドウ幅にフィットし続ける

まず下記関数を作ります。 function fitWindow($target) { var w = document.documentElement.clientWidth; var h = document.documentElemen 2014年10月22日
goto_jp さんのアバター 2,422views

JavaScript:親、子、兄弟要素を参照する

親要素 var parent = this.parentNode; <div class="oya"> ←このdiv要素が親になる <button onclick="">ボタン</button> ←ここが 2014年10月22日
goto_jp さんのアバター 333views

正規表現で置換しよう

色んなツールに置換機能はありますが、置換に正規表現が使えるケースも多々あります。 一定ルールで条件を指定して置換を行うことができます。 (.*) // 1文字以上何文字でもマッチする (.) // 1文字だけマッチする (..) // 2文 2014年10月21日
goto_jp さんのアバター 166views

Sass:ネストのやりすぎ注意

Sassのネスト構造は非常に便利ですが、慣れてくるとつい下記のように長くなることがあります。 .classname { p { } a { } ul { li { div { a { } } } } .class1 { div { p { 2014年10月20日
goto_jp さんのアバター 404views

JavaScript:クリックした要素の直下に、対象の要素を表示させる

簡易的な例ですが、クリックしたボタンのすぐ下にポップアップを開く時などに使う関数は、大体下記のようなパターンです。 function setBounds($this, $target) { var bounds = $this.getBou 2014年10月20日
goto_jp さんのアバター 170views

IE7でdisplay:inline-blockを表現する

.inline-block { display: inline-block; *display: inline; zoom: 1; } IE7ではinline-blockの値が存在しないため、スターハックとzoomを使う。 なおCompas 2014年10月20日
goto_jp さんのアバター 596views

CSS3:文字や画像を選択できなくする

ブラウザ上の文字をドラッグしたり、ブラウザ上をWクリックすると選択状態になりますが、「user-select」プロパティを使うことでその選択をできなくします。 -webkit-user-select: none; -moz-user-sel 2014年10月17日
goto_jp さんのアバター 96views

MovableType:記事作成画面が正常に開かなくなったら

つい先週WordPressでの似たようなこと書きましたが、全く作りの違うMovableTypeでも似たような記事作成画面でのトラブルがあったのでメモ。 問題 HTMLモードでインラインにJSを結構書き込んでいる記事を編集しようとしたところ、 2014年10月16日
goto_jp さんのアバター 1,512views

JavaScript:一つのリンクをPC用URLとスマホ用URLに切り分ける

PCで見た場合はPC用URL、スマホで見た場合はスマホ用URLに切り分けるというリンクを作ります。 <a href="http://www.example.com/pc.html" id="changeLink1">リンク< 2014年10月15日
goto_jp さんのアバター 175views

最近よく使うEmmet記法 2014年10月版

db → display: block; dn → display: none; dib → display: inline-block; bgc#fff → background-color: #ffffff; posa → positi 2014年10月14日
goto_jp さんのアバター 319views

文章構成に役立つnowrapとwbrタグの合わせ技

Webデザインにおいて、テキストは文中改行(<br>)せずに流し込み、ブロック幅での自然改行に委ねるのが美しいとされていますが、そのうえでも文章の区切りのいい位置で改行させたいケースはあると思います。 そこで役立つのか下記のよう 2014年10月10日
goto_jp さんのアバター 535views

今どきのHTMLメール事情

超久々にHTMLメールについて調べたところ、HTMLメールの作り方に変化は(残念ながら)ほぼないのですが、スマホユーザーはむしろHTMLメールで受け取ることが当たり前で、レスポンシブを前提とした作りがトレンドのようでした。 基本はテーブルレ 2014年10月10日
goto_jp さんのアバター 200views

WordPress:記事作成画面で画像投稿などJavaScriptが動かなくなったら

WordPressをアップグレードしたら、記事作成画面で画像投稿ほかJavaScriptで動いている機能が使えなくなりました。 こういう場合、十中八九プラグインが原因なので以下のような手順で調べましょう。 プラグインを全て止める 記事作成画 2014年10月9日
goto_jp さんのアバター 244views

WordPress:the_date()で日付が表示されない場合の対策

投稿ループ内などで the_date() を使うと、同じ日付の記事が連続した場合に日付が表示されないことがあります。 そんな場合は「the_time()」を使いましょう。 <?php the_time('Y/m/d'); ?> 2014年10月7日
goto_jp さんのアバター 179views

WordPress:管理者用ヘッダーが消えてしまったら…

WordPressのテーマファイルをいじっていたら、ログインしている時のみ表示される管理者用ヘッダーが消えてしまうことがありました。 原因は「wp_footer()」を消してしまったことでした。 <?php wp_footer(); 2014年10月7日
goto_jp さんのアバター 1,192views

WordPress:CSVから記事をインポートする

プラグイン「Really Simple CSV Importer」をインストール Really Simple CSV Importer こちらをWordpressへインストールし有効化してください。 CSVを整理 CSV一行目の項目名を下記 2014年10月3日
goto_jp さんのアバター 149views

クリッカブルマップ

すごい初歩的でオールドな手法なのですが、ごくたまにやる機会があると毎度忘れていて検索するので残しておこうと思います。 <img src="image.gif" usemap="#map1"> <map name="map_ 2014年10月2日
goto_jp さんのアバター 297views

WordPress:カテゴリーを投稿記事数順に表示する

<ul>  <?php wp_list_categories('orderby=count&order=desc&show_count=1'); ?> </ul> orderbyでcoun 2014年10月1日
goto_jp さんのアバター 164views

PHP:配列の任意項目のソート

前提として、下記内容の配列「$oden」があったとします。 Array ( [0] => Array ( [id] => 1 [name] => tamago [price] => 100 ) [1] => A 2014年9月30日
goto_jp さんのアバター 1,505views

Googleチャートの折れ線グラフを表示する

下記のような表をGoogleチャートで簡単に表示できます。 準備 head内で下記のようにAPIを読み込みます。 <script type="text/javascript" src="https://www.google.com/j 2014年9月26日
goto_jp さんのアバター 2,605views

Googleチャートの円グラフを表示する

Googleの提供しているチャートAPIで簡単に様々なグラフを作ることができます。 準備 head内で下記のようにAPIを読み込みます。 <script type="text/javascript" src="https://www. 2014年9月25日
goto_jp さんのアバター 4,433views

WordPress:タグクラウドではなくタグ一覧を出力する

タグ一覧を出すには「get_terms」関数を使います。 タグなのでつい「tag_~」関連の関数を探しがちですが、Wordpressは内部的にはタグは「term」と呼ばれています。 <ul> <?php $args = a 2014年9月25日
goto_jp さんのアバター 2,336views

WordPress:カテゴリ別のタグクラウドを出す方法

タグクラウドをそのまま設置すると、そのサイトで利用されているタグが全て表示されますが、特定カテゴリ以下で利用されているタグを表示する方法になります。 function.php へ記述 function my_category_tag_clo 2014年9月24日
goto_jp さんのアバター 7,612views

「bxSlider」で画像が一度に出てしまう際の対処

前回レスポンシブ対応のスライダーを生成する「bxSlider」を紹介しましたが、スマホなど回線や描画が遅い環境で開くと、JavaScriptでスライダー化される前にリストの画像が一気にボボンと出てしまい見た目に悪かったので、CSSレベルで対 2014年9月19日
goto_jp さんのアバター 1,758views

レスポンシブ&スワイプ操作に対応したスライダーjQueryプラグイン「bxSlider」

PCでは無限スライダー表示、スマホではスワイプ操作に対応したスライダーになってくれる「bxSlider」は、非常に簡単にサイトへ加えられます。 ファイルの読み込み <script src="//ajax.googleapis.com/ 2014年9月19日
goto_jp さんのアバター 1,494views

CSS:IE7でoverflow:hidden/scrollが無視されて突き抜けてしまうバグ

overflow:hidden/scroll内にposition:relative要素があると、そのようになります。 <div class="scroll"> <div class="box"></div> 2014年9月19日
goto_jp さんのアバター 1,591views

CSS3:サイズ不明でもどのような要素でも縦中央配置する

.class { position: relative; top: 50%;   -webkit-transform: translateY(-50%);   -ms-transform: translateY(-50%);   trans 2014年9月18日
goto_jp さんのアバター 205views

JavaScript:比較演算子「==」と「===」の違い

if(1 == "1") // trueを返す if(1 === "1") // falseを返す すごく初歩的なことですが見落として無駄に詰まっていたので自戒を込めて改めておさらい。 「==」は変数の形を見ない。 「===」は厳密に変数の 2014年9月17日
goto_jp さんのアバター 2,214views

CSS3:簡単に段組を作れる「columns」プロパティ

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ さしすせそさしすせそさしすせそさしす 2014年9月16日
goto_jp さんのアバター 313views

WordPress:特定のカテゴリ及びその子カテゴリのカスタム表示を行う

<?php $cat = get_the_category(); $parent_id = $cat[0]->category_parent; if (is_category(2)||$parent_id == 2) { //カ 2014年9月12日