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

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

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

今どきのHTMLメール事情

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress:グローバル変数を全て見る「$wp_query」

<pre><?php print_r($wp_query); ?></pre> Woredpressのカスタマイズで困ったらとりあえず「$wp_query」を表示させて、今取得できる変数を全部見るのが便利 2014年9月10日
goto_jp さんのアバター 773views

WordPress:「今開いているカテゴリ」のカテゴリIDを取得する

<?php $catID = get_query_var('cat'); ?> 上記でエントリーページでもアーカイブページでも、「今開いているカテゴリ」のカテゴリIDを取得できます。 WordPressにはほかに「get_the 2014年9月10日
goto_jp さんのアバター 1,697views

リスト(<li>)のマーカーにWebフォントを使う

画像を使わずリストマーカーを変更するサンプルです。 See the Pen list marker FontAwesome by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTML <li 2014年9月8日
goto_jp さんのアバター 157views

twitterで日本語のみ対象に検索する

英単語やURLで検索をかけると海外のツイートも多くヒットします。 日本語の情報のみに絞って検索したい時はキーワードに下記を加えます。 lang:ja 例えば日本語ツイートのみでaipoに関して検索したければ下記のようになります。 aipo 2014年9月8日
goto_jp さんのアバター 1,703views

jQuery:アコーディオンメニュー改訂版

See the Pen jquery accordion menu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. jQueryでアコーディオンメニューを作る 以前作った上記アコーディオンメニュ 2014年9月5日
goto_jp さんのアバター 1,510views

Sass:変数を別ファイルで管理しよう

下記のファイル構成を前提とします。 css └style.css sass ├_variables.scss └style.scss Sassは標準設定ではファイル名冒頭に「_」の付くファイルはコンパイルを行いません。 また、そうしたファイ 2014年9月4日