リンク下線を整える

テキストリンクの下線が英字のディセンダや( )でブツブツ途切れる。
気になるのでCSSで調整。

適用前
適用後

CSS追加

a {
	text-decoration-skip-ink: none;
	text-underline-offset: 2px;
	text-decoration-color: #999;
}
text-decoration-skip-ink: none下線を繋げる
text-underline-offset: _px下線の位置を下げる
text-decoration-color: #___下線の色を変える

従来はtext-decoration: noneした上でborder-bottomを付けていたが、CSS3で下線を直接スタイリング可能になった。ただし線の太さは指定出来ない。

WordPressの管理バーを小型化

主張が強すぎるログイン時のadmin bar。
CSSで完全非表示、プラグインでマウスオーバー表示などに出来るが、利便性を求めて「小型化して必要なボタンのみ常時表示」にする。

何故右なのかというと、検索フォームが左に伸びる為。

CSS追加

#wpadminbar {
	top: 50%;
	left: auto;
	right: 0;
	transform: translateY(-50%);
	width: 40px;
	min-width: 40px;
	height: auto;
	padding: 6px 0;
}

@media screen and (max-width: 782px) {
	html #wpadminbar {
		display: none;
	}
}

#wp-admin-bar-site-name,
#wp-admin-bar-customize,
#wp-admin-bar-new-content,
#wp-admin-bar-edit {
	width: 30px;
	overflow: hidden;
}

#wpadminbar .quicklinks > ul > li > a {
	padding: 0 10px;
}

#wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
	background: transparent;
}

#wp-admin-bar-wp-logo,
#wp-admin-bar-updates,
#wp-admin-bar-comments,
#wp-admin-bar-my-account {
	display: none;
}

#wpadminbar .quicklinks .ab-top-secondary > li {
	padding: 0 3px;
}

画面幅782px以下は非表示。

function.php編集

function.phpに以下を追加。
上部に32px確保されるのを阻止する。

function remove_adminbarsp()
{
	remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('get_header', 'remove_adminbarsp');

WordPressにミニマップ実装

IDEによくあるミニマップ。近年どんどん細く掴みにくくされるスクロールバーの代わりになり大変便利。
Vivaldiのページアクション機能でWebページにも適用出来て感動し、検索するとスクリプトが配布されていたのでWordPressに設置してみた。

設置

配布元: pagemap · mini map for web pages · larsjung.de
設置は簡単で、JSを読み込み、<canvas>タグとスクリプトを一行追加し、CSSで調整。同梱のdemoからコピーできる。

続きを読む WordPressにミニマップ実装

WordPressのCSSを高速更新

WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORE SERVER。

VSCode設定

Sass編集

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

コンパイル

拡張機能Live Sass Compilerを入れる。ステータスバーWatch Sassで監視開始。.sass/.scss保存時に.cssが自動生成される。

続きを読む WordPressのCSSを高速更新

WordPressの画像を減量

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

画像圧縮に求める条件

  • 画像をD&Dで圧縮・保存
  • 圧縮が高速
  • PNG→JPG変換
  • オフライン

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

唯一、画像の上書きor保存先の設定が記憶されないという欠点がある。PNG→JPG変換は上書きされないので問題は無いが、JPG→JPG圧縮時に注意。
→Version 1.2.9(2021/04/29)で保存先が記憶されるようになった。

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

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

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

CSS

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

PDF

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

EPUB

EPUB埋め込み可能フォントであればリフロー型、不可であれば固定型(画像化)で作成。国産ビューアのBibiが高機能でセンスも良い。見開きと単頁のレスポンシブ表示、ホイール・スワイプに対応。ただモバイル版Sleipnirで開けなかったのと、数ページでもローディング時間が発生し、モーダル表示は非対応。「電子書籍」であればこれでいいと思う。Web小説は一瞬で開きたい。

画像化

固定型EPUBの拡張子をzipにすると中身の画像を取り出せるので、Web漫画ビューアを使う。laymicがレスポンシブ、ホイール・スワイプ対応、モーダル表示。機能的には申し分ないが、htmlに全ページ分の画像ファイル名を書き連ねる必要がある。

EPUBは「背景なし・余白なし」で作成し、CSSでデザインを調整する。
背景画像を乗算する事で容量を抑え、メディアクエリで余白を指定してレスポンシブにテキストサイズを調整。不要なツールボタンを隠してシンプルに。