カテゴリー: WEB

WordPressのCSSを高速更新

WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORESERVER。
(特にWordPress限定ではない)

VSCode設定

Sass編集

大体標準で対応。SASS記法のシンタックスハイライトは拡張機能Sassをインストール。

コンパイル

  1. 拡張機能Live Sass Compilerをインストール
  2. ステータスバーWatch Sassで監視開始
  3. Sassを更新 (.css自動生成)
続きを読む WordPressのCSSを高速更新

SassのSASS記法の為に

SASS記法について調べる時、SassのSASS、SCSSもSassという最悪のググラビリティによって阻まれるSASSの芽を救いたい。もとい自分が模索した記録。

SASS記法のメリット

  • 速く、美しく、厳格

SASS記法のデメリット

  • 「慣れてるから、みんな使ってるから」と冗長なSCSS記法が支持され、ツール対応が不遇

CSS/SCSS→SASS移行

変換

  1. SassMeisterの左ペインにCSS/SCSSコードを貼り付け、メニューSass > Sassを選択
  2. 変換後コードを調整
    • 複数行コメントの終了タグ*/追加 (又は/*→//置換)
    • include後の改行削除
    • インデントがスペースx2になるので好みで置換
  3. コピーして拡張子.sassで保存
続きを読む SassのSASS記法の為に

WordPressの画像を減量

png保存のSSがかさばる。画像編集ソフトを立ち上げずD&Dで手軽に圧縮したい。現在の主流はWebアプリだが、画像をUP・DLする時間が無駄なのでフリーソフトを探す。

画像圧縮に求める条件

  • 画像をD&Dで圧縮・保存
  • 圧縮が高速
  • PNG→JPG変換
  • ローカルで動作

PNGロスレス圧縮系は遅い上にほとんど減らず。D&Dのみで実行ボタンすら不要のBzzt! Image Editorにした。画像回転オプションもあり助かる。

続きを読む WordPressの画像を減量

Web小説を任意のフォントで縦書き

Web小説の縦書き表示を模索。

CSS

単純な縦書きならCSSで可能だが、小説はフォントが最重要。ほとんどのフォントライセンスでWebフォントやEPUB埋め込みは許可されていない。源ノ明朝、しっぽり明朝は良いフォントだが、筑紫明朝系を使いたい。

PDF

PDF埋め込みは許可されている事が多い。WordPressプラグインのPDFビューアを複数試したが、資料やカタログが想定されていて書籍向きではない。モダンな3Dフリップ表示の物は見開き・RtL(縦書き向け)設定があったが、音やアニメの余分な演出が付き、ホイールスクロールが出来ず。

続きを読む Web小説を任意のフォントで縦書き

理想のLightboxを求めた

WordPressに理想的な挙動のモーダルウィンドウを実装する。

画像モーダルに求める条件

  • 画像クリックで閉じる (×ボタンや背景のクリックは面倒)
  • シンプル (フレームや影やズームボタンは不要)
  • アニメーション無し (ふわっと出るのは時間の無駄)
  • スワイプ対応 (左右で閲覧、上下で閉じる)
  • ギャラリーをホイール上下で操作
  • WordPressで設定したキャプションが出る

Lightbox系プラグインを色々入れて設定してみた所、全て満たせるのはFancyBox for WordPressだけだった。大抵は「画像クリックで閉じる」か「スワイプ対応」が出来ない。

FancyBox～で機能的には申し分ないが、スワイプの挙動に不安定な所がある。PCだと横長の画像しかスワイプ出来ず、スワイプ失敗時キャプションの領域が謎に増えてゆく。(元のFancyBox3では問題ない)

「画像クリックで閉じる」以外を満たし、操作感が気持ちいいLightbox with PhotoSwipeを改変してクリックで閉じられるようにする。

続きを読む 理想のLightboxを求めた