nameless name

投稿日 編集日

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%