検証ツールを使って少しCSSが弄れる人で、加えてデザインが好きな人であれば間違いなく陥るであろうブログ弄りたい病が再発してしまった。追加CSSでプレビューしている時間が至高なんだ。多分ずっとしていられる。そうなることが分かっていたからWordPressのテーマに付属している独自ブロックを出来るだけ使わないようにした訳だ。
ただ、タブはどうしても使いたいからカスタマイズした。下記がそれ。中に入ってる画像はファビコンで使ったものを試しに載せてみた。デフォルトだとWordPress感丸出しで絶望的にダサいからIllustratorで簡易的に作ってみた。フォントはこのブログのコードフォントで採用しているMenlo。
CSSのコードも載せておくから参考にして欲しい。テーマによってクラス名は異なるけど、それ以外のプロパティはそのまま適応できると思う。ちなみにWordPressのテーマはSWELLを使用。個人的にかなり気に入ってる。
.is-style-default {
.c-tabList__item {
border: .5px solid #555555;
background-color: #3C3F41;
font-family: Menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
}
.c-tabList__button {
opacity: 1;
}
.c-tabList__button[aria-selected=true] {
color: #bbbbbb;
background-color: #4E5254;
border-bottom: 3px solid #4787C9;
}
.c-tabList__button {
border-bottom: 3px solid #3C3F41;
&:hover {
background-color: #27292A;
color: #bbbbbb;
}
}
.c-tabBody {
border: .5px solid #555555;
background-color: #262626;
}
}カラーリングはIntelliJを参考にした。知ってる人はすぐに分かると思う。Preferences/Editor/Color Schemeに16進数のコードが載ってるからそれをコピペするだけ。たまに調べても分からないのがあるから、そんな時はスクリーンショットを撮って無料のスポイトツールを使えばOK。
後は高速化させるための工夫とかしたけど書くと長くなるから割愛する。Page Speed Insightsで計測してみるとなかなか悪くない数値だった。
WordPressは楽しいけどプログラミングではない。お遊びはこの辺にしてJavaに取り掛かろう。本当にキリがない沼だし、終わった後の達成感も何もない……。
といってもリファクタリングもいい加減飽きてきたな。今日はようやくサーブレットのリファクタリングが終わった。後はJSPの変数とかをサーブレットにリンクさせれば一応終了だ。EclipseだとJSPの整形が滅茶苦茶になって嫌気が差したけどIntelliJは有料版だけあってそこもカバーしてくれてるのは有難い。まあ、ボチボチやっていきますか。