イイダリョウのブログ。JSWordPressの前回の記事でGutenbergのブロックを使いコードを1行も書かずにペライチページを作りました。Nineteenは...クセが強い!CSSとJSのカスタマイズ、テーマのphpファイルをいじらずにダッシュボードだけで完結できました。自作テーマどころか子テーマを作るのも面倒だ!という方は是非こちらの方法をお試しください。なくなってしまうのかと思ってたので出てくれたのは嬉しい。レイアウトがワンカラムなのもスマホ時代に合っていると思う。大画面でこのまっ暗いメインビジュアルは面食らう。これまでのカスタマイズ(自作テーマ、子テーマ)これまで、WordPressのテーマカスタマイズは主に2つの方法があった。自作テーマ子テーマ自作テーマ自作テーマは自分でゼロから静的なHTMLページを作り、phpのパーツを埋め込んでいく方法。私は普段は主にこの方法を取っている。メリットは完全に自由にテーマを作れること。デメリットは工数がかかることとPHP、SQL、WordPressテンプレートタグの知識が必要なこと。クモのようにコツコツと子テーマ既存テーマを使えば期間は自作テーマより早く済む。WordPress.orgそのものずばりな既存テーマがみつかればいいがいいが大なり小なりカスタマイズは生じると思う。既存テーマのカスタマイズには別のデメリットがあって、既存テーマが更新されるとカスタマイズした部分が上書きされてしまう。それを防ぐために、既存テーマから子テーマを作って紐づける設定を行う。外観>カスタマイズの「追加CSS」でCSSをカスタマイズ自作テーマどころか子テーマすら作る時間がない、という場合にダッシュボードでCSSを直接カスタマイズする方法がある。「追加CSS」!「外観」の「カスタマイズ」を開く。(ここは前回も色などが変更できた場所)サイドバーの一番下の「追加CSS」を押す。CSSの入力欄が開く。75vh;}デベロッパーツールでclass名を調べながら、背景の色を薄く。あと、全画面になっていたので高さをvhで75%に。クモのようにコツコツとおお!リアルタイムで右の画面のスタイルが変わった!これは便利。Nineteenは文字も大きいんだよなー。文字のサイズも変更しよう。16px;}見出しの背景色も設定してみた。こちらもリアルタイムで見えるので数値設定が直感的にできた!なお、この編集はテーマフォルダのphpファイルには影響がないので、テーマのバージョンアップの影響は受けないらしい!(「外観>テーマエディタ」はテーマのphpファイルを直接書き換えるため、テーマ更新の影響を受けてしまう)外観>ウィジェットの「カスタムHTML」でJSをカスタマイズさて、CSSはカスタマイズができた。JSを変える方法も試す。「カスタムHTML」が使えそう。「外観」の「ウィジェット」を開く。「カスタムHTML」というウィジェットがあるので「フッター」にドラッグ三角アイコン(▼)を押す。HTMLの入力欄が現れる。HTMLなのでJS直書きではなくscriptタグで囲う。</script>デベロッパーツールで先ほどの段落の下にある画像のclass名を調べて変数btnに紐づける。クリックイベントでアラートを仕掛ける。こちらもシンタックスハイライトの色がついて見やすい。(やはり入力欄は少し狭いが)先ほどのclass名は真ん中の画像。JS」なお、私は「追加CSS」や「カスタムHTML」が保存できずにクルクル回る現象を経験した。ロリポップ環境だとWAFのセキュリティ設定とかみ合わず、設定をOFFにする必要がありそう。ボクアフィWAF(ウェブアプリケーションファイアウォール)について調べると、うーむ、セキュリティ上はあまりOFFにするのは好ましくなさそうだなぁ。Press同じ現象になった方は、お試しあれ。最後にこれまで自作テーマを作るのが結構好きだったのだけど、スピード重視のタスクのときは、自作テーマも子テーマも作らずにダッシュボード上でのカスタマイズで済ませるのもいいかもなーと思いました。臨機応変に対応しながら、余った時間を別の仕事や学習に当てていければと思います。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。