Markdownエディタ「Typora」をおしゃれに変える方法とは?




こんにちは、フリーランスエンジニア兼テックライターのしろ(@siro3460)です。

皆さんは、Markdownエディタに何を使っていますか?

使いこなせばとても速く資料を作れるMarkdownですが、エディタにしっくり来ていない方もいるのではないでしょうか。


自分用に使うだけであれば、どのエディタでも良いかもしれません。

ただ、PDFに出力して誰かに見せたいときもありますよね。

「まとめ & 情報共有ツール」として使っている場合は、デザイン性も気になると思います。


そんな方におすすめなのが、Markdownエディタ「Typora」です。

Typoraは、デザインを「CSSファイル」で管理しているため、ちょっとした変更を加えるだけで、簡単におしゃれなデザインに変えることができます。


そこで今回は、Markdown専用エディタ「Tyopra」を使って、おしゃれな見た目に変える方法について解説します!

補足
「え、Typoraってなに?そもそも使えるエディタなの?」と思った方は、以下を見てみてください!
>>Markdownを書くときにおすすめの最強エディタ「Typora」とは?

Typoraとは?

まず、簡単にTyporaについて解説します。

Typoraとは、Markdown専用のエディタです。
他のMarkdownエディタと比べて、「書きやすさ」に特化しているのが特徴です。


Markdownは慣れるまで書き方が難しいのですが、「文字を打ってEnterキーを押した瞬間」に見た目を変えることができるので、直感的にMarkdownを覚えながら使うことができます。

文字を打ってEnterキーを押した瞬間にデザインが変わる例:

Markdown記法のチュートリアルとしても使えますし、完成形をイメージしながらまとめていくことができるので、とてもおすすめのMarkdownエディタです。

情報整理力を上げるためにおすすめの最強エディタ「Typora」とは?

2019.02.11

Typoraに最初から入っているテーマ

次に、「Typoraに最初から入っているテーマ」について解説します。

Typoraには、次の5つのテーマが最初から用意されています。

・Github

・NewSprint

・Night

・Pixyll

・Whitey


最初から入っているテーマも、シンプルでおしゃれなデザインが多いですよね。

この中でお気に入りがあれば、そのまま使えばOKです。


ただ、

Siro
確かにデザインはおしゃれだけど、もう少し自分が好きなデザインにしたいなぁ・・・
Siro
ブログの見出しみたいにデザイン変えられたらいいのに・・・

と思う方もいるのではないでしょうか。

そんな方向けに、Typoraで自分だけのデザインを作る方法について解説します!

Typoraのオリジナルテーマを作る方法

オリジナルテーマを作る流れは、大きく分けて次のとおりです。

1. オリジナルテーマ用のCSSファイルを作成する
2. CSSファイルを好きなデザインに変更する
3. Typoraを起動しなおしてテーマを適用する

それぞれ詳しく解説しますね!

オリジナルテーマ用のCSSファイルを作成する方法

まず、「オリジナルテーマ用のCSSファイルを作成する方法」について解説します。

Typoraには、テーマごとにデザインを設定している「CSSファイル」があります。

CSSファイルを新しく作ることで、簡単にオリジナルデザインのテーマを作ることができるのです。


作り方は、次のとおりです。

1. 「ファイル」タブから「設定」をクリック

2. 「テーマフォルダを開く」をクリック

3. 元にしたいデザインのCSSファイルをコピー

4. CSSファイル名を変更する

これで、オリジナルテーマを作るためのファイル作成が完了です!

CSSファイルを好きなデザインに変更する方法

次に、「CSSファイルを好きなデザインに変更する方法」について解説します。

デザインと言ってもいろいろありますが、ここでは「見出し」を変更する方法について解説します。

変更するイメージ
・Github

・オリジナルテーマ

変更方法は、次のとおりです。

手順1. おしゃれデザインの見出しを調べる

まずは、おしゃれな見出しを探します。

見出し + コード」が載っているサルワカさんのおすすめ記事があるので、以下を参考に見出しを選びます。
※アイコン付きの見出しは難しいので、アイコンがないデザインにしてください。


見つけたら、次のようにコードの部分をコピーします。

見出し1(h1) ~ 見出し4(h4)ぐらいまで、デザインを決めておけばOKです!
全てh1になっているので、付ける順番でh1 ~ h4を設定してください。

手順2. コードをCSSファイルに追記

次に、準備したコードを、先ほど作成した「オリジナルテーマのCSSファイル」に追記します。

ただ、単純にコピペだけでは上手くいきません。
元のコードの一部を残しつつ、手を加えていく必要があります。

具体的には、以下コードを残しつつ新しいコードを追記していけばOKです!

font-size:フォントサイズ
line-height:行の高さ

たとえば、Githubのテーマの場合はh2見出しのCSSコードが次のようになっていました。

h2 {
   padding-bottom: .3em;
    font-size: 1.75em;
    line-height: 1.225;
    border-bottom: 1px solid #eee;
}

border-bottom」は下線の設定で、「padding-bottom」も下線までの余白を表しています。

新しい見出しでは不要なので、以下のように一旦消します。

h2 {
    font-size: 1.75em;
    line-height: 1.225;
}

その上で、新しく追記する見出しを追記していくのです。

・適用したい見出しデザイン:

h2 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #c7f2e3;
  width: 0;
  height: 0;
}

・適用後の見出しデザイン:

h2 {
  font-size: 1.75em;  /* 元のデザイン */
  line-height: 1.225; /* 元のデザイン */
  position: relative;
  padding: 0.6em;
  background: #c7f2e3;
}

h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #c7f2e3;
  width: 0;
  height: 0;
}

文字サイズを設定する「font-size: 1.75em」と、行の高さを設定する「line-height: 1.225」を残したまま、デザインを適用しています。

同じような流れで、h1 ~ h4まで設定すればOKです!

手順3. デザインを適用して確認

最後に、Typoraを起動してオリジナルテーマを適用します。

「テーマ」タブから、自分が作った名前のオリジナルテーマを選択するだけでOKです!


もし、確認したデザインが崩れている場合は、「padding」や「margin」の値を微調整すればOKです!

補足
超ざっくり言うと、paddingが「内側の余白」、marginが「外側の余白」なので、数字を微調整するイメージです。



Typoraで使えるCSS集

最後に、すでに出来上がっているCSSをご紹介します!

CSSをダウンロードしてテーマ用のフォルダに置くだけで使えるので、ぜひ使ってみてくださいー!!

No.1:やすこれさん(@yasucore12)

No.2:しろ(@siro3460)

まとめ

今回は、Markdown専用エディタ「Typora」を、おしゃれな見た目に変える方法について解説しました。

ちょっとしたカスタマイズするだけで、簡単におしゃれなデザインに変更することができます。

作り方も簡単なので、ぜひカスタマイズしてみてくださいね!

The following two tabs change content below.

Siro

ネコ好きフリーランスエンジニア。
開発、技術、働き方、ツールなどについて発信しています。
楽しく、開発しようぜ!