goto_jp さんのアバター 161views

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

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

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

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

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

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

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,392views

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 さんのアバター 531views

今どきのHTMLメール事情

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

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

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

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

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

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

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

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 さんのアバター 287views

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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,114views

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

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

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

<?php $cat = get_the_category(); $parent_id = $cat[0]->category_parent; if (is_category(2)||$parent_id == 2) { //カ 2014年9月12日
goto_jp さんのアバター 294views

WordPress:確実なカテゴリ情報の取り方

<?php if(is_category()){ $cat = get_category(get_query_var('cat'),false); } elseif(is_single()) { $cat = get_the_cate 2014年9月12日
goto_jp さんのアバター 728views

WordPress:3列ずつのリストを出力する

■ ■ ■ ■ ■ ■ 上記のように、3つずつ並んだ不特定多数のリストをWordpressで出力する場合、下記のようにします。 <?php query_posts($query); if(have_posts()): $count = 2014年9月11日
goto_jp さんのアバター 726views

WordPress:投稿が無い場合の表示

<?php if(! have_posts()) { //投稿が無い場合の処理 echo '投稿がありません。'; } ?> 2014年9月11日