Alphabet
Et assum accusata nam, ut recusabo sententiae nam. Eam in malis labore complectitur, nostrud legimus dolores nam no, esse omnesque ei quo. Sea fugit nominati ei, ut vidit facer prompta vis, veri nominavi facilisi pro id. Mel ei sint civibus appareat. Vix ea volutpat dignissim mnesarchum, usu probo ludus partiendo ad, cum id solet exerci lobortis. Solet maiestatis sed an, ex ius veniam causae accommodare.
1234567890, &
日本語
私も生涯まるでそのふり年という事の時に飛びだった。とにかく十月を意味院もしかるにこういう講演ですないでもで入れから来るですにも努力したですて、わざわざには喜ぶたますたた。傍点を受けないのもよほど昨日にどうしてもたんた。
太字
Love the life you live. Live the life you love. Bob Marley 自分の生きる人生を愛せ。自分の愛する人生を生きろ。
ボブ マーリー
<span style="font-weight: bold;">テキスト内容</span>意味的強調(強意)
このテキストは非常に重要な意味を持っています<strong>テキスト内容</strong>イタリック体
It always seems impossible until it’s done. Nelson Mandela 何事も成功するまでは不可能に思えるものである。
ネルソン マンデラ
<span style="font-style: italic;">テキスト内容</span>* 日本語のフォント種によっては傾きません。
整形済テキスト
<div style="text-align: center;">あいうえお</div>
<pre>エスケープ表記テキスト内容</pre>リンク
<a href="遷移先アドレス" target="_blank" rel="noopener noreferrer">テキスト内容</a>* 同タブで開く場合は target="_blank" 不要
* 内部リンクの場合は rel="noopener noreferrer" 不要
引用
Lorem ipsum dolor sit amet, an oratio tamquam accusam quo, sea modus oporteat partiendo ad, eu debet urbanitas duo. Ut accusata voluptatibus usu. Hendrerit necessitatibus et sed, ei postea percipitur mea. Salutandi euripidis ut mel, scaevola delicata appellantur te his, detracto mentitum vix an. Scaevola suavitate an vis, id dico elaboraret ius. Mentitum quaestio et sea. Eu labitur numquam docendi sit, eos tantas eirmod reprehendunt no.
Lorem ipsum
<blockquote><p>引用テキスト内容</p><cite><a href="引用元URL" target="_blank" rel="noopener noreferrer">引用元サイト名</a></cite></blockquote>リスト
順序に意味の無いリスト(unordered)
- 一つ目のアイテム
- 二つ目のアイテム
- 三つ目のアイテム
<ul><li>テキスト</li><li>テキスト</li><li>テキスト</li></ul>順序に意味の有るリスト(ordered)
- 一つ目のアイテム
- 二つ目のアイテム
- 三つ目のアイテム
<ol><li>テキスト</li><li>テキスト</li><li>テキスト</li></ol>テキストハイライト
このテキストはハイライトされています。
<mark>テキスト内容</mark>独自クラス
以下は全て当該テンプレートのみで使える内容です。
<img class="shadow-attachment" src="画像アドレス" alt="代替テキスト">* 見出しの位は適宜変更。
<h2 class="freehand">テキスト内容</h2><h2 class="dogear">テキスト内容</h2><h2 class="curl">テキスト内容</h2><h2 class="base-headline">テキスト内容</h2><h2 class="pale">テキスト内容</h2><h2 class="pale-b">テキスト内容</h2><h2 class="pale-g">テキスト内容</h2><h2 class="pale-p">テキスト内容</h2><h2 class="under-h">テキスト内容</h2><div class="box-for-video" style="max-width: 動画横幅px; margin: 0 auto;">埋め込みコード</div>このメッセージは注意を促す文章です。
<p class="attention">テキスト</p>このメッセージはヒントを示す文章です。
<p class="hint">テキスト</p>* 別途ブログカード取得ブックマークレットが必要です。
SSL化後の悩ましい作業のひとつ ブログカードこれまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀)画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。* 2018年現在ではSSL対応しています。...
外部プラグイン連携
FC2以外のプラグイン(ウィジェット)と連携している内容です。他テンプレートに変更した際には機能を失うだけでなく 表示が行われなくなる場合がありますので注意が必要です。必ず自己責任の元で利用してください。
* lazyloadを行ってもスクロールの頭出しなどがずれないようにするためのhtmlです。
<figure><div style="max-width: 最大横幅px; margin: auto;"><!-- 中央合わせ不要の場合は margin: auto; を削除 --><div class="aspect-box spinner" style="padding-top: calc(画像高さ / 画像横幅 * 100%);"><img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像アドレス" alt=""></div></div></figure>* スクロールで画面領域に入ったら動画情報を取得します。
<div class="box-for-video" style="max-width: 最大横幅px; margin: 0 auto;"><iframe class="lazyload" width="560" height="315" data-src="動画識別コード" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>* サムネイルのみ表示させておき、ボタンをクリックされたら動画情報取得を行います。
<div class="box-for-video lazyload" data-youtube="動画識別コード" data-ytparams="パラメータ" style="max-width: 最大横幅px; margin: auto;"><button class="play-btn"></button></div>実物は当ページの最上部に掲載していますので確認のこと。
<nav id="toc"></nav>Internet Explorerからのアクセス時は以下のようなオーバーレイが表示されます。
-
A Man Without Honor 義なき男2014/08/09 - The Night Lands 粛清2014/08/09
- The Pointy End 進軍2014/08/09
- The Wolf And The Lion 狼と獅子2014/08/09
- 見えない足跡 All the Best Cowboys Have Daddy Issues2014/08/09
- ケースの中の過去 Whatever the Case May Be2014/08/09
- Winter Is Coming 冬来る2014/08/09
- みんなめでたし Something Beautiful2014/08/08
