WordPressで定義リストdlを使う

2列構成・サイズ可変のリストを、スペース連打やテーブルを使わずに作りたい。
dl(定義リスト)のグリッド化で実装。

食べる
野菜
食べない
<dl class="grd">
  <dt>肉</dt>
  <dd>食べる</dd>
  <dt>野菜</dt>
  <dd>食べない</dd>
</dl>
dl.grd
	display: grid
	grid-template-columns: 1fr 1fr
	width: fit-content

シンプルで理想的だが、WordPressで使えるリストブロックはolulのみ。
dlを作成出来るプラグインを探す。

続きを読む WordPressで定義リストdlを使う

WordPressのHCBに言語を追加

Highlighting Code Blockプラグインに対応言語を追加する。

設定

  1. 管理画面の設定 > [HCB] 設定 > ヘルプ(最下部)のリンクにアクセス
  2. 追加したい言語にチェック
  3. DOWNLOAD JSでprism.jsをDLし、テーマフォルダ以下にUP
  4. HCB設定の使用する言語セットクラスキー:”言語名”,形式で行を追加
    ※クラスキーはprism.jsの2行目で確認
  5. 独自prism.jsにパスを記入し、設定を保存

SASSとAutoHotKeyを追加した。
CSSもDL出来るがHCBと競合した為使用せず。

olの連番をcounter関数で表示

olの連番のピリオドを消す為、list-styleではなくcontent: counter()での表示にした。

CSS追加

licounter-increment: カウンタ名
li::beforecontent: counter(カウンタ名)を指定する。

ol li
	position: relative
	list-style-type: none
	counter-increment: cnt
	&::before
			position: absolute
			width: 1em
			height: 1em
			left: -1.4em
			text-align: center
			content: counter(cnt)
続きを読む olの連番をcounter関数で表示

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

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

アイコンDL

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

YouTubeの動画タイトルを全文表示

Pixivの作品タイトルと同様、全文読めないのでStylusで解決。
タイトル部分の幅を広く、フォントを少し拡大し、太字解除。
アイコンは無駄に空いているチャンネル名の横に移動。

適用前・適用後
続きを読む YouTubeの動画タイトルを全文表示

WordPress覚書

パス取得定数・関数

ABSPATHWordPressディレクトリのフルパス+/
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のみスラッシュが付く