タグ: Web制作

リンクにサイトアイコンを表示

CSSの疑似要素でリンクにサイトアイコンを付ける。
URLで判別する為、よく使うリンク先をいくつかCSSに記載しておく。

アイコンDL

続きを読む リンクにサイトアイコンを表示

WordPress覚書

パス取得定数・関数

ABSPATH
WordPressディレクトリのフルパス+/
TEMPLATEPATH
get_template_directory()
親テーマディレクトリのフルパス
STYLESHEETPATH
get_stylesheet_directory()
子テーマディレクトリのフルパス
get_theme_file_path
子テーマ(優先)、無ければ親テーマディレクトリのフルパス
home_url()
サイトのURL
site_url()
WordPressのURL
get_template_directory_uri()
親テーマディレクトリのURL
get_stylesheet_directory_uri()
子テーマディレクトリのURL
get_theme_file_uri()
子テーマ(優先)、無ければ親テーマディレクトリのURL

ABSPATHのみスラッシュが付く

WP用てがろぐスキンを自動生成

てがろぐ
https://www.nishishi.com/cgi/tegalog/

自鯖にマイクロブログを置けるCGI。妙に懐かしいデザイン(CGI自体が懐かしい)だが2017年作で、更新も精力的になされている。Spotify等の埋め込みにも対応している最新スクリプトである。

CSSとスキンで自由にデザイン出来る為、WordPress製サイトの一部として馴染むよう設置を試みた。

スキンの構成

  • skin-cover.html　ページ全体
  • skin-onelog.html　↑に差し込まれる記事部分
  • tegalog.css

skin-cover.htmlにWordPressのヘッダとフッタを読み込ませたい。
ヘッダ内サイドバーには最新記事リスト等があるので自動生成したい。

続きを読む WP用てがろぐスキンを自動生成

リンク下線を整える

テキストリンクの下線が英字のディセンダや( )でブツブツ途切れる。
気になるので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の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記法の為に