トラックボールのメリットとデメリット

まずはトラックボールを使う事でどんなメリット、デメリットがあるかです。
一般的に言われてる事、実際に使っていて思う所をあわせて紹介します。

形状の違い

トラックボールと簡単に言っても、ボールをどこで操作するか、親指なのか、人差し指なのか、手のひらなのかなどなど、色々なタイプが存在します。

人差し指・中指タイプ

私が主に使ってるのはこのタイプです。
人差し指、中指でボールを操作し、通常の右クリック、左クリック、それ以外にショートカットで指定したキーを、親指、薬指、小指で操作します。

親指タイプ

親指でボールを操作する事以外は通常のマウスに近く、一番馴染みやすいタイプです。

手のひらタイプ

手のひらでボールを操作するタイプです。
全部の指がフリーになる上、ボタンがボールより後ろにある物もあったり、操作方法も人それぞれになったりします。

ハンディタイプ

寝ながらや離れた所からでも簡単に操作できるように作られたハンディタイプです。
wiiやswitchのコントローラーのイメージに近いです。

まとめ

私の場合は職場ではトラックボール、自宅ではマウスを使っていますが、知り合いではトラックボールでFPSゲームをする猛者もいたりします。
紹介した以外にも特殊なタイプもあったり、アイデア次第で色々な製品が生まれていますので、あなたに合った1台を見つける事をオススメします！

キーボード一体型

リフトレスト一体型

The post 【トラックボールとは？】実際に使ってみたトラックボール【仕事の効率化や腱鞘炎予防にも】 first appeared on わぷ道.

価格重視

まずは価格重視のシンプルなモニター台です。
特別な機能はなくてもモニターの高さが変わるだけで腰や首の疲れなど結構変わってきます。
私が職場で使っているのはこのタイプですが、限られたデスクスペースの中で本やティッシュ箱などの収納スペースが出来たり、ごちゃごちゃした配線をまとめたりするだけでもデスク周りがすっきりします！

高さ・幅調整

L字デスクや広い机を使うのに、サイズ調整がしたかったり、収納スペースの確保や、目線の高さ調整が必要だったりする場合は足の長さや、モニター台の横幅、形状まで調整出来るタイプなんかもあったりします。

機能性重視

USBやType-C、コンセントが使えたり、スマホスタンドや非接触の充電機能がついているタイプなど、機能に富んだものもたくさんあります。

収納性重視

ただ空いたスペースを収納に使うだけではなく引き出しと一体型になったものや、高さを生かして大きい物も収納出来たり色んなタイプがあります。

デザイン重視

これまでに紹介した物にも含まれますが、おしゃれな木製なもの、ガラスの天板を使用したもの、ゲーミング仕様でカラフルに光るものなど、素敵なデザインの商品もたくさんあります。

まとめ

今回紹介した商品で欲しい物は見つかりましたか？
デザインの好みは人それぞれですし、探せばもっと気に入った商品が見つかると思います。
無くても困らないと思っていたアイテムが手放せなくなるような事ってわりとありますよね。
値段もピンキリで安い物から高い物までありますが、まずはお試し感覚でシンプルな物でも良いので使ってみる事をオススメします！

The post 【2023年】オススメのモニター台13選【デスクの整理や機能性向上に】 first appeared on わぷ道.

CSSであれば、メディアクエリを使って画面幅に応じたスタイルを当てるようにすると思います。
しかし、出したい要件がPCとスマホで全然違っていたり、どうしても配置を変えたいけどCSSだけじゃ対応しきれない場合など、PC、スマホでソースを書き換える時にJSで表示の条件分岐をする方法を紹介します。

どういった方法を使うのか

JSでPC、スマホで表示を変えようと思った時に使う方法は主に２つあります。
１つは画面幅を取得して、その画面幅を元にPCかスマホかの判定をするパターン
２つ目は、UserAgent(ユーザーエージェント)の値を取得して何のデバイスで見ているかを判定するパターンです。

画面幅で判定をする場合

画面幅で判定をする場合は、下記のような処理を行います。
デバイスではなく画面幅に依存するため、スマホでも縦向きで見る時、横向きで見る時の処理を変えたり柔軟な対応が行えます。

var windowWidth = $(window).width();
var windowSm = 640;
if (windowWidth <= windowSm) {
    //横幅640px以下（スマホの場合の処理）
} else {
    //横幅641px以上（PCの場合の処理）
}

UserAgent(ユーザーエージェント)で判定をする場合

UserAgent(ユーザーエージェント)を判定をする場合は下記のような処理を行います。
デバイスや使用ブラウザに応じて処理を変更するため、先ほどのようにスマホの縦向き、横向きで処理を変えると言った事は出来ませんが、細かいデバイスの指定が出来るため、iPhoneの場合、Androidの場合、iPadの場合で処理を変えたり、PCでも、MacBookの場合、Windowsの場合、chromeの場合、safariの場合などの細かい指定が出来ます。
下記の参考ソースでは、PC、スマホで処理を変えるために「iPhone,iPod,Android」の場合と、それ以外の場合で処理を変更しています。

if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    // スマホの場合の処理
} else {
    // PCの場合の処理
}

まとめ

用途やサイト全体の作りに応じてどちらを使うか、両方を使うかなど考えながら使ってみてください。
どちらの方法もそれぞれメリット・デメリットがありますが、実際にはもっと細かく指定する事で、タブレットの場合はどうするか、小さなモニターではどうするか等、詳細な設定が行えます。

The post PCとスマホでJSの処理を変更する方法 first appeared on わぷ道.

round関数を用いて「round(値,桁指定)」のように指定します。
桁を指定していない場合は小数点以下の四捨五入となります。

桁指定をした場合

プラスの引数での指定

「1,2,3」等プラスの引数を指定すると小数点第何位までを表示するかの指定が出来ます。
「1」を指定した場合は小数点以下1桁を残す形で、3.1415 が3.1になり
「2」を指定した場合は小数点以下2桁を残す形となり、3.14となります。

マイナスの引数での指定

上記と反対に「-1,-2,-3」とマイナスの引数で指定した場合は整数の何桁以上で四捨五入するかの指定となります。
「-1」を指定した場合は1の桁が四捨五入され1555が1560となり
「-2」を指定した場合は10の桁が四捨五入され1555が1600となります。

実際のコードと出力内容

$a = 3.1415;

echo round($a);
// >>> 3
echo round($a , 1);
// >>> 3.1
echo round($a , 2);
// >>> 3.14

$b = 1555;

echo round($b , -1);
// >>> 1560
echo round($b , -2);
// >>> 1600

切り上げをする

ceil関数を使う事で小数点以下を切り上げた数値を取得出来ます。
round関数と違い桁を指定する事は出来ないので小数点にのみ有効です。

切り下げをする

floor関数を使う事で小数点以下の切り下げた数値を取得出来ます。 ceil関数同様に、桁の指定は出来ません。

$b = 1555;
echo ceil(($b / 100) * 100);
// >>> 1600
echo floor(($b / 100) * 100);
// >>> 1500

The post 数値の四捨五入、切り捨て、切り上げをする方法 first appeared on わぷ道.

ifの条件式で、特定の要素が存在する場合、しない場合で処理を変える必要があったため、こちらの対応をしました。

実際のコード

if(document.getElementById("id") != null){
    //要素がある場合
}else{
    //要素が無い場合
}

The post Javascriptで要素が存在するかチェックする方法 first appeared on わぷ道.

プラグイン「WPS Hide Login」

このプラグインをインストールし、有効化すると「設定　＞　一般」の中に「WPS Hide Login」の項目が追加されます。

入力項目は２つ、「ログインURL」と「リダイレクトURL」があります。
こちらはそれぞれ、ログイン用画面のURLを自動で指定出来る物(デフォルトだと「login」)と間違ったURLを入れた時にリダイレクトされるページ（デフォルトだと「404」)を指定出来ます。

The post WordPressログイン画面 URLの変更方法 first appeared on わぷ道.

wrapについて

wrapを使うと指定したHTML要素で、対象の要素を１つずつ囲むことができます。

<p>ダミーテキスト１</p>
<p>ダミーテキスト２</p>
<p>ダミーテキスト３</p>

上記のようなHTMLに対して下記のように指定すると

$('p').wrap('<div></div>');

このような形に１つずつ囲む事が出来ます。

<div><p>ダミーテキスト１</p></div>
<div><p>ダミーテキスト２</p></div>
<div><p>ダミーテキスト３</p></div>

wrapInnerについて

wrapInnerを使うと対象の要素の中身を丸ごと囲む事が出来ます。

<p>ダミーテキスト１</p>
<p>ダミーテキスト２</p>
<p>ダミーテキスト３</p>

wrapInnerの場合は対象の中身をまとめて囲うためこのようになります。

$('p').wrapInner('<span></span>');

<p><span>ダミーテキスト１</span></p>
<p><span>ダミーテキスト２</span></p>
<p><span>ダミーテキスト３</span></p>

wrapAllについて

wrapAllを使うと対象に当てはまる要素を全て１つにまとめて囲むことができます。

<div class="textbox">
    <p>ダミーテキスト１</p>
    <p>ダミーテキスト２</p>
    <p>ダミーテキスト３</p>
</div>

上記のようなHTML構造の際に、wrapAllを使うとこのようになります。

$('.textbox p').wrapAll('<div class="inner"></div>');

<div class="textbox">
    <div class="inner">
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
    </div>
</div>

wrapAllの注意点

<div class="textbox">
    <p>ダミーテキスト１</p>
    <p>ダミーテキスト２</p>
    <p>ダミーテキスト３</p>
</div>
<div class="textbox">
    <p>ダミーテキスト４</p>
</div>

上記のように、複数の同じ要素がある際にそのまま同じ処理を行うと、１つ目の要素の方に引っ張られ下記のような形になってしまいます。

<div class="textbox">
    <div class="inner">
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
        <p>ダミーテキスト４</p>
    </div>
</div>

<div class="textbox">
</div>

今回やりたかった事

<ul class="list">
    <li>
        <div>除外したい</div>
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
        <div>除外したい</div>
    </li>
    <li>
        <div>除外したい</div>
        <p>ダミーテキスト４</p>
        <p>ダミーテキスト５</p>
        <p>ダミーテキスト６</p>
        <div>除外したい</div>
    </li>
</ul>

上記のような時に、liの中のpタグのみをその場で別のタグで囲みたかったのですが、ここまでで説明した「wrap」、「wrapInner」、「wrapAll」をそのまま使うだけでは上手く対応出来なかったので下記のように対応した結果、目的の形に整形する事が出来ました。

var count = $('.list li').length;
for(let i = 0; i < count; i++){
    $('.list li').eq(i).children('*:not( div )').wrapAll('<div class="inner"></div>');
}

<ul class="list">
    <li>
        <div>除外したい</div>
        <div class="inner">
            <p>ダミーテキスト１</p>
            <p>ダミーテキスト２</p>
            <p>ダミーテキスト３</p>
        </div>
        <div>除外したい</div>
    </li>
    <li>
        <div>除外したい</div>
        <div class="inner">
            <p>ダミーテキスト４</p>
            <p>ダミーテキスト５</p>
            <p>ダミーテキスト６</p>
        </div>
        <div>除外したい</div>
    </li>
</ul>

The post wrapを使って指定した要素をタグで囲む方法 first appeared on わぷ道.

固定ページや、別の記事ページに、特定の記事の内容を取得、表示したい時に使ってください。

指定ID記事の投稿タイトルを取得

<?php echo get_post( 1 )->post_title; ?>

指定ID記事のパーマリンク取得

<?php echo get_permalink( 1 ); ?>

指定ID記事のカスタムフィールド名「test」を取得

<?php echo get_post_meta(1,'test', true); ?>

指定ID記事の本文を取得

<?php echo get_post(1)->post_content; ?>

指定ID記事のサムネイルを取得

画像パスを取得したい場合

<?php echo get_the_post_thumbnail_url( 1, 'medium' );?>

画像を出力したい場合

<?php get_the_post_thumbnail( 1, 'medium' );?>

指定ID記事の投稿者情報を取得

まずは「$author」の変数に投稿者データをまとめて取得します。

<?php $author = get_userdata(get_post(1)->post_author); ?>

The post 投稿IDから記事の内容を取得する方法 first appeared on わぷ道.

before,after等の疑似要素なんかでよく使う「content」のCSS、よく使うのは、liタグやaタグの前後とかにアイコンを追加したりなどで使いますね。
以前にHTML側の更新が難しいと言われ、CSSのみで本文をいじった際に、「content」内にちょっとしたテキストを追加したのですが、これって改行どうやるんだっけ。となって調べた事があったのでまとめておきます。

コード

  white-space: pre-wrap;
  content: 'ここで\A改行がしたい';

必要なのは上記の２つです。
「white-space:pre-wrap;」を指定する事で、「content」内で改行が出来るようになり、実際の「content」のテキストの中で「\A」を記入する事で改行が出来ます。

The post content内のテキストを改行させる方法 first appeared on わぷ道.

使っているサーバーなどによって、WordPressをインストールした際に強制的にURLの中に｢/wp/｣や｢/wordpress/｣(以下「/wp/」で統一します)といったスラッグが入る事があります。
WordPressで作ったサイトである事は間違いないし、見ればわかる人にはわかるけど、わざわざURL上に出したくはないですよね。
今回はそんなURLの修正方法を紹介していきます。

WordPress管理画面からサイトアドレス(URL)の変更

「設定」→「一般」の中に移動して、サイトアドレスの欄がありますので、そこを下記のように書き換えます

FTPを使ってファイルをローカルにコピー

FTP等を使って実際のサイト内のファイル「.htaccess」と「index.php」をローカルに保存します。

index.phpの書き換え

ローカル上にコピーした「index.php」を下記画像のように書き換えます。

コピー、変更したファイルのアップロード

コピーした「.htaccess」と前項の書き換えが完了した「index.php」ファイルを「/wp/」と同じ階層（最初に入っていたところから1個上の階層）にアップロードします。

パーマリンク設定の更新

URL構造を変更したことによって、パーマリンクの設定が初期化されます。
WordPress側の設定画面に戻り、「設定」→「パーマリンク設定」に移動し、パーマリンクを変更しない場合はそのまま更新ボタンを押す事でパーマリンクが再設定されます。

以上ですべての設定が完了です。
サイト側の表示を確認して問題がある場合はどこかの設定が間違っている可能性があるので再度確認して対応してください。
リンク先などを絶対パスで記載していたりなど、古いURLを指定している箇所がある場合はその辺りも注意して確認する事をおすすめします。

The post WordPressサイトのURLから｢/wp/｣､｢/wordpress/｣などのスラッグを削除する方法 first appeared on わぷ道.