Web制作 – NILX.ORG

リンク下線を整える

テキストリンクの下線が英字のディセンダや( )でブツブツ途切れる。
気になるので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で下線を直接スタイリング可能になった。ただし線の太さは指定出来ない。

CSS Web制作

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');

Web制作 WordPress

WordPressにミニマップ実装

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

設置

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

Web制作 WordPress

WordPressのCSSを高速更新

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

VSCode設定

Sass編集

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

コンパイル

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

VSCode Web制作 WordPress 拡張機能

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)で保存先が記憶されるようになった。

Web制作 WordPress 拡張機能

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

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

CSS

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

PDF

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

EPUB

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