つーさにブログ

つうさにのメモ用ブログ

はてなブログのデザインCSSとmarkdownメモ

はてなブログ css

このブログはデザインテーマとして公式テーマのHandwritingを用いています。

そのままでは行間が狭いと思ったので少し自分でcssを変えてみました。

デザインCSS

ブログ管理画面のデザインからカスタマイズタブを選ぶと一番下にデザインCSSという項目があります。ここにcssを書いて保存すると、そのcssが読み込まれてブログが表示されます。これによって、デザインテーマによるcssを上書きできます。

既に書かれているものがありましたがそれは消さず、その下に書きました。@importはデザインテーマの適用だと思いますが、謎のコメントアウトがあります。css(HTML?)に詳しくないのでよくわかりません。

とりあえず書いたもの

.entry-content p {
    line-height: 1.75;
    margin: 0 0 2em;
}

これで記事中の普通の文の行間と<p></p>同士の間が広くなりました！やったね。

「cssは知ってるけど、webページ自分で公開したことないしcssを書いたことない。」って人だったので自分でcssを書けて嬉しいです。(はてなブログで満足せず自分のwebページを作らんかい)

こんな感じでリンクの色を変えたいとか<h1></h1>のstyle変えたいとかいろいろできると思うのでちょくちょく変更したいです。(多分)

(追記) 続き→続・はてなブログのデザインCSS - つうさに's メモBlog

ところで、適用したmarginを確認するのにChromeの開発者モードを使いました。marginとかDOMとかを見せてくれるのってWebデザイン/開発にとってほんと便利だなって思いました。

Markdown

GitHubのREADME.mdでもおなじみ1のmarkdown。 それを用いてはてなブログの記事をかけるので、これまた知ってるけど書いたことがないmarkdownの練習になります。

markdownってHTMLを生成する省略記法って感じかと思ってましたがHTMLタグも直に書くこともできるんですね。はてなブログの太文字ボタンとか<b>(文字列)</b>が挿入されるけどちゃんと太字になりますね(当たり前)。Markdownモードなら**(文字列)**が挿入されてくれてもいいのでは？とも思います。

実は前回の記事は文後のスペース2個の改行(HTMLの<br>)を使いまくっていて、markdownを書いててこれでいいのか？って思ってました。markdownでは空行を挟むと<p></p>になるらしく、それを活用したいかつ見やすくしたいため、今回pのstyleを設定しました。(前回の記事は修正済み)

終わり

今回のブログはcssの設定とかmarkdownの強調、斜体、注釈とかいろいろ知れたのでよかったです。

markdownのEmphasisの記法がEmacsのorg-modeと混同しがちです...

  1. むしろ見る機会はそれがほとんど？↩