## TL;DR

WordPress の functions.php に書いておくと捗ることをまとめておきます。

### 固定ページ判別。body に固定ページのスラッグ名を追加

body に固定ページのスラッグ名を追加。トップページは home のクラス名がつく。固定ページなどは guide about などのスラッグ名を取得しクラス名が付与される。

```php
function pagename_class($classes = ''){
  if (is_page()) {
    $page = get_post();//get_page()は廃止されたので使わない
    $classes[] = $page->post_name;//スラッグ名取得
  }
  return $classes;
}
add_filter('body_class', 'pagename_class');
```

呼び出し

```php
<body <?php body_class( $class ); ?>>
```

<a href="https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/body_class" target="_blank" rel="noopener noreferrer">テンプレートタグ/body class - WordPress Codex 日本語版</a>

<a href="http://terabenote.net/2079/" target="_blank" rel="noopener noreferrer">WordPress の body_class()にページスラッグの決定版 | terabenote.net</a>

### ブラウザ判別。body にブラウザ名付与

これをつけておくと、ブラウザごとにスタイル等を制御できるので便利。

```php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
    global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

    if($is_lynx) $classes[] = 'lynx';
    elseif($is_gecko) $classes[] = 'gecko';
    elseif($is_opera) $classes[] = 'opera';
    elseif($is_NS4) $classes[] = 'ns4';
    elseif($is_safari) $classes[] = 'safari';
    elseif($is_chrome) $classes[] = 'chrome';
    elseif($is_IE) $classes[] = 'ie';
    else $classes[] = 'unknown';

    if($is_iphone) $classes[] = 'iphone';
    return $classes;
}
```

<a href="http://www.nathanrice.net/blog/browser-detection-and-the-body_class-function/" target="_blank" rel="noopener noreferrer">Browser Detection and the body_class() Function</a>

### アップロードした画像を特定のサイズにリサイズする

```php
add_theme_support('post-thumbnails');
add_image_size( 'trimming_600_400', 600, 400, true );
```

呼び出し

```php
<?php the_post_thumbnail('trimming_600_400'); ?>
```

### admin バー 非表示

```php
add_filter('show_admin_bar', '__return_false');
```

### ページタイトルを自動出力

WordPress4.1 でタイトルタグが追加されましたが、以下のタグを functions.php に記述すると、現在非推奨の wp_title 関数を使わずにタイトルを出力することができます。

```php
add_theme_support( 'title-tag' );
```

セパレーターなど細かなカスタマイズ方法は以下に詳しく書かれてます。

<a href="http://glatchdesign.com/blog/web/wordpress/1070" target="_blank" rel="noopener noreferrer">WordPress4.4 以降で title タグをカスタマイズする方法 | Glatch（グラッチ） – 夫婦で活動するフリーランス Web 制作ユニット</a>

### JavaScript をフッターに移動

JavaScript は基本的に head で読み込まず、できるだけ body の下部で読み込むようにしたいので、function.php に以下のように記載。そうすると後から JavaScript の処理をさせるので体感的にユーザーが遅く感じにくくなります。パラメーターを true にすることで wp_footer()で読み込まれます。true で body 終了タグの前、false で head 前。

```php
// trueでbody終了タグの前、falseでhead前
function register_jquery(){
wp_enqueue_script(
'common-js',
get_template_directory_uri() . '/js/common.js',
array(),
NULL,
true
);
wp_enqueue_script( 'common-js' );
}
add_action('wp_enqueue_scripts', 'register_jquery');
```

### ウィジェット登録

```php
register_sidebar(array(
  'name'         => __('widget1'),
  'id'           => 'widget1',
  'before_widget'=> '',
  'after_widget' => '',
  'before_title' => '',
  'after_title'  => '',
));
```

呼び出し

```php
<?php dynamic_sidebar('widget1' ); ?>
```

### プラグイン・WordPress 自動更新

```php
//プラグインの自動更新を有効化
add_filter( 'auto_update_plugin', '__return_true' );
//テーマの自動更新を有効化
add_filter( 'auto_update_theme', '__return_true' );
//メジャーアップグレードの自動更新を有効化
add_filter( 'allow_major_auto_core_updates', '__return_true' );
//マイナーアップグレードの自動更新を有効化
add_filter( 'allow_minor_auto_core_updates', '__return_true' );
```

### 不要な読み込みを減らして軽くする

WordPress バージョン情報を記載しておく理由などないし、Windows 用の WordPress ツールも使わないので削除しておきます。

```php
// WordPressのバージョン情報は削除したほうがいい
remove_action('wp_head', 'wp_generator');
// ブログ投稿ツール用
remove_action('wp_head', 'rsd_link');
// Windows Live Writerは使わないので削除
remove_action('wp_head', 'wlwmanifest_link');
// Embed WPのブログカード。他サイトのアイキャッチ画像や抜粋自動埋め込み
remove_action('wp_head', 'rest_output_link_wp_head');
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_action('wp_head', 'wp_oembed_add_host_js');
// 管理画面絵文字削除
function disable_emoji()
{
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('admin_print_scripts', 'print_emoji_detection_script');
    remove_action('wp_print_styles', 'print_emoji_styles');
    remove_action('admin_print_styles', 'print_emoji_styles');
    remove_filter('the_content_feed', 'wp_staticize_emoji');
    remove_filter('comment_text_rss', 'wp_staticize_emoji');
    remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
}
add_action('init', 'disable_emoji');
```

### 概要（抜粋）の文字数調整

```php
function my_excerpt_length($length) {
    return 80;
}
add_filter('excerpt_length', 'my_excerpt_length');
```

### 文末の[…]を削除し、...にする

```php
function my_excerpt_more($more) {
    return '...';
}
add_filter('excerpt_more', 'my_excerpt_more');
```

### コメント欄のメール削除し、コールバック関数を追加

```php
// コメント ウェブサイトの入力欄を消す
add_filter('comment_form_default_fields', 'mytheme_remove_url');
function mytheme_remove_url($arg) {
$arg['url'] = '';
return $arg;
}

// コメント フォーム内のURLオートリンクを停止する
remove_filter('comment_text', 'make_clickable');

// コメント カスタマイズ コールバック関数
function mytheme_comment($comment, $args, $depth) {
    if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'div-comment';
    }
    ?>
    <<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
    <?php if ( 'div' != $args['style'] ) : ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
    <?php endif; ?>

        
        <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>">
            <?php
            /* translators: 1: date, 2: time */
            printf( __('%1$s at %2$s'), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)' ), '  ', '' );
            ?>
        </div>

        
        <div class="flex">
            <div class="comment-author vcard">
                <?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
            </div>
            <?php if ( $comment->comment_approved == '0' ) : ?>
                <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
                <br />
            <?php endif; ?>
            
            <div class="comment-content">
                <?php printf( __( '<cite class="fn">%s</cite>' ), get_comment_author_link() ); ?>
                <?php comment_text(); ?>
            </div>
        </div>

        
    <div class="reply">
        <?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
    </div>
    <?php if ( 'div' != $args['style'] ) : ?>
    </div>
    <?php endif; ?>
    <?php
    }
```

参考:<a href="https://debate.co.jp/901" target="_blank" rel="noopener noreferrer">WordPress コメント入力欄をカスタマイズしてウェブサイト(URL)やメールアドレスを簡単に消す方法 | debate</a>

以上、functions.php に書いておきたいことでした。

WordPressのfunctions.phpに書いておくと捗ること


## TL;DR

CSS だけで動く「ズームインとズームアウトをフェードしながら交互に繰り返す CSS スライダー」です。

### slider デモ

作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示しています。CSS でみたい人は「VIEW COMPILED」を押してください。

2019/01/29 追記：IE でカクつく場合は、以下を li に追加するか、@keyframes に width 幅を px で指定してください。

```css
transform: rotate(0.0001deg);
```

<iframe height='292' scrolling='no' title='css　slider アニメーション' src='//codepen.io/commte/embed/9cea425c37d39a2327fe28ee0c0b1d58/?height=292&theme-id=26727&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/commte/pen/9cea425c37d39a2327fe28ee0c0b1d58/'>css　slider アニメーション</a> by commte (<a href='https://codepen.io/commte'>@commte</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

参考にさせていただいたのは、<a href="https://peonyqueen.wordpress.com/2016/03/04/css_slider/" target="blank">css だけで作るスライダー – PeonyQueen</a>で作成されているスライダー。
上記のスライダーがとてもよく出来ていて CSS のアニメーションで時間差をつけてスライドを切り替え、フェードインを繰り返すようになっています。CSS なので読み込みや動作も早く扱いやすいです。

こちらを参考に、html の img 記述をなくし、フェードインとフェードアウトを繰り返すようにカスタマイズさせていただきました。
5 枚の画像を切替えるバージョンです。html の記述はこれだけ。

### 実装

html

```html
<div class="slider_css">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
```

SCSS

```css
@mixin bp {
  @media only screen and (max-width: 768px) {
    @content;
  }
}
.slider_css {
  height: 550px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      background-size: cover;
      width: 100%;
      height: 550px;
      position: absolute;
      top: 0;
      left: 0;
      animation-iteration-count: infinite;
      animation-duration: 40s;
      @for $value from 1 through 5 {
        &:nth-child(#{$value}) {
          background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal#{$value}.jpg');
          @if $value % 2 == 0 {
            //偶数
            animation-name: slider-zoomout;
          } @else {
            //奇数
            animation-name: slider-zoomin;
          }
          @if $value != 1 {
            //最初以外は透過
            opacity: 0;
          }
          animation-delay: #{($value * 8-11)}s; //-3からスタートして、8づつ加算する
        }
      }
      img {
        width: 130%;
      }
    }
  }

  @include bp {
    height: 400px;
    ul {
      li {
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
}
// 5~8秒の間だけ透過解除
@keyframes slider-zoomin {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes slider-zoomout {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
```

画像は CSS 背景に設定し、偶数と奇数の画像によって、ズームインとズームアウトのアニメーションを割り当てます。

ズームインだけ適用したい場合は、animation-name の箇所を、どちらも slider-zoomin にしてください。ズームアウトの場合は slider-zoomout ですね。

1 枚 8 秒(5 枚の画像 ×8 秒)で計算するので、アニメーション周期（animation-duration）は 40 秒で設定します。

1 枚目以外は透過させ、表示から開始させるので-3 秒からスタートし 8 秒づつ加算してアニメーション開始時間をずらします（animation-delay）。

| ◯ 枚目   | 1   | 2   | 3   | 4   | 5   | 6   |
| -------- | --- | --- | --- | --- | --- | --- |
| 開始時間 | -3  | 5   | 13  | 21  | 29  | 37  |

※1 枚目は-3 秒から開始し、2 枚目は 8 秒後の 5 秒から開始するという意味。

アニメーションは 40 秒間のうち 5~8 秒の間だけ透過解除したいので 12.5%（5×100/40=12.5）と 20%（8×100/40=20）に opacity:1 を設定。秒数を duration で割ります。

分かりにくいので表を作りました。以下の表だと、5 枚の時は 12.5~20%、4 枚の時は 15.63~25%に opacity:1 を指定すればよいということになります。

1 枚 8 秒で設定した時の計算表

| 枚数 | duration | 5 秒   | 8 秒   |
| ---- | -------- | ------ | ------ |
| 3    | 24s      | 20.83% | 33.33% |
| 4    | 32s      | 15.63% | 25.00% |
| 5    | 40s      | 12.50% | 20.00% |
| 6    | 48s      | 10.42% | 16.67% |

※アニメーション周期や画像枚数を変更する場合は、このあたりを再計算する必要が出てきますが、仕組みが分かれば比較的使いやすいのではないでしょうか。以上、軽量・高速・簡単記述の CSS スライダーでした。


CSSだけでOK！レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー


## TL;DR

知っておくと WordPress 構築が早くなる、ちょっと便利な WP-CLI コマンドをメモしておきます。

### WP-CLI について

WP-CLI とは、ターミナル上で WordPress に関する色々なことを操作できるツール。

<ul>
<li>WordPressの更新やバージョンアップ・テーマ・プラグインをコマンドから管理</li>
<li>スターターテーマがあるのでオリジナルテーマ開発に便利</li>
<li>管理画面で行う設定等がコマンド一発</li>
<li>固定・投稿ページ・コメント作成</li>
<li>インポート、エクスポート</li>
<li>などなど色々なことが短いコマンドで可能。</li>
</ul>

<a href="http://wp-cli.org/restful/" target="_blank" rel="noopener noreferrer">A more RESTful WP-CLI | WP-CLI</a>

### ローカルに wp-cli をインストール

ローカルの場合

```bash
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
```

確認と権限付与とパスを通す。

```bash
php wp-cli.phar --info
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp
```

### レンタルサーバに wp-cli をインストール

レンタルサーバに wp-cli をインストールする場合は、ssh コマンドで接続後、web ディレクトリに移動し以下のサイトに記述してあるシェルスクリプトをダウンロードさせていただき設定。以下はさくらレンタルサーバに WP-CLI をインストールする手順とスクリプト。

シェルスクリプト:<a href="https://www.tecking.org/4169" target="_blank" rel="noopener noreferrer">レンタルサーバに『WP-CLI』をサクっと入れるシェルスクリプト作ってみたよ – 鉄王</a>

フロー:<a href="http://studiodansyaku.com/web/4300" target="_blank" rel="noopener noreferrer">さくらのレンタルサーバーに wp-cli を使って WordPress をインストール – StudioDansyaku</a>

```bash

# スクリプト
wget --no-check-certificate https://raw.githubusercontent.com/tecking/wp-cli.setup.sh/master/wp-cli.setup.sh

# 権限付与、スクリプト実行、設定有効化
chmod +x wp-cli.setup.sh
./wp-cli.setup.sh
source ~/.cshrc
```

任意のディレクトリを作成し、WordPress 本体をダウンロードします。コマンドからデータベース設定・初期設定を行う場合は上記サイトをご覧ください。

```bash
# さくらレンタルサーバにWordPressをインストールする場合
wp core download --path=/home/ユーザー名/www/ディレクトリ名 --locale=ja

# /var/www/html(ドキュメントルート)にインストールする場合
wp core download --path=/var/www/html --locale=ja

# wp-config.php作成
wp core config --dbname=DB名 --dbuser=ユーザー名 --dbpass=パスワード オプション

# WordPressインストール
$ wp core install --url=サイトURL --title=サイト名 --admin_user=ユーザー名 --admin_password=パスワード --admin_email=メールアドレス
```

<a href="http://wp-cli.org/commands/core/" target="_blank" rel="noopener noreferrer">wp core | WP-CLI</a>

### よく使う wp-cli コマンド

空の固定ページを 500 個作成する

```bash
wp post generate --count=500 --post_type=page
```

WP-CLI バージョン確認、アップデート

```bash
wp cli version
wp cli check-update
wp cli update
```

プラグイン bogo を探す

```bash
wp plugin search bogo
```

結果。

```bash
% wp plugin search bogo
Success: Showing 10 of 14 plugins.
+-------------------------------------+-------------------------------------+--------+
| name | slug | rating |
+-------------------------------------+-------------------------------------+--------+
| Contact Form 7 | contact-form-7 | 90 |
| Bogo | bogo | 94 |
| Pricing Deals for WooCommerce | pricing-deals-for-woocommerce | 88 |
| WooCommerce Multiple Free Gift | woocommerce-multiple-free-gift | 88 |
| Wholesale Pricing for WooCommerce | wholesale-pricing-for-woocommerce | 100 |
| WC Role Based Price | woocommerce-role-based-price | 90 |
| PW WooCommerce BOGO | pw-woocommerce-bogo-free | 0 |
| WooCommerce Single Product Checkout | woocommerce-single-product-checkout | 100 |
| BogoXLib | bogoxlib | 0 |
| Bogo translate ACF | bogo-translate-acf | 100 |
+-------------------------------------+-------------------------------------+--------+
```

プラグイン contactform7 をインストール。区切りスペースは空けずハイフンをつけて指定。

```bash
# インストール
wp plugin install contact-form-7

# 有効化
wp plugin activate contact-form-7

# 無効化
wp plugin deactivate contact-form-7
```

プラグインのバージョンを確認

```bash
wp plugin status
wp plugin list
```

WordPress 日本語パッケージアップデート ※推奨

```bash
wp core download --locale=ja --force
```

<a href="http://qiita.com/miya0001/items/96a684e2f819f9d8b4a4" target="_blank" rel="noopener noreferrer">WP-CLI で WordPress を日本語パッケージと同じ構成にする - Qiita</a>

wp-config.php 作成

```bash
wp core download
wp core config --dbname=DB名 --dbuser=ユーザー名
wp core install
```

<a href="http://wp-cli.org/commands/core/config/" target="_blank" rel="noopener noreferrer">wp core config</a>

WordPress コアアップデート

```bash
wp core update
wp core version
```

WordPress マイナーアップデート

```bash
wp core update --minor
```

テーマ スターターキット

```bash
wp scaffold _s sample-theme
```

プラグイン スターターキット

```bash
wp scaffold plugin sample-plugin
```

参考:<a href="http://wp-cli.org/" target="_blank" rel="noopener noreferrer">Command line interface for WordPress | WP-CLI</a>


WP-CLIコマンドの使い方


## TL;DR

写真を長方形にカットした真っ直ぐのファーストビューではなく、少し弧を描くような見せ方をしたい時に。今回は Photoshop を使ってアーチや半円などのカーブを描く方法。

こういった感じのファーストビューのデザインカンプを作りたい時に使えるんじゃないかと。

[養命酒 駒ヶ根工場・健康の森｜養命酒製造株式会社](http://www.yomeishu.co.jp/komagane/)

[福岡県飯塚市の皮膚科医院 | 医療法人 ふくはだ皮ふ科クリニック](http://fukuhada.com/)

ワープを使います。ワープとは画像の形・パス・シェイプなどを変形させる機能です。

### アーチ

長方形を作成した後で、上のメニューから、編集＞パスを変形＞ワープから

単純にレイヤーするだけならアーチを選択後、カーブをマイナスに調整すると下向きのアーチ。同じ要領でテキストや写真も曲げることができます。

### 下弦

大きな半円を描く場合はアーチではなく下弦を使います。編集>変形>ワープ>下弦を選択してカーブを調整。

完成。

横向きにしたい場合、編集>変形>ワープ>円弧 でカーブを設定した後に、円弧横のアイコンをクリックすると横向きの扇状の形を作れます。

### テキストに傾きをつける

テキスト左右の遠近感を与えたい場合はカーブさせると違和感があるので、カーブをゼロ、水平の歪みを-60%くらいに設定。

### 複数のオブジェクトを曲げる場合はレイヤー統合が必要

複数の長方形を連動させてカーブさせたい場合は、複数のオブジェクトを選択後「Ctrl+E」を押してレイヤー統合させた後にワープを適用させると上手くいきます。

後は Alt キーを押しながらマスク等をかければ OK。

以上、Photoshop を使って 10 秒でアーチや半円を描く方法でした。


写真を長方形にカットした真っ直ぐのファーストビューではなく、少し弧を描くような見せ方をしたい時に。今回はPhotoshopを使ってアーチや半円などのカーブを描く

Photoshopを使って10秒でアーチや半円を描く方法


## TL;DR

日本語と英語の切り替えができる多言語サイトを超簡単に作りたい時に便利な方法。あくまでも簡易的な方法となります。

### Bogo インストール

Contactform7 の作者である三好さん（<a href="https://ideasilo.wordpress.com/" target="_blank" rel="noopener noreferrer">iDeasilo</a>） の<a href="https://ja.wordpress.org/plugins/bogo/" target="_blank" rel="noopener noreferrer">Bogo — WordPress プラグイン</a>をインストール。WP-CLI なら以下でインストール。

```bash
# インストール
wp plugin install bogo

# 有効化
wp plugin activate bogo
```

Bogo でできること

<ul>
<li>管理画面内で言語選択</li>
<li>任意の場所に言語切替メニューを表示</li>
<li>投稿・カスタムポストの言語切替</li>
<li>タグ・カテゴリの言語切替</li>
<li>グローバルナビゲーションメニューの言語切替</li>
</ul>

勝手に翻訳されるわけではないので日本語と英語で表示切替をしたい場合は、日本語と英語両方のコンテンツを用意する必要があります。サイトタイトル・キャッチフレーズ・カテゴリー名・タグ名・メニューは管理画面のテキストの翻訳から設定可能、投稿・固定ページの記事は翻訳版を複製、その他コンテンツは条件分岐を使う感じです。

まずは、functions.php に以下を追加してショートコードで出力されるアイコンやテキストの変更が行えるようにしておきます。

<a href="https://qox.jp/blog/bogo-wordpress/" target="_blank" rel="noopener noreferrer">Bogo を使って WordPress を多言語化 | 株式会社クオックス | QOX Inc.</a>さんの記事が分かりやすいです。

```php
// bogo ショートコード
// bogoショートコード関数削除
remove_shortcode( 'bogo', 'bogo_language_switcher' );
// 複製したショートコード関数追加
add_shortcode( 'bogo', 'my_language_switcher' );

function my_language_switcher( $args = '' ) {
    $args = wp_parse_args( $args, array(
        'echo' => false,
    ) );

    $links = bogo_language_switcher_links( $args );
    $total = count( $links );
    $count = 0;

    $output = '';

    foreach ( $links as $link ) {
        $count += 1;
        $class = array();
        $class[] = bogo_language_tag( $link['locale'] );
        $class[] = bogo_lang_slug( $link['locale'] );

        if ( get_locale() == $link['locale'] ) {
            $class[] = 'current';
        }

        if ( 1 == $count ) {
            $class[] = 'first';
        }

        if ( $total == $count ) {
            $class[] = 'last';
        }

        $class = implode( ' ', array_unique( $class ) );

        $label = $link['native_name'] ? $link['native_name'] : $link['title'];
        $title = $link['title'];

        if ( empty( $link['href'] ) ) {
            $li = esc_html( $label );
        } else {
            $li = sprintf(
        // 言語切替が表示されるところ
        '<a rel="alternate" hreflang="%1$s" href="%2$s" title="%3$s">%4$s</a>',
                $link['lang'],
                esc_url( $link['href'] ),
                esc_attr( $title ),
                esc_html( $label ) );
        }

        if ( apply_filters( 'bogo_use_flags', true ) ) {
            $flag = bogo_get_flag( $link['locale'] );
            $flag = preg_replace( '/(?:.*?)([a-z]+)\.png$/', '$1', $flag, 1 );
            $flag = sprintf(
        // 国旗のマークが表示されているところ
                '<span class="bogoflags bogoflags-%s"></span>',
                $flag ? $flag : 'zz' );

            $li = sprintf( '<li class="%1$s">%3$s %2$s</li>', $class, $li, $flag );
        } else {
            $li = sprintf( '<li class="%1$s">%2$s</li>', $class, $li );
        }

        $output .= $li . "\n";
    }

    $output = '<ul class="bogo-language-switcher">' . $output . '</ul>' . "\n";

    $output = apply_filters( 'my_language_switcher', $output, $args );

    if ( $args['echo'] ) {
        echo $output;
    } else {
        return $output;
    }
}
// bogo ショートコード ここまで
```

参考:<a href="https://ja.wordpress.org/support/topic/bogo%E3%80%80%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%A4%89%E6%9B%B4/" target="_blank" rel="noopener noreferrer">トピック: bogo 　デザイン変更 « サポートフォーラム — WordPress</a>

### ヘッダーに書いておきたいもの

header.php などにショートコードを埋め込みます。言語切替表示をしたい場所に以下を入力。

<?php echo do_shortcode( '[bogo]' ); ?>

一応忘れずに header.php に language と body class のテンプレートタグを入れておきます。こうしておくと日本語の時は lang 属性が 「lang="ja"」、英語に切り替えたときは「lang="en-US"」。body クラスには ja、en-US が付与されるので扱いやすくなります。

```php
<!DOCTYPE html>
<html lang="<?php bloginfo('language'); ?>">
<head>
<meta charset="UTF-8">
...
<body class="<?php body_class(); ?>">
```

### 置換

次にショートコードの文字を置換します。 自動で入る(United States)を削除。

```php
// bogoショートコード文字置換
add_filter( 'my_language_switcher','r_bogo_text');
function r_bogo_text($output){
 return str_replace(' (United States)','',$output);
}
```

<a href="https://joppot.info/2017/03/29/3657" target="_blank" rel="noopener noreferrer">wordpress の bogo プラグインのショートコードをカスタマイズする – joppot</a>

### 言語条件分岐

言語条件分岐する場合の一例。英語の時「See More」、それ以外の言語は「続きを見る」など。

```php
<?php
$locale = get_locale();
if ('en_US' == $locale  ) {
  echo 'See More';
} else {
  echo '続きをみる';
}
?>
```

### メニューの翻訳

投稿・固定ページ・グローバルナビゲーションメニュー・ウィジェットの翻訳版も管理画面から追加できるようになっています。追加したら表示したい言語にチェックを入れるだけ。

### タグやカテゴリの翻訳

カテゴリ名やタブなども任意の翻訳ができます。管理画面>言語>テキストの翻訳から英語を選び編集が可能です。

### ポストの言語条件分岐

投稿一覧などのループで使うと全ての言語が出力されてしまうのでフィルターをかけて言語の条件分岐をします。

get posts を使う場合は、言語フィルタを実行させるために suppress_filters を false に変更します。

```php
<?php
$locale = get_locale();
if ('en_US' == $locale  ) {
$args = array(
  'posts_per_page' => 3,
  'paged' => $paged,
  'suppress_filters' => false, //フィルタ実行
  'lang' => 'en-US' //英語のみ出力
);
} else {
$args = array(
'posts_per_page' => 3,
'paged' => $paged,
'suppress_filters' => false, //フィルタ実行
'lang' => 'ja' //日本語のみ出力
);
}
$lastposts = get_posts( $args );
foreach ( $lastposts as $post ) :
  setup_postdata( $post ); ?>
  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php the_content(); ?>
<?php endforeach;
wp_reset_postdata(); ?>
```

wp_query を使う場合は suppress_filters は不要です。

```php
<?php
$locale = get_locale();
if ('en_US' == $locale) {
  $loop = new WP_Query( array(
    'post_type' => 'post',
    'posts_per_page' => 3,
    'lang' => 'en_US' //英語のみ出力
  ) );
} else {
  $loop = new WP_Query( array(
    'post_type' => 'post',
    'posts_per_page' => 3,
    'lang' => 'ja' //日本語のみ出力
  ) );
}
?>
<?php if ( $loop->have_posts() ) : ?>
  <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <p><?php the_content(); ?></p>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
```

カスタムポストを対応させる場合は、こちら<a href="https://gist.github.com/gatespace/9966808" target="_blank" rel="noopener noreferrer">WordPress で Bogo を使った多言語サイトでのカスタム投稿タイプ</a>を参考にしてください。

以上、bogo を使った多言語サイトの作り方のメモでした。

[recommend_wordpress]


WordPressで多言語サイトを作る時に便利なプラグイン「bogo」の使い方


## TL;DR

不規則な円を取り入れたい時に。デザインカンプなどに使える、Photoshop で不規則な円を作る方法。とても簡単ですぐ使えるのでメモしておきますね。

### 不規則な円の作り方

楕円形を作成します。

アンカーポイントの切り替えツールを選択

Ctrl を押しながらアンカーポイントをクリック

パスを引っ張り、微調整をする

Ctrl でパスを移動、Shift で角度を 45 度できます。

三角形をベースにすると、ユニークな形に変形できます。後は、この形のマスクで写真を切り抜くもよし、透過させて写真にのせるもよし。

### 不規則な円形の線

線を描く場合は色を消して、境界線をつけるといい感じになります。

### 波の作り方

こちらの波を作る方法と組み合わせれば、柔らかい雰囲気のデザイン案が作れそうですね。

<a href="https://commte.net/6468" target="\_blank">Photoshop で波を作る最も簡単な方法 | コムテブログ</a>

以上、Photoshop で不規則な円を作る方法でした。


不規則な円を取り入れたい時に。デザインカンプなどに使える、Photoshopで不規則な円を作る方法。とても簡単ですぐ使えるのでメモしておきますね。不

Photoshopで簡単にできる不規則な円の作り方


波を取り入れたファーストビューを提案したい時に。デザインカンプなどに使える、Photoshop で波や曲線を作る方法。

長方形を作ります。

フィルター＞変形＞波型

波型を 3、後は以下のように調整します。

波ができました。

ペンツールを使う方法

p を押して、ペンツールを選択し、長方形の中心をクリック。アンカーポイントが追加されます。

Ctrl を押すとハンドルを引っ張ることができるのでシェイプを変形させます。Shift + Ctrl を押しながらハンドルを引っ張ると 45° で切り替えながら角度を調整することができます。

アンカーポイントを増やし変形を繰り返すと複雑な波ができます。

以上、Photoshop で波や曲線を作る方法でした。


波を取り入れたファーストビューを提案したい時に。デザインカンプなどに使える、Photoshopで波や曲線を作る方法。長方形を作ります。フィルター＞変形＞

Photoshopで波を作る最も簡単な方法


## TL;DR

コーダーの方なら利用されている人が多いであろう codepen。今回は有料版や無料版の違い、現在はどんなことが出来るようになっているのかをまとめました。

### codepen とは

ブログなどに貼り付け可能な無料のコードシェア（オンラインエディタ）サービスです。有料にすることでプライベートモード（非公開）でコードを管理したり、リアルタイムで同時閲覧、ブログに埋め込んだ時のレイアウトをかっこよくカスタマイズすることもできます。

通常のエディタのように更新＞プレビューも必要なく、normalize.css や外部リソースの貼り付けも簡単。自分でテストサーバを準備しなくてもよいし、練習やテストにもってこいです。

[CodePen](http://codepen.io/)

普段スニペットを作っておいて、サイト構築時に組み込んだりプログラミングの練習に利用したり。非公開で使いたかったのとブラウザテストツールを使いまわしたかったので、年$75 の有料プランにしてます。

プランは無料/PRO/SUPER PRO/TEAM PRO に分かれていて、有料版の「PRO 版」と「SUPER PRO 版」を比較すると以下のような違いがあります。

| プラン                    | PRO   | SUPER PRO |
| ------------------------- | ----- | --------- |
| 年                        | $75   | $300      |
| アセット ホスティング容量 | 1GB   | 5GB       |
| 共同編集                  | 2 人  | 6 人      |
| リアルタイム編集同時視聴  | 10 人 | 35 人     |
| ライブビュー              | 可    | 可        |
| プライベート              | 可    | 可        |
| カスタム CSS              | 可    | 可        |

TEAM PRO については[CodePen Plans](https://codepen.io/signup/plans/)をご覧ください。

### codepen で何ができるのか

ざっくりと以下のようなことができます。

- スニペット管理
- [Pro] プライベートモード / コードの非公開
- コードのテンプレート化
- コードを zip でダウンロードする
- インデント幅の編集
- ブログなどにコードの埋め込み
- [Pro] カスタム CSS / 埋め込みのレイアウト編集
- ビューの変更
- デバッグ
- コンソール編集
- 豊富なプリプロセッサ
- CSS：Normalize/Reset を追加
- オートベンダープレフィックス
- メタタグ（viewport）の差し込み
- [Pro] リアルタイム同時閲覧・チャット
- ペアプログラミング（共同編集）
- オンラインエディタ
- オートコンプリート
- ブラウザテスト
- アセット管理（素材をアップロード）
- オートセーブ
- シンタックスハイライトのテーマ変更

### codepen の使い方

アカウント登録やコード作成の手順はネットに沢山情報が転がっているのでここでは割愛します。

##### ペンをブログに沢山埋め込む時に気をつけること

コードをブログなどに埋め込むには右下の「Embed」を押すとポップアップが出るので下のコードをコピペすれば OK なんですが、

複数貼る場合は「Use click-to-load」にチェックを入れておきましょう。チェックを入れておくと静的画像のみが表示され、ユーザーが任意でペンを再生できるようになります。 これにチェックを入れておかないと、自動で再生されてしまうので貼り付けたページが激重になってしまいます。

### [Pro] 埋め込みテーマのカスタマイズ

Embed Theme Builder（埋め込みレイアウトのカスタマイズ）について。無料版は制限があるのですが、有料版になると外部スタイルシートを読み込ませ、ロゴを消したり、動きをつけたり、細部までカスタマイズできるようになります。ブログの雰囲気に馴染ませることができるようになります。

右上のアカウントから「Embed Theme Builder」をクリックします。

テーマ編集画面に移動したら「+ Create Theme」をクリックします。

#### [Pro] レイアウトカスタマイズ

例えば、この画像のようにロゴだけフワフワ動かしたり、事細かにスタイルを変更したい場合、有料版の「Custom CSS」の場所に読み込ませたいスタイルを書いた CSS を設定すれば OK。

「Custom CSS」は埋め込みのレイアウトを細かくカスタマイズする機能で外部 CSS を読み込むことができますが、コードペンで作った CSS/js はホスティングされるのを利用して、それを読み込ませることができます。

適用するための CSS を「コードペン」で作成し、URL に.css と付け加えると

css の中身が表示されます。この URL を

Custom CSS に適用させれば OK です。こうすれば自分でスタイルシートを用意しなくてもいいですね。また、コードペンで作成したスタイルシートは CDN 経由でホスティングされているので、外部サイトにも読み込ませることができます。

デフォルトテーマがこちら

<iframe height="265" scrolling="no" title="-webkit-background-clip: text;" src="//codepen.io/commte/embed/2feb3bd4592faef0de7685263b6a5228/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/commte/pen/2feb3bd4592faef0de7685263b6a5228/">-webkit-background-clip: text;</a> by commte (<a href="http://codepen.io/commte">@commte</a>) on <a href="http://codepen.io">CodePen</a>.</iframe>

オリジナル CSS を読み込ませたものがこちら

<iframe height="300" scrolling="no" title="-webkit-background-clip: text;" src="//codepen.io/commte/embed/2feb3bd4592faef0de7685263b6a5228/?height=300&theme-id=26727&default-tab=css,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href='http://codepen.io/commte/pen/2feb3bd4592faef0de7685263b6a5228/'>-webkit-background-clip: text;</a> by commte (<a href='http://codepen.io/commte'>@commte</a>) on <a href='http://codepen.io'>CodePen</a>.</iframe>

今の CodePen のボタン UI が少し嫌だったのでボタンをシンプルに変え、分かりやすいようにロゴを少し動かしてみました。

#### [Pro] ヘッダーの表示・非表示

Tab Bar で埋め込みテーマのヘッダー（html / css / js / Result / ロゴ）などの部分を表示・非表示にすることができます（有料版のみ） 。

Hide で保存したテーマを適用させると、このようにロゴやボタンを消すことができます。

無料版で変更できる箇所はこちら。

ボタンの色やテキストカラーなどは変更可能です。コードとビューの間のボーダー色を変えたり、コードペンのロゴを消すなどの細かいカスタマイズは有料版で対応できます。

#### [Pro] プロフェッサーモード

コードを書いている過程をリアルタイムで閲覧することができます。多くの生徒さんなどにサポートしながら一つのコーディングの過程を見せたい時に便利な機能です。削除可能なコメント・チャット機能付きです。

#### オートコンプリートを設定しよう

ソースコードのオートコンプリートは便利なので設定しておきましょう。

アカウント＞ Setting に入り「Editor Options」の「Autocomplete」にチェックを入れて保存。

#### リアルタイム同期・ペアプログラミング

「collab Mode」を選択すると共同でプログラミングすることができます。有料版は最大６人までリアルタイムでやり取り可能です。

[この動画](https://player.vimeo.com/video/154349112)のように、GoogleDrive のごとくリアルタイムで共同作用が行え、チャットでやり取りができます。

[Collab Mode - CodePen Blog](https://blog.codepen.io/documentation/pro-features/collab-mode/)

#### [Pro] 複数の端末でリアルタイム同期

[この動画](https://player.vimeo.com/video/157650786)のように複数の端末のリアルタイムビューのみも可能です。スクロールの位置まで反映されます。

[Live View - CodePen Blog](https://blog.codepen.io/documentation/pro-features/live-view/)

#### 表示領域とパラメータ

URL にパラメータをつければ、エディタの表示形式を変更することができます。

| パラメータ                       | 表示領域                     |
| -------------------------------- | ---------------------------- |
| ?editors=001                     | JS 表示                      |
| ?editors=010                     | CSS 表示                     |
| ?editors=011                     | CSS/JS 表示                  |
| ?editors=100                     | HTML 表示                    |
| ?editors=101                     | HTML/JS 表示                 |
| ?editors=110                     | HTML/CSS 表示                |
| ?editors=1111                    | Console を開く               |
| ?editors=1112                    | Console を拡大表示           |
| URL の「pen」を「full」に変更    | 編集領域を全て非表示         |
| URL の「pen」を「details」に変更 | 編集領域の下に作者情報を表示 |
| URL の「pen」を「collab」に変更  | 共同作用                     |

[Resizing Code Editor Panels - CodePen Blog](https://blog.codepen.io/documentation/editor/full-screen-editing/)

[コラボモード - CodePen ブログ](https://blog.codepen.io/documentation/pro-features/collab-mode/)

#### ブラウザテスト

管理画面の「Change View」＞「Open on CrossBrowser Testing」で各ブラウザのテストが出来るようになっています。コードペンからサインアップ・ログインすれば無料で試すことができます。Pro 版に入っておくと、元ファイルを更新した時（保存は不要）でもブラウザツール上でリアルタイムに反映されます。

これがあると暇な時に作成したスニペットをテストしておいて、いざという時にすぐ使えますね。

[Web エディタ「CodePen」が、完全無料のクロスブラウザチェックに神対応したので使ってみた！ | シェアしたくなる最新の Web サービス・IT ニュース情報をチェック！ APPGIGA!!（アプギガ）](http://plus.appgiga.jp/masatolan/2015/03/09/55531/)

OS の選択

ブラウザの選択

スマホは iPhone4s~iPhone7 Plus、Nexus、Galaxy、iPad、Android2.2~4.0 系などほぼ網羅。これは嬉しいですね。

「Run Test」を押すとシュミレーターが立ち上がります。またスクリーンショットなどを保存可能です。

元のファイルを変更すると、保存の有無に関わらず、シュミレーター上でもリアルタイムで変更内容が反映されます。

#### アニメーションのループ

「Animations should」は、埋め込みコードを Result で再生させたとき、アニメーションを 5 秒後に停止するか、ループさせるか選択できます。

#### [Pro] 素材のホスティング

Asset Manager ではファイルをドラッグで直接アプロードできます。アップロードしたファイルには画像パスが割り振られるので、それをコピーして任意の箇所に貼り付ければ OK。

またアップロードしたロゴや素材を保管・管理できます。同じ名前のファイルがアップロードされた場合はファイル名がリネームされるので上書きの心配は不要です。

アセットマネージャー

コード一式をダウンロードしたいときは、Export から Gist / zip などでダウンロード・保存ができます。

#### シンタックスハイライトの種類

「Syntax Highlighting」でコード表示のスタイルを変更可能です。テーマを一覧画像にしました。

以上、CodePen の使い方でした。


コーダーの方なら利用されている人が多いであろうcodepen。今回は有料版や無料版の違い、現在はどんなことが出来るようになっているのかをまとめました。

コーディングに便利なCodepenの使い方とカスタマイズ（有料版と無料版）


## TL;DR

いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。

### アニメーション１２の基本原則を確認

こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（<a href="https://en.wikipedia.org/wiki/12_basic_principles_of_animation" target="_blank">12 basic principles of animation - Wikipedia</a>）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。

<iframe src="https://player.vimeo.com/video/93206523" width="640" height="254" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
<a href="https://vimeo.com/93206523">The illusion of life</a> from <a href="https://vimeo.com/centodesign">cento lodigiani</a> on <a href="https://vimeo.com">Vimeo</a>.

<a href="http://the12principles.tumblr.com/" target="_blank">THE ILLUSION OF LIFE</a>

CSS アニメーションとサンプルソースコードなどについてはこちらで解説しています。

<iframe class="bookmarklet hatena-embed" src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Fcommte.net%2Fblog%2Farchives%2F5082" title="&#x3053;&#x3053;&#x307E;&#x3067;&#x52D5;&#x304B;&#x305B;&#x308B;&#xFF01;&#x697D;&#x3057;&#x3044;css &#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30B5;&#x30F3;&#x30D7;&#x30EB;&#x96C6; | &#x30B3;&#x30E0;&#x30C6;&#x30D6;&#x30ED;&#x30B0;" style="border:none;display:block;margin:0 0 1.7rem;overflow:hidden;height:155px;width:100%;max-width:100%;"><a href="https://commte.net/5082" target="_blank">ここまで動かせる！楽しいcss アニメーションのサンプル集 | コムテブログ</a></iframe>

### 基本

<iframe height="381" scrolling="no" title="fluffy" src="//codepen.io/commte/embed/a016ec36211130f2fbcc7769f2b64202/?height=381&amp;theme-id=0&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/commte/pen/a016ec36211130f2fbcc7769f2b64202/">fluffy</a> by commte (<a href="http://codepen.io/commte">@commte</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

以下のように、<code>transform:translateY</code>で縦方向の動きを指定するだけで上下に「ふわふわ」します。無限再生させるために<code>infinite</code>をつけます。

```css
.foo {
  background: #000;
  width: 100px;
  height: 100px;
  animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-15px);
  }
  25% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-15px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
```

<code>transform:translateY</code>を<code>transform:translateX</code>に変更すると横にふわふわ動きます。

<iframe height="265" scrolling="no" title="fluffy X" src="//codepen.io/commte/embed/c4d0089e59d57a2414b40df3b4b586f1/?height=265&amp;theme-id=0&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/commte/pen/c4d0089e59d57a2414b40df3b4b586f1/">fluffy X</a> by commte (<a href="http://codepen.io/commte">@commte</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

#### スカッシュ＆ストレッチ

１２の基本原則にある「ベタンと潰れて伸びる」ような比較的シンプルな動きは<code>scale</code>と<code>translate</code>を組み合わせて作れます。少しだけアニメーションっぽい動きになってきました。

<iframe height='437' scrolling='no' title='Squash&Stretch' src='//codepen.io/commte/embed/e7020619fb9589c6510435cb45cbe788/?height=437&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/commte/pen/e7020619fb9589c6510435cb45cbe788/'>Squash&Stretch</a> by commte (<a href='http://codepen.io/commte'>@commte</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>

```css
.foo {
  background: #000;
  width: 20px;
  height: 100px;
  margin: 100px;
  animation: squash 1s ease-in-out infinite;
}

@keyframes squash {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(10, 0.5) translate(0, 300px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
```

### アニメーションお助けツール

一つ一つ作っていては非効率なので、以下のバウンス作成ツールを使うとよいでしょう。
ありきたりなアニメーションではなく、テレビアニメに出てくるようなトリッキーな動きなら、このオンラインツールで簡単につくれます。
主観ですけど以下のような動きが可能です。

<ul>
<li>road runner:びっくりして逃げるような動作</li>
<li>slinky:猫が獲物を追いかけて捕まえるような動作</li>
<li>swoosh:ヒーローが横から登場するかのような動き</li>
<li>spin:歪みながら回転</li>
<li>jelly:ゼリーのような弾力</li>
<li>clock:時計の針</li>
<li>splat:飛散する</li>
</ul>
サイドバーからアニメーションの種類を選び、ループボタンとPLAY ANIMATIONを押すとアニメーションのソースコードを出力してくれます。
<a href="http://bouncejs.com/" target="_blank">Bouncejs</a>
シンプルなアニメーションならこのツールでhtmlとCSSを吐き出してくれます。
<a href="https://coveloping.com/tools/css-animation-generator" target="_blank">CSS Animation Generator</a>
FLOATを選ぶだけで「ふわふわ」のアニメーションが出来上がります。あとは出力されたCSSをコピペするだけです。とっても簡単ですね！出力されたCSSは以下、短くて分かりやすいです。

```css
.float {
  animation: float_2979 3s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes float_2979 {
  0% {
    transform: translateY(0);
  }
  33.33333% {
    transform: translateY(-6px);
  }
  66.66667% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
```

<a href="http://waitanimate.wstone.io/#/" target="_blank">WAIT! Animate</a>
イージングを細かく指定したい場合はこちらのツールが分かりやすいです。というか勉強になるので、動きを確認しながら学習したい時にいいですね。
<a href="http://www.joelambert.co.uk/morf/" target="_blank">Morf</a>
基本的な CSS アニメーションならこちらのサイトで確認。クリックするとシンプルなソースコードが表示されます。
<a href="http://leaverou.github.io/animatable/#" target="_blank">Animatable: One property, two values, endless possibilities</a>
こちらのツールはキーフレームをタイムランで調整しながら、プロパティの値を確認できます。
<a href="http://cssanimate.com/" target="_blank">cssanimatecom</a>
アニメーションの進み具合が分からない場合は
<a href="http://easings.net/ja#" target="_blank">Easing Function 早見表</a>で確認しましょう。マウスオーバーで動きが確認できます。
Chrome の開発者ツールでも確認可能です。
Ctrl+Shift+I で開発者ツールを開き、右上のメニューから More tools ＞ Animations をクリックすると右下に、アニメーションを編集するツールが開きアニメーションの再生や停止ができます。
以上、CSS3 のアニメーションでアニメっぽい動きを実現するためのツールなどでした。


CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール


## TL;DR

ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回は CSS のみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。

### 透過処理で文字のくり抜き

<code style="font-family: Source Han Code JP;">background-clip</code>プロパティは背景の範囲（ボックスモデル・ボーダーボックス・パディングボックス）に表示するか指定します。このプロパティは文字で背景を切り抜くことが可能ですが、<code style="font-family: Source Han Code JP;">-webkit-background-clip: text;</code>と<code style="font-family: Source Han Code JP;">-webkit-text-fill-color: transparent;
</code>指定することによって文字が透明になり、文字下の画像が見え、背景をくり抜いたような形を表現できます。

```css
.foo {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

<iframe height="265" scrolling="no" title="-webkit-background-clip:text CSS effect " src="//codepen.io/Jintos/embed/preview/crlxk/?height=265&amp;theme-id=dark&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/Jintos/pen/crlxk/">-webkit-background-clip:text CSS effect </a> by Jintos (<a href="http://codepen.io/Jintos">@Jintos</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
<a href="http://codepen.io/Jintos/pen/crlxk" target="_blank">-webkit-background-clip:text CSS effect</a>

### スクイグル

スクイグル（squiggle - ドナルド・ウィニコットが提唱した芸術療法の一つ。<a href="http://itakura-med.com/1785" target="_blank">なぐり描き法 | 医療法人板倉医院</a>）を表現。なぐり描いたような、クネクネ曲がったアニメーション。filter プロパティで SVG の filter で定義した設定を使いフィルタをかけています。

```css
.foo {
  filter: url(#squiggly-1);
}
```

<iframe height="265" scrolling="no" title="Squiggly Text" src="//codepen.io/lbebber/embed/preview/KwGEQv/?height=265&amp;theme-id=dark&amp;default-tab=html,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/lbebber/pen/KwGEQv/">Squiggly Text</a> by Lucas Bebber (<a href="http://codepen.io/lbebber">@lbebber</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/lbebber/pen/KwGEQv" target="_blank">Squiggly</a>

### アップダウン

keyframes に <code style="font-family: Source Han Code JP;">transform: translateY();</code>を設定し上下にテキストを動かしています。translateY()関数で Y 方向の移動を指定するだけ。

```css
@keyframes change {
  0%,
  12%,
  100% {
    transform: translateY(0);
  }
  17%,
  29% {
    transform: translateY(-25%);
  }
  34%,
  46% {
    transform: translateY(-50%);
  }
  51%,
  63% {
    transform: translateY(-75%);
  }
  68%,
  80% {
    transform: translateY(-50%);
  }
  85%,
  97% {
    transform: translateY(-25%);
  }
}
```

<iframe height="265" scrolling="no" title="Text animation" src="//codepen.io/yoannhel/embed/preview/sJpDj/?height=265&amp;theme-id=dark&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/yoannhel/pen/sJpDj/">Text animation</a> by Yoann (<a href="http://codepen.io/yoannhel">@yoannhel</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/yoannhel/pen/sJpDj" target="_blank">Text animation</a>

### スモーキー

テキストを煙のようなエフェクトを使いフェードさせる珍しい動き。各文字を span で囲う必要がありますが、文字に移動・変形・回転・傾き・縮尺を指定して違和感なく文字を消してます。

```css
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
```

<iframe height="265" scrolling="no" title="Smoky Text" src="//codepen.io/bennettfeely/embed/preview/lgybC/?height=265&amp;theme-id=dark&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/bennettfeely/pen/lgybC/">Smoky Text</a> by Bennett Feely (<a href="http://codepen.io/bennettfeely">@bennettfeely</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/bennettfeely/pen/lgybC" target="_blank">Smoky Text</a>

### バウンド・クラッシュ

文字どうしをクラッシュ・バウンドさせるエフェクトです。<code style="font-family: Source Han Code JP;">transform: scaleY</code>で縦方向へ縮尺、<code style="font-family: Source Han Code JP;">transform-origin</code>で原点を指定し、滑らかにバウンドしているように見えます。

<iframe height="371" scrolling="no" title="Bounce css Animation - v2" src="//codepen.io/Eprz/embed/preview/zxoNbP/?height=371&amp;theme-id=dark&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/Eprz/pen/zxoNbP/">Bounce css Animation - v2</a> by Elia PEREZ (<a href="http://codepen.io/Eprz">@Eprz</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/Eprz/pen/zxoNbP" target="_blank">Bounce css Animation - v2</a>

### フェード

<code style="font-family: Source Han Code JP;">transform: scale</code>で拡大・縮小、後は text-shadow と opacity で滑らかにフェードさせています。

<iframe height="374" scrolling="no" title="CSS3 Text Animation Effect" src="//codepen.io/Sonick/embed/preview/HthaI/?height=374&amp;theme-id=dark&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/Sonick/pen/HthaI/">CSS3 Text Animation Effect</a> by Nick Mkrtchyan (<a href="http://codepen.io/Sonick">@Sonick</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/Sonick/pen/HthaI" target="_blank">CSS3 Text Animation Effect</a>

### カウントダウンタイマー

一見するとどうやってんだろうと思うのですが、数値に一つ一つ span を振り、各桁にアニメーションの長さを指定する<code style="font-family: Source Han Code JP;">animation-duration</code>を設定し数値の動きに変化をつけています。

<iframe height="366" scrolling="no" title="CSS-Only Countdown Clock" src="//codepen.io/kindofone/embed/preview/DkhAz/?height=366&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/kindofone/pen/DkhAz/">CSS-Only Countdown Clock</a> by Yogev Ahuvia (<a href="http://codepen.io/kindofone">@kindofone</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/kindofone/pen/DkhAz" target="_blank">CSS-Only Countdown Clock</a>

### マスク

こちらは<code style="font-family: Source Han Code JP;">mask-image</code>を使ってマスクをかけています。ちなみに<code style="font-family: Source Han Code JP;">mask-size</code>は表示サイズ、<code style="font-family: Source Han Code JP;">mask-clip</code>は表示エリア。

```css
-webkit-mask-image: url(img/mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
```

<iframe height="389" scrolling="no" title="Text with Texture" src="//codepen.io/zitrusfrisch/embed/preview/vjwgl/?height=389&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/zitrusfrisch/pen/vjwgl/">Text with Texture</a> by Daniel Riemer (<a href="http://codepen.io/zitrusfrisch">@zitrusfrisch</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/zitrusfrisch/pen/vjwgl" target="_blank">Text with Texture</a>

### ブレンド

<code style="font-family: Source Han Code JP;">mix-blend-mode</code>プロパティを使い、グラデーションとテキストをブレンドしています。

<iframe height="358" scrolling="no" title="CSS Gradient Text in Firefox" src="//codepen.io/giana/embed/preview/RPdLaQ/?height=358&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/giana/pen/RPdLaQ/">CSS Gradient Text in Firefox</a> by Giana (<a href="http://codepen.io/giana">@giana</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/giana/pen/RPdLaQ" target="_blank">CSS Gradient Text in Firefox</a>
mix-blend-mode の値の違いはこちらで確認できます。

<iframe height="265" scrolling="no" title="mix-blend-mode" src="//codepen.io/team/css-tricks/embed/preview/ZYdjmZ/?height=265&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/team/css-tricks/pen/ZYdjmZ/">mix-blend-mode</a> by CSS-Tricks (<a href="http://codepen.io/css-tricks">@css-tricks</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

### シャドウ

<code style="font-family: Source Han Code JP;">text-shadow</code>を使ったパターン 4 種。<code style="font-family: Source Han Code JP;">text-rendering: optimizeLegibility;</code>で文字のレンダリングを行ってます。

<iframe height="363" scrolling="no" title="CSS3 text-shadow effects" src="//codepen.io/juanbrujo/embed/preview/yGpAK/?height=363&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/juanbrujo/pen/yGpAK/">CSS3 text-shadow effects</a> by Jorge Epuñan (<a href="http://codepen.io/juanbrujo">@juanbrujo</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/juanbrujo/pen/yGpAK" target="_blank">CSS3 text-shadow effects</a>


2017-12-11

WordPressのfunctions.phpに書いておくと捗ること

2017-8-28

CSSだけでOK！レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー

2017-7-18

WP-CLIコマンドの使い方

2017-6-19

Photoshopを使って10秒でアーチや半円を描く方法

2017-6-5

WordPressで多言語サイトを作る時に便利なプラグイン「bogo」の使い方

2017-5-22

Photoshopで簡単にできる不規則な円の作り方

2017-3-21

Photoshopで波を作る最も簡単な方法

2016-12-12

コーディングに便利なCodepenの使い方とカスタマイズ（有料版と無料版）

2016-12-5

CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール

2016-11-28

CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10