PIYO - Tech & Life -

GW中にブログの見た目をだいぶいじりました。 ブログ書こうにもなんとなくテンションがあがらないのを見た目を変えることで無理やりテンションを上げるという作戦です。 久しぶりだったこともありローカルサーバーを動かすところですら苦労したのですがそれはまた後日メモするとして、今日は新しい見た目でちょっとだけ頑張った、タグ表示の色付けの部分を紹介したいと思います。

このブログに置いてる画像は全部Google Photosに置いてます。 画像を記事中に挿入する手順は、 スクショなどで画像を用意する Google Photosの公開アルバムにアップロードする 画像へのリンクを取得 Dashのスニペットを使ってMarkdown記法で記事中に挿入 です。それなりに面倒です。

IEでのトップ画面の表示がこのザマでした。各記事のカードみたいなのが潰れちゃってます。 Google Analyticsによると5%程度 IEからの閲覧があるようです。 まあ直接個別記事へ来ることがほとんどでしょうからトップページは見てないかもしれませんが、気持ち悪いので直すことにしました。

このブログではソースコードのシンタックスハイライトにhighlight.jsを使っており、行番号の表示にはhighlightjs-line-numbers.jsを使用しています。 https://blog.piyo.tech/posts/2018-04-23-add-line-number/ あるとき、行番号の処理の結果として{1}のような不思議な文字列が紛れ込むことに気が付きました。 たとえば↓ …

ひとつ前の記事ではtextlintの結果をEmacs上で確認できるようにしました。 次はテキスト校正くんが持っている、用語の表記や漢字の開き方に関する指摘の機能の部分を導入します。 textlint-rule-prhの導入 下準備としてtextlint-rule-prh導入します。 textlint-rule-prhはprhという日本語の自動校正ツールをtextlintから使うための仕組みです。

昨日テキスト校正くんが便利だという記事を書いたばかりではありますが、Visual Studio CodeではなくEmacsで書けるのが望ましいです。 いずれはテキスト校正くんと同様のチェックをかけたいものの、まずは以前textlint導入記事で導入したルールを使って判定するところまで持っていきます。

先日「エンジニアのための、いますぐ使える文章校正テクニック」という記事がバズっていました。僕はちゃんとしなきゃーと思いながら読んでおりました。 https://ics.media/entry/19096 記事中に紹介されていた「テキスト校正くん」なるVisual Studio Code用の拡張が良さそうに見えたので早速導入してみました。

最近話題になったShopifyのロゴ生成ツール「Hatchful」でロゴを作り、置いてみました。ヘッダーロゴ置いてみたかったんですよね。 Hatchful https://hatchful.shopify.com/ 紹介記事 https://gigazine.net/news/20180827-hatchful/ 結構遊べて楽しいです。 条件を保存しておけないのがちょっと残念。いろいろ試してやっぱ …

ごちゃっとしていてなんとなく気に入らなかった当ブログの見た目をちょっとだけ調整しました。 Before Beforeはメイン部分とサイドバーの2カラムレイアウトでした。 ちょっと詰めすぎではなかったかなと思い、縦に並べることにしました。例えばサイドバーのPOPULARの部分なんかはちょっと文字を小さくしすぎだったかなと思います。

日本語にtextlintをかけると便利、という話をチラっと聞いたのでブログに応用すべく導入してみました。 まず、textlint自体がこちら。 https://github.com/textlint/textlint そして、日本語技術文書用のルールプリセットがこちらです。 …