バージョンを4.5から5系に上げました.

2025.09.23

Logging

おはようございます.ブートストラップのバージョンを4.5からやっと5系に上げました.でもこれ以上バージョンを上げるとサイトのデザインが崩れるので上げられないというジレンマがあります.

なのでブートストラップ5.4とかには上げれない、上げるとなるとCSSのクラス修正が発生します.でもそろそろ最新に上げたい、欲を言うとテイルウィンドに全て変えたい.

どこかにブートストラップからテイルウィンドにコンバートしてくれるサイトはないものか・・・とチャットAIに投げたところ、いくつか候補を上げてくれました.

その中でシンプルで使いやすいWindify (Bootstrap to Tailwind CSS Converter)というサイトが良いよと書かれていました.

https://bootstrap-to-tailwind-css.vercel.app

実際、使ってみたら結構良かったのですが、ただこれコードを含まれたりするとちょっと心配なので、そういう人達向けにこちらの方法が良さそうです.

リンクを参照してもらったら分かると思いますが、コマンドラインでコンバート（変換）してくれるのでこちらの方法が重宝しそうです.

こちらコマンドラインで変換する方法で崩れるという記載がQiitaに書かれていましたが、崩れた場合は手動で直す方法がありそうなのでブランチを切り対応するほうが良さげです.

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代後半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2025年09月23 07:00日

タグ

いくつ, クラス, コード, こちら, コマンド, これ, コンバート, サイト, ジレンマ, シンプル, そう, チャット, テイルウィンド, デザイン, どこ, ところ, バージョン, ブートストラップ, ブランチ, ほう, もの, ライン, リンク, 人達, 以上, 修正, 候補, 全て, 参照, 向け, 場合, 変換, 対応, 心配, 手動, 方法, 明日, 最新, 発生, 記載, 重宝,

webpに対応しましたプラグインでカバーしました。 Safariめ！！

2020.01.25

Logging

WebP Express（ウェッピーエクスプレス）というWordPressのプラグインがあるので、そちらでコンバート（変換）すれば良いのですが、大量に画像があるサイトはそれで変換できないので下記の対応方法で対応をお願いします。

1. WebP Express使用してコンバートする際に webpが生成されます。webpの生成場所を確認する。現在は下記の配下にwebp画像が作られています。

/wp-content/webp-express/webp-images/doc-root/wp-content/uploads

2.1の配下にwebpの画像を生成するために下記のコマンドを実行します。自分の場合、アップロードしている画像をリスト化して一括処理するプログラミングを実行しました。尚、cwebpがインストールされていない場合、インストールする必要があります。さくらレンタルサーバーには入っているみたいです。

cwebp -q 90 元画像名（階層を含む）.png -o 変換後のファイル名.webp （変換先の階層を含む）

こうすることで画像は全てwebpに変換することが可能ですが、これだけでは表示が切り替わらないので下記の画像を参照しプラグインの設定を変更してください。

ちなみにこのwebp（ウェッピー）はグーグルさんが開発したものらしいです、大体のブラウザが、こちらの webpに対応しているのですがSafariとIEは非推奨みたいなんですよね。何れwebpに対応すると思います…思いたい。

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2020年01月25 11:57日

タグ

１, 2.1, cwebp, doc-root, Express, Safari, uploads, webp, webp-express, webp-images, WordPress, wp-content, アップロード, インストール, ウェッピーエクスプレス, お願い, カバー, コマンド, コンバート, サーバー, サイト, さくら, そちら, それ, ため, プラグイン, プログラミング, リスト, レンタル, 一括, 下記, 使用, 処理, 場合, 場所, 変換, 大量, 実行, 対応, 必要, 方法, 現在, 生成, 画像, 確認, 自分, 配下, 際,