テーマ『twentyseventeen_child』のアンダーライン修正

前々から気になってた第2弾なのですが、今使っているこの『twentyseventeen_child』というデフォルトでワードプレスに入っているテーマのアンダーライン、文字の色とは関係なく黒に設定されています。

↑こういう状態

デザインとか個人的にはほとんど弄る必要がないほど気に入ってるのですが(記事の幅を少し変更しています)、このアンダーラインだけちょっと文字色を変えた時に不自然な感じがしたので変更してみることにしました。

“テーマ『twentyseventeen_child』のアンダーライン修正” の続きを読む

Animate.css日本語訳

Animate.css

今日は昨日Githubの人気レポジトリから発見した、CSSだけで実装できる愉快なテキストアニメーション集『Animate.css』の取説(README.md)を翻訳していきます。

ただしJQueryなど私が技術的にちゃんと理解していない部分は今回は訳さないでおきます。。そのうち分かったら補完するかも。

“Animate.css日本語訳” の続きを読む

コード埋め込みにGithub gistを導入しました🐙😻

前々から思っていたんですが、今まで使っていたコード埋め込み用のプラグイン、デザインは少し野暮ったいし何より字が小さすぎる気がして、デフォルトでサイズ大きいかサイズ変更できるプラグインがないか探してみました。

“コード埋め込みにGithub gistを導入しました🐙😻” の続きを読む

wordpressのログインヘッダーが起こす表示崩れ

友人のサイトを作っていて少し前に一応完成したものを最近手直ししていたのですが、その時気が付いたCSSの表示崩れについて。

↑ログインするとワードプレスって上にこういう管理ヘッダー?が出て来るじゃないですか。これは修正済みの状態なんですが、この前その状態で見たら右上のハンバーガーナビが消えていることに気が付いたんですよね…。

“wordpressのログインヘッダーが起こす表示崩れ” の続きを読む

30 Seconds of CSS日本語訳⑨

「30 Seconds of CSS」

より、覚えておくと便利なCSSテクニックをどんどん訳して英語力も上げようというこの企画第9回目、ついに最終回です。

前回:30 Seconds of CSS日本語訳⑧

33.OS内蔵のフォント- System font stack

34.トグルスイッチ- Toggle switch

35.トランスフォームで中央配置- Transform centering

36.三角形- Triangle

37.省略されたテキスト- Truncate text

“30 Seconds of CSS日本語訳⑨” の続きを読む

初gridレイアウトで躓いたところ

この記事で伝えたいこと

IE11にグリッドレイアウトを対応させる場合はgrid-template-columnsgrid-template-rowsの中のminmaxの最小値にautoを使うのを止めよう。

なぜ?:

プリフィクス付けても認識されなくてレイアウトがぐちゃぐちゃになるから。

対策:

autoの代わりにmin-content数値を使ったら治る!(内容によってmin-contentが効かない時もある、その時は具体的にpxで指定)


作っていたサイトのコンテンツだとmin-contentでバッチリだったんですが、サンプルで作ったミニマルなコンテンツだと効かなくて0を使ったら一応解決したりして…もう原理がよく分からないんですがとにかくよろしくお願いします。(誰か~)

“初gridレイアウトで躓いたところ” の続きを読む

30 Seconds of CSS日本語訳⑧

「30 Seconds of CSS」

より、覚えておくと便利なCSSテクニックをどんどん訳して英語力も上げようというこの企画第8回目です。

前回:30 Seconds of CSS日本語訳⑦

29.良い感じのアンダーライン – Pretty text underline

30.全てのスタイルの初期化 – Reset all styles

31.シェイプされた仕切り線 – Shape separator

32.色が薄らぐ兄弟要素 – Sibling fade

“30 Seconds of CSS日本語訳⑧” の続きを読む

CodePen貼り付けテスト

See the Pen We’re Getting Close by Lanny (@lannymcnie) on CodePen.0


き、きもてぃ~~

トップページにあったやつですが、見てるだけでちょいキモ気持ちいい、癒される

30seconds of CSS でも使われているCodePen、見やすくて良いですよね。

今回はとりあえずワードプレスで記事に載せる方法を探そうと思って
CodePenのソースコードをWordPressに貼り付けて紹介してみよう
こちらを参考に、人様のコードを掲載してみるところまでやってみましたが、そのうち自分も登録して投稿したのを引用してみたいですね。

後は自分が便利だと思ったやつを貼るメモ↓ “CodePen貼り付けテスト” の続きを読む

30 Seconds of CSS日本語訳⑦

「30 Seconds of CSS」

より、覚えておくと便利なCSSテクニックをどんどん訳して英語力も上げようというこの企画第7回目です。

前回:30 Seconds of CSS日本語訳⑥

25.:notセレクタ – :not selector

26.要素を非表示にする – Offscreen

27.スクロール要素の下端に白いぼかしを入れる – Overflow scroll gradient

28.パッと出て来るメニュー – Popout menu

“30 Seconds of CSS日本語訳⑦” の続きを読む

30 Seconds of CSS日本語訳⑥

「30 Seconds of CSS」

より、覚えておくと便利なCSSテクニックをどんどん訳して英語力も上げようというこの企画第6回目です。

前回:30 Seconds of CSS日本語訳⑤

21.高さの値の変化 – Height transition

22.ホバー時の下線アニメーション – Hover underline animation

23.最後尾のアイテムに残りの高さを取らせる – Last item with remaining available height

24.カーソルに付いてくるグラデーション – Mouse cursor gradient tracking

“30 Seconds of CSS日本語訳⑥” の続きを読む