関連記事で現在のページを除外するWordPressループの引数の指定方法

関連記事を出力するWordPressループで、現在のページを関連記事に表示させないような引数の指定方法。

‘post__not_in’オプションを使用することで実現できる。

参考:Exclude current post from WP Query

オプションタグ(option)で初期表示させる項目を選択できないようにする方法

オプションタグで最初に表示させる項目は、ラベルのようなもので実際には選択されないようにするための方法。

最初のoptionを使って、valueを空にし、selected disabled hiddenをoptionタグ内に入力すれば実現できる。

参考:How can I set the default value for an HTML <select> element?

tbodyタグは省略可能かどうか【W3Cの和訳あり】

tbodyタグは省略可能か。結論から言うと、table要素内い表が1つしかなければ省略可能。以下詳細説明。

このtbodyタグはテーブルの本体に当たるコンテンツを囲むために使われる。特にtableタグで囲む表が複数に渡る場合、thead、tfootを追加(テーブル内のheader、footerの役割)してテーブルに関する情報を入れ、実際のテーブル本体をtbodyで囲む。

W3Cを参照すると、表が1つしかなく、thead、tfootタグを使わない場合は、tbodyタグを省略することが可能。以下W3Cの説明箇所のスクショ。

そしてなんとこのthead、tfoot、tbodyは閉じタグはオプションとなっている。下記のように開始タグのみで書くことが可能。

ということで、複数の表を1つのtable内で使わず、1つの表のみであればtbodyタグは省略可能である。

参考:The World Wide Web Consortium, 11 Tables

 

selectタグに::before ::afterなどの疑似要素を追加する方法【CSS】

結論から言うとselectタグには::beforeや::afterの疑似要素を当てることはできない。

そのためselectタグの親要素に擬似要素を指定して代用する。

このような構成だった場合、

このように親要素に擬似要素を付けて調整する。

参考:Pseudo elements and SELECT tag

CSSで背景画像の位置を中央から引いた/足したpx数にする

CSSで背景画像のpositoinを要素の中央から何pxか引いた、もしくは足した数にする方法。

calcを用いて計算させる。

こんな感じ。上の例だと中央から120px離してる。

nodebrewでnode.jsをインストールする時にxcrunでerrorが出る問題を解決

標題通り、nodebrewでnode.jsの別バージョンをインストールする時に以下のエラーが出た。

で、node.jsが正常にインストールされない。

xcodeがインストールされてない、もしくはコマンドラインツールが正常に動作していないエラーらしい。

解決方法は以下のコマンドを打ち込む

 

【即解決】WordPressのショートコードがpタグで囲まれてしまうのを最も簡単に除去する方法

WordPressの自作ショートコードを設定した時に、ショートコードの次に改行を入れて文章を入力するとpタグによって囲まれることがある。

そのような時の解決方法。以下のコードをfunctions.phpに挿入する。

他にもいろいろごちゃごちゃコードを書く方法があるけど、これが一番シンプル。

ショートコードの時だけpタグの自動挿入をしないように設定している。

参考:remove empty <p> tags from wordpress shortcodes via a php functon

さらに空のpタグを除去する方法はこちらのコードで除去が可能。

参考:How To Remove Empty Paragraph Tags From Shortcodes In WordPress

.gitignoreが反映されない時の対応方法

.gitignoreにファイル・フォルダを追加したにも関わらずgit addに表示されてしまう時。

gitがキャッシュを保持している場合がある。そんな時はgitのキャッシュを消そう。

全てのキャッシュをクリアするには、

ファイル名・フォルダを指定してキャッシュをクリアするには、

でキャッシュをクリアできる。

CSSのみでposition:absoluteがかかっている要素を上下中央配置にする

position:absoluteで浮いている要素を上下中央配置にするやり方。

昔は大変だったが、今ではflexboxを使えば簡単にできる。キーは子要素にdisplay:flexをかけて、縦方向に中心いするためにflex-direction:column、align-items: center;にし、さらにwidthとheightに100%をかける。

幅と高さがない場合中央配置にならないため注意。

単純に中央配置にするだけなら、flexboxを使わなくても実現可能。leftとrightをどちらも0を指定するだけ。

こちらも幅の指定をしないと中央配置にならないため注意。