サブループの呼び出しセットです。
ショートコードでも対応できると思いますが、装飾が面倒なので。
ページレイアウト集サブループセット
optionblock samplesample subloo set
デフォルト状態
サムネール表示
カテゴリーを限定、最大表示数を3、タグを表示
カテゴリーを絞ると、ループのタイトル、一覧へのリンクも追従します。
投稿タイプ「memo」
グリッド表示＆カルーセル動作、ループタイトルなし
アコーディオン動作
アコーディオン動作となり、記事へはリンクしません。
FAQなどで使われると思いますので、「本文を全て表示」としてあります。
WP同士の記事インポート 画像取り込み プラグイン
よく使うプラグイン、久しぶりに更新。
Export media with selected content
記事のインポートで面倒くさい「記事中の画像とアイキャッチ」の取り込み。
色々なプラグイン、やり方がありますが、「Export media with selected content」がえらく簡単にやってくれる。
有名なのかな？記事もたくさん見つかりますが、下記を参考に。
【WordPress】ブログの記事と画像を、別サイトに移行する方法
※記事中、プラグイン名のスペルが違ってるのでライブラリから見つからなくて焦った。
エクスポートファイルがなんかデカい
プラグインを有効にすると「Export media with selecter content」のオプションが追加されます。
で、エクスポートしてみるとやけに時間が掛かるし、ファイルサイズもかなりでかい。
多分、画像そのものを吸い出してるんだと思う。
で、取り込む側は「添付ファイルをダウンロードしてインポートする」にチェックを入れるだけ。
アイキャッチもバッチリ再現される。
カスタムフィールドに挿入した画像もOK。
後処理は何もなし。
全てのケースにおいてコレだけで済むかは分からないけれど、通常のインポートはかなり楽できる。
クローズドサイト向けプラグイン
会員限定、社内用サイト等、登録ユーザーだけが閲覧できるサイトを作る時に便利なプラグイン。
全部公式ディレクトリにあるのでリンクはなし。
目次
ユーザーをCSVでインポート
Import and export users and customers
翻訳されると「ユーザーと顧客のインポートとエクスポート」。
CSVでインポート・エクスポートが出来る。
設定項目も多くて便利そうなんだけど、パスワード周りが難しい。
CSV通りにインポートしたいのだけれど、どうしても変わっちゃう。
「Force users to reset their passwords?」
- Yes/No
「Never update passwords?」
- ドキュメンテーションに記載されているパスワードに更新
- ユーザー更新の際にパスワードを更新しない
- はい。新しい権限グループを追加し、既存のものを上書きしません
こういった選択肢があるけれど、どれを選んでもCSV通りにならない。
エクスポートしても、やはりデータ通りにならない。
ダウンロード数、★の数ともにダントツだったので、何か設定を間違ってるんだと思うけれど、今回は単純なインポートだけできれば事足りる案件だったのでパス。
Import Users from CSV
こっちはインポートだけ。
オプションもほとんどないけど、パスワードは素直にインポートしてくれた。
今回はこちらで。
管理画面からダウンロードできるサンプルのCSVでは、
「user_login,user_email,user_pass,first_name,last_name,display_name,role,custom_usermeta_1,custom_usermeta_2」
以上のデータが例示されてるけど、
「show_admin_bar_front」（フロントエンドにツールバーを表示する／しない）もインポートできた。
WP標準のテーブルは普通にインポート出来るんだと思う。
ログイン・ログアウト
色々なやり方があると思うけど、今回はログアウトしたらすぐに閲覧できなくしたかった。
WP標準のパスワードやベーシック認証だと、クッキーの有効期限内だと閲覧できちゃう。
ので、今回はメンテナンスモードを利用。
WP Maintenance Mode
WP標準のログイン画面に近い。
「メンテナンス中」等の文言は変更可。
ある程度のCSSは、管理画面でコントロールできる。
ログイン後のリダイレクト、アナリティクス、no-index等のメタタグなど、いろいろ細かく設定できる。
Maintenance
翻訳されると「メンテナンス」。
ログイン画面は独自デザイン。こちらもある程度のカスタマイズは可能。
「メンテナンス中」等の文言も変更可。
リダイレクト、アナリティクス、メタタグ等のオプションは無し。
「WP Maintenance Mode」は一度動作が不安定になった。（ログイン不能）
別ブラウザ・別アカウントでも管理画面を開いていたので、プラグインの無効化⇒有効化をしたところリセットできたようで、その後は安定。最悪FTPでプラグイン削除が必要だったかも。
細かい設定が必要なければ「Maintenance」でも十分かな。
wp_is_mobileの判定や、新旧iPadの挙動など
最近のiPadでは「SafariとChromeで表示がいろいろ変わっちゃう」というところから始まり、改めて確認したり、実機を数種試してみたところでメモ。
目次
wp_is_mobileの中身
元々どういう目的で作られたものかは知りませんが、中身は
- ブラウザ情報を覗いて
- あらかじめ設定された文字列が含まれていたら
- 文字列ごとに条件分岐して
- 真偽を返す
というだけのもの。
「is_mobile」も中身は大体同じと思います。
wp_is_mobileやuser agentなどを色々なデバイスで見てみる
現在、ブラウザ右に貼り付いている青いヤツで確認。
厄介なのが最近のiPadのSafari。（調べたのは第4世代iPad Air、OS 15.2～）
mobile判定、user agent、デバイス情報がくっちゃくちゃな感じ。
- デフォルト（環境設定（Safari）「デスクトップ用Webサイトを表示」オン）
wp_is_mobile：false、またuser agentにiPadを含まない - 環境設定（Safari）「デスクトップ用Webサイトを表示」オフ
wp_is_mobile：true、またuser agentにiPadを含む
無理矢理まとめると、
- 基本的にはタッチデバイスであり大画面でもある。
- wp_is_mobileの判定は、ユーザーの設定次第で変わる。
- また常に「iPadである」と特定できるuser agentは無いので、wp_is_mobileをカスタマイズしてもどうにもならない。
「iPad Safari is_moile」等で探すとたくさん見つかる記事の通り。
アップルはなぜこうしているか、をどこかの記事で見かけた気がするのですが、URLを失念。
たしかこんな感じだったと記憶しています。
十分に大きいスクリーンでは、（タッチデバイスであっても）PC用サイトを表示すべき
一方グーグルは、
スマートフォン、タブレットでは、mobile用サイトを表示すべき
のようなことを言っていると思う。（mobileに最適化されたサイト、だったかな？）
参考：user agent（Safari）のコピペ
古いiPad Air
Mozilla/5.0 (iPad; CPU OS 12_5_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1
第4世代iPad Air
- デフォルト
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15 - 「デスクトップ用Webサイトを表示」をオフ
Mozilla/5.0 (iPad; CPU OS 15_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Mobile/15E148 Safari/604.1
iPhoneXS
- デフォルト
Mozilla/5.0 (iPhone; CPU iPhone OS 15_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Mobile/15E148 Safari/604.1 - 「デスクトップ用Webサイトを表示」をオン
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15
サブメニューの挙動
wp_is_mobileで色々制御していて、SafariとChromeの違いで一番困るのがサブメニュー付きのナビゲーション。
構文は、ワードプレス標準のメニューと仮定して、、
- CSS :hoverでサブメニューの出し入れ、アンカーの挙動をdoubletaptogoなど制御している場合、古いiPadやAndroidでは期待通り動く。
- 新しいiPadでは、タップでサブメニューは開くが、この状態でさらに2回タップしないと遷移しない。（tripletaptogoになっちゃう）
ほかにも、親項目が「<a>アンカー</a>」だとサブメニューが開かなかったり、bodyのタップでサブメニューが閉じたり閉じなかったり、と色々。
今のところ、新旧iPadで期待通り動くスクリプト
jQuery(document).ready(function(){
jQuery('#navigation-menu ul li').hover(function(){
jQuery('ul:not(:animated)', this).slideDown(100);
}, function(){
jQuery('ul.sub-menu', this).slideUp(100);
});
jQuery('#page').on('click', function(e){
jQuery('ul.sub-menu', this).slideUp(100);
});
});#navigation-menuは、メニューのラッパー。メニュー名で左右されたくないので。
範囲外をタップで閉じるようにしていますが、「body」だと閉じないので、ひとつ内側のラッパー（ここでは#pageにしてますが、テーマによってマチマチなはず。）にしています。
キャッシュ
Is_mobileの判定でいろいろやってる場合、SafariとChromeを行ったり来たりすると、キャッシュによってis_mobile状態も維持されて非常に不安定。
キャッシュ関係のプラグインは一切なし。
同じURLを違うブラウザでしつこく閲覧する、という開発者ならではの行動なので、それほど気にしなくていいとは思うけど、、、
キャッシュ共有の仕組みは調べてもよくわからない。AMPなんとか？？
新しいiPadでも、SafariとChromeの表示を常に合わせる
メディアクエリー・スクリーンサイズでの振り分けが一番簡単ですが、ナニカ事情がある場合。
1、Safariでも常にハンバーガーを出す
JavaScriptのタッチデバイス判定だけ。簡単で、動作も一番確実だと思います。
- タッチデバイスではハンバーガー
- 非タッチデバイスではPC用
1-b、「IE非対応」で良ければ
IE無視なら、JacaScript不要、メディアクエリーだけでも処理できます。
PC用 {
display: none;
}
ハンバーガー {
display: block;
}
@media ( hover: hover ) and ( pointer: fine ) {
PC用 {
display: block;
}
ハンバーガー {
display: none;
}
}タッチデバイス判定や、:hoverに関するあれやこれやも簡単に処理できるので、これからは多用しそう。
参考：下記記事で詳しく解説されています。いろいろ出来るのね～。
CSSのメディアクエリを使ってレスポンシブに対応させる書き方
2、ChromeでもPC用ナビを出す
これはかなり面倒だし、よくよく検証しないとアブない。
- タッチデバイスではハンバーガー
- 非タッチデバイスではPC用ナビ
- user agentに「iPad」が出現していて、かつスクリーン短辺が820px～ならば、例外的にPC用ナビ（OSのバージョンでもいいかもだけど、どっちが長期間確実かなぁ？？わからん。）
2-b、縦位置ではハンバーガーを出す
さらに「縦位置ではハンバーガーを出す」なら更に縦横条件を追加するわけだけど、今度はSafari用にも指示が必要。
こっちにはキーワード「iPad」が出現しない可能性大なので、
- タッチデバイス
- user agentにMacintoshまたはiPadが出現
- スクリーン短辺が820px～
- 縦位置
を満たすように条件づければいいはず。ややこしいね。
さらにさらに
ナビゲーションを上部に固定するような場合、ページ内遷移用にスクリプトを使うケースが多いと思います。
これもハンバーガー・PC用ナビで多少の差があるはずなので、スクリプトにも条件分岐を入れて切り替えなきゃならない。
JavaScript、なんちゃってメディアクエリー
screenじゃなくてwindowでやればもっと簡単ですが、CSSやディベロッパーツールと合わせたかったので。
jQuery(function(){
var screenWidth = screen.width;
var screenHeight = screen.height;
if ( screenWidth <= screenHeight ) {
var screenLongSide = screenHeight;
var screenShortSide = screenWidth;
} else {
var screenLongSide = screenWidth;
var screenShortSide = screenHeight;
}
var breakPointMiddle = 768;
var orient = window.onorientation;
if( Math.abs( window.orientation ) === 0 || Math.abs( window.orientation ) === 180 ){
if ( screenShortSide > breakPointMiddle ){
var view_wide = 'wide';
} else {
var view_wide = 'narrow';
}
} else {
if ( screenLongSide > breakPointMiddle ){
var view_wide = 'wide';
} else {
var view_wide = 'narrow';
}
}
/* ---------- デバイス水平方向幅で分岐 ---------- */
if ( view_wide === 'narrow' ) {
var headerHight = 65;
} else {
var headerHight = 105;
}
});スムーススクロールの余白切り替えなどに。
ハンバーガー、PC用ナビの高さを同じにしちゃう、って手もあるけど、、、
「Jquery依存スクリプトでブレークポイント使ってるの、あったなぁ」と思いだして調べてみると、やっぱりあった。
「window.matchMedia」だけで出来るのね。
:hoverイミュレーションを検知できないのかな、と思って少し検索すると、それっぽい記事がわんさか見つかる。古いiOSでの不具合とか、むしろ:hoverを無効にしたいとか。議論の種だったのね。
「タッチしたつもりなのに遷移しない」と感じることが多いけど、これか。
キチンと調べたら、この記事も色々ひっくり返りそう。
※余談。JavaScriptの判定をそのままphpの関数に出来たらかなり便利な気がしますが、ajaxを使わないと無理みたいで手に余る。でもそのうちチャレンジしてみようかな。
キリがないので、結局JavaScriptのスクリーン幅判定だけで制御することにしました。
- ナビゲーションについては、でかければPC用・小さければハンバーガー
- サブメニューはタッチデバイスでもどうにか動かす。
- wp_is_mobileは一切使わない
まだまだスッキリはしていませんが、ひとまずここでひと区切り。
発見・再認識がたくさんありました。
テーマ、ブラウザ、デバイスの情報を一覧表示する
現在、ブラウザ右に貼り付いている青いヤツ。
以前書いた「表示タイプを（ほぼ）全部判別する条件分岐」の改訂版。
適用されているテンプレートファイル名、ブラウザ情報、デバイス情報なんかを追加。
目次
ソース
<?php $post_type_name = get_post_type_object( get_post_type() )->label; ?>
<div class="template-info">
<input name="template-info-toggle" type="checkbox" id="template-info-toggle" />
<label for="template-info-toggle" class="template-info-toggle-label">template info</label>
<div class="template-tag-info">
<p class="current-info">現在「<strong><?php
if( is_404() ){
echo '404';
}elseif( is_search() ){
if( get_post_type() === 'post' ){
echo '投稿の検索結果';
}else{
echo esc_html( $post_type_name ).'の検索結果';
}
}elseif( is_page() ){
if( is_front_page() ){
echo 'フロントページ';
}elseif( is_page( 'sitemap-page' ) ){
echo 'サイトマップページ';
}elseif( is_page( 'contact' ) ){
echo 'お問い合わせページ';
}else{
echo '固定ページ';
}
}elseif( is_home() ){
echo '投稿トップ';
}elseif( is_single() ){
if( is_attachment() ){
echo '画像添付（アタッチメント）';
}elseif( get_post_type() === 'post' ){
echo '投稿シングル';
}else{
echo esc_html( $post_type_name ).':シングル';
}
}elseif( is_archive() ){
echo esc_html( $post_type_name );
if( is_author() ){
echo ':投稿者';
}elseif( is_category() ){
echo ':カテゴリー';
}elseif( is_tag() ){
echo ':タグ';
}elseif( is_tax() ){
echo ':タクソノミー';
}elseif( is_day() ){
echo ':日別';
}elseif( is_month() ){
echo ':月別';
}elseif( is_year() ){
echo ':年別';
}else{
echo ':アーカイブ';
}
}else{
echo 'そのほか';
}
?></strong>」を表示中</p>
<div class="template-tags-result"><?php
global $template;
$template_name = basename( $template );
echo '適用ファイル<span class="tag-result text">' . $template_name . '</span>';
echo '<p>post_type name<span class="tag-result text">' . get_post_type_object( get_post_type() )->name . '</span></p>';
echo '<p>post_type label<span class="tag-result text">' . get_post_type_object( get_post_type() )->label . '</span></p>';
if( is_front_page() ){
echo '<p>is_front_page<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_front_page<span class="tag-result false">false</span></p>';
}
if( is_page() ){
echo '<p>is_page<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_page<span class="tag-result false">false</span></p>';
}
if( is_single() ){
echo '<p>is_single<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_single<span class="tag-result false">false</span></p>';
}
if( is_attachment() ){
echo '<p>is_attachment<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_attachment<span class="tag-result false">false</span></p>';
}
if( is_home() ){
echo '<p>is_home<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_home<span class="tag-result false">false</span></p>';
}
if( function_exists( 'is_post_type_top' ) ) {
if( is_post_type_top() ){
echo '<p>is_post_type_top<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_post_type_top<span class="tag-result false">false</span></p>';
}
}
if( get_post_type() ){
echo '<p>get_post_type<span class="tag-result true">true</span></p>';
}else{
echo '<p>get_post_type<span class="tag-result false">false</span></p>';
}
if( is_post_type_archive() ){
echo '<p>is_post_type_archive<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_post_type_archive<span class="tag-result false">false</span></p>';
}
if( is_archive() ){
echo '<p>is_archive<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_archive<span class="tag-result false">false</span></p>';
}
if( is_category() ){
echo '<p>is_category<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_category<span class="tag-result false">false</span></p>';
}
if( is_tag() ){
echo '<p>is_tag<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_tag<span class="tag-result false">false</span></p>';
}
if( is_tax() ){
echo '<p>is_tax<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_tax<span class="tag-result false">false</span></p>';
}
if( is_search() ){
echo '<p>is_search<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_search<span class="tag-result false">false</span></p>';
}
if( is_author() ){
echo '<p>is_author<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_author<span class="tag-result false">false</span></p>';
}
if( is_date() ){
echo '<p>'.$post_type_name.'投稿タイプのis_date<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_date<span class="tag-result false">false</span></p>';
}
if( is_day() ){
echo '<p>is_day<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_day<span class="tag-result false">false</span></p>';
}
if( is_month() ){
echo '<p>is_month<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_month<span class="tag-result false">false</span></p>';
}
if( is_year() ){
echo '<p>is_year<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_year<span class="tag-result false">false</span></p>';
}
if( is_404() ){
echo '<p>is_404<span class="tag-result true">true</span></p>';
}else{
echo '<p>is_404<span class="tag-result false">false</span></p>';
}
if( wp_is_mobile() ){
echo '<p>wp_is_mobile<span class="tag-result true">true</span></p>';
}else{
echo '<p>wp_is_mobile<span class="tag-result false">false</span></p>';
}
echo '<p class="touch-result">タッチ<span class="tag-result text"></span></p>';
echo '<p class="screen-short-side">画面短辺<span class="tag-result text"></span></p>';
echo '<p class="current-view">水平方向幅<span class="tag-result text"></span></p>';
echo '<p class="device-orientation">デバイス方向<span class="tag-result text"></span></p>';
?>
</div>
<?php
echo '<p class="user-agent"><strong>user agent：</strong><br>' . $_SERVER['HTTP_USER_AGENT'] . '<p>';
?>
</div>
</div>適当に表示・非表示のスイッチを付けてください。
※タッチ判定、スクリーンサイズ、デバイスの向きはjsなので、後述のjsが必要です。
※「is_post_type_top」は適当に作った自作関数なので、無視か「投稿タイプのトップを判定」をご参照ください。
Java Script
※急に気になって調べ始め、大分ゴニュゴニョ書き換えたので、ハードリロードしないと値が出ないかも。
タッチ対応、スクリーンサイズ、デバイスの向き取得用。
取得結果は「body」へのクラス追加。
※ほかに処理を追加しないなら、スクリプトはbody直後が良いみたい。フッターとかに置いちゃうと、ページスピードが落ちる可能性大。
const body_class = document.getElementsByTagName( 'body' );
var touch_event = window.ontouchstart;
if ( touch_event === null ) {
body_class[0].classList.add( 'is-touch-device' );
} else {
body_class[0].classList.add( 'not-touch-device' );
}
var screenWidth = screen.width;
var screenHeight = screen.height;
if ( screenWidth <= screenHeight ) {
var screenLongSide = screenHeight;
var screenShortSide = screenWidth;
} else {
var screenLongSide = screenWidth;
var screenShortSide = screenHeight;
}
var breakPointSmall = 743;
var breakPointMiddle = 768;
if( screenShortSide <= breakPointSmall ){
body_class[0].classList.add( 'not-large-screen', 'is-small-screen' );
} else if ( screenShortSide > breakPointMiddle ){
body_class[0].classList.add( 'is-large-screen', 'not-mobile-screen' );
} else {
body_class[0].classList.add( 'not-large-screen', 'is-middle-screen' );
}
var orient = window.onorientation;
if( Math.abs( window.orientation ) === 0 || Math.abs( window.orientation ) === 180 ){
body_class[0].classList.add( 'device-vertical' );
if( screenShortSide <= breakPointSmall ){
body_class[0].classList.add( 'view-narrow', 'view-narrow-small' );
} else if ( screenShortSide > breakPointMiddle ){
body_class[0].classList.add( 'view-wide' );
} else {
body_class[0].classList.add( 'view-narrow', 'view-narrow-middle' );
}
} else {
body_class[0].classList.add( 'device-horizontal' );
if( screenLongSide <= breakPointSmall ){
body_class[0].classList.add( 'view-narrow', 'view-narrow-small' );
} else if ( screenLongSide > breakPointMiddle ){
body_class[0].classList.add( 'view-wide' );
} else {
body_class[0].classList.add( 'view-narrow', 'view-narrow-middle' );
}
}タッチデバイス
判定を厳密にやると、古いiPadでは「タッチ非対応」になるようです。
一瞬、最近のIPadの「:hoverのイミュレーション」が関係あるのかと思ったけど、違った。
Androidのタブレット数機種で確認したところ、厳密判定でも「タッチ対応」になるけど、:hoverのイミュレーションはない。
ブレークポイント
ブレークポイントは、breakPointSmallとbreakPointMiddleの2か所。
- 小さい = 743pxまで – スマートフォン
- 中くらい = 768pxまで – 古いiPadや最近のiPad miniなど
- 大きい = 769px以上 – 新しいiPadやPC
長辺で判定したい場合は19行目と22行目の「screenShortSide」を「screenLongSide」に変更。
このあたりはテーマに合わせてください。
ディスプレイサイズの取得
screenでやってます。windowで判定するとディベロッパーツールと一致しないので。
また、手持ちの実機では常に、
- screen.width ⇒ 短辺
- screen.height ⇒ 長辺
となりますが、手持ちに無いデバイスは分からないし、ディベロッパーツールではデバイスの向きを変えると縦横が入れ替わる。
ので、簡単な比較で小さい値の方を短辺、としています。
関連してそうな記事を少し見た感じでは、width、heightの定義はどうもはっきりしない様子。
メディアクエリーと組み合わせるためには閲覧状態での水平方向幅も必要なので、デバイスの向きごとに横幅も取得。「screen」で取得するとこの辺が面倒。
スクリーンサイズを素直に表示するサンプル
<h1>screen.width：<span id="screen-width"></span></h1>
<h1>screen.height：<span id="screen-height"></span></h1>
<script>
document.getElementById('screen-width').textContent = screen.width;
document.getElementById('screen-height').textContent = screen.height;
</script>実行結果
screen.width：
screen.height：
参考記事
CSS
ここは任意で。
ただし、jsの判定結果を「bodyへのクラス追加」にしているので、その辺だけは必須。
また、常時表示していると邪魔なので開閉式にしてます。
<style>
/* ---------- テンプレート情報 ---------- */
#template-info-toggle, .template-info-toggle-label, .template-tag-info {
position: fixed;
top: 120px;
right: 0;
}
#template-info-toggle {
opacity: 0;
}
.template-info-toggle-label {
writing-mode: vertical-lr;
text-transform: capitalize;
font-weight: bold;
color: #FFF;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #15c;
border: none;
z-index: 2;
}
#template-info-toggle:checked + .template-info-toggle-label {
background-color: #d93600;
}
.template-info-toggle-label:before {
font-family: dashicons;
content: "\f177";
font-weight: normal;
margin-bottom: 0.25em;
}
#template-info-toggle:checked + .template-info-toggle-label:before {
font-family: dashicons;
content: "\f530";
}
.template-info-toggle-label:hover {
cursor: pointer;
}
.template-tag-info {
color: #FFF;
background-color: rgba( 102, 102, 102, 0.6 );
padding: 0.5em 1em;
right: -100%;
transition: right 0.25s;
z-index: 1;
}
#template-info-toggle:checked ~ .template-tag-info {
padding-right: calc( 30px + 1em );
right: 0;
}
.template-tags-result {
column-count: 2;
column-gap: 1.3em;
}
.template-tag-info .tag-result {
font-weight: bold;
text-shadow: 0px 0px 2px rgba( 255, 255, 255, 0.5 );
}
.template-tag-info .tag-result.text {
color: #000;
margin-left: 0.5em;
}
.template-tag-info .tag-result.true {
color: #15c;
margin-left: 0.5em;
}
.template-tag-info .tag-result.false {
color: #d93600;
margin-left: 0.5em;
}
.not-touch-device .touch-result .tag-result:after {
content: '非対応';
color: #d93600;
}
.is-touch-device .touch-result .tag-result:after {
content: '対応';
color: #15c;
}
.is-large-screen .screen-short-side .tag-result:after {
content: '769px～'
}
.is-middle-screen .screen-short-side .tag-result:after {
content: '744px～768px'
}
.is-small-screen .screen-short-side .tag-result:after {
content: '～743px'
}
.device-horizontal .device-orientation .tag-result:after {
content: '横'
}
.device-vertical .device-orientation .tag-result:after {
content: '縦'
}
.view-narrow-small .current-view .tag-result:after {
content: '～743px'
}
.view-narrow-middle .current-view .tag-result:after {
content: '744px～768px'
}
.view-wide .current-view .tag-result:after {
content: '769px～'
}
.template-tag-info .user-agent {
max-width: 24em;
}
@media (max-width: 743px) {
.template-tag-info {
font-size: 12rem;
}
}
</style>