nameless name

投稿日 編集日

iPhoneやiPadで撮った写真やスクリーンショットは、そのまま貼り付けるにはサイズが大きいので適当な大きさにリサイズして圧縮をかける必要がある。毎回ツールを起動して変換するのは面倒なのでスクリプトを書いた。具体的には長辺が800pxになるようにsharpでリサイズして、imageminで再圧縮をかけている。
では、変換した後の画像を貼り付けてみる。

続きを読む »

投稿日

疲れたのと一応の形にはなった気がするので一旦ここで公開とします。デプロイが止まる件は結局解決できなかったので、WinSCP使って手動アップロードさせられるハメに…。なんたる屈辱。

では思いつくToDoを書いて締めとする。

  • デプロイを上手く行くようにする
  • faviconとRSS用のアイコンを設定する
  • iPhone11で撮った写真などをいい感じに載せられるようにする
    • 共有フォルダを設定する
    • 画像をリサイズして適当に圧縮をかけるスクリプトを書く
  • markdown-itのプラグインを入れてみる
  • mactypeがWebフォント使用で何故か事故ってるので設定を見直す
  • VSCodeの記事を書く
  • たまにTwitterでここの存在を主張する
  • せっかくサーバ借りるので使いたかったソフトを入れる(個人用なので非公開
  • 最終的には自作のテーマを書いて運用したい

投稿日 編集日

Nlviのデフォルトのままだといくつかしっくり来ないところがあるのでカスタマイズした。

Webフォントの導入

せっかくさくらインターネットは綺麗なWebフォントが使えるというので導入した。
まずはさくらインターネットのコントロールパネルからWebフォントを使用しますよという設定をした。
次に /themes/Nlvi/layout/_partial/head.swig に<script defer src="//webfonts.sakura.ne.jp/js/sakurav3.js"></script>を追加した。
最後に /themes/Nlvi/source/style/_custom/custom.styl に

custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
 
body { 
  font-family: 'Hiragino Maru Gothic W4 JIS2004', 'BIZ UDPゴシック', sans-serif !important;
  font-feature-settings: "palt" 1;
}

.logo, .post-title, h1, h2, h3, h4, h5, h6 {
  font-family: 'Midashi Go MB31', sans-serif !important;
}

.mobile-header-title a {
  font-family: 'Midashi Go MB31', sans-serif !important;
  font-size : 20px !important;
}

を追加した。本当は!importantしないで根本的なところをいじるべきなんだろうけど、とりあえずはこれでいいかな…といったところ。

archivesページの見た目

archivesのスタイルがはっきり言って見づらすぎたので

custom.styl
1
2
3
4
5
6
7
 
.archive-post-content {
  display: none !important;
}

.archive-post {
  height: 5em;
}

のように追加した。これもdisplay: noneで見えなくするんじゃなくて、そもそも出力されないようにいじるべきなんだろなぁ。

リンクが見えない問題

文章中のリンクが全く分からなかったので

custom.styl
1
2
3
4
5
6
7
 
p a {
  background-color: #eeeeee !important;
}

a:hover {
  background-color: #dddddd !important;
}

を追加した。背景色を付けた形でコード表示と見た目が被るんだけど支障ないでしょう多分。

投稿日

hexo dが途中で止まる件について。

1
2
3
4
5
6
7
8
9
10
11
12
 
$ hexo d
INFO  Deploying: ftpsync
Setup
Setup complete.

Collecting
Collection complete.

Consolidating
Consolidation complete.

Committing

ここから進まない…。一体どうすればいいんだろう。

投稿日 編集日

久々にWeb技術を学んだら自分のWebサイトを作りたくなったので作っていきますよと。
とりあえず備忘録としてやったことをメモしていきます。

必要なソフトウェア

まずはGitとNode.jsをインストールした。というか、してあった。
加えてエディタとしてVSCodeもインストールした。してあった。

Gitにはuser.nameとuser.emailを設定して、Node.jsは特にいじるところ無し。VSCodeは日本語化して必要そうな拡張機能をいくつか入れた(気が向いたらまとめ記事書こう

Hexoのインストール

本体とテーマ

1
2
3
4
 
npm install hexo-cli -g
hexo init blog
cd blog
npm install

これでとりあえずHexoのインストールは終了。
んで、themesにNlviを入れて_config.ymlを(Nlviの方のね)を修正した。

  • menuの種類
  • カラーテーマの設定
  • SNSの設定

あとで細かいフォントの設定とスタイルの設定をいじっていきたい。

プラグイン

まずデフォルトのhexo-renderer-markedをアンインストールしてhexo-renderer-markdown-itをインストールした。こちらもあとで拡張をいくつかインストールするつもり。

次にhexo-html-min-beautifyをインストールした。出力されるHTMLとかが綺麗になりますよ。

更にhexo-generator-feedをインストールした。atomよりRSS2の方がなんとなく好きなんで設定をそうした。あとで忘れずにアイコンの設定をすること。

デプロイ用にはhexo-deployer-ftpsyncをインストールした。ドメインを見ての通りさくらインターネットのレンタルサーバを借りているので、それ用に設定した。

画像

Hexoは画像の扱いがやや面倒で割と手動でアレコレしないとダメな感じなんだよね。基本的には記事の入っているフォルダに/images/を作ってその中に格納してやれば良い。

猫に小判

せっかくNode.js製のジェネレータを使ってやっているので画像を最適化する処理をあとで書く予定。

固定ページ

aboutとcontactを追加だけした。中身はまだ無い。

本当にアップロードされているかな？

これからチェックします。一発で通ると良いな。

0%