テンプレート：single-blog.php
ブログの詳細ページ用テンプレートファイルです。
body_class();タグで出される値：class="wp-singular blog-template-default single single-blog postid-1177 wp-theme-test02 defaultClass"
タイトル：マークアップ: 画像の配置
記事ID：1177
class="hoge post-1177 blog type-blog status-publish has-post-thumbnail hentry blog_category-contents-management blog_category-design blog_tag-honda blog_tag-nissan blog_tag-toyota"
■アイキャッチ画像（サイズ調整）：
■URLのみ：
https://blog.simplate.net/cms/wp-content/uploads/2013/03/soworthloving-wallpaper.jpg
日付：2013年1月10日
更新日：2020年03月13日（金）
著者：admin
タクソノミー関連の出力いろいろ
本文
画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっとうずめてみることです。さあ、はじめましょう。
画像の配置では、ユーザーが「指定なし」「右寄せ」「左寄せ」「中央揃え」の中から自分の好きなものを選べるようにする必要があります。さらに、「サムネイル」「中サイズ」「大サイズ」「フルサイズ」という選択肢の中から大きさを選べるようにするべきです。
上記の画像は中央寄せになるはずです。
このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。
ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !
次は、とても大きな画像のテストです。そして、この画像には配置の指定がありません。
上記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。
そして今後は右寄せに移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです。
そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。
さて、これで終わりと思ったかもしれませんが、これからキャプションのテストに入ります !
580×300 画像のキャプション例。
上記の画像は中央寄せになるはずです。キャプションにはリンクが含まれていますが、おかしな表示になっていないか確認しましょう。
ちょっとしたキャプション
このパラグラフの残りの部分は、150×150 サイズの左寄せ画像の回り込みをテストするためのつなぎです。
ご覧の通り、画像の上・下・右にスペースが必要です。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !
それでは、とても大きな画像のテストです。そして、この画像にも配置の指定はありません。
とても大きな画像のコメント
上記の画像は1200ピクセル幅ですが、コンテンツエリアからはみ出すべきではありません。コンテンツのフローを視覚的に邪魔しないかたちで、指定のエリア内に収まっている必要があります。
右側いるのほ良い気分です。
そして今後は右寄せ画像に移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです
そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。
それでは、これで終わりです。画像配置のテスト、お疲れ様でした !
コメント欄の表示
コメントリストのみの表示
著者情報の表示（！カスタム投稿バージョン！）
admin
ユーザー名（ID）：
admin
上の名前：
下の名前：
ニックネーム：
admin
紹介文：
アバター画像（プラグイン併用！）：
この著者の記事一覧（現在のカスタム投稿に限定）：
この著者の”ブログ”記事一覧を見る
※著者別のURLは「https://ブログのURL/カスタム投稿名/author/著者ID/」のフォーマットで表示できるので リンクURLの末尾にこの著者のIDをくっつけるだけ！
カスタムフィールド関連の出力
参考：
Advanced Custom Fieldsの全フィールドタイプを徹底解説
フィールドグループの作成・設定方法
Advanced Custom Fields の取得・表示方法
テキスト系
1行テキスト（値の有無を判定して表示）
テキストエリア
数値・レンジ
メール・URL
パスワード（登録の有無で表示を切り替え／値そのものは出さない）
オブジェクト系
画像-配列を設定した場合
下記のように配列で画像に関するデータが保存されるので必要な項目を引き出してechoで出力する。
参考：Advanced Custom Fieldsで画像オブジェクトを使う方法
NULL
コードメモ：配列型で保存されているデータを取り出す方法
-----------------------
データ構造
-----------------------
array(
'url' => string()
'alt' => string()
'width' => int()
'height' => int()
'sizes' => array( //入れ子構造
'thumbnail' => string()
'thumbnail-width' => int()
'thumbnail-height' => int()
)
)
----------------------
取り出し方
----------------------
1.get_fieldで必要なデータを取り出す
$hoge = get_field('カスタムフィールド名');
$src = $hoge['url'];
$alt = $hoge['alt'];
$width = $hoge['sizes']['thumbnail-width'];
$height = $hoge['sizes']['thumbnail-height'];
2.echoで取り出したデータをそれぞれ吐き出す
echo $src;
echo $alt;
echo $width;
echo $height;
表示例：デフォルトサイズ
表示例：中サイズのサムネイル（300×225）
画像-URLを設定した場合
画像-IDを設定した場合
ファイル
画像と同様に配列、URL、IDのタイプがあるが基本はURLで十分（ファイル本体とダウンロードするデータ名を使い分けたい時は配列を使う）
登録されていませんWysiwygエディタ
oEmbed
選択肢系
セレクタ
チェックボックス
※タグで囲む場合
ラジオボタン
真偽値
真偽値（値なし/1）が返ってくるので、これを基準にトップページのループにこの記事を表示するかを判定させる。 「値なしだと〜しない」より、値ありをデフォルト設定にして「値ありだと〜する」の方が使い勝手がいい。
デフォルトでは[false]は出力されないので出したい場合は下記のようにする
false
関連コンテンツ系
リンク
タイトル：
URL：
開き方：
投稿オブジェクト（単一記事）
※出力方法参考：投稿オブジェクトの出力
記事タイトル：
パーマリンク：https://blog.simplate.net/blog/markup-image-alignment/
サムネイル（URL）：https://blog.simplate.net/cms/wp-content/uploads/2013/03/soworthloving-wallpaper.jpg
投稿日：2013.01.10
カテゴリ：コンテンツマネジメント / デザイン
ページリンク
※出力方法参考：ページリンクの出力
関連投稿（複数記事）
グローバル変数へセットすることで通常の投稿と同じような関数で値を取得することができる
※出力方法参考：関連オブジェクトの表示
記事が見つかりませんグローバル変数を使わない場合は配列から必要のものを取り出していく
配列から何を呼び出せるのかを確認したい場合はvar_dumpを使うと一覧でみることができる
タクソノミー
ユーザー
jQuery系
Googleマップ
デイトピッカー
デイト & タイムピッカー
タイムピッカー
開催予定： -
カラーピッカー
繰り返しフィールド
※サブフィールドの取得は【the_sub_field】を使う
