ブログのセットアップと記法(CSS, MarkDown)
紆余曲折何とか始められました.
(目次に例に出した"見出し"が入っています)
ブログのカスタマイズ
だいぶ苦労しましたが,人様の解説ブログをいろいろ見ながらなんとかできました(いろいろ漁り過ぎて参考URLわからなくなってしまいました...).
テンプレートはinnocentを使用しています.
GoogleChromeのディベロッパーツール使って,いろんなサイトのhtmlを参考にしながらやるとうまくいくかもしれないです. (そのためにブラウザ変えました.)
ソースコード
/* テンプレート, innocent */ /* <system section="theme" selected="6653586347149180725"> */ @import url("https://blog.hatena.ne.jp/-/theme/6653586347149180725.css"); /* </system> */ /* 目次 */ .table-of-contents, .entry-content .table-of-contents { border: none; border-radius: 0 px; background: #f5f5f5; padding: 20px 20px 20px 50px ;/* 上右下左 */ } /* 大見出しのリストマークを変更 */ ul.table-of-contents{ position: relative; } ul.table-of-contents li { list-style-type: none; } ul.table-of-contents li:before { content: "✔"; position: absolute; left: 30px; color: #666B6C; } ul.table-of-contents li ul li:before { content: ""; } /*大見出しをボールドに :font-weight:bold; */ .table-of-contents li{ font-size: 16px; } /*中見出しはnormal*/ .table-of-contents li ul li{ font-weight:normal; font-size: 14px; } /* 下線なし */ ul.table-of-contents a{ text-decoration: none; } /* 目次周りの余白を調節する */ .entry-content li ul { padding-bottom:5px; } /* パンくずリスト設定 */ span.breadcrumb-child::before { font-size: 20px; line-height: 15px; color: #3872b8; } .breadcrumb-inner { margin-left: 250px; padding-left: 50px; } /* 記事下のカテゴリー非表示 */ .entry-categories { display:none; } /* 本文フォント */ #body { font-family: TitilliumText22LRegular,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS\ Pゴシック,MS PGothic,sans-serif; font-size: 14px; line-height: 1; } #title{ font-weight: normal; font-size: 50px; text-align: left; margin-left: 250px; padding-left: 50px ; line-height: 2.0; } #blog-description { font-size: 16px; text-align: left; color: #333; margin-left: 250px; padding-left: 50px; } #blog-title-inner { margin: 0px; padding: 0px; } /* コードブロック */ .entry-content code { font-size: 90%; margin: 0 2px; color: #333; padding: 0px 5px; border-radius: 3px; background: #f5f5f5; border: 1px solid #dcdcdc; } /* ブログ体裁 */ #content-inner { width: 1000px; margin: 0; padding: 0; border: 0; outline: 0; } #wrapper { width: 800px; padding: 20px 50px, 50px; float: right; } #main { width: 700px; float: right; margin-left: 0px; } #box2 { float: left; width: 200px; padding: 25px; font-size: 14px; border-right:2px solid #eee; margin-top: -200px; } #top-box, #content { padding-top: 10px; padding-bottom: 10px; border-top:0; } #box2-inner { border-left:0; padding-left: 0px; } #main-inner { border-right: 0; } /* 見出しフォント */ .entry-title { font-size: 24px; padding: 10px 10px; border-bottom: 2px solid #333; } .entry-content h3 { font-size: 20px; font-weight: bold; padding: 8px 8px; color: #fffffd; background-color: #285294; line-height: 1.5; padding-left: 15px; position: relative; } .entry-content h4 { font-size: 18px; color: #333; line-height: 1.5; border-left: 6px solid #0091C5; padding-left: 10px; border-bottom: 1px solid #0091C5; position: relative; } .entry-content h5 { font-size: 16px; padding-left: 8px; position: relative; color: #333; line-height: 1.5; } .entry-content h6 { font-size: 16px; padding-left: 8px; position: relative; color: #333; line-height: 1.5; border-bottom:1px dashed #969998; }
配色は以下を参考1.
記事の書き方
Markdown記法で書いてみてます2,3.
見たまま&htmlの編集はハードル高そうでしたが,Markdownは簡単で書きやすいです.
見出しはこう書いて,
###見出し3 ####見出し4 #####見出し5 ######見出し6
こうなります.
見出し3
見出し4
見出し5
見出し6
コードブロックはこう書いて,
`abcde`
こうなります.
abcde
おわりに
次回記事から徐々に書きたいこと書いてみます.
追記,2020年5月2日更新しました.