Shortcodes を作りましょう
少し前に勉強しましたので、実際に作ってみましょう。
メモを挿入する
完成形
基本形はいつもの サルワカさん から頂戴しています。
中身
記述例
memo.html
<div class="memo">
<span class="memo-title">{{.Get 0}}</span>
<p>{{.Inner}}</p>
</div>
hoge.css
.memo {
position: relative;
margin: 2em 2em;
padding: 0.5em 1em;
border: solid 1px #a9a9a9;
background: #f5f5f5;
max-width: 70%;
}
.memo .memo-title {
position: absolute;
display: inline-block;
top: -26px;
left: -1px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 0.8em;
background: #a9a9a9;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.memo p {
margin: 0;
padding: 0;
font-size: 0.8em;
}
VSCode にスニペット登録
引用を挿入する ［2019-03-15］
完成形
中身
記述例
blockquote.html
<blockquote>
<p>{{.Inner}}</p><br>
<cite><a class="author" href="{{.Get "link"}}">{{.Get "author"}}</a></cite>
</blockquote>
hoge.css
blockquote {
font-size: 0.8em;
padding-bottom: 0;
}
blockquote a.author {
font-size: 1em;
line-height: 3em;
font-style: normal;
text-decoration: none;
border-bottom: 1px dashed;
}
blockquote a.author:hover {
font-weight: bold;
border-bottom: 2px dashed;
}