yokkin.com

テーマ作成進捗

  • 更新日: 2021/02/17

やること

  • SNSリンク作り直し
  • 表のデザイン
  • ウィジェットを自作する
  • linear-gradient の勉強
  • SVGアニメーション
  • コードタグ、キーボードボタンのマークアップ
  • h タグの色

日記

こんなものを日記と呼ばせるな

2021/2/7

さよならフレームワーク

Font Awesome と Bootstrap 5 にお別れを告げました。

特にFont Awesome についてはページを読み込む時点ですべてのフォントを読み込みに行くのでリソースは食いつぶすし、Bootstrap についていえばこれのせいで原因不明のレイアウトの制約を受けざるを得ませんでした。

というのも、昨日スクロール可能な表を作ろうと苦心していたのですが、どういうわけか 576px以下のデバイスで見たときにはみ出すんですよね。うっとうしかったので自分で@mediaクエリを付けてデバイス判定するようにしました。慣れない作業でした。

Iconset + Notepad++でアイコンのあるデザインを組んでいる様子
Iconset + Notepad++でアイコンのあるデザインを組んでいる様子

それから、Iconset というソフトを使い始めました。簡単に言えば、使いたいアイコンを選択用にダウンロードして、使いたいアイコンを選択したらあとはコードに張り付けられるみたいなソフトです。

A lightning-fast SVG icon organizer and manager.
A lightning-fast SVG icon organizer and manager.
A beautiful and powerful application to collect, customize and manage all your icons.

細かいところ

  • カテゴリ名、タグを記事内に移動した
  • SNSリンクをリニューアル
  • 見出しのデザインを変えた (が、ぱっとしない)

Ctrl+Shift+Iで開発者ツール開けたりCtrl+Shift+Rで強制リロードできるのマジで便利ね

2021/2/5

  • タイトル部分のline-heightを広げた
  • 記事一覧ページのページ分けを実装できた
  • YouTubeは手動で<div>の中に入れることにします
  • EWWW Image Optimizer を導入した
Fluid Width Video | CSS-Tricks
Fluid Width Video | CSS-Tricks
IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect h...

2021/2/4

画像回りの処理

勝手にインラインでスタイルが設定されているので通常のCSSではデザインを制御できない
勝手にインラインでスタイルが設定されているので通常のCSSではデザインを制御できない

<figure>内の画像のスタイルを変更した。ブロックエディタ / Tiny MCE で生成した画像にはそれぞれ勝手にクラス名が割り振られるのですが、その時点で勝手にスタイルを割り振るのでたちが悪い…。

記述の周りを囲む<div>を用意して、その中の画像はすべてwidth: 100% !important;になるよう設定しました。ついでに言えばキャプションの挙動もおかしいので無理やりです。ほんと皆どうやってここ処理してるんだ？？？？？

ショートコード

勝手にショートコードに<p>タグくっついたりして迷惑を被っていたのでコードを拝借した（生成されたタグを角括弧に置換するらしい）

WordPressでショートコードがｐタグで囲まれたり改行されてしまうのを防ぐ方法
WordPressでショートコードがｐタグで囲まれたり改行されてしまうのを防ぐ方法
僕はWordPressに投稿する場合、基本的にテキストエディターを使ってHTMLタグも手で打ったりAddquicktagに登録したものを使ったりしているので、ショートコードとは無縁のWPライフを送って...

その他

  • Simple Blog Card のスタイルをいじった
  • ページタイトルをheader.php内に統合してそれぞれのページタイトルで表示し分けるプログラム書いた
  • normalize.css導入
Normalize.css: Make browsers render all elements more consistently.

2021/2/2

  • Simple Blog Card を導入した
  • サイドバーとかいろいろやった
  • screenshot.pngを撮った
  • Bogo（多言語対応プラグイン）を入れた
  • 404ページを作った（後々ユーモアのあるものに作り替えたい）

ショートコードはここでひな形を生成できるのでとても便利でした

Generate WordPress Shortcodes
Generate WordPress Shortcodes
WordPress Shortcodes Generator for developers.

2021/2/1

Webサイトのローディングを軽くするためにCSSをページ別で切り替えるように書いた。結局あんまり変わらなかったけど

if文をこんな風に switch文みたいに書いちゃうのって大丈夫なんですかねえ

ともかくこういう風にすると1ファイル当たりの行数も減るし管理が楽になった気がする

<!-- CSS -->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<?php if ( is_front_page() ): ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/files/css/front-page.css">
<?php endif; ?>
<?php if ( is_home() ): ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/files/css/home.css">
<?php endif; ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/files/css/customize.css">

2021/1/31

ヘッダー画像を作り直した。GIMPとAviUtlのコンボ技です。

2021/1/30

  • WordPressのテーマに移植開始

2021/1/29

  • Faviconを作った。もちろんInkscape

2021/1/28

  • card 部分作った

WindowsのWebブラウザのフォントレンダリングみんなカスだと思う

2021/1/26

  • デザイン完了
  • コーディング開始
  • Notepad++いいね（早速NppFTPを導入しました）

元々使っていたWindowsにプリインストールされている Consolas というフォントを使うように設定ますが、そうでない環境のために代替の Inconsolata をWebフォントで読み込むようにしてます。

Google Fonts
Google Fonts
Making the web more beautiful, fast, and open through great typography

2021/1/24

Inkscapeでデザイン開始。1.0.2にバージョンを上げたらルーラーの座標が左上になってた。ちょうどそんなことができないかな、と思っていたところの神アプデでした。みんなも落とそう（落とせ）

左上が原点になってた
左上が原点になってた