Gulp+Pug+Sass+VCCW導入手順まとめ

お久しぶりです。
久々にWord Press管理画面を開いてAdvanced Gutenbergを見たら前からあったの?ブログ用のカスタムスタイルを簡単に登録して使えることが判明したのでグーテンベルク行けるやん!となっています。
ただし入力画面には反映されないのでここはまたなんか仕様変更があったっぽいですが…

やり方はクラシックの方のスタイル登録より簡単だと思う。

  1. プラグイン「Advanced Gutenberg」を入れる
  2. 「<>カスタムスタイル」の項目を開く
  3. 下にある「+新規クラスを追加」をクリック
  4. 追加したいスタイルのclass名を上のボックスに入力
  5. 実際のスタイルを下の{ }の中に入力
  6. 左下の追加された項目の横の「✎」マークを押して選択リストでの表示名を入力
  7. 投稿画面で右のバーの「custom style」というプルダウンから登録した名前を選ぶ

これだけ!ただ7番はパッと見たところ「段落」ブロックでしか出てこないですね…

あと疑似要素を使っているものは Advanced Gutenberg には登録できないのですが…
前みたいに「テーマエディター」に入れてるスタイルシートに記入した後、Advanced~に空っぽのクラス名を登録すれば使えます。

さてでは本題に

行ってみましょう

“Gulp+Pug+Sass+VCCW導入手順まとめ” の続きを読む

なんだかよく分からない謎の単純作業その3をGASで自動化

今回は新エディターちゃんで書いてみようと思います。切り替えの時の文章読んだら2020年くらいまで使えるよみたいなこと書いてたしね!
しかしイキナリ入力画面だけ明朝体になったの違和感だし(変えようと思えばeditor-style.cssで変えられるけど、設定とかでも変えられないのか?)
あとせっせと登録したaddQuickTagニキが使えなくなってるのかも調べねばねば…

“なんだかよく分からない謎の単純作業その3をGASで自動化” の続きを読む

なんだかよく分からない謎の単純作業その2をGASで自動化

久しぶりに投稿しようとしたら何か入力インターフェイスが変わってて戸惑っています。。。
ていうかちょっとそれは後で調べるとして、クラシックの方に戻しました(方法はプラグイン『Classic Editor』を入れて有効化するだけ)

あと前回の
なんだかよく分からない謎の単純作業をcliclickとGASで自動化・前編
でGASはこの後!ってやった後に完全に飽きて続かないまま別の作業の記事を書きます。
しかしそっちもまた定期的なタスクになってもっと機能を充実させる必要が出てきたので、それも完成したらまとめて記事にしたいなと思っています。きっと。多分…

なんだかよく分からない謎の単純作業その2とは
大まかに言うとこの、これだからお役所は…という感じの分かりにくさを誇る謎のデータの謎のリストがあり、
黄色の列のデータを、灰色を付けた不要な項目を除いて…
こういった形でデータ階層が一目でわかるように並べ替えるというものです。
パッと見で分かりにくいんですが、上の画像で縦1列に並んでいる黄色のデータは右にある大・中・小(実際にはもっと沢山の階層がある)の分類に属した階層を成しています。
あとこれが300項目くらいあります。

 

さてそんなに細かく解説する時間が無いので備忘録程度になるのですが、思考含めた製作段階を書き起こしていきます。

“なんだかよく分からない謎の単純作業その2をGASで自動化” の続きを読む

なんだかよく分からない謎の単純作業をcliclickとGASで自動化・前編

なんだかよく分からない謎の作業とは

こんな感じの謎のファイル(結構デカい)のリストページにて、ひたすら1000件近くある頭文字がXX(仮)のファイルをダウンロードしていくという作業(※怪しい仕事ではない)
ちなみにダウンロードは一個2分ほどかかる上に一つづつしか出来ない、あと2窓も出来ない。。

 

簡単に言うと会社で作っているシステムの割と根幹をなす外部データのダウンロードです。
そのシステム自体は超ハイテク(らしい)なんですが、偉い人から「やってると気が狂いそうなので」と回ってきたこの狂気のアナクロ作業がそのハイテク技術サービスの裏に隠されていたとは…ビックリですよね。

とりあえず指示通り手作業で3分の1ほどやってみたのですが、普通に気が狂いそうになったしこれは人間様がやる仕事ではないと確信したので自動化をもくろみました。
この記事では3つの効率化手順をご紹介します。

“なんだかよく分からない謎の単純作業をcliclickとGASで自動化・前編” の続きを読む

Why Every Software Engineer Should Write Articles日本語訳・前編

エンジニアは全員技術記事を書くことを習慣化した方がいいぞ

qiitaで大人気のこの記事、こんなに評価されているということは良い内容で、しかも良い翻訳なんだろうなと思いました。

・・・つまり訳も原文もまだ読んでないわけです。
なぜなら面白そうな文章があって、しかも「訳の回答がある」というのはそうあることじゃないし、まず自分なりに訳してみてからこの日本の記事を読んで答え合わせしていけば一石二鳥?なんじゃないかとひらめいたからです。

というわけでまた翻訳記事を書くのですが、
アップした記事は自分なりに書いた後、qiita の記事を見て、致命的に間違っていたところだけ直したものになります。
多分記事よりもだいぶ直訳に近くなると思います。

“Why Every Software Engineer Should Write Articles日本語訳・前編” の続きを読む

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

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

↑こういう状態

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

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

Animate.css日本語訳

Animate.css

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

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

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

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

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

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