記事タイトルは h3 要素
←↓↑→…‥~
普通の文章の段落、そのいち。普通の文章の段落、そのいち。普通の文章の段落、そのいち。普通の文章の段落、そのいち。普通の文章の段落、そのいち。普通の文章の段落、そのいち。普通の文章の段落、そのいち。
普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。 普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。
- 番号付きリスト、そのいち
- 番号付きリスト、そのに 番号付きリスト、そのに
- 番号付きリスト、そのさん
普通の文章の段落。
- 番号無しリスト、そのいち
- 番号無しリスト、そのに 番号無しリスト、そのに
- 番号無しリスト、そのさん
普通の文章の段落。
引用した文章の段落そのいち。引用した文章の段落そのいち。引用した文章の段落そのいち。引用した文章の段落そのいち。引用した文章の段落そのいち。引用した文章の段落そのいち。引用した文章の段落そのいち。
引用した文章の段落そのに。引用した文章の段落そのに。引用した文章の段落そのに。引用した文章の段落そのに。 引用した文章の段落そのに。引用した文章の段落そのに。引用した文章の段落そのに。引用した文章の段落そのに。
u-ch
https://u.hoso.net/ www.hoso.net
https://www.hoso.net/ pre - - >8 ここから >8 - -
#!/usr/bin/perl
# -*- mode: perl; coding: utf-8-unix; -*-
use utf8;
use strict;
use warnings;
do {
print "Hello, world.\n";
print "こんにちは、世界。\n";
}
#--------1---------2---------3---------4---------5---------6---------7---------
pre
#--------1---------2---------3---------4---------5---------6---------7---------
#--------1---------2---------3---------4---------5---------6---------7---------8---------9---------0
pre - - 8< ここまで 8< - -
普通の文章の段落。
イメージ
そらいろのたね
えいちよん
えいちよん
えいちご
えいちご
SyntaxHighlighter 用のテーマ変更
以下をテーマの body 要素の最後に追加。
<!--
SyntaxHighlighter (begin)
-->
<!-- Include required JS files -->
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>
<!--
At least one brush, here we choose JS. You need to include a brush for every
language you want to highlight
-->
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js'/>
<!--
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAppleScript.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAS3.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushColdFusion.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDelphi.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushErlang.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJavaFX.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSass.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushScala.min.js'/>
-->
<!-- Include *at least* the core style and default theme -->
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css'/>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css'/>
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>
<!--
SyntaxHighlighter (end)
-->
blockquote の CSS
以下をテーマのカスタム CSS に追加。
/*
* CSSで作る!魅力的な引用デザインのサンプル30(blockquote) https://saruwakakun.com/html-css/reference/blockquote
*/
.entry-content blockquote {
position: relative;
padding: 10px 15px 10px 60px;
box-sizing: border-box;
font-style: italic;
background: #f5f5f5;
color: #777777;
border-left: 4px solid #9dd4ff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
.entry-content blockquote:before {
display: inline-block;
position: absolute;
top: 7px;
left: 0;
vertical-align: middle;
content: "\201C";
font-family: sans-serif;
color: #9dd4ff;
font-size: 90px;
line-height: 1;
}
.entry-content blockquote p {
padding: 0;
margin: 7px 0;
line-height: 1.7;
}
.entry-content blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
/*
*
*/