2016年12月19日

std::string のデータ構造

※考えてみれば当たり前ですが，ベンチマーク中にとても変な値が出てきたと勘違いしたためメモ．
(また以前から std::string について気になりながらも，深くは考えたことが無かったので，少しだけ真剣に考えました)
続きを読む »
0 件のコメント:
ラベル:

2016年8月24日

ぶろぐの設定メモ (その3) CSS & HTML Templates

使用するHTMLタグの説明
<div>タグ: タグ自身の意味はない．ここでは，スタイルシートを適用するために用いる．
<pre>タグ: インデント，スペースおよび改行を，等幅フォントで表示する．(pre タグでクラスを呼び出すと，MathJax が数式をプレーンテキスト扱いするため表示されなくなる．この場合は，div タグで囲むとよい．ただし，改行を br で入れる必要がある．)
<code>タグ: ソースコードであることを意味する．
<br />タグ: 改行

<hr />タグ: 横棒

<font size="2"></font>: 文字サイズを変更

&nbsp;: HTMLにおけるスペースのエスケープ表記

<!-- HTML におけるコメントアウト -->
下記は HTML コードの区切りに利用する例
<!-- ---------------------------------------------------------- -->
<!-- ----------------------------------------------------------------------------------------------------------------------------- -->



<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------- -->
<!--more--><!--続きを読む-->
<!-- ---------------------------------------------------------- -->
<!-- ----------------------------------------------------------------------------------------------------------------------------- -->



着色 
<span style="color: red;"></span>



URLの貼り付け
TitleOfURL
<a href="URL" target="_blank">TitleOfURL</a>



取り消し線
<strike>文字</strike>
文字



下線
<u>文字</u>
文字



左寄せ
<div align="left">左寄せ</div>



中央寄せ
<div align="center">中央寄せ</div>



右寄せ
<div align="right">右寄せ</div>



改行せずに左寄せ
<span style="float:left">改行せずに左寄せ</span>


改行せずに右寄せ
<span style="float:right">改行せずに右寄せ</span>


<style type="text/css">
<!--
.gyo {line-height: 155%;}
-->
</style>
<span class="gyo">行間を変えます</span>



CSSのタイトルを太くするには，
font-weight: normal;
->font-weight: 900;
に変更すればよい．


無理やりにマージンを調整する． 
<div style="margin:-1em;"></div>

pre タグ前後の余白を消す． 
<pre style="margin:0pt"></pre>


等幅フォント，背景黒，余白なし．
折り返し有り：
<pre style="background:#000000;color:#FFFFFF; font-family:monospace; margin:0pt; line-height:120%; white-space: pre-wrap"></pre>
折り返し無し：
<pre style="background:#000000;color:#FFFFFF;font-family:monospace;margin:0pt;line-height:120%;"></pre>

実行結果 
$ make

mkdir -p make_temp/;\
g++ POJ-2386.cpp -MM -std=gnu++0x        -Wall -O3\
| sed 's/POJ-2386\.o/make_temp\/POJ-2386.o make_temp\/POJ-2386.d/' > make_temp/POJ-2386.d;\
[ -s make_temp/POJ-2386.d ] || rm -f make_temp/POJ-2386.d

mkdir -p make_temp/;\
g++ POJ-2386.cpp -c -o make_temp/POJ-2386.o -std=gnu++0x         -Wall -O3

============================================================

SRCS:
POJ-2386.cpp

OBJS:
make_temp/POJ-2386.o

CFLAGS:
-std=gnu++0x     -Wall -O3

============================================================

g++ -o exe make_temp/POJ-2386.o -std=gnu++0x     -Wall -O3


$ ./exe.exe
main(510): N: 10, M: 12
MatX =
W        .       .       .       .       .       .       .       .       W       W       .
.        W       W       W       .       .       .       .       .       W       W       W
.        .       .       .       W       W       .       .       .       W       W       .
.        .       .       .       .       .       .       .       .       W       W       .
.        .       .       .       .       .       .       .       .       W       .       .
.        .       W       .       .       .       .       .       .       W       .       .
.        W       .       W       .       .       .       .       .       W       W       .
W        .       W       .       W       .       .       .       .       .       W       .
.        W       .       W       .       .       .       .       .       .       W       .
.        .       W       .       .       .       .       .       .       .       W       .
MatX =
.        .       .       .       .       .       .       .       .       .       .       .
.        .       .       .       .       .       .       .       .       .       .       .
.        .       .       .       .       .       .       .       .       .       .       .
.        .       .       .       .       .       .       .       .       .       .       .
.        .       .       .       .       .       .       .       .       .       .       .
.        .       .       .       .       .       .       .       .       .       .       .
.        .       .       .       .       .       .       .       .       .       .       .
.        .       .       .       .       .       .       .       .       .       .       .
.        .       .       .       .       .       .       .       .       .       .       .
.        .       .       .       .       .       .       .       .       .       .       .
result: 3
--------------------------------
 Execution time:     0. 004 sec
--------------------------------



スタイル0


<h1 style="font-size: 21px;">
スタイル0</h1>
<hr />



CSS TEST マイタイトル01
<div class='mytitle01'>
CSS TEST マイタイトル01
</div>


CSS TEST マイタイトル02
<div class="mytitle02">
CSS TEST マイタイトル02
</div>


CSS TEST マイタイトル03
<div class="mytitle03">
CSS TEST マイタイトル03
</div>


CSS TEST マイタイトル03
<div class="mytitle03_B_Blue">
CSS TEST マイタイトル03_太字_青
</div>


CSS TEST マイタイトル04
<div class="mytitle04">
CSS TEST マイタイトル04
</div>



CSS TEST マイタイトル05
<div class="mytitle05">
CSS TEST マイタイトル05
</div>



■
<span style="color: #616161;">■</span>


  • 項目1
  • 項目2
  • 項目3
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>



  1. 項目1
  2. 項目2
  3. 項目3
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>



CSS TEST mypre01


てすと
<pre class="mypre01">CSS TEST mypre01


てすと
</pre>



CSS TEST mypre01


てすと

<div class="mypre01">
CSS TEST mypre01<br />
<br />
<br />
てすと
<br />
<br /></div>



CSS TEST mypre02


<pre class="mypre02">
CSS TEST mypre02

</pre>
または，
<div class="mypre02">
CSS TEST mypre02<br />
<br />
</div>



CSS TEST mypre03


てすと
<pre class="mypre03">CSS TEST mypre03



てすと
</pre>



CSS TEST mypre04
引用など
引用など
<pre class="mypre04">CSS TEST mypre04
引用など
引用など
</pre>



CSS TEST mypre05
引用など
引用など
<pre class="mypre05">CSS TEST mypre05
引用など
引用など
</pre>



CSS TEST mypre06
引用など
引用など
<pre class="mypre06">CSS TEST mypre06
引用など
引用など
</pre>



CSS TEST mypre07
引用など
引用など
<pre class="mypre07">CSS TEST mypre07
引用など
引用など
</pre>



CSS TEST mypre07
引用など
引用など

<pre style="background:#f1fafb;color:#000">CSS TEST mypre07
引用など
引用など
</pre>



CSS TEST mypre08
引用など
引用など
<pre class="mypre08">CSS TEST mypre08
引用など
引用など
</pre>



CSS TEST mypre09
引用など
引用など
<pre class="mypre09">CSS TEST mypre09
引用など
引用など
</pre>



$コマンドなどを等幅フォント白抜きで表示する．
$
$
<pre style="background:#000000;color:#FFFFFF; font-family:monospace;">\$コマンドなどを等幅フォント白抜きで表示する．
\$
\$
</pre>


CSS TEST マイコード01
<code class="mycode01">
CSS TEST マイコード01
</code>



CSS TEST マイタイトル06
<div class="mytitle06">
CSS TEST マイタイトル06
</div>



CSS TEST myrect01
文章
<div class="myrect01_01">
<div class="myrect01_02">
CSS TEST myrect01
</div>
文章
</div>



CSS TEST myrect01
文章
<div class="myrectpadding">
<div class="myrect01_01">
<div class="myrect01_02">
CSS TEST myrect01
</div>
文章
</div>
</div>



CSS TEST myrect02
文章
<div class="myrect02_01">
<div class="myrect02_02">
CSS TEST myrect02
</div>
文章
</div>



CSS TEST myrect02
文章
<div class="myrectpadding">
<div class="myrect02_01">
<div class="myrect02_02">
CSS TEST myrect02
</div>
文章
</div>
</div>



CSS TEST mymarginRight ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="mymarginRight">
CSS TEST mymarginRight
</div>



CSS TEST mymarginLeft ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="mymarginLeft">
CSS TEST mymarginLeft
</div>



CSS TEST mymarginLeft (半角一文字文シフト) ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="mymarginLeft1">
CSS TEST mymarginLeft1
</div>



CSS TEST mymarginLeft2 (全角一文字文シフト) ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="mymarginLeft2">
CSS TEST mymarginLeft2
</div>



CSS TEST mymarginRL ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="mymarginRL">
CSS TEST mymarginRL
</div>



参考資料
http://www.htmq.com/html/div.shtml

次にCSSやる時は，この辺りを見て勉強しよう．
http://weboook.blog22.fc2.com/blog-entry-337.html
0 件のコメント:
ラベル:

Blogにソースコードを添付する

ソースコードをBlogに貼る場合，(余裕でインストールできる場合を除き，) 労力を減らすために大切なのは， ソースコードをJavaScriptなどで動的にWeb用に変換するのではなく， ソースコードを静的なHTMLに変換してくれるサイトに投げることだと思う．


方法 1.
Gist (GitHubの仲間?) や GitHub にソースをUPして，ブラウザに出力されたHTMLをそのままコピペする方法．
(ただし，アカウントを持っている (or新規作成する) 場合に限る．)


方法 2.
何かしらソースをHTMLに変換してくれるサイトを利用する．


サイト 1. Online syntax highlight

Style: Slush & Poppies
int main(void) {
    printf("Hello World!");
    return 0;
}

Style: Sunburst
int main(void) {
    printf("Hello World!");
    return 0;
}
参考資料
http://fnya.cocolog-nifty.com/blog/2015/03/html-textmate-5.html


サイト 2.
#include <studio.h>

int main(void) {
    printf(\"Hello World!\");
    return 0;
}
http://blogtool.flatlabs.net/source.html


サイト 3.
#include <studio.h>

int main(void) {
    printf("Hello World!");
    return 0;
}
http://michinarinukazawa.github.io/sssh-syntax-converter/
http://blog.michinari-nukazawa.com/2014/02/sssh-syntax-highlight-source-code.html


サイト 4.
http://hilite.me/
https://emn178.github.io/online-tools/syntax_highlight.html

ハイライトはしてくれないが，pre タグでごまかす．(tab -> 4 シフトの置換を行ってから HTML エスケープして，pre タグで括る) 
<pre style="background:#f1f1f1;color:#000; font-family:monospace; margin:0pt; line-height:120%;overflow: auto;">#include &lt;stdio.h&gt;

int main(){
    printf(&quot;Hello world!\n&quot;);
    return 0;
}
</pre>
#include <stdio.h>

int main(){
    printf("Hello world!\n");
    return 0;
}
0 件のコメント:
ラベル:

ぶろぐの設定メモ (その2) blog_templates

スタイル0

<h1 style="font-size: 21px;">
スタイル0</h1>
<hr />



スタイル1

<h1 style="background: rgb(250, 250, 250); border-bottom-color: rgb(160, 160, 160); border-bottom-style: solid; border-top-color: rgb(160, 160, 160); border-top-style: solid; border-width: 3px 0px; font-size: 21px; line-height: 1.3; margin: 0px 0px 15px; outline: 0px; padding: 10px; vertical-align: baseline;">
スタイル1</h1>


スタイル2

<h2 style="background-color: white; border-bottom: 1px solid rgb(220, 220, 220); clear: both; color: #3c3c3c; line-height: 1.2; margin: 24px auto 14px; padding: 0px 0px 5px;">
スタイル2</h2>


スタイル3

<h3 style="background: transparent; border-bottom-color: rgb(96, 96, 96); border-bottom-style: solid; border-left-color: rgb(96, 96, 96); border-left-style: solid; border-width: 0px 0px 1px 8px; clear: both; font-size: 21px; line-height: 1.7; margin: 1em 0px 0.5em; outline: 0px; padding: 0px 0px 0px 10px; vertical-align: baseline;">
スタイル3</h3>


スタイル4

<h3 style="background: transparent; border-left-color: rgb(96, 96, 96); border-left-style: solid; border-width: 0px 0px 1px 8px; clear: both; font-size: 21px; line-height: 1.7; margin: 1em 0px 0.5em; outline: 0px; padding: 0px 0px 0px 10px; vertical-align: baseline;">
スタイル4</h3>


スタイル5

<h1 style="background-color: white; border-bottom: 1px dotted rgb(153, 153, 153); clear: both; color: #454545; font-size: 21px; margin: 1em 0px 0.5em;">
スタイル5</h1>



  • 項目1
  • 項目2
  • 項目3
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>



  1. 項目1
  2. 項目2
  3. 項目3
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</0l>



引用した文章など
<pre style="background: rgb(245, 245, 245); border-radius: 5px; color: #85735b; font-size: 15.2px; line-height: 25.84px; margin-bottom: 10px; overflow: auto; padding: 20px;">引用した文章など




</pre>



枠(HTMLから改行を行わないと，枠が分裂して増えるので注意!)
<pre style="background: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); color: #222222; font-size: 13.5px; line-height: 18.9px; outline: 0px; overflow-x: auto; overflow-y: hidden; padding: 10px; vertical-align: baseline;">枠(HTMLから改行を行わないと，枠が分裂して増えるので注意!)


</pre>



引用など1
<section style="background-attachment: initial; background-clip: initial; background-color: #f7f8f9; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-width: 0px 0px 0px 3px; outline: 0px; padding: 1em; vertical-align: baseline;">
引用など1
</section>



引用など2
<section style="border-left-color: rgb(204 , 204 , 204); border-left-style: solid; border-width: 0px 0px 0px 3px; outline: 0px; padding: 1em; vertical-align: baseline;">
引用など2
</section>



引用など3
<div
style="
    background-color: #faf8d4;
    border-left: 6px solid rgb(247, 224, 66);
    line-height: 27.36px;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: 1em;
">
引用など3
</div>



引用など4
<div
style="
    background-color: #f1fafb;
    border-left: 6px solid rgb(153, 219, 242);
    line-height: 27.36px;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: 1em;
">
引用など4
</div>



コマンドなどを囲むのに便利な奴


コマンドなどを囲むのに便利な奴
<code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); color: #333333; padding: 2px 4px; white-space: nowrap;">コマンドなどを囲むのに便利な奴</code>



タイトル
<div style="background-color: whitesmoke; border-bottom: 1px solid rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-top-color: rgb(221, 221, 221); border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: #333333; font-size: 15px; line-height: 21.4286px; padding: 10px 15px;">
タイトル</div>



スタイル
文章
<div style="background-color: white; box-sizing: border-box; color: #333333; font-size: 15px; line-height: 21.4286px; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative;">
<div style="border-radius: 0px; border: 1px solid rgb(255, 67, 9); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; box-sizing: border-box; margin-bottom: 21px;">
<div style="background-color: #ff7518; border-bottom: 1px solid rgb(255, 67, 9); border-left-color: rgb(255, 67, 9); border-right-color: rgb(255, 67, 9); border-top-color: rgb(255, 67, 9); border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; color: white; padding: 10px 15px;">
<div style="box-sizing: border-box; color: inherit; font-size: 17px; margin-bottom: 0px; margin-top: 0px;">
スタイル</div>
</div>
文章</div>



スタイル
文章
<div style="background-color: white; border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; box-sizing: border-box; color: #333333; font-size: 15px; line-height: 21.4286px; margin-bottom: 21px;">
<div style="background-color: whitesmoke; border-bottom: 1px solid rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-top-color: rgb(221, 221, 221); border-top-left-radius: 0px; border-top-right-radius: 0px; box-sizing: border-box; padding: 10px 15px;">
スタイル</div>
文章</div>



文章
<div style="-webkit-text-stroke-width: 0px; background: rgb(248, 248, 248); box-sizing: border-box; color: #333333; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; line-height: 21.4286px; margin-left: 25px; margin-right: 25px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<pre style="background-color: whitesmoke; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; display: block; font-size: 14px; line-height: 1.42857; margin: 0px 0px 10.5px; overflow: auto; padding: 10px; white-space: pre; word-break: break-all; word-wrap: normal;">文章</pre>



列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3
<style type="text/css">
.table00 {
  border-collapse: collapse;
  border: solid 1px #00ff00;
}
.table00 th {
  background-color: #f7f8f9;
  border: solid 1px #cccccc;
}
.table00 td {
  border: solid 1px #cccccc;
}
</style>
<table class="table00" border=1>
 <tr><th></th><th>列-A</th><th>列-B</th></tr>
 <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
 <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
 <tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
</table>



上記の
<pre class="mypre02">CSS TEST mypre02</pre>
を用いて MathJAX の数式を含む項目を囲むと，数式が上手く表示されなかったので，下記のようにテーブルを利用して囲むと良い．


  3.6.5 モメンタム
  p. 38 11 行目 「$\mu=0.9$ とセットしたとすると，これは学習係数を 10 倍したことに相当します」について考える．

<style type="text/css">
.table01 {
  border-collapse: collapse;
  border: solid 1px #00ff00;
  width: 100%;
}
.table01 td {
  border: solid 1px #cccccc;
}
</style>

<table border="1" class="table01">
    <tr><td>
<br />
&nbsp; 3.6.5 モメンタム<br />
&nbsp; p. 38 11 行目
「\$\mu=0.9\$ とセットしたとすると，これは学習係数を 10 倍したことに相当します」について考える．<br />
<br />
    </td></tr>
</table>


表 X. キャプション
項目1 項目2 項目3
対象1 対象2 対象3
対象1 対象2 対象3 

<style type="text/css">
.table02 {
    border-collapse: collapse;
}
.table02 td {
    border-top: solid 1px;
    border-bottom: solid 1px;
    padding: 0.5em;
    text-align: center;
}
</style>

<div align="center">
<table class="table02">
  <caption>表 X. キャプション</caption>
  <tr>
    <th>項目1</th>
    <th>項目2</th>
    <th>項目3</th>
  </tr>
  <tr>
    <td>対象1</td>
    <td>対象2</td>
    <td>対象3</td>
  </tr>
  <tr>
    <td>対象1</td>
    <td>対象2</td>
    <td>対象3</td>
  </tr>
</table>
</div>



表 X. c2py で実装されている型
項目1 項目2 項目3
対象1 対象2 対象3
対象1 対象2 対象3 
<div align="center">
<table style="border-collapse: collapse;">
  <caption>表 X. キャプション</caption>
  <tr>
    <th style="border-top: solid 1px; border-bottom: solid 1px; padding: 0.5em; text-align: center;">項目1</th>
    <th style="border-top: solid 1px; border-bottom: solid 1px; padding: 0.5em; text-align: center;">項目2</th>
    <th style="border-top: solid 1px; border-bottom: solid 1px; padding: 0.5em; text-align: center;">項目3</th>
  </tr>
  <tr>
    <td>対象1</td>
    <td>対象2</td>
    <td>対象3</td>
  </tr>
  <tr>
    <td>対象1</td>
    <td>対象2</td>
    <td>対象3</td>
  </tr>
</table>
</div>
0 件のコメント:
ラベル:

2016年8月23日

ぶろぐの設定メモ (その1)

1. テンプレート
1.1 ブログの幅を変更
[テンプレート->カスタマイズ->テンプレート]
Bloggerテンプレート: シンプル

[テンプレート->カスタマイズ->幅を調整]
ブログ全体: 1185ピクセル
右側のサイドバー: 310ピクセル

1.2 リンククリック後の色を変更
[テンプレート->カスタマイズ->上級者向け->リンク]

リンクの色: #2288bb
表示済みの色: #2288bb
カーソルを合わせた時の色: #33aaff

1.3 投稿タイトルを太字に変更
[テンプレート->カスタマイズ->上級者向け->投稿タイトル]

B, 22px

2. 画像の輪郭に表示される縁を消す．
3. MathJaxのインストール．
3.1 インストール．
[テンプレート->HTML の編集]
(MathJax よりも高速に動作する KaTeX もある．参考URL: https://abenori.blogspot.jp/search?q=katex)

<head>以降に下記をペースト
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML' type='text/javascript'>
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
    </script>
単純なインストールだけであれば，上記で終了．
しかし，このままでは \bm{}マクロ が使用できないため，下記のようにマクロを追加(変更)する．
(\bm{}マクロを定義せずとも，\boldsymbol{}マクロで太文字化は使用可能．)
    // MathJax loaded
    MathJax.Hub.Config({
        tex2jax: {
          ...
        },
        // Added by myself!!!
        TeX: {
          Macros:{
            grad:   ['\\mathrm{grad}\\,'],
            diver:  ['\\mathrm{div}\\,'],
            rot:    ['\\mathrm{rot}\\,'],
            bm:     ['{\\boldsymbol{#1}}', 1],
          }
        },
        ...
    });
また，数式に色を付けるため，下記も追加する．
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [['$','$'], ["\\(","\\)"]]
        },
        TeX: {
          extensions: ["color.js"],
        }
    });
    </script>
最終的に，下記を<head>直後に追加すればよい．
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML' type='text/javascript'>
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: {
            extensions: ["AMSmath.js","AMSsymbols.js","color.js"],
            equationNumbers: { autoNumber: "AMS" },
            Macros:{
                grad:   ['\\mathrm{grad}\\,'],
                diver:  ['\\mathrm{div}\\,'],
                rot:    ['\\mathrm{rot}\\,'],
                bm:     ['{\\boldsymbol{#1}}', 1],
            }
        },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
    </script>
参考資料
BloggerでMathJaxを使ってTeXっぽく数式を入れる方法
Irreducible representation MathJax in Blogger (II)
MathJaxの設定をいじる mathjaxではbmが使えないので代わりにboldsymbolを使う
MathJaxのテスト

3.2 動作確認

例: 1
\$e^{i\pi}=-1\$
上記のHTMLが下記のように変換される．
(逆に\$を表示したい場合は，\でエスケープする必要がある．)

$e^{i\pi}=-1$

例: 2
\[
\left( \int_0^\infty \frac{\sin x}{\sqrt{x}} dx \right)^2 =
\sum_{k=0}^\infty \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} =
\prod_{k=1}^\infty \frac{4k^2}{4k^2 - 1} = \frac{\pi}{2}
\]
上記のHTMLが下記のように変換される．
(\[と\]によって括る．$\LaTeX$における\begin{align*}～\end{align*}に相当する．
また，$\LaTeX$同様に\begin{align*}～\end{align*}で括っても動作する．
これ自体を表示するためには，<code>\[</code>や<code>\]</code>のようにしてエスケープする．)
\[
\left( \int_0^\infty \frac{\sin x}{\sqrt{x}} dx \right)^2 = \sum_{k=0}^\infty \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} = \prod_{k=1}^\infty \frac{4k^2}{4k^2 - 1} = \frac{\pi}{2} \]
数式引用
TeXclip

参考
BloggerでMathJaxを使ってTeXっぽく数式を入れる方法
MathJax in Blogger (II)

例: 3
数式への着色

$\color{red}{\bm{Ax}=\lambda\bm{x}}$
\$\color{red}{\bm{Ax}=\lambda\bm{x}}\$<-この記述法だけは，[4.]でextensions: [,"color.js"]を追記せずとも使用可能．

$\textcolor{red}{\bm{Ax}=\lambda\bm{x}}$
\$\textcolor{red}{\bm{Ax}=\lambda\bm{x}}\$

$\textcolor[rgb]{0,0.3,0.8}{\bm{Ax}=\lambda\bm{x}}$
\$\textcolor[rgb]{0,0.3,0.8}\bm{Ax}=\lambda\bm{x}\$

4. 検索エンジン向けの説明文
<head>
<meta name="description" content="検索エンジン向けの説明文"/>
</head>
5. Bloggerにおけるインデントの挿入
以下のHTMLで括ればよい．

<div style="margin: 0 0 0 20px;">
</div>

また，スペースを挿入したい場合は下記を挿入する．
&nbsp;

参考
［HTML］字下げをしてインデントする（style：margin）

6. BloggerのカスタムCSSを追加
下記のCSSを追加した．

* {
    color: #222222;
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
}
//カスタムCSS
/*行間の調整*/
.post-body {
    line-height: 1.6;
}
/*navbar部分の空白が邪魔なので削除*/
#navbar.navbar.no-items.section {
    height: 0px;/*30px;*/
    padding: 0;
    margin: 0;
}
/*ヘッダ画像を使用するため，タイトルを白抜きにする*/
h1.title{
    color: #FFFFFF;
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
}
h1,h2,h4 {
    color: #222222;
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
}
/*投稿タイトルにスタイルを適用する*/
h3.post-title {
    color: #222222;
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
}
h3.post-title a {
    color: #2288BB;
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
}
h3.post-title.entry-title{
    background-color: white;
    border-bottom: 1px dotted rgb(10, 10, 10);
/*    border-bottom: 1px dotted rgb(153, 153, 153);*/
/*    border-bottom: 1px dotted rgb(187, 187, 187);*/
    clear: both;
    color: #454545;
    font-size: 21px;
    margin: 1em 0px 0.5em;
}
/*
h3.post-title.entry-title{
    background: rgb(250, 250, 250);
    border-bottom-color: rgb(160, 160, 160);
    border-bottom-style: solid;
    border-top-color: rgb(160, 160, 160);
    border-top-style: solid;
    border-width: 3px 0px;
    font-size: 21px;
    font-weight: normal;
    line-height: 1.3;
    margin: 15px 0px 15px;
    outline: 0px;
    padding: 10px;
    vertical-align: baseline;
}*/
.mytitle01{
    background: rgb(250, 250, 250);
    border-bottom-color: rgb(160, 160, 160);
    border-bottom-style: solid;
    border-top-color: rgb(160, 160, 160);
    border-top-style: solid;
    border-width: 3px 0px;
    font-size: 21px;
    font-weight: normal;
    line-height: 1.3;
    margin: 0px 0px 15px;
    outline: 0px;
    padding: 10px;
    vertical-align: baseline;
}
.mytitle02{
    font-size: 21px;
    font-weight: bolder;
/*    font-weight: normal;*/
    background-color: white;
    border-bottom: 1px solid rgb(220, 220, 220);
    clear: both;
    color: rgb(69, 69, 69);
/*    color: #3c3c3c;*/
    line-height: 1.2;
    margin: 24px auto 14px;
    padding: 0px 0px 5px;
}
.mytitle03{
    background: transparent;
    border-bottom-color: rgb(96, 96, 96);
    border-bottom-style: solid;
    border-left-color: rgb(96, 96, 96);
    border-left-style: solid;
    border-width: 0px 0px 1px 8px;
    clear: both;
    color: rgb(69, 69, 69);
    font-size: 21px;
    font-weight: bolder;
/*    font-weight: normal;*/
    line-height: 1.7;
    margin: 1em 0px 0.5em;
    outline: 0px;
    padding: 0px 0px 0px 10px;
    vertical-align: baseline;
}
.mytitle04{
    background: transparent;
    border-left-color: rgb(96, 96, 96);
    border-left-style: solid;
    border-width: 0px 0px 1px 8px;
    clear: both;
    color: rgb(69, 69, 69);
    font-size: 21px;
    font-weight: bolder;
/*    font-weight: normal;*/
    line-height: 1.7;
    margin: 1em 0px 0.5em;
    outline: 0px;
    padding: 0px 0px 0px 10px;
    vertical-align: baseline;
}
.mytitle05{
    background-color: white;
    border-bottom: 1px dotted rgb(10, 10, 10);
/*    border-bottom: 1px dotted rgb(153, 153, 153);*/
    clear: both;
    color: rgb(69, 69, 69);
/*    color: #454545;*/
    font-size: 21px;
    font-weight: bolder;
/*    font-weight: normal;*/
    margin: 1em 0px 0.5em;
}
.mytitle06{
    background-color: whitesmoke;
    border-bottom: 1px solid rgb(221, 221, 221);
    border-left-color: rgb(221, 221, 221);
    border-right-color: rgb(221, 221, 221);
    border-top-color: rgb(221, 221, 221);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-sizing: border-box;
    color: #333333;
    font-size: 15px;
    line-height: 21.4286px;
    padding: 10px 15px;
}
.mypre01{
    background: rgb(245, 245, 245);
    border-radius: 5px; color: #85735b;
    font-size: 15.2px;
    line-height: 25.84px;
    margin-bottom: 10px;
    overflow: auto;
    padding: 20px;
}
.mypre02{
    background: rgb(255, 255, 255);
    border: 1px solid rgb(204, 204, 204);
    color: #222222;
    font-size: 13.5px;
    line-height: 18.9px;
    outline: 0px; overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
    vertical-align: baseline;
}
.mypre03{
    background-color: whitesmoke;
    border-radius: 0px;
    border: 1px solid rgb(204, 204, 204);
    box-sizing: border-box;
    color: #333333;
    display: block;
    font-size: 14px;
    line-height: 1.42857;
    margin: 0px 0px 10.5px;
    overflow: auto;
    padding: 10px;
    white-space: pre;
    word-break: break-all;
    word-wrap: normal;
}
.mytitle03_B_Blue{
    background: transparent;
    border-bottom-color: rgb(50, 50, 179);
    border-bottom-style: solid;
    border-left-color: rgb(50, 50, 179);
    border-left-style: solid;
    border-width: 0px 0px 1px 8px; clear: both;
    clear: both;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.7;
    margin: 1em 0px 0.5em;
    outline: 0px;
    padding: 0px 0px 0px 10px;
    vertical-align: baseline;
}
.mypre04{
    background-attachment: initial;
    background-clip: initial;
    background-color: #f7f8f9;
    background-image: initial;
    background-origin: initial;
    background-position: initial;
    background-repeat: initial;
    background-size: initial;
    border-left-color: rgb(204, 204, 204);
    border-left-style: solid;
    border-width: 0px 0px 0px 3px;
    outline: 0px;
    padding: 1em;
    vertical-align: baseline;
}
.mypre05{
    border-left-color: rgb(204 , 204 , 204);
    border-left-style: solid;
    border-width: 0px 0px 0px 3px;
    outline: 0px;
    padding: 1em;
    vertical-align: baseline;
}
.mypre06{
    background-color: #faf8d4;
    border-left: 6px solid rgb(247, 224, 66);
    line-height: 27.36px;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: 1em;
}
.mypre07{
    background-color: #f1fafb;
    border-left: 6px solid rgb(153, 219, 242);
    line-height: 27.36px;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: 1em;
}
.mypre08{
    background-color: #f7f8f9;
    border-left-color: rgb(204, 204, 204);
    border-left-style: solid;
    border-width: 0px 0px 0px 3px;
    outline: 0px;
    padding: 0em 0em 0em 1em;
    margin: 0pt;
}
.mypre09{
    border-left-color: rgb(204, 204, 204);
    border-left-style: solid;
    border-width: 0px 0px 0px 3px;
    outline: 0px;
    padding: 0em 0em 0em 1em;
    margin: 0pt;
}
.mycode01{
    background-color: #f7f7f9;
    border-radius: 3px;
    border: 1px solid rgb(225, 225, 232);
    color: #333333;
    padding: 0px 2px;
    white-space: nowrap;
}
.myrectpadding{
    background-color: white;
    box-sizing: border-box;
    color: #333333;
    font-size: 15px;
    line-height: 21.4286px;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
.myrect01_01{
    background-color: white;
    border-radius: 0px;
    border: 1px solid rgb(221, 221, 221);
    box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px;
    box-sizing: border-box;
    color: #333333;
    font-size: 15px;
    line-height: 21.4286px;
    margin-bottom: 21px;
}
.myrect01_02{
    background-color: whitesmoke;
    border-bottom: 1px solid rgb(221, 221, 221);
    border-left-color: rgb(221, 221, 221);
    border-right-color: rgb(221, 221, 221);
    border-top-color: rgb(221, 221, 221);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-sizing: border-box;
    padding: 10px 15px;
}
.myrect02_01{
    border-radius: 0px;
    border: 1px solid rgb(255, 67, 9);
    box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px;
    box-sizing: border-box;
    font-size: 15px;
    margin-bottom: 21px;
}
.myrect02_02{
    background-color: #ff7518;
    border-bottom: 1px solid rgb(255, 67, 9);
    border-left-color: rgb(255, 67, 9);
    border-right-color: rgb(255, 67, 9);
    border-top-color: rgb(255, 67, 9);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-sizing: border-box;
    color: white;
    padding: 10px 15px;
}
.mymarginRight{
    margin: 0 20px 0 0;
}
.mymarginLeft{
    margin: 0 0 0 20px;
}
.mymarginLeft1{
    margin: 0 0 0 5px;
}
.mymarginLeft2{
    margin: 0 0 0 13px;
}
.mymarginRL{
    margin: 0 20px 0 20px;
}

参考
Bloggerのフォントをメイリオに

7. HTMLの編集より下記のように変更

[6. BloggerのカスタムCSSを追加] -> [/*navbar部分の空白が邪魔なので削除*/] より，
navbar 部分が削除された分，上に詰まるので，上下のパディングを増やす．
また，左右のパディングは，多すぎるので，左右おのおの 20px 減らす．

変更前 
   <Variable name="content.padding" description="Content Padding" type="length" 
default="0px" min="0" max="100px" value="10px"/>
   <Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" 
default="$(content.padding)" min="0" max="100px" value="40px"/>
変更後 
(上下の幅)->   <Variable name="content.padding" description="Content Padding" type="length" 
default="0px" min="0" max="100px" value="20px"/>
(左右の幅)->   <Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" 
default="$(content.padding)" min="0" max="100px" value="20px"/>

ブログの説明の色が変更できないため，下記のように変更．
変更前
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
変更後 
  <div class='descriptionwrapper'>
    <p class='description'><span style='color: #FFFFFF'><data:description/></span></p>
  </div>

参考
Bloggerのヘッダーの画像の余白を無くしたい
スタイルシートリファレンス

0 件のコメント:
ラベル:
登録: 投稿 (Atom)