0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Qiitaのmarkdownで文字の大きさを変えたい

Last updated at Posted at 2025-02-09

はじめに

Qiita で記事を書く皆さん,文字を強調したいとき

  • 太字にする
  • 斜体にする
  • カラーにする

などの手段を取っていると思われますが,文字の大きさを変えることは難しいでしょう。Qiita では HTML タグである <font size=*> やスタイルシート指定 style="font-size:*" が使えないからです。

HTML タグを用いた場合

HTML タグを用いた場合

HTML タグを用いた場合

HTML タグを用いた場合

HTML タグを用いた場合
HTML タグを用いた場合

markdown の基本文法である見出し記号 # もしくは <h1><h6> までのタグを用いると文字列の強調(大きさ,太字)は可能ですが,残念ながら見出しになってしまうのです。たとえば上記の文字列は見出しになっていることが分かります。<h1><h2> までは下線も引かれます。

HTML タグを用いた場合
<h1><font color=red>HTML タグを用いた場合</font></h1>
<h2><font color=red>HTML タグを用いた場合</font></h2>
<h3><font color=red>HTML タグを用いた場合</font></h3>
<h4><font color=red>HTML タグを用いた場合</font></h4>
<h5><font color=red>HTML タグを用いた場合</font></h5>
<h6><font color=red>HTML タグを用いた場合</font></h6>

MathJax を用いた場合

MathJax を用いる方法があります。筆者の確認したところ以下の5段階で大きさを設定できるようです。

$\color{red}{\huge \textsf{MathJax を用いた場合}}$
$\color{red}{\large \textsf{MathJax を用いた場合}}$
$\color{red}{ \textsf{MathJax を用いた場合}}$
$\color{red}{\small \textsf{MathJax を用いた場合}}$
$\color{red}{\tiny \textsf{MathJax を用いた場合}}$

MathJax を用いた場合
$\color{red}{\huge  \textsf{MathJax を用いた場合}}$
$\color{red}{\large \textsf{MathJax を用いた場合}}$
$\color{red}{       \textsf{MathJax を用いた場合}}$
$\color{red}{\small \textsf{MathJax を用いた場合}}$
$\color{red}{\tiny  \textsf{MathJax を用いた場合}}$

MathJax は字体(フォント)も変えることができます。

$\color{red}{\textsf{MathJax を用いた場合}}$
$\color{red}{\textrm{MathJax を用いた場合}}$
$\color{red}{\textbf{MathJax を用いた場合}}$
$\color{red}{\texttt{MathJax を用いた場合}}$

MaxJax を用いた場合その2
$\color{red}{\textsf{MathJax を用いた場合}}$
$\color{red}{\textrm{MathJax を用いた場合}}$
$\color{red}{\textbf{MathJax を用いた場合}}$
$\color{red}{\texttt{MathJax を用いた場合}}$

PlantUML を用いた場合

PlantUML を用いる方法もあります。コチラは文字の大きさやフォントなど自由に設定できます。ただし,画像として貼り付けられているため,テキストをコピー&ペーストできないうえ,周囲にはグレーのボーダーラインが入ってしまっているのが残念なところです。

PlantUML を用いた場合
```plantuml
<style>
root {
  padding 0
  margin 0
}
title {
  horizontalAlignment left
  fontStyle normal
  fontColor red
}
</style>
title
<size:48>PlantUML を用いた場合</size>
<size:36>PlantUML を用いた場合</size>
<size:24>PlantUML を用いた場合</size>
<size:18>PlantUML を用いた場合</size>
<size:12>PlantUML を用いた場合</size>
end title
```

Mermaid を用いた場合

Qiita でサポートしている二大作図言語のもう一つ Mermaid を使う方法です。コチラは図の周囲に不自然なボーダーラインが入らないですし,テキストのコピー&ペーストも可能です。ただし,余白の大きさを変更できないうえ,タイトル文字列の大きさも変えられないのが残念なところです。※変更方法がまだ見つかっていません。

Mermaid を用いた場合
```mermaid
---
title: Mermaid を用いた場合
---
%%{init{'themeVariables':{'textColor': 'red'}}}%%
graph LR
```

まとめ

本件に対しては引き続き調査中です。進展があり次第,報告したいと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?