目次
やること
- SNSリンク作り直し
- 表のデザイン
- ウィジェットを自作する
linear-gradient
の勉強- SVGアニメーション
- コードタグ、キーボードボタンのマークアップ
- h タグの色
日記
こんなものを日記と呼ばせるな
2021/2/7
さよならフレームワーク
Font Awesome と Bootstrap 5 にお別れを告げました。
特にFont Awesome についてはページを読み込む時点ですべてのフォントを読み込みに行くのでリソースは食いつぶすし、Bootstrap についていえばこれのせいで原因不明のレイアウトの制約を受けざるを得ませんでした。
というのも、昨日スクロール可能な表を作ろうと苦心していたのですが、どういうわけか 576px以下のデバイスで見たときにはみ出すんですよね。うっとうしかったので自分で@media
クエリを付けてデバイス判定するようにしました。慣れない作業でした。
それから、Iconset というソフトを使い始めました。簡単に言えば、使いたいアイコンを選択用にダウンロードして、使いたいアイコンを選択したらあとはコードに張り付けられるみたいなソフトです。
細かいところ
- カテゴリ名、タグを記事内に移動した
- SNSリンクをリニューアル
- 見出しのデザインを変えた (が、ぱっとしない)
Ctrl+Shift+Iで開発者ツール開けたりCtrl+Shift+Rで強制リロードできるのマジで便利ね
2021/2/5
- タイトル部分の
line-height
を広げた - 記事一覧ページのページ分けを実装できた
- YouTubeは手動で
<div>
の中に入れることにします - EWWW Image Optimizer を導入した
2021/2/4
画像回りの処理
<figure>
内の画像のスタイルを変更した。ブロックエディタ / Tiny MCE で生成した画像にはそれぞれ勝手にクラス名が割り振られるのですが、その時点で勝手にスタイルを割り振るのでたちが悪い…。
記述の周りを囲む<div>
を用意して、その中の画像はすべてwidth: 100% !important;
になるよう設定しました。ついでに言えばキャプションの挙動もおかしいので無理やりです。ほんと皆どうやってここ処理してるんだ?????
ショートコード
勝手にショートコードに<p>
タグくっついたりして迷惑を被っていたのでコードを拝借した(生成されたタグを角括弧に置換するらしい)
その他
- Simple Blog Card のスタイルをいじった
- ページタイトルを
header.php
内に統合してそれぞれのページタイトルで表示し分けるプログラム書いた normalize.css
導入
2021/2/2
- Simple Blog Card を導入した
- サイドバーとかいろいろやった
screenshot.png
を撮った- Bogo(多言語対応プラグイン)を入れた
- 404ページを作った(後々ユーモアのあるものに作り替えたい)
ショートコードはここでひな形を生成できるのでとても便利でした
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フォントで読み込むようにしてます。
2021/1/24
Inkscapeでデザイン開始。1.0.2
にバージョンを上げたらルーラーの座標が左上になってた。ちょうどそんなことができないかな、と思っていたところの神アプデでした。みんなも落とそう(落とせ)