WordPress→VuePressにブログを移行【2】
# 概要
デザインまわりなどの作業メモです。
この記事の続きです。
# 記事の移行
はっきり言ってこれが一番面倒作業が多かったです。
具体的には
全て書き直しました。（ドドォーン）
ある程度の単純作業は苦ではないので、今日は3記事くらいは移行できるかな...と仕事中に考えたりしていました。
markdownファイルへの移行プラグインもありそうなものですが、「 WordPress markdown 移行 」
とかで検索すると、WordPressをmarkdownで書くためのプラグインとかばかり出てくるんですよね。
幸いにしてこれまでのブログでは15記事くらいしか（？）書いてありませんでしたので、自力で移行することにしました。
# 見出しの追記
主にやった作業はこれなんですが、ただただ見出しレベルに応じて#〜#####までを追記しただけです。
追記する作業というよりも、どの1行が見出しなのかを判別する作業が苦しかったです。
# 書式の移行
太字や箇条書き、下線や補足、コードブロックなどを対応する書式に書き換えました。
見出しに同じく、どこが太字だったのかを見つける作業が大変でした。
# 諦めた
そもそもmarkdownで書くということは、ある程度シンプルにドキュメントを書くことが目的なので、凝った書式は移行できません、というかしませんでした。
例えば
- 文字サイズの変更
- 太字と色付きマーカーの混在
- YouTube動画のページ内再生画面貼り付け
- WordPress記事のサムネイルつきリンク
など。
頑張ればHTMLで書けると思いますが、それって本末転倒な気もしたり。
しかしできたらできたで画面もごちゃごちゃするのと、プラグインとかは極力入れたくないので躊躇しました。
# デザインの変更
芸術ができる人は音楽も美術もできるものだと思われるそうですが、自分の場合は音楽に全振りしたので、センスがアブソリュート・ゼロです。（言い訳）
最初はデフォルトの背景等を使っていましたが、とりあえずシンプルに何かできないかな、と、Macで使えるペイントソフトを探しました。
# FireAlpaca
FireAlpacaというフリーソフトを使ってぽちぽち作成しました。
# トップページ背景
このテーマにおけるトップページの背景ですが、デフォルトサイズがheight=350となっています。
キャンパスサイズが350 * 1260くらいだとちょうどよかったので、そのサイズで作成しています。
ちなみに、HOMEのREADME.md内でwidthまで指定してしまうと、自動拡縮が適用されないので、グチャっとしてしまいました。
ちなみに2ですが、ただただ薄い色を選んで四角形をひたすらドラッグ、ドラッグ、ドラッグ...で作成しただけです。
透過処理を使うと背景色がグレーとなってしまうため、グレーを出さないように全て色で埋め尽くしました。
サイト名とDescriptionの文字色が白なので、白にはできないんですよね。
# favicon
開いているタブにつけられるページのアイコン。これをファビコンというそうです。（何回見ても忘れる）
せっかくならそれも設定しようと思い作成しました。
試したのは以下のサイト。
favicon.cc：手でぽちぽちドットに色を塗りながらすぐfavicon画像が作成できる。
ファビコン favicon.icoを作ろう!：既成の画像からfavicon画像を生成できる。
最初は1.を使用してぽちぽち作成していたのですが、サイズが16 * 16となるため、曲線がうまく描画できず断念。
結局、FireAlpacaを使用して画像を作成し、2.のサイトを使用してコンバートしました。
ちなみに、画像に特に意味はないです。
# メインカラーの変更
VuePressは基本的に緑色がメインカラーですが、青系に変更したかったので変更しました。
以下のようにpalette.stylを配置
docs/.vuepress/styles/palette.styl
内容を修正。
// colors
// $accentColor = #3eaf7c
$accentColor = #80ceff
$textColor = #2c3e50
$borderColor = #eaecef
:
:
2
3
4
5
6
7
と、いうことで凝ったことをするためのスタートラインに立てた感じです。