Gravでウェブログを公開する！
By Patineboot
Gravでダイアリーを書く
仕組みがシンプルでMarkdown形式でウェブログを書きたい。
Gravを詳しい人に押されたので、有名なWordPressと比較した！
テーマ選び
Gravはたくさんのテーマを持っている。テーマ、かっこいいのがいいよね。Gravのサイトで探してみる。WordPressの外観を模しているテーマ、フォトを投稿する綺麗なテーマ、ダイアリーをサマリーを表示するテーマ。 ウェブログを始める。そう考えて、デザインがグッとくるテーマを選ぶ。
Bootstrap4 Open Matterを発見する。デモサイトを訪問して、ページをクリックで進める。ページのカラーとフォントのレイアウトが良い。Quarkも良いけど、Bootstrap4 Open Matterでサイトを表示したい！
WordPressをTRY
WordPressはいっぱい機能がある。レイアウトをマウスでクリックしてドラッグする。好きな場所に文字や絵を置ける。 でも、マークダウンでダイアリーを書きたい！
Open MatterをCHOICE
GravのBootstrap4 Open Matterがしっくりくる。テーマを設定してみるが、Bootstrap4 Open Matterの持っているパワーをGravが引き出さない。しっくりこない。
Bootstrap4 Open Matterのスケルトンを元にカスタマイズしよう！
スケルトンページを書き換える。Bootstrap4 Open Matterがよくわかる！
ウェブログを書きながら、CSSをカスタマイズする。
お勧めカスタマイズ
好きな色のピンクをベースとして、トーンが合うカラーを使うね😊
H1タグは、マークダウンに１つまでににするよ。俺が考えたんだけど、Mozillaも推奨する使い方。
ボーダーイメージと背景イメージが、グラデーションする。綺麗だよ！
Hxタグは、**パディングを追加すると、グッと見やすくなる。**Bootstrap4 Open Matterでは、お勧めだよね。
.list-blog-header h1
{
padding: 0.5em 0.5em;
background-image: linear-gradient(to right, hsla(345, 100%, 75%, 50%), hsla(300, 100%, 75%, 50%));
box-shadow: 0.25em 0.25em 0 hsla(330, 100%, 75%, 30%);
}
div.code-toolbar
{
margin: 1em auto;
}
.list-blog-padding h1
{
padding: 0.5em 0.5em;
background-image: linear-gradient(to right, hsla(345, 100%, 75%, 50%), hsla(300, 100%, 75%, 50%));
margin: 1em auto 0.5rem;
}
.list-blog-padding h2,
.list-blog-padding h3,
.list-blog-padding h4
{
border-image-slice: 1;
border-image-width: 0 0 1 0;
}
.list-blog-padding h2
{
padding: 0.25em 0.25em;
background-image: linear-gradient(to right, hsla(345, 100%, 75%, 10%), hsla(300, 100%, 75%, 10%));
border-image-source: linear-gradient(to right, hsl(345, 100%, 75%), hsl(300, 100%, 75%));
}
.list-blog-padding h3,
.list-blog-padding h4
{
padding: 0.25em 0em;
}
.list-blog-padding h3
{
border-image-source: linear-gradient(to right, hsla(345, 100%, 75%, 50%), hsla(300, 100%, 75%, 50%));
}
.list-blog-padding h4
{
border-image-source: linear-gradient(to right, hsla(345, 100%, 75%, 10%), hsla(300, 100%, 75%, 10%));
}
便利なプラグイン
GravのImage Caption pluginは便利だよ。
クエリ?classes=captionを画像への相対パスに連結して、画像タイトルをキャプションとして扱う。
