Linuxでどのディストリビューション・バージョンか調べる方法

Linuxでどのディストリビューションか調べるコマンド。たまに使うためメモ。リモートサーバーではSSHでログインして、下記コマンドを打つとカーネル情報が表示される。

cat /proc/version

CentOS始めRedHat系でさらにバージョンを確認するのであれば、

cat /etc/redhat-release

で確認できる。

kusanagiでインストールしたWordPressサイトにてLet’s Encryptを発行したにも関わらずhttps化されなかった時の対応方法

プライム・ストラテジー社から提供されているkusanagiはバージョン7.8からLet’s Encryptに対応しており、WordPressインストール時に選択すれば手軽にサイトのhttps化が実現できる。

しかし、Let’s Encryptを使用するように設定したにも関わらず、実際にサイトにアクセスしてみるとhttpのままだった時の対応。

サーバーにSSHでログインし、以下のコマンドを打つことでLet’s Encryptを再登録してくれる。Emailアドレスは適宜自分の登録したいメールアドレスに変更すること。

kusanagi ssl --email nullpopopo@example.com --https redirect --auto on <provision name>

参考:https://column.prime-strategy.co.jp/archives/column_384

Linux(CentOS)でディスク容量がいっぱいになった時に、GB以上のディレクトリの容量を確認するコマンド

ディスクのお掃除をする時は、容量が大きいGB以上のディレクトリから確認していきたいもの。

下記のコマンドでGB以上のディレクトリを確認できる。<dir>は実際のディレクトリ名に置き換える。

du -h <dir> | grep '[0-9\.]\+G'

参考:Tracking down where disk space has gone on Linux?

WordPress Flash Uploader、Add From Serverなどのプラグインが使えない時に、FTPからアップロードした画像をメディアに認識させる方法

タイトル通りに、WordPressにおいてWordPress Flash Uploader、Add From Serverなどのプラグインが使えない時に、FTPからアップロードした画像をメディアに認識させる方法。

画像数が2000を超えており、かつPHPのバージョン違いのためか、WordPress Flash UploaderのSync Media Library機能で、

“Uncaught Error: Using $this when not in object context in (ファイルパス)”

とエラーが出る。wfu-sunc.phpの29行目の$thisがオブジェクトではないところで使われているとのこと。

flash uploader error

同様なプラグインであるAdd From ServerやMedia from FTPで試してみるが、Media from FTPでは全画像が登録できず、Add From Serverでは一括で登録しようとするとブラウザがクラッシュしてしまい、どうしたもんかと。

半分あきらめてたところで、Force Regenerate Thumbnailsを使う場面があり、実行してみると、なんと!!メディアに認識されているではないか!!

Force Regenerate Thumbnailsは元々はその名の通り画像のリサイズに使用するプラグインだが、リサイズ時に元ファイル以外の画像は削除するため、再度メディアに登録するのかもしれない。

何にせよ、WordPress Flash Uploader、Add From Serverなどのプラグインが使えない時は、Force Regenerate Thumbnailsで試してみるのもあり。

追記:

最近だとMedia from FTPというプラグインで同様にFTP経由でアップロードした画像をメディアに登録できる。

Media from FTP

IE11, Microsoft EdgeのみにCSSを適応させる時のメディアクエリ

IE10から従来のHTML上にif文でIEのみ対象にしたCSSを読み込ませることができなくなった模様。(正確にはHTML5を使用している時にだが)

HTML5 Parsing in IE10

よって今後はどうすればいいかというと、メディアクエリを使用する。以下IE10,IE11それぞれに適応させる時のメディアクエリ。

/* for IE 11 */
  @media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, .selector {
      some-syntax: some-property;
    } 
  }

/* for IE 10 */
  @media all and (-ms-high-contrast:none){
    .selector {
      some-syntax: some-property; 
    }
  }

Edgeの場合はこちら

/* for Microsoft Edge */
@supports (-ms-ime-align:auto) {
  .class-name {
    some-syntax: some-property;
  }
}

以下の記事を参考:

Targeting IE10 & IE11 Browsers with CSS

CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser

IE11で背景画像に使用しているSVG画像が中心揃えになってしまうのを防ぐ

IEのバグで背景画像に指定しているSVG画像(SBGアイコンなど)がbackground-positionの挙動に反して中心揃えになってしまうのを回避する方法。

svg画像内の<svg>タグ内に、以下のコードを追記。

preserveAspectRatio=”xMinYMid”

例:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

     viewBox="0 0 20.8 41.6" style="enable-background:new 0 0 20.8 41.6;" xml:space="preserve" preserveAspectRatio="xMinYMid">

というような感じになる。

詳しくは下記を参照。

svg background image position is always centered in internet explorer, despite background-position: left center

Best Practices for Getting Started with SVG

IE11 min-widgh:initial; が反映されないバグ

IE11でmin-width:initial;が反映されない。initalはもともと0が設定されているため、0を直接指定すればOK。IE、edgeを見越したコーディングをするのであれば、min-widthの初期化には0指定がよさげ。

.sample {
 min-width: 0;
}

 

MagentoでCSSを適用する

MagentodでオリジナルテーマでCSSを適用する場合

フォルダ構成は以下のようになってる

Default_head_blocks.xmlに

<css src="css/test.css"/>

を追加。

そして気をつけるべき点は、モジュールのディレクトリ名はMagento_モジュール名にすること。CSSを読み込むためのモジュールは

Magenta_Theme

である。

CSSファイルがない場合は自動でlessファイルを参照しサーバー側でコンパイルしてくれる。

ChromeなどのBlinkレンダリングエンジン搭載のブラウザーでSVG画像がキャッシュされて別のSVG画像が表示されてしまうバグへの対処法

Chrome、VivaldiなどのBlink rendering engine搭載のブラウザーにて、キャッシュされたSVG画像が別の箇所に表示されてしまうバグへの対処。

特にソーシャルメディアのアイコンにSVG画像を使用し、アンカータグで囲ってリンクを追加し、そのリンクをクリックした後戻るボタンで戻った時に、キャッシュされた画像が違うところに出現したりする。(お化けのよう)

これへの対処は、

  1. SVG画像をobjectタグで読み込む
  2. objectタグ内に、name属性を追加し、ユニークな名前を設定する

特に、name属性を追加することで解決できる。

ソース:Google Chrome randomly shuffles SVG images in <object> tags