０；ゼロからはじめる！

Google Chromeでメモリ消費量を減らす方法

2018-08-01T09:43:00.001+09:00

使用していないタブを解放する

アドレスバーに「chrome://flags/」と入力する

「Automatic tab discarding」の項目を「Enabled」に設定

こちらは、メモリを解放するかどうかは不明

メモリを解放するかは不明だが、バックグラウンド処理をなくしCPUやHDDの負担を軽くする

「Google Chrome の設定」＞「設定」＞「詳細設定を表示...」

システム項目から「Google Chrome を閉じた際にバックグラウンドアプリの処理を続行する」のチェックを外す

firebaseでwebフォントを設置する方法

2017-09-28T18:03:00.001+09:00

Firebase経由のホスティング

Firebaseの使い方とインストールについては、下記から参照

bloggerでSyntaxHighlighter
をFirebase経由のホスティングする

Firebaseにwebフォントを設置すると？

表示されない！
まず、Firebaseにwebフォント設置。別サーバーからの読み込みがされずフォントが表示されない。
Firebase内にhtmlファイルを設置する。表示された！
Firebase内にwebフォントを設置。同じくFirebase内にhtmlを設置。表示される。
ローカルファイル内では？表示される！
ローカルファイル内にwebフォントを設置。同じくローカルファイル内にhtmlを設置。表示される。

と、Firebase内にwebフォントを設置　＜＜（読込）＜＜　別サーバーからの読み込み　がされない状態となった。

なぜ、Firebase内設置のwebフォントが読み込めないのか？

google先生に問合せをかけると、アクセス制限がかかっているため読込できない。

通常のレンタルサーバーであれば、.htaccessにAccess-Control-Allow-Originの設定をすれば良いのだがFirebaseには.htaccessがない！

では、どのようにするのか？

FirebaseでAccess-Control-Allow-Originを設定する方法

まず、ローカルファイル内にfirebase.jsonというファイルがあるので検索する。

見つかったら、バックアップをとる。

firebase.jsonを開いて下記のコードに書き換える。

{
  "hosting": {
    "public": "public" ,
    "headers": [ {
      "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
      "headers" : [ {
        "key" : "Access-Control-Allow-Origin",
        "value" : "*"
      } ]
    } ]
  }
}

さいごにfirebase deployを実行してファイルをアップロードする。

参照

デプロイ設定 | Firebase

ツイッター（twitter）のタイムライン表示をデザインカスタマイズして埋め込むやり方！

2017-09-16T17:40:00.000+09:00

ツイッター（twitter）タイムラインの埋め込みとデザインのやり方

1.タイムライン埋め込みのスクリプトをつくる

下記のサイトへ行く。

Twitter Publish

twitter公式のサイトを埋め込むとするとtwitter japan公式のURLは「https://twitter.com/twitterjp」になるのでこれを貼り付けて「ボタン」を選択する。

下の画面になるので、

左側を選択すると下の画面になるので、「Copy Codeボタン」を選択する。

これでタイムライン埋め込みのコードがつくれたのでサイトへコピーする。

がしかし、縦に長い！

下記は、ツィッター公式を埋め込んだものだ。（本当はもっと縦に長いが・・・、長すぎるので調整している。）

Tweets by TwitterJP

大きさの調整方法

まずは、取得したコードはこれだ。

<a class="twitter-timeline" href="https://twitter.com/TwitterJP">Tweets by TwitterJP</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

これに、高さと幅width="***px" height="***px"を追加する。

追加する場所は、class="twitter-timeline"の後ろにwidth="***px" height="***px" を追加する

*印の部分は、任意に数字を入れること！
<a class="twitter-timeline" width="***px" height="***px" href="https://twitter.com/TwitterJP">Tweets by TwitterJP</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらがwidth="320px" height="400px"で調整したもの。

Tweets by TwitterJP

境界線のカラーを変更する。

width="***px" height="***px"の後ろに、data-border-color="#***"（#***は、色番号）を追加する。

色番号がわからない場合はWEB色見本原色大辞典 - HTMLカラーコードを参照

高さ:320px 幅:400px 境界線のカラー:#66cdaa（グリーン）
<a class="twitter-timeline" width="320px" height="400px" data-border-color="#66cdaa" href="https://twitter.com/TwitterJP">Tweets by TwitterJP</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Tweets by TwitterJP

リンクのカラーを変更する

data-border-color="#***"の後ろにdata-link-color="#***"（#***は、色番号）を追加する。

高さ:320px 幅:400px
境界線のカラー:#66cdaa（グリーン）
リンクのカラー：#66cdaa（グリーン）
<a class="twitter-timeline" width="320px" height="400px" data-border-color="#66cdaa" data-link-color="#66cdaa"  href="https://twitter.com/TwitterJP">Tweets by TwitterJP</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Tweets by TwitterJP

テーマの変更

data-link-color="#***"の後ろに、data-theme="***"を追加する。

複数指定する場合は、data-chrome="noheader nofooter"と半角スペースをいれて続けて記述する。

テーマ色は、下記から選択する。

data-theme="dark"
data-theme="light"

高さ:320px 幅:400px
境界線のカラー:#66cdaa（グリーン）
リンクのカラー：#66cdaa（グリーン）
テーマのカラー：dark（ダーク）
<a class="twitter-timeline" width="320px" height="400px" data-border-color="#66cdaa" data-link-color="#66cdaa" data-theme="dark"  href="https://twitter.com/TwitterJP">Tweets by TwitterJP</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Tweets by TwitterJP

レイアウトのカスタマイズ

レイアウト関連のカスタマイズは下記の通りだ。data-chrome="***"で指定する。

data-chrome="noheader"：ヘッダーを非表示
data-chrome="nofooter"フッターを非表示
data-chrome="noborders"境界線を消す
data-chrome="noscrollbar"スクロールバーを非表示
data-chrome="transparent"背景を透過

twitterカスタマイズ一覧

twitterカスタマイズ一覧
項目	例	備考
横幅	width="***px"	横幅を調整する ***部分は任意の数字
高さ	height="***px"	高さを調整する ***部分は任意の数字
ツィートの数を指定	data-tweet-limit="*"	上では紹介しなかったが、ツィート数の固定もできる *部分は任意の数字
テーマの指定	data-theme="dark"	暗いテーマにする
テーマの指定	data-theme="light"	明るいテーマにする
リンクカラー変更	data-link-color="#***"	任意のカラーに変更できる ***部分は任意の数字
境界線のカラー変更	data-border-color="#***"	任意のカラーに変更できる ***部分は任意の数字
レイアウト関連	data-chrome="noheader"	ヘッダー非表示
	data-chrome="nofooter"	フッター非表示
	data-chrome="noborders"	境界線を非表示
	data-chrome="noscrollbar"	スクロールバー非表示
	data-chrome="transparent"	背景を透過
	data-chrome="noheader nofooter"	複数指定する場合は、半角スペースで区切る

javascript（tablesorter）を使ってテーブルにソート機能をつけるデモ

2017-09-13T16:56:00.000+09:00

tablesorter

tablesorterのgithub

組込みの参考

参考URL

テーブルにソート機能を追加するtablesorter.jsを簡単導入する方法
Tablesorterで HTMLの表をソート(並び替え)可能にする [ホームページ作成] All About
javascriptのテーブルソートライブラリ「Table Sorter」の設置方法メモ - SO NOTE そうのて (；^ω^)

テーブルソートのサンプル

	ボス	ランク	ドロップモンスター	場所１	場所２	コア名	コア種類	ｍａｘ上昇値
13	BOSS		ウルカー	話せる島	話せる島東部
13	BOSS		クイーンシルロップ	話せる島	話せる島東部
13	BOSS		コバカ	話せる島	話せる島東部
13	BOSS		シルバーホーン	話せる島	話せる島東部
13	BOSS		ブラックディス	話せる島	話せる島東部
1	一般		ヒグマ	話せる島	話せる島東部
7	一般		ブラウンベア	話せる島	話せる島東部
4	一般		大角アンテロープ	話せる島	話せる島東部	シルバーホーン	物理、魔法防御	80
7	一般		巨大廃墟グモ	話せる島	話せる島東部	クイーンシルロップ	HP	100
13	一般		巨大鉄グモ	話せる島	話せる島東部
5	一般		廃墟グモ	話せる島	話せる島東部
8	一般		草原アンテローブ	話せる島	話せる島東部
9	一般		草原ヒグマ	話せる島	話せる島東部
12	一般		鉄グモ	話せる島	話せる島東部
5	一般		ウェアウルフ	話せる島	話せる島東部
9	一般		オーク偵察兵	話せる島	話せる島東部
12	一般		オーク名射手	話せる島	話せる島東部	ウルカー	MP	100
11	一般		オーク弓兵	話せる島	話せる島東部
12	一般		オーク歩兵	話せる島	話せる島東部	コバカ	貫通力	50
10	一般		オーク歩哨	話せる島	話せる島東部
10	一般		オーク殺戮者	話せる島	話せる島東部
10	一般		オーク監督官	話せる島	話せる島東部
10	一般		オーク突撃兵	話せる島	話せる島東部
11	一般		オーク護衛	話せる島	話せる島東部
6	一般		吸血草原コウモリ	話せる島	話せる島東部
6	一般		廃城のウェアウルフ	話せる島	話せる島東部
3	一般		草原コウモリ	話せる島	話せる島東部
7	一般		身軽な黒狼	話せる島	話せる島東部	ブラックティス	物理、魔法攻撃	50
1	一般		黒狼	話せる島	話せる島東部
20	BOSS		精霊の守り人	話せる島	話せる島西部	精霊の守り人	回避	-
20	BOSS		キングペイン	話せる島	話せる島西部
20	BOSS		スティング	話せる島	話せる島西部
20	BOSS		タカ	話せる島	話せる島西部
18	BOSS		レッドルーズ	話せる島	話せる島西部
17	一般		堕落した岩石ゴーレム	話せる島	話せる島西部
17	一般		岩石ゴーレム	話せる島	話せる島西部
18	一般		森林毒グモ	話せる島	話せる島西部	キングペイン	命中	60
17	一般		硬化ゴーレム	話せる島	話せる島西部
15	一般		オーク偵察兵	話せる島	話せる島西部
15	一般		オーク労働者	話せる島	話せる島西部
16	一般		オーク戦士	話せる島	話せる島西部
16	一般		オーク歩哨	話せる島	話せる島西部
16	一般		オーク狂戦士	話せる島	話せる島西部	タカ	クリティカル抵抗	40
16	一般		オーク監視兵	話せる島	話せる島西部
16	一般		オーク突撃兵	話せる島	話せる島西部
15	一般		オーク精鋭偵察兵	話せる島	話せる島西部
14	一般		森のディコール	話せる島	話せる島西部
14	一般		森の棘ディコール	話せる島	話せる島西部
15	一般		森林スズメバチ	話せる島	話せる島西部	スティング	抵抗力	60
16	一般		護衛のリーダー	話せる島	話せる島西部
14	一般		赤毛狐	話せる島	話せる島西部
18	一般		赤毛狐の精霊守	話せる島	話せる島西部	レッドルーズ	クリティカル	40
17	一般		遺跡のウェアウルフ	話せる島	話せる島西部
15	一般		飢えた赤毛狐	話せる島	話せる島西部
18	一般		骸骨兵士	話せる島	話せる島西部
18	一般		骸骨弓使い	話せる島	話せる島西部
29	BOSS		ゾディアック	グルーディオ	グルーディン街道	ゾディアック	MP	310
26	BOSS		アール	グルーディオ	グルーディン街道
25	BOSS		オルパル	グルーディオ	グルーディン街道
21	BOSS		ケイナイン	グルーディオ	グルーディン街道
21	BOSS		フレキ	グルーディオ	グルーディン街道
22	BOSS		メルビル	グルーディオ	グルーディン街道
24	BOSS		モレティ	グルーディオ	グルーディン街道
24	一般		バグベアー	グルーディオ	グルーディン街道
24	一般		シェードリーパー	グルーディオ	グルーディン街道
23	一般		リーパー	グルーディオ	グルーディン街道
22	一般		ウィーバー	グルーディオ	グルーディン街道
22	一般		オルマフム偵察兵	グルーディオ	グルーディン街道
25	一般		オルマフム剣士	グルーディオ	グルーディン街道	オルバル	物理、魔法防御	110
26	一般		オルマフム名射手	グルーディオ	グルーディン街道
22	一般		オルマフム密偵	グルーディオ	グルーディン街道
26	一般		オルマフム射手	グルーディオ	グルーディン街道	アール	HP	160
26	一般		オルマフム将校	グルーディオ	グルーディン街道
22	一般		オルマフム強奪者	グルーディオ	グルーディン街道
25	一般		オルマフム戦士	グルーディオ	グルーディン街道
26	一般		オルマフム斧使い	グルーディオ	グルーディン街道
26	一般		オルマフム略奪者	グルーディオ	グルーディン街道
25	一般		オルマフム監督官	グルーディオ	グルーディン街道
26	一般		オルマフム監視兵	グルーディオ	グルーディン街道
26	一般		オルマフム覇者	グルーディオ	グルーディン街道
25	一般		オルマフム警備兵	グルーディオ	グルーディン街道
27	一般		オルマフム警備兵	グルーディオ	グルーディン街道
26	一般		オルマフム闘士	グルーディオ	グルーディン街道
21	一般		クーガー	グルーディオ	グルーディン街道	ケイナイン	クリティカル抵抗	120
22	一般		トゥレック偵察兵	グルーディオ	グルーディン街道
22	一般		トゥレック突撃兵	グルーディオ	グルーディン街道
21	一般		凶暴なウェアウルフ	グルーディオ	グルーディン街道
24	一般		吸血墓地コウモリ	グルーディオ	グルーディン街道
24	一般		地底の骸骨兵士	グルーディオ	グルーディン街道
23	一般		墓地コウモリ	グルーディオ	グルーディン街道
22	一般		平原の暴れクーガー	グルーディオ	グルーディン街道
22	一般		平原クーガー	グルーディオ	グルーディン街道
23	一般		恨みの骸骨兵士	グルーディオ	グルーディン街道
24	一般		恨みの骸骨弓使い	グルーディオ	グルーディン街道	モレティ	物理、魔法攻撃	110
21	一般		極悪ウェアウルフ	グルーディオ	グルーディン街道	フレキ	命中	70
25	一般		略奪品の警備兵	グルーディオ	グルーディン街道
22	一般		骸骨兵士	グルーディオ	グルーディン街道	メルビル	回避	80
40	BOSS		シルバービアード	グルーディオ	グルーディオ平原	シルバービアード	物理、魔法攻撃	340
30	BOSS		カクトゥス	グルーディオ	グルーディオ平原
35	BOSS		コックス	グルーディオ	グルーディオ平原
35	BOSS		コトス	グルーディオ	グルーディオ平原
36	BOSS		トゥレカ	グルーディオ	グルーディオ平原
32	BOSS		ドゥームフェイス	グルーディオ	グルーディオ平原
31	BOSS		ビッグハンド	グルーディオ	グルーディオ平原
30	一般		トゥランバグベアー	グルーディオ	グルーディオ平原
30	一般		バグベアー強奪者	グルーディオ	グルーディオ平原
30	一般		バグベアー殺戮者	グルーディオ	グルーディオ平原
30	一般		バグベアー略奪者	グルーディオ	グルーディオ平原
28	一般		アンテロープ	グルーディオ	グルーディオ平原
31	一般		キリオス	グルーディオ	グルーディオ平原
33	一般		ダークプリマ	グルーディオ	グルーディオ平原
30	一般		ヒグマ	グルーディオ	グルーディオ平原
30	一般		メル族人狩り兵	グルーディオ	グルーディオ平原	カクトゥス	クリティカル	140
35	一般		メル族呪術師	グルーディオ	グルーディオ平原	コックス	命中	110
35	一般		メル族挑発者	グルーディオ	グルーディオ平原
33	一般		メル族略奪兵	グルーディオ	グルーディオ平原
35	一般		メル族突撃兵	グルーディオ	グルーディオ平原
33	一般		メル族強襲兵	グルーディオ	グルーディオ平原
35	一般		メル族警備兵	グルーディオ	グルーディオ平原
28	一般		メル族門番	グルーディオ	グルーディオ平原
30	一般		極悪ヒグマ	グルーディオ	グルーディオ平原	ビッグハンド	貫通力	100
29	一般		鉄グモ	グルーディオ	グルーディオ平原
32	一般		ダークウィーバー	グルーディオ	グルーディオ平原	ドゥームフェイス	抵抗力	120
33	一般		ダークネールカス	グルーディオ	グルーディオ平原
36	一般		トゥレック偵察兵	グルーディオ	グルーディオ平原
36	一般		トゥレック弓使い	グルーディオ	グルーディオ平原
36	一般		トゥレック戦士	グルーディオ	グルーディオ平原
36	一般		トゥレック斥候兵	グルーディオ	グルーディオ平原
31	一般		トゥレック狙撃手	グルーディオ	グルーディオ平原
37	一般		トゥレック護衛	グルーディオ	グルーディオ平原	トゥレカ	物理、魔法攻撃	340
36	一般		トゥレック軍用犬	グルーディオ	グルーディオ平原
37	一般		トゥレック鍛冶屋	グルーディオ	グルーディオ平原
28	一般		フローティングアイ監視者	グルーディオ	グルーディオ平原
35	一般		メル族偵察兵	グルーディオ	グルーディオ平原	コトス	クリティカル抵抗	220
29	一般		メル族捕獲屋	グルーディオ	グルーディオ平原
35	一般		メル族狙撃兵	グルーディオ	グルーディオ平原
33	一般		メル族監視兵	グルーディオ	グルーディオ平原
29	一般		凶暴な黒狼	グルーディオ	グルーディオ平原
28	一般		狂気の黒狼	グルーディオ	グルーディオ平原
28	一般		赤毛狐	グルーディオ	グルーディオ平原
30	一般		植えた黒狼	グルーディオ	グルーディオ平原
52	BOSS		ヴェパー	グルーディオ	ウィンダウッド荘園	ヴェパー	クリティカル抵抗	590
44	BOSS		シャイニングティス	グルーディオ	ウィンダウッド荘園
38	BOSS		シャドウウィング	グルーディオ	ウィンダウッド荘園
48	BOSS		トロカ	グルーディオ	ウィンダウッド荘園
46	BOSS		フカ	グルーディオ	ウィンダウッド荘園
48	BOSS		ホワイトティス	グルーディオ	ウィンダウッド荘園
41	BOSS		ルーインワンダラー	グルーディオ	ウィンダウッド荘園
44	一般		グルーディオベア	グルーディオ	ウィンダウッド荘園
40	一般		ソウルスラッシャー	グルーディオ	ウィンダウッド荘園	ルーインワンダラー	HP	250
41	一般		増悪のプリマ	グルーディオ	ウィンダウッド荘園
42	一般		毒グモ	グルーディオ	ウィンダウッド荘園
42	一般		オルマフムのクリスタル盗り	グルーディオ	ウィンダウッド荘園
42	一般		オルマフム先鋒隊	グルーディオ	ウィンダウッド荘園
42	一般		オルマフム捜索兵	グルーディオ	ウィンダウッド荘園
42	一般		オルマフム警備兵	グルーディオ	ウィンダウッド荘園
44	一般		クーガー	グルーディオ	ウィンダウッド荘園
46	一般		トゥレックの暴れ犬	グルーディオ	ウィンダウッド荘園	ホワイトティス	抵抗力	180
38	一般		トゥレック偵察兵	グルーディオ	ウィンダウッド荘園
40	一般		トゥレック偵察隊長	グルーディオ	ウィンダウッド荘園
46	一般		トゥレック十人隊長	グルーディオ	ウィンダウッド荘園
40	一般		トゥレック守備隊長	グルーディオ	ウィンダウッド荘園
40	一般		トゥレック守護隊長	グルーディオ	ウィンダウッド荘園
48	一般		トゥレック射手	グルーディオ	ウィンダウッド荘園	フカ	貫通力	190
48	一般		トゥレック弓兵	グルーディオ	ウィンダウッド荘園
38	一般		トゥレック弓兵	グルーディオ	ウィンダウッド荘園
46	一般		トゥレック戦闘兵	グルーディオ	ウィンダウッド荘園
48	一般		トゥレック祭壇警備兵	グルーディオ	ウィンダウッド荘園
46	一般		トゥレック突撃兵	グルーディオ	ウィンダウッド荘園	トロカ	クリティカル	220
38	一般		トゥレック突撃兵	グルーディオ	ウィンダウッド荘園
40	一般		トゥレック突撃隊長	グルーディオ	ウィンダウッド荘園
48	一般		トゥレック精鋭	グルーディオ	ウィンダウッド荘園
46	一般		トゥレック警備兵	グルーディオ	ウィンダウッド荘園
48	一般		トゥレック護衛	グルーディオ	ウィンダウッド荘園
38	一般		トゥレック護衛	グルーディオ	ウィンダウッド荘園
42	一般		凶暴クーガー	グルーディオ	ウィンダウッド荘園
38	一般		吸血コウモリ	グルーディオ	ウィンダウッド荘園	シャドウウィング	物理、魔法防御	180
38	一般		呪われた猟師	グルーディオ	ウィンダウッド荘園
44	一般		堕落したスナイプ	グルーディオ	ウィンダウッド荘園	シャイニングティス	MP	300
38	一般		謎の実験体	グルーディオ	ウィンダウッド荘園
38	一般		醜いウェアウルフ	グルーディオ	ウィンダウッド荘園
38	一般		植えた人食い猟犬	グルーディオ	ウィンダウッド荘園
40	一般		骸骨射手	グルーディオ	ウィンダウッド荘園
38	一般		骸骨戦士	グルーディオ	ウィンダウッド荘園
62	BOSS		カジール	グルーディオ	荒野	カジール	抵抗力	520
54	BOSS		グラインダー	グルーディオ	荒野
50	BOSS		サンドアイ	グルーディオ	荒野
58	BOSS		サンドハーツ	グルーディオ	荒野
58	BOSS		ストーンハーツ	グルーディオ	荒野
52	BOSS		ポインター	グルーディオ	荒野
52	BOSS		レッドロック	グルーディオ	荒野
54	BOSS		砂の潜伏者	グルーディオ	荒野
52	一般		サハラ	グルーディオ	荒野
54	一般		侵食されたサハラ	グルーディオ	荒野
54	一般		砂漠のサハラ	グルーディオ	荒野	サンドハーツ	貫通力	210
54	一般		ジャイアントリーチ	グルーディオ	荒野	砂の潜伏者	HP	-
54	一般		マナリーチ	グルーディオ	荒野
52	一般		変異した虫	グルーディオ	荒野	ポインター	物理、魔法攻撃	260
54	一般		変異した虫の士官	グルーディオ	荒野
54	一般		変異した虫の働き者	グルーディオ	荒野
54	一般		変異した虫の兵士	グルーディオ	荒野
52	一般		変異した虫の戦士	グルーディオ	荒野
54	一般		変異した虫の闘士	グルーディオ	荒野	グラインダー	物理、魔法防御	230
54	一般		灰岩石ゴーレム	グルーディオ	荒野	ストーンハーツ	MP	390
52	一般		荒地バジリスク	グルーディオ	荒野	レッドロック	回避	150
50	一般		ウェアウルフ	グルーディオ	荒野
54	一般		オルマフム略奪者	グルーディオ	荒野
58	一般		オルマフム略奪者戦士	グルーディオ	荒野
58	一般		オルマフム略奪者捜索兵	グルーディオ	荒野
54	一般		オルマフム略奪者警備兵	グルーディオ	荒野
50	一般		オルマフム荷運び	グルーディオ	荒野
54	一般		オルマフム運び屋	グルーディオ	荒野
50	一般		フローティングアイ追跡者	グルーディオ	荒野	サンドアイ	命中	130
50	一般		峡谷の監視者	グルーディオ	荒野
54	一般		砂漠の骸骨番兵	グルーディオ	荒野
54	一般		砂漠の骸骨監視兵	グルーディオ	荒野
52	一般		骸骨監視兵	グルーディオ	荒野
52	一般		骸骨追撃者	グルーディオ	荒野
	BOSS		フレゴン	ディオン	ディオン牧草地	フレゴン	クリティカル抵抗	850
66	BOSS		クラッシュ	ディオン	ディオン牧草地
66	BOSS		スクリッシュ	ディオン	ディオン牧草地
62	BOSS		スラッシュ	ディオン	ディオン牧草地
62	BOSS		パラシュ	ディオン	ディオン牧草地
62	BOSS		バロク	ディオン	ディオン牧草地
62	BOSS		ブルク	ディオン	ディオン牧草地
70	BOSS		モーク	ディオン	ディオン牧草地
70	一般		トゥランバグベアー	ディオン	ディオン牧草地
70	一般		バグベアー	ディオン	ディオン牧草地
70	一般		エルダーアンテロープ	ディオン	ディオン牧草地
66	一般		エルヴンアンテロープ	ディオン	ディオン牧草地
70	一般		エルヴンベア	ディオン	ディオン牧草地
70	一般		ヒグマ	ディオン	ディオン牧草地
62	一般		レットリザードマン	ディオン	ディオン牧草地	スラッシュ	MP	-
66	一般		レット族呪術師	ディオン	ディオン牧草地	スクリッシュ	クリティカル	330
62	一般		レット族弓使い	ディオン	ディオン牧草地	バラシュ	抵抗力	-
62	一般		レット族戦士	ディオン	ディオン牧草地
66	一般		レット族略奪兵	ディオン	ディオン牧草地
62	一般		レット族略奪者	ディオン	ディオン牧草地
66	一般		レット族警備兵	ディオン	ディオン牧草地
66	一般		レット族護衛兵	ディオン	ディオン牧草地	クラッシュ	貫通力	290
70	一般		凶暴ヒグマ	ディオン	ディオン牧草地
70	一般		剃刀鉄グモ	ディオン	ディオン牧草地
70	一般		巨大棘グモ	ディオン	ディオン牧草地
66	一般		草原アンテロープ	ディオン	ディオン牧草地
70	一般		草原剃刀グモ	ディオン	ディオン牧草地
70	一般		エルヴィンウィンドスース	ディオン	ディオン牧草地
62	一般		スズメバチ	ディオン	ディオン牧草地
70	一般		ブラッディワスプ	ディオン	ディオン牧草地
62	一般		ブレカ偵察兵	ディオン	ディオン牧草地
62	一般		ブレカ十人隊長	ディオン	ディオン牧草地
62	一般		ブレカ戦士	ディオン	ディオン牧草地
62	一般		ブレカ捜索兵	ディオン	ディオン牧草地	バロク	物理、魔法防御	320
70	一般		ブレカ潜入兵	ディオン	ディオン牧草地	ブルク	物理、魔法攻撃	270
70	一般		ブレカ突撃兵	ディオン	ディオン牧草地	モーク	HP	450
62	一般		ブレカ補給兵	ディオン	ディオン牧草地
62	一般		ブレカ警備兵	ディオン	ディオン牧草地
62	一般		ブレカ護衛兵	ディオン	ディオン牧草地
70	一般		吸血コウモリ	ディオン	ディオン牧草地
62	一般		怒れるスズメバチ	ディオン	ディオン牧草地
66	一般		草原ウィンドスース	ディオン	ディオン牧草地
70	一般		鋭い吸血コウモリ	ディオン	ディオン牧草地
66	一般		鋭針のスズメバチ	ディオン	ディオン牧草地
	BOSS		シス	ディオン	クルマ湿地	シス	MP	1070
90	BOSS		アルケイン	ディオン	クルマ湿地
84	BOSS		ゼルナ	ディオン	クルマ湿地
84	BOSS		モーガン	ディオン	クルマ湿地
78	BOSS		リスト	ディオン	クルマ湿地
78	BOSS		ロンドゥ	ディオン	クルマ湿地
75	一般		ホラーリーパー	ディオン	クルマ湿地
74	一般		ミストホラーリーパー	ディオン	クルマ湿地
78	一般		メル族先鋒隊	ディオン	クルマ湿地
78	一般		メル族呪術師	ディオン	クルマ湿地
74	一般		沼毒グモ	ディオン	クルマ湿地
78	一般		湿地の亡者	ディオン	クルマ湿地
74	一般		縞黒グモ	ディオン	クルマ湿地
90	一般		闇黒聖歌団プリマ	ディオン	クルマ湿地	アルケイン	HP	-
84	一般		マーシュアサシン	ディオン	クルマ湿地
78	一般		メル族斥候兵	ディオン	クルマ湿地
78	一般		メル族追撃兵	ディオン	クルマ湿地
74	一般		呪われた監視者	ディオン	クルマ湿地
74	一般		沼コウモリ	ディオン	クルマ湿地
84	一般		沼スタッカートの死神	ディオン	クルマ湿地
84	一般		沼スタッカート刺客	ディオン	クルマ湿地
84	一般		沼スタッカート奴隷	ディオン	クルマ湿地	ゼルナ	物理、魔法防御	-
84	一般		沼スタッカート奴隷	ディオン	クルマ湿地
84	一般		湿地の刺客	ディオン	クルマ湿地
84	一般		湿地の暗殺者	ディオン	クルマ湿地	モーガン	物理、魔法攻撃	-
84	一般		湿地の暗殺者	ディオン	クルマ湿地
90	一般		狂気の暗殺者	ディオン	クルマ湿地
84	一般		破壊的な暗殺者	ディオン	クルマ湿地
78	一般		骸骨偵察兵	ディオン	クルマ湿地	ロンドゥ	回避
78	一般		骸骨追撃兵	ディオン	クルマ湿地	リスト	命中	-
100	BOSS		オルバカン	ディオン	闘争の峰
90	BOSS		タータン	ディオン	闘争の峰
94	BOSS		タールアタン	ディオン	闘争の峰
90	BOSS		ツタン	ディオン	闘争の峰
90	BOSS		峰の襲撃者	ディオン	闘争の峰
100	一般		湿地プレモ	ディオン	闘争の峰
84	一般		カンクンの番人	ディオン	闘争の峰
94	一般		カンクンの祭司長	ディオン	闘争の峰
94	一般		カンクンの精鋭	ディオン	闘争の峰	タールアタン	クリティカル	-
94	一般		カンクンの警戒兵	ディオン	闘争の峰
90	一般		タノール偵察兵	ディオン	闘争の峰
90	一般		タノール呪術師	ディオン	闘争の峰
94	一般		タノール守護兵	ディオン	闘争の峰
90	一般		タノール守護兵	ディオン	闘争の峰
94	一般		タノール戦士	ディオン	闘争の峰
90	一般		タノール戦士	ディオン	闘争の峰
90	一般		タノール歩哨	ディオン	闘争の峰	タータン	貫通力	-
94	一般		タノール祭司長	ディオン	闘争の峰	ツタン	クリティカル抵抗	-
90	一般		タノール突撃兵	ディオン	闘争の峰
90	一般		タノール補給兵	ディオン	闘争の峰
90	一般		タノール警戒兵	ディオン	闘争の峰
90	一般		怒れるヒグマ	ディオン	闘争の峰
90	一般		森林牙グモ	ディオン	闘争の峰
90	一般		湿地の毒グモ	ディオン	闘争の峰
94	一般		オルマフム偵察兵	ディオン	闘争の峰
84	一般		オルマフム先発隊	ディオン	闘争の峰
90	一般		オルマフム先鋒隊	ディオン	闘争の峰
100	一般		オルマフム将校	ディオン	闘争の峰
104	一般		オルマフム指揮官	ディオン	闘争の峰
90	一般		オルマフム敗残兵	ディオン	闘争の峰
94	一般		オルマフム斥候兵	ディオン	闘争の峰
100	一般		オルマフム狙撃手	ディオン	闘争の峰
100	一般		オルマフム突撃兵	ディオン	闘争の峰	オルバカン	命中	-
100	一般		オルマフム補給兵	ディオン	闘争の峰
100	一般		オルマフム訓練兵	ディオン	闘争の峰
100	一般		オルマフム警戒兵	ディオン	闘争の峰
90	一般		サップワスプ	ディオン	闘争の峰
94	一般		シャドウワスプ	ディオン	闘争の峰
104	一般		ファンクス	ディオン	闘争の峰
90	一般		脱出した将校	ディオン	闘争の峰
90	一般		赤尾狐	ディオン	闘争の峰
90	一般		黒ヒョウ	ディオン	闘争の峰	峰の襲撃者	貫通力	-
112	BOSS		カウボーイ	ディオン	絶叫の地
116	BOSS		シムトラスト	ディオン	絶叫の地
112	BOSS		ジョナサン	ディオン	絶叫の地
104	BOSS		スクリーマー	ディオン	絶叫の地
112	BOSS		スクリーミングエント	ディオン	絶叫の地
116	BOSS		バルサザール	ディオン	絶叫の地
104	一般		フローラ	ディオン	絶叫の地
116	一般		ゾンビロード	ディオン	絶叫の地
108	一般		ブラックウィロー	ディオン	絶叫の地
112	一般		不吉なウィロー	ディオン	絶叫の地	不吉なウィロー	スクリーミングエント	-
108	一般		正気を失ったリーパー	ディオン	絶叫の地
112	一般		死のリーパー	ディオン	絶叫の地
112	一般		眠れぬ魂	ディオン	絶叫の地
120	一般		クリムゾンバインド	ディオン	絶叫の地
112	一般		コマ	ディオン	絶叫の地
112	一般		ドゥームサーバント	ディオン	絶叫の地
116	一般		執念の怨霊	ディオン	絶叫の地	スムトラスト	抵抗力	-
108	一般		壊れた暗殺者	ディオン	絶叫の地
104	一般		怒れるマンドラゴラ	ディオン	絶叫の地
104	一般		悲嘆のディコール	ディオン	絶叫の地	フローラ	物理、魔法防御	-
116	一般		悲嘆のディコール	ディオン	絶叫の地
108	一般		憎悪の暗殺者	ディオン	絶叫の地
116	一般		死霊ネールカス	ディオン	絶叫の地	クリティカル	バルサザール	-
112	一般		渇望する怨霊	ディオン	絶叫の地
108	一般		無力なドゥームサーバント	ディオン	絶叫の地	ジョナサン	HP	-
112	一般		無念の亡霊	ディオン	絶叫の地
120	一般		無残なサーバント	ディオン	絶叫の地
104	一般		絶叫のマンドラゴラ	ディオン	絶叫の地
104	一般		絶望のディコール	ディオン	絶叫の地
104	一般		苦痛のマンドラゴラ	ディオン	絶叫の地	スクリーマー	物理、魔法攻撃	-
116	一般		苦痛の怨霊	ディオン	絶叫の地
112	一般		蘇った商人	ディオン	絶叫の地
112	一般		蘇った怨霊	ディオン	絶叫の地	カウボーイ	貫通力	-
116	一般		骸骨狙撃兵	ディオン	絶叫の地
116	一般		骸骨突撃兵	ディオン	絶叫の地
116	一般		魂の収集家ネールカス	ディオン	絶叫の地
20	一般		ファングバット	エリートダンジョン	エルフの遺跡地下1階	ホラーウィング	物理、魔法攻撃	120
20	一般		ウェアウルフ	エリートダンジョン	エルフの遺跡地下1階	リカオン	物理、魔法防御	130
25	一般		地底鉄グモ	エリートダンジョン	エルフの遺跡地下1階	アラクネ	HP	200
26	一般		スパルトイ狂戦士	エリートダンジョン	エルフの遺跡地下2階	マニアクス	MP	406
27	一般		スパルトイ追撃者	エリートダンジョン	エルフの遺跡地下2階	フィラクス	貫通力	110
31	一般		ウォッチャー	エリートダンジョン	エルフの遺跡地下2階	デスゲイザー	抵抗力	130
35	一般		シェイパー	エリートダンジョン	エルフの遺跡地下2階	ネクロス	クリティカル	130
36	一般		兵隊アリの幼虫	エリートダンジョン	アリの巣地下1階	リバー	クリティカル	420
50	一般		働きアリの隊長	エリートダンジョン	アリの巣地下1階	アリの巣の監察官	クリティカル抵抗	470
78	一般		衛兵アリ	エリートダンジョン	アリの巣地下2階	アリの巣の親衛隊長	命中	-
84	一般		雄アリのリーダー	エリートダンジョン	アリの巣地下2階	産卵地の管理人	回避	-
84	一般	R	エックスクロ	エリートダンジョン	クルマの塔2階	ミスティック	命中	-
90	一般	R	ポルタ	エリートダンジョン	クルマの塔2階	ステレオス	回避	-
94	一般	R	モルデオの親衛隊	エリートダンジョン	クルマの塔2階	マスターモルデオ	物理、魔法攻撃	-
114	一般	R	スースキャプタープライム	エリートダンジョン	クルマの塔2階	セルボプライム	物理、魔法防御	-
112	一般	R	バリデューユガード	エリートダンジョン	クルマの塔3階	グリジョ	HP
120	一般	R	メポルデ	エリートダンジョン	クルマの塔3階	ユリウス	MP
128	一般	R	ロルカ	エリートダンジョン	クルマの塔3階	マグヌス	貫通力
	BOSS	R	バールカルロン	血盟ダンジョン	血盟ダンジョン	バールカルロン	物理、魔法攻撃

Bloogerで1記事複数ラベルに対して記事一覧を表示させる方法

2017-07-05T15:20:00.003+09:00

はじめに

記事に対しての関連記事表示方法はいくつかある。

RSSリーダを使用する
記事内のラベルを参照してPHPやjavascriptを使用する

などが一般的に関連記事を表示する方法だろう。

Bloggerで関連記事を表示する場合の問題点

Bloggerの場合はラベルが階層化されていない、この一言だろう。ラベルについての関連性が一番良いのか判断できず、関連性の低い記事が表示される状況となる。そのラベルも「ABC、あいうえお順」となるため使えない。では、苦肉の作として番号をふる（例：001-PC、011-ハードウェア、012-ソフトウェア、002-プリンタ・・・など）とするのも管理するのも大変である。

どのような解決作があるのか？

まずBloggerは、１記事に対して複数のラベルが存在するものと定義する。

記事：SEO対策「SyntaxHighlighter」を使用したページの表示速度改善をする方法

SEO
SyntaxHighlighter
ブログカスタマイズ

上の記事に対するラベルは３つある。では、そのラベルそれぞれの一覧を表示すれば関連記事となると考えられる。

どのように表示するか？

記事に対するラベルの一覧を取得し、そのラベル対して新しい記事より表示させる。

記事一覧のイメージ表示

最終的にこのように表示させる。

こちらのサイトを参考にした

下記コードを見つける

<b:includable id='main' var='top'>

見つけたら下記コードを追加する

<b:includable id='related-posts' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post:</h3>
<div id='data2007'/><br/>
   <script type='text/javascript'>

   var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
   var maxNumberOfPostsPerLabel = 6;
   var maxNumberOfLabels = 3;

   function listEntries10(json) {
   var ul = document.createElement(&#39;ul&#39;);
   var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? 
                 json.feed.entry.length : maxNumberOfPostsPerLabel;
   for (var i = 0; i &lt; maxPosts; i++) {
   var entry = json.feed.entry[i];
   var alturl;

       for (var k = 0; k &lt; entry.link.length; k++) {
         if (entry.link[k].rel == &#39;alternate&#39;) {
           alturl = entry.link[k].href;
           break;
         }
       }
       var li = document.createElement(&#39;li&#39;);
       var a = document.createElement(&#39;a&#39;);
       a.href = alturl;

if(a.href!=location.href) {
   var txt = document.createTextNode(entry.title.$t); 
   a.appendChild(txt);
   li.appendChild(a);
   ul.appendChild(li); 
}
   }
     for (var l = 0; l &lt; json.feed.link.length; l++) {
       if (json.feed.link[l].rel == &#39;alternate&#39;) {
         var raw = json.feed.link[l].href;
         var label = decodeURIComponent(raw.substr(homeUrl3.length+13));
         var txt = document.createTextNode(label);
         var h = document.createElement(&#39;b&#39;);
         h.appendChild(txt);
         var div1 = document.createElement(&#39;div&#39;);
          div1.appendChild(h);
         div1.appendChild(ul);
         document.getElementById(&#39;data2007&#39;).appendChild(div1);
       }
     }
   }
   function search10(query, label) {

   var script = document.createElement(&#39;script&#39;);
   script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
    + label +
    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
   script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
   document.documentElement.firstChild.appendChild(script);
   }

   var labelArray = new Array();
   var numLabel = 0;

   <b:loop values='data:posts' var='post'>
     <b:loop values='data:post.labels' var='label'>
       textLabel = &quot;<data:label.name/>&quot;;
     
       var test = 0;
       for (var i = 0; i &lt; labelArray.length; i++)
       if (labelArray[i] == textLabel) test = 1;
       if (test == 0) { 
          labelArray.push(textLabel);
          var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? 
                 labelArray.length : maxNumberOfLabels;
           if (numLabel &lt; maxLabels) {
             search10(homeUrl3, textLabel);
             numLabel++;
          }
       }
     </b:loop>
   </b:loop>
   </script>
</div>
</div>
</b:if>
</b:includable>

３行目：「Related Post:」を変更すればタイトルが変更できる
１1行目：表示させる記事数
１2行目：表示させるラベル数

表示させたい部分に下記コードを追加する

<b:include data='posts' name='related-posts'/>

さいごに

これでBloggerみたく、1記事複数ラベルであっても関連記事を表示することができる。サムネイルや記事内容などは表示されないシンプルだがひとまずは良しとしよう

SEO対策「SyntaxHighlighter」を使用したページの表示速度改善をする方法

2017-07-05T12:17:00.000+09:00

はじめに

ここでは、ページ速度を上げるためにSyntaxHighlighterの読込短縮するための方法を解説する。

いままでは、head内に記述していたためすべてのページに対してSyntaxHighlighterを読込していた。そのためSyntaxHighlighterを使用していないページまで読込が発生してしまいページ速度が著しく低下していた。そこで、Javascriptを使用しSyntaxHighlighterを使用しているページだけ読込をする。

SyntaxHighlighterのautoloaderについて

autoloaderも良いのだがこれはブラシ部分しか判定を行わないため、本体部分は読込を行う。そのためブラシ種類が少ない場合（私の場合だとxml、css、javascriptの３つのみしか使用しない、さらに全記事中の1/4程度しかSyntaxHighlighterを使用していない）などの時は、本体部分の読込も不必要な場面が多い。したがってautoloaderでは役不足である。

SyntaxHighlighter読込短縮フローチャート

シンプルに、まずpreタグの存在を判定し、preタグが存在すればSyntaxHighlighterを読込をするようにする。

SyntaxHighlighter読込短縮javascript

詳しくはこちらのサイトを参考にした。このコードを元に、xml、css、javasprict以外の判定は削除し、Closure Compilerを使用しjavascriptを圧縮した。

<script type='text/javascript'>
<!--
(function(){function k(a){var d=document.createElement("link");d.setAttribute("rel","stylesheet");d.setAttribute("type","text/css");d.setAttribute("href",a);g(d)}function l(a,d){var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("src",a);d?(b.onload=b.onreadystatechange=function(){if(!b.readyState||/loaded|complete/.test(b.readyState))b.onload=b.onreadystatechange=null,e=!1,h()},n(function(){g(b)})):g(b)}function g(a){document.getElementsByTagName("head")[0].appendChild(a)}
function p(a){m(function(){e=!0;a();e=!1})}function n(a){m(function(){e=!0;a()})}function m(a){e||0!=c.length?c.push(function(){a();h()}):(a(),h())}function h(){if(!e&&0<c.length){var a=c[0];c.splice(0,1);a()}}var c=[],e=!1;(function(){function a(a,b,e){this.name=a;this.brushNames=b;this.file=e}function d(a){for(var c=0;c<b.length;c++)for(var d=0;d<b[c].brushNames.length;d++)if(a==b[c].brushNames[d]){a=b[c].name;c=e;""!=c[a]&&(l(c[a],!0),c[a]="");return}}for(var b=[new a("CSS",["css"],"shBrushCss.js"),new a("JavaScript",["js","jscript","javascript"],"shBrushJScript.js"),new a("PHP",["php"],"shBrushPhp.js"),new a("Ruby",["rails","ror","ruby"],"shBrushRuby.js"),new a("XML",["xml","xhtml","xslt","html","xhtml"],"shBrushXml.js")],e=[],f=0;f<b.length;f++)e[b[f].name]="https://hosting-d86e3.firebaseapp.com/scripts/"+b[f].file;for(var c=0,g=document.getElementsByTagName("pre"),f=0;f<g.length;f++){var h=g[f].className.match(/(brush:\s*)([^\s;]+)(\s*;*)/);null!=h&&(0==c&&(k("https://hosting-d86e3.firebaseapp.com/scripts/shCore.css"),k("https://hosting-d86e3.firebaseapp.com/scripts/shCoreEclipse.css"),
l("https://hosting-d86e3.firebaseapp.com/scripts/shCore.js",!0)),d(h[2]),c++)}0<c&&p(function(){SyntaxHighlighter.config.bloggerMode=!0;SyntaxHighlighter.all()})})()})();
//-->
</script>

さいごに

今回は、xml、css、javasprictとしたが必要な部分を選択し圧縮を行えば、自分にあったコードが生成できるだろう。

CSSの疑似要素beforeとafterで肉球をつくる

2017-06-15T15:04:00.001+09:00

はじめに

オリジナルなhタグ（要素）が作りたくて、肉球をつくってみたお話です。

まず最初にCSS擬似要素のbeforeとafterを使用する。

CSSの疑似要素beforeとafterの簡単な使い方

作るにあたっての考え方

まずは簡単な装飾から作り最後に肉球の形を作ることにする。。

1.１つ表示する方法

ここでは、h1要素「こんにちは」に対して左側に青丸を１つ表示する。


<style>
.circle01 {
  position: relative;
  padding-left: 20px;
}
.circle01::before {
/* ブラウザで正常に表示されない場合は、
::beforeを:before(コロン１つ)にする */
  content:''; 
  height: 15px;         /* 縦幅 */
  width: 15px;          /* 横幅 */
  display:block;
  border-radius: 50%;   /* まん丸に表示 */
  background: blue;  /* 色指定 */
  position:absolute; 
  top: 15px;            /* 縦位置調整 */
  left: 0px;            /* 横位置調整 */
}
</style>

<h1 class="circle01">こんにちは</h1>

表示結果

こんにちは

と結果として表示される。

解説

.circle01 に対して擬似要素:beforeを使用
<h1 class="circle01">こんにちは</h1>を表示する
次に擬似要素::beforeによって左側に青丸を表示させる

2.`box-shadow`を使い２つ表示する

次に、CSS擬似要素を用いてh1要素「こんにちは」に対しての左側に青丸と黒丸を２つ表示する。黒丸はbox-shadowを用いて表示する。


<style>
.circle02 {
  position: relative;
  padding-left: 20px;
}
.circle02:before {
  content:''; 
  height: 15px; 
  width: 15px; 
  display:block;
  border-radius: 50%;
  background: blue;
  position:absolute; 
  top: 15px; 
  left: 0px;
  box-shadow:0px -0px black;
    -webkit-box-shadow:0px -20px black;
}.circle02 {
  position: relative;
  padding-left: 20px;
}
</style>

<h1 class="circle02">こんにちは</h1>

表示結果

こんにちは

と結果として表示される。

解説

.circle02 に対して擬似要素:beforeを使用
<h1 class="circle01">こんにちは</h1>を表示する
次に擬似要素::beforeによって左側に青丸と、box-shadowを使い黒丸を表示させる

3.`box-shadow`と擬似要素`::before、::after`を使い４つ表示する

次に、CSS擬似要素を用いてh1要素「こんにちは」に対しての左側に青丸と黒丸を２つ表示する。黒丸はbox-shadowを用いて表示する。


<style>
.circle03 {
  position: relative;
  padding-left: 20px;
}
.circle03:before {
  content:''; 
  height: 15px; 
  width: 15px; 
  display:block;
  border-radius: 50%;
  background: blue;
  position:absolute; 
  top: 15px; 
  left: 0px;
  box-shadow:0px -0px black;
    -webkit-box-shadow:0px -20px black;
}
.circle03:after {
  content:''; 
  height: 15px; 
  width: 15px; 
  display:block;
  border-radius: 0%;
  background: red;
  position:absolute; 
  top: 15px; 
  left: 20px;
  box-shadow:0px -0px #000;
    -webkit-box-shadow:0px -20px white;
}
</style>

<h1 class="circle02">こんにちは</h1>

表示結果

こんにちは

と結果として表示される。

解説

.circle03 に対して擬似要素::before、::afterを使用
<h1 class="circle01">こんにちは</h1>を表示する
次に擬似要素::beforeによって左側に青丸と、box-shadowを使い黒丸を表示させる
最後に擬似要素::afterによって左側に赤四角と、box-shadowを使い白四角を表示させる

注目！！

ここで気づいた方もいると思うが擬似要素::brfore、::afterで２種類の表示。さらにbox-shadowを用いて同じものを２つ表示。box-shadowを使えば同じ形のものであれば複数増やすことができる。

4.お待ちかねの肉球の表示

CSS擬似要素::before、::after、box-shadowを用いて肉球表示する。


<style>
.demo {
position: relative;
padding-left: 50px;
}
.demo:before{
  content:''; 
  height: 8px; 
  width: 8px; 
  display:block;
  border-radius: 50%;
  background: #008ec2;
  box-shadow:10px -8px #008ec2, -2px 13px #008ec2;
    -webkit-box-shadow:10px -8px #008ec2, -2px 13px #008ec2;
  position:absolute; 
  top: 10px; 
  left: 5px;
}
.demo:after{
  content:''; 
  height: 20px; 
  width: 20px; 
  display: block;
  border-radius: 50%;
  background: #008ec2;
  position:absolute; 
  top: 13px; 
  left: 15px;
}
</style>

<h1 class="circle02">こんにちは</h1>

表示結果

こんにちは

と結果として表示される。

解説

.demo に対して擬似要素::before、::afterを使用
<h1 class="demo">こんにちは</h1>を表示する
次に擬似要素::beforeによって左側に青丸を中心に、box-shadowを使い黄丸と赤丸を表示させる
最後に擬似要素::afterによって左側に白丸を表示させる

最後に

わかりやすくするために別々の色を使ったが、実際には同じ色をつかうので肉球に見えるはずだ。今回は使用しなかったがtransformを使えば回転も使える。例えば■（四角）を回転させて◆（ひし形）にもできる。これをつかっていろいろなものを作成してみよう！（これを使えばグラフィックアイコンも作れるよ！）

ぱっと思いついた図形

CSSの疑似要素beforeとafterの簡単な使い方

2017-06-13T22:25:00.001+09:00

beforeとafterを使うとどうなるの？

要素の前後にスタイル要素を追加できるようになる。

記述の仕方

たとえば


h1::before{
  content: 'Hello!';
}
h1::after{
  content: 'World!';
}
</style>

<h1>こんにちは</h1>

とHTMLがあったとする。

動作としては、

<h1>こんにちは</h1>h1タグに対して
h1::beforeを実行。「Hello!」を表示する
h1タグの「こんにちは」を表示する
h1::afterを実行。「World!」を表示する

となる。

表示結果

Hello!こんにちはWorld!

と表示される。

`::before`と`:before`どっちが正しい？

:(コロン)は、２つが正しい？それとも１つが正しい？

１つの場合は、CSS2での記述
２つの場合は、CSS3での記述

ただし、CSS3の対応がされてないブラウザもあるので、今はまだ１つでの記述が良いと思われる。今後は、対応が進めば２つでの記述が一般的となるだろう。

使用例

clearfixの使用

.clearfix::afterにすることによりリストを表示した後にフロートの解除を行う。


ul {
  width:1040px;
  margin:0 auto;
}
ul li {
  float:left;
  width:260px;
}
.clearfix::after{
  content:"";
  clear:both;
  overflow:hidden;
}


  メニュー１

  メニュー２

  メニュー３

  メニュー４

リスト表示に使う（その１）

.clearfix::afterにすることによりリストを表示した後に※印の表示を行う。


.notes li {
  list-style: none;
}
.notes li::before {
content: "※";
padding-right: 5px;
color: red;
}

<ul class="notes">
  <li>注釈文○○○○</li>
  <li>注釈文○○○○</li>
  <li>注釈文○○○○</li>
  <li>注釈文○○○○</li>
</ul>

表示結果

注釈文○○○○
注釈文○○○○
注釈文○○○○
注釈文○○○○

リスト表示に使う（その２）

.clearfix::afterにすることによりリストを表示した後に※印の表示を行う。


.info li {
  list-style: none;
}
li.new:before {
content: "new";
margin-left: 5px;
color: #fff;
background: red;
padding: 1px 3px;
}
li.update::after {
content: "update";
margin-left: 5px;
color: #fff;
background: blue;
padding: 1px 3px;
}
li.lookup::after {
content: "lookup";
margin-left: 5px;
color: #fff;
background: green;
padding: 1px 3px;
}

<ul class="info">
  <li class="new">お知らせ１○○○○</li>
  <li class="update">お知らせ２○○○○</li>
  <li class="lookup">お知らせ３○○○○</li>
</ul>

表示結果

お知らせ１○○○○
お知らせ２○○○○
お知らせ３○○○○

まとめ

こんなことが出来るようになる。さらにグラフィックアイコンやhタグの装飾などいろいろなことにしよう出来る。それはまた今度の機会にでもレクチャーしよう！では、いろいろ工夫して使ってみてよう！

スクリーンショットを簡単にJPEGで保存できるちょっと便利な「FireShot」

2017-06-11T13:13:00.001+09:00

出典元： Capture full web page screenshots in your browser instantly

FireShotについて

Google Chromeのプラグイン。Chromeウェブストアから「FireShot」を検索してインストールする。使い勝手はいたって簡単なので直感で分かるだろう。

使い方レビュー

Chromeの画面右上に「FireShot」のアイコン（四角にSマーク）が表示されているのでクリックをする。４つのキャプチャ方法があるので選択をしキャプチャを行う。

次にキャプチャ方法を選択しキャプチャを行なったら新しい画面が開くので画像として保存、PDFとして保存かを選択する。

デフォルトの保存形式はPNGだが、上のスクリーンショットの保存で「カスタマイズ」からJEPGを選択することもできる。

まとめ

まずスクリーンショットをJEPG、PDFで保存できるのが良い。スクーンショットの範囲も全画面（サイトを上から下までスクロールしたもの）を撮れるのも良い。

ただし、ポップアップしたウィンドやChromeウェブストアのサイトなどスクリーンショットが撮れないものあった。その部分は使い勝手が悪いところである。

macOS標準（shift + command + 4）のスクリーンショット保存もできるがPNG保存固定となる。macOS標準のは保存形式の変更もできるがターミナルからの設定を行う必要があるのでを触るのがちょっとコワいと言う方はオススメだろう。

SublimeTextでショートカットを使ってブラウザを開く「ViewinBrowser」をインストールする

2017-06-10T17:05:00.001+09:00

View in Browserのインストール

1.Packege Controlを開く

Tools > Command Palette...（mac Shift ＋ Command ＋ p/win ctrl + shift + p ）からコマンドパレットを開き「Package Control:Install Package」を選択する。次に「View in browser」を選択しインストールを行う。

2.インストールされたかの確認をする

Perference > Package Settings > View in Browserが表示されていればインストールが完了されている。

3.キーバインドの登録

Perference > Key Bindingを開く。Key Binding Userの中に下記のコード記述を追加する。


[
{ "keys": [ "ctrl+shift+v" ], "command": "view_in_browser" },
{ "keys": [ "ctrl+shift+f" ], "command": "view_in_browser", "args": { "browser": "firefox" } },
{ "keys": [ "ctrl+shift+c" ], "command": "view_in_browser", "args": { "browser": "chrome" } },
{ "keys": [ "ctrl+shift+i" ], "command": "view_in_browser", "args": { "browser": "iexplore" } },
{ "keys": [ "ctrl+shift+s" ], "command": "view_in_browser", "args": { "browser": "safari" } }
]

キーバインドはview-in-browserのGitHubを参考にした。

GitHub - adampresley/sublime-view-in-browser: Open the contents of your current view/tab in a web browser

これで設定があっていれば下記のショートカットでブラウザが開く。

ctrl + shift + v：デフォルト設定ブラウザ
ctrl + shift + f：firefox
ctrl + shift + c：chrome
ctrl + shift + i：iexplore
ctrl + shift + s：safari

トラブルシューティング

ブラウザが開かなかった場合

ブラウザの保存場所が違っている可能性がある。Preference > Package Settings >View in Browser > Settings – Defaultを開き保存場所を確認する。

16〜20行目がmac、25〜29行目がwindowsの保存場所にあたるので、相違があればその部分を修正する。


{
  "posix": {
    "linux": {
      "firefox": "firefox -new-tab",
      "chrome": "google-chrome",
      "chrome64": "google-chrome",
      "chromium": "chromium"
    },
    "linux2": {
      "firefox": "firefox -new-tab",
      "chrome": "google-chrome",
      "chrome64": "google-chrome",
      "chromium": "chromium"
    },
    "darwin": {
      "firefox": "open -a \"/Applications/Firefox.app\"",
      "safari": "open -a \"/Applications/Safari.app\"",
      "chrome": "open -a \"/Applications/Google Chrome.app\"",
      "chrome64": "open -a \"/Applications/Google Chrome.app\"",
      "yandex": "open -a \"/Applications/Yandex.app\""
    }
  },
  "nt": {
    "win32": {
      "firefox": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe -new-tab",
      "iexplore": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
      "chrome": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
      "chrome64": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
      "yandex": "%Local AppData%\\Yandex\\YandexBrowser\\browser.exe"
    }
  },

  "browser": "chrome64"
}

STEP7.構造化データエラー「mainEntityOfPage」フィールドの値は必須ですの修正方法

2017-06-08T18:55:00.001+09:00

「mainEntityOfPage」フィールドの値は必須ですを修正する

「mainEntityOfPage」って何？

構造化データを検索エンジン（Google）に伝える際のマークアップの一つである。「mainEntityOfPage」とは記事の主なるトピック。記事中に複数の内容がある場合にどの記事内容が主たる記事なのかを指定する。

Bloggerで「mainEntityOfPage」の記述方法

SETP.1構造化データエラー「author」フィールドの値は必須ですの修正方法で<div class='post-header'>を作成したならば、その直下にコードを追加する。

なければ・・・

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>の記述さがし、この直下にコードを追加

Bloggerのシンプルテーマでは
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
となっている。

もし上の記述がなければ、<b:includable id='post' var='post'>（記事内）でもど良いであろう。

追加コード


CSS部分
.post-header {
  display:none;
}


<div class='post-header'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting’>
   
  <span itemprop='author'><data:post.author/></span>
   
  <span class='published' itemprop='datePublished'><data:post.timestampISO8601/></span>
   
<span class='updated' itemprop='dateModified'><data:post.lastUpdatedISO8601/></span>
   
  <span itemprop="name"><data:post.author/></span>
   
  <span itemprop='headline'><data:post.title/></span>
   
  <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
    <span itemprop="name"><data:blog.title/></span>
    <span itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
      <span itemprop='url'>ロゴマークのURL</span>
          <meta content='ロゴマークの横サイズ' itemprop='width'/>
          <meta content='ロゴマークの縦サイズ' itemprop='width'/>
      </span>    
  </div>
  <meta expr:itemid='data:post.link ? data:post.link : data:post.url' itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
</div><!-- post-header -->

22行目：
<meta expr:itemid='data:post.link ? data:post.link : data:post.url' itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
を追加する。

STEP6.構造化データエラー「dateModified」フィールドの値は必須ですの修正方法

2017-06-08T18:34:00.001+09:00

「dateModified」フィールドの値は必須ですを修正する

「dateModified」って何？

構造化データを検索エンジン（Google）に伝える際のマークアップの一つである。「dateModified」とは記事の更新日である。

Bloggerで「dateModified」の記述方法

SETP.1構造化データエラー「author」フィールドの値は必須ですの修正方法で<div class='post-header'>を作成したならば、その直下にコードを追加する。

なければ・・・

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>の記述さがし、この直下にコードを追加

Bloggerのシンプルテーマでは
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
となっている。

もし上の記述がなければ、<b:includable id='post' var='post'>（記事内）でもど良いであろう。

追加コード


CSS部分
.post-header {
  display:none;
}


<div class='post-header'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting’>
   
  <span itemprop='author'><data:post.author/></span>
   
  <span class='published' itemprop='datePublished'><data:post.timestampISO8601/></span>
  <span class='updated' itemprop='dateModified'><data:post.lastUpdatedISO8601/></span>
   
  <span itemprop="name"><data:post.author/></span>
   
  <span itemprop='headline'><data:post.title/></span>
   
  <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
    <span itemprop="name"><data:blog.title/></span>
    <span itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
      <span itemprop='url'>ロゴマークのURL</span>
          <meta content='ロゴマークの横サイズ' itemprop='width'/>
          <meta content='ロゴマークの縦サイズ' itemprop='width'/>
      </span>    
  </div>
</div><!-- post-header -->

7行目：
<span class='updated' itemprop='dateModified'><data:post.lastUpdatedISO8601/></span>
を追加する。

今回は、わかりやすくするため投稿日の下に追加する。

STEP5.構造化データエラー「publisher」フィールドの値は必須ですの修正方法

2017-06-08T18:21:00.001+09:00

「publisher」フィールドの値は必須ですを修正する

「publisher」って何？

構造化データを検索エンジン（Google）に伝える際のマークアップの一つである。「publisher」とはブログ運営元の情報である。

Bloggerで「publisher」の記述方法

SETP.1構造化データエラー「author」フィールドの値は必須ですの修正方法で<div class='post-header'>を作成したならば、その直下にコードを追加する。

なければ・・・

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>の記述さがし、この直下にコードを追加

Bloggerのシンプルテーマでは
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
となっている。

もし上の記述がなければ、<b:includable id='post' var='post'>（記事内）でもど良いであろう。

追加コード


CSS部分
.post-header {
  display:none;
}


<div class='post-header'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting’>
   
  <span itemprop='author'><data:post.author/></span>
   
  <span class='published' itemprop='datePublished'><data:post.timestampISO8601/></span>
   
  <span itemprop="name"><data:post.author/></span>
   
  <span itemprop='headline'><data:post.title/></span>
  <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
    <span itemprop="name"><data:blog.title/></span>
    <span itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
      <span itemprop='url'>ロゴマークのURL</span>
          <meta content='ロゴマークの横サイズ' itemprop='width'/>
          <meta content='ロゴマークの縦サイズ' itemprop='width'/>
      </span>    
  </div>
</div><!-- post-header -->

11〜17行目までを追加する。

STEP4.構造化データエラー「headline」フィールドの値は必須ですの修正方法

2017-06-08T16:10:00.001+09:00

「headline」フィールドの値は必須ですを修正する

「headline」って何？

構造化データを検索エンジン（Google）に伝える際のマークアップの一つである。「headline」とは記事のタイトルである。

Bloggerで「headline」の記述方法

SETP.1構造化データエラー「author」フィールドの値は必須ですの修正方法で<div class='post-header'>を作成したならば、その直下にコードを追加する。

なければ・・・

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>の記述さがし、この直下にコードを追加

Bloggerのシンプルテーマでは
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
となっている。

もし上の記述がなければ、<b:includable id='post' var='post'>（記事内）でもど良いであろう。

追加コード


CSS部分
.post-header {
  display:none;
}


<div class='post-header'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting’>
   
  <span itemprop='author'><data:post.author/></span>
   
  <span class='published' itemprop='datePublished'><data:post.timestampISO8601/></span>
   
  <span itemprop="name"><data:post.author/></span>
  <span itemprop='headline'><data:post.title/></span>
</div>

<span itemprop='headline'><data:post.title/></span> を追加する。

STEP3.構造化データエラー「name」フィールドの値は必須ですの修正方法

2017-06-08T16:04:00.001+09:00

「name」フィールドの値は必須ですを修正する

「name」って何？

構造化データを検索エンジン（Google）に伝える際のマークアップの一つである。「name」は調べたがいまいち定義がはっきりせず。今回は、自分の名前を表示することとした。

Bloggerで「name」の記述方法

SETP.1構造化データエラー「author」フィールドの値は必須ですの修正方法で<div class='post-header'>を作成したならば、その直下にコードを追加する。

なければ・・・

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>の記述さがし、この直下にコードを追加

Bloggerのシンプルテーマでは
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
となっている。

もし上の記述がなければ、<b:includable id='post' var='post'>（記事内）でもど良いであろう。

追加コード


CSS部分
.post-header {
  display:none;
}


<div class='post-header'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting’>
   
  <span itemprop='author'><data:post.author/></span>
   
  <span class='published' itemprop='datePublished'><data:post.timestampISO8601/></span>
  <span itemprop="name"><data:post.author/></span>
</div>

<span itemprop="name"><data:post.author/></span> </div> を追加する。

補足説明

うまくいかないので保留（2017/06/08）

STEP2.構造化データエラー「datePublished」フィールドの値は必須ですの修正方法

2017-06-08T15:10:00.001+09:00

「datePublished」フィールドの値は必須ですを修正する

「datePublished」って何？

構造化データを検索エンジン（Google）に伝える際のマークアップの一つである。「datePublished」は記事が最初に公開さた日付である。

Bloggerで「datePublished」の記述方法

SETP.1構造化データエラー「author」フィールドの値は必須ですの修正方法で<div class='post-header'>を作成したならば、その直下にコードを追加する。

なければ・・・

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>の記述さがし、この直下にコードを追加

Bloggerのシンプルテーマでは
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
となっている。

もし上の記述がなければ、<b:includable id='post' var='post'>（記事内）でもど良いであろう。

追加コード


CSS部分
.post-header {
  display:none;
}


<div class='post-header'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting’>
   
  <span itemprop='author'><data:post.author/></span>
  <span class='published' itemprop='datePublished'><data:post.timestampISO8601/></span>
</div>

<span class='published' itemprop='datePublished'><data:post.timestampISO8601/></span> で情報を追加する。

補足説明

<data:post.timestamp>で投稿日を呼び出す。
「ISO8601」形式で指定する。

STEP1.構造化データエラー「author」フィールドの値は必須ですの修正方法

2017-06-08T14:40:00.003+09:00

「author」フィールドの値は必須ですを修正する

「author」って何？

構造化データを検索エンジン（Google）に伝える際のマークアップの一つである。「author」は簡単に言うと記事の著者名である。

Bloggerで「author」の記述方法

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>の記述があれば、この直下にコードを追加

Bloggerのシンプルテーマでは
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
となっている。

もし上の記述がなければ、<b:includable id='post' var='post'>（記事内）でもど良いであろう。

追加コード


CSS部分
.post-header {
  display:none;
}


<div class='post-header'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting’>
  <span itemprop='author'><data:post.author/></span>
</div>

<div class='post-header'>は任意のclass名で囲めば良い。その他の情報もここへ記述すれば良い
記事内に表示されるためdisplay:none;で非表示にする。
<span itemprop='author'><data:post.author/></span> で情報を追加する。

STEP0.Bloggerでバックアップの取り方

2017-06-08T14:40:00.002+09:00

まず最初に必ずバックアップを取ること

直接コードを修正する可能性のある場合、間違った場所を修正すると表示されなくなったり、意図しない表示になったりする危険がある。そのため必ずバックアップを取ておこう！。

バックアップ方法

Bloggerを開く

「テーマ」画面右上にある「バックアップ復元」

『テーマをダウンロード』

復元方法

Bloggerを開く

「テーマ」画面右上にある「バックアップ復元」

「ファイルを選択」「アップロード」

【JavaScript初級入門】文字列操作第3回「入力した文字列でHTMLを作成する」

2017-06-06T13:46:00.001+09:00

STEP3.入力した文字列を使いHTML文を作成する

ここでは、

文字列（text_a）をタイトル
文字列（text_b）を本文

ととしてHTMLを記述したものテキストボックス（text_result）に表示する。

文字列結合用のJavaScript

<script language="JavaScript">

function outoput_exe1(){

  var x = null;

  x ="<html>\n" +"<head>\n"
      + "\t<title>" + document.form_text.text_a.value +"</title>\n"
      + "</head>\n" + "<body>\n"
      + "\t<p>" + document.form_text.text_b.value + "</p>\n"
      + "</body>\n" + "</html>\n";

  document.form_text.text_result.value = x;
}
</script>

テスト動作

入力と出力用のJavaScript

目次に戻る関数宣言function 関数名（）って何？はコチラ

文字列aとbを結合し変数ｘに代入する

7行目：x ="<html>\n" +"<head>\n"
8行目：+ "\t<title>" + document.form_text.text_a.value +"</title>\n"
9行目：+ "</head>\n" + "<body>\n"
10行目：+ "\t<p>" + document.form_text.text_b.value + "</p>\n"
11行目：+ "</body>\n" + "</html>\n";

point 1
7～11行目は、2行で1文（１ステートメント）です。分かりやすくするために複数行で記述している。
point 2
文字列は「”（ダブルコーテーション）」又は「’（シングルコーテーション）」で括る。
point 3
改行「\n」、タブ「\t」にはエスケープシーケンスを使う。

変数ｘてテキストボックスtext_resultにHTMLを出力する

document.form_text.text_result.value = x;

JavaScript講座（初級入門）目次へ

【JavaScript初級入門】文字列操作第2回「文字列と文字列の結合」

2017-06-03T22:16:00.001+09:00

STEP2.入力した文字を結合して出力する

ここでは、入力した文字列（text_a）と文字列（text_b）を結合してテキストボックス（text_result）に表示する

文字列結合用のJavaScript


<script language="JavaScript">

function outoput_exe1(){

  var x = null;

  x = document.form_text.text_a.value
      + document.form_text.text_b.value;
  document.form_text.text_result.value = x;
}
</script>

テスト動作

入力と出力用のJavaScript

関数名：outoput_exe1() { }のコード記述

1行目：function outoput_exe1(){
10行目：}

point！
関数宣言function　関数名（）で記述する。
今回は、ボタン「テキストボックスに表示」）をonClick（クリック）時に、関数名：outoput_exe1()を開始し｛｝内のスクリプトを実行するという意味である。

初期値を設定するため変数ｘに"null"を代入

5行目var x = null;

文字列aとbを結合し変数ｘに代入する

7行目：x = document.form_text.text_a.value
8行目：+ document.form_text.text_b.value;

point！
7、8行目は、2行で1文（１ステートメント）です。
今回は、分かりやすくするために2行で記述しています。
JavaScriptは基本的にステートメントの終わりに「；（セミコロン）」を付けなくても良いが誤動作を防ぐために「；（セミコロン）」をつけよう！

変数ｘに代入された結合文字列（文字列a+b）をテキストボックス<textarea name="text_result" >に出力する

document.form_text.text_result.value = x;

JavaScript講座（初級入門）目次へ

【JavaScript初級入門】はじめてのJavaScript「Hello world」

2017-06-03T16:04:00.001+09:00

STEP0.JavaScriptの記述の仕方

ここでは、JavaScriptの記述方法を勉強する。

JavaScriptをどこに記述するのか？

<body>～</body>タグの中であればどこでもok。


<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    ・
    ・
  <script language="JavaScript">

    ここにスクリプトを記述
    記述例：
      function outoput_exe(){
        x = document.form_text.text_a.value
        document.form_text.text_result.value = x
      }

  </script>
    ・
    ・
  </body>
</html>

JavaScriptを使って文字列を表示する

上の例をもとに、文字列「Hello world」を表示してみる


<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<noscript>Javascript対応のブラウザが必要です</noscript>
<-- JavaScript非対応ブラウザのためのコメントアウト

  <script language="JavaScript">

    document.write("Hello world");

  </script>

-->

  </body>
</html>

詳細説明

Javascript非対応のブラウザ対応

<noscript>Javascript対応のブラウザが必要です</noscript>

<-- JavaScript非対応ブラウザのためのコメントアウト

-->

Javascript開始の宣言

<script>

</script>

language="JavaScript"

Javascript命令部分

document.write("Hello world");

JavaScript講座（初級入門）目次へ

【JavaScript初級入門】第１回文字列操作「入力した文字列を出力する」

2017-06-02T18:51:00.001+09:00

STEP1.入力した文字を出力する

ここでは、入力した文字列（text_a）をテキストボックス（text_result）に表示する

入力と出力用のJavaScript


<script language="JavaScript">
function outoput_exe(){
  x = document.form_text.text_a.value
  document.form_text.text_result.value = x
}
</script>

テスト動作

JavaScript講座（初級入門）のTOPページへ戻る

bloggerのページナビでページネーション（Numbered Page Navigation Widget）を追加する

2017-06-01T12:14:00.001+09:00

はじめに

参考サイト：How to Add Numbered Page Navigation Widget for Blogger - Helplogger

こちらのサイトを参考に組み込んでいきます。

１．CSSを選択しコードを追加する

参考サイトよりいくつかあるデザインを選ぶ

出典元： How to Add Numbered Page Navigation Widget for Blogger - Helplogger

blogger編集画面より「テーマ」「HTMLの編集」を開きコードを追加する。

注意！！すでに<div class="blog-pager" id="blog-pager">の記述やblog-pagerのclass名、ID名を使用してる場合は、気を付けてください。

2.スクリプトを追加する

参考サイトの「 Step 5. Add the following script just above it: 」のコードを追加する。

追加する場所は、</body>の上に追加すると良いだろう。

3.スクリプト部分の設定について

スクリプトの中に設定があるので必要に応じて変更する。

          ・
          ・
    var perPage=3;
    var numPages=3;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
          ・
          ・

perPage:各ページの投稿数と同じにする。
numPages：ページネーションを表示したときのページ数
firstText、lastText、prevText、nextText：表示される文字列

表示テストを行い、正常に表示されてばOK！

4.最後に

組み込んだあとに色をサイトにあわせて変更し無事に表示された。しかし、カテコリ選択から表示されると表示されない不具合があるようだ。

CSSのbeforやafter要素のcontentプロパティでUnicodeを使って文字化けを回避する

2017-05-31T17:31:00.001+09:00

なぜ文字化けが起きるのか？

CSSを外部ファイルで定義していたり、文字コードがUTF-8等でなかった場合に起こる。要するに、今、表示しているページの文字コードと外部ファイルから読み込んだ文字コードが一致しない（解釈できない）ために文字化けが起こる。

回避方法

ブラウザの文字コードに依存しないように表示をおこなう

下記のようなコードがあった場合


.example:before {
  content: "●";
}

このままだと文字化けが起こる可能性がある。そこで


.example:before {
  content: "\25CF";
}

とUnicode（ユニコード）に変換してやれば良い。

Unicode（ユニコード）への変換

Unicode（ユニコード）に変換は、\+Unicode（ユニコード）という形になる。（バックスラッシュ部分は、半角￥マークでも可）

Unicode（ユニコード）変換ツール

参考サイト：NJ-CLUCKER様

bootstrapでアイコンフォント（Glyphicons）をCSSのbeforeなどに表示させる方法

2017-05-31T15:01:00.001+09:00

html中のアイコンフォントを表示させるコード

bootstrapでアイコンフォントがあるが、html中の記述は、<span class="glyphicon glyphicon-map-marker"></span>となる。

アイコンフォントをCSSで記述させるコード

.sample:before {
    font-family: 'Glyphicons Halflings';
    content: "\e062";
}

上記のように記述すれば良い。

補足：FontAwesomeの場合

font-family: 'Glyphicons Halflings';部分をfont-family: FontAwesome;に変更すれば良い。

０；ゼロからはじめる！

Google Chromeでメモリ消費量を減らす方法

使用していないタブを解放する

こちらは、メモリを解放するかどうかは不明

firebaseでwebフォントを設置する方法

Firebase経由のホスティング

Firebaseにwebフォントを設置すると？

なぜ、Firebase内設置のwebフォントが読み込めないのか？

FirebaseでAccess-Control-Allow-Originを設定する方法

参照

ツイッター（twitter）のタイムライン表示をデザインカスタマイズして埋め込むやり方！

ツイッター（twitter）タイムラインの埋め込みとデザインのやり方

1.タイムライン埋め込みのスクリプトをつくる

大きさの調整方法

境界線のカラーを変更する。

リンクのカラーを変更する

テーマの変更

レイアウトのカスタマイズ

twitterカスタマイズ一覧

javascript（tablesorter）を使ってテーブルにソート機能をつけるデモ

tablesorter

組込みの参考

参考URL

テーブルソートのサンプル

Bloogerで1記事複数ラベルに対して記事一覧を表示させる方法

はじめに

Bloggerで関連記事を表示する場合の問題点

どのような解決作があるのか？

どのように表示するか？

記事一覧のイメージ表示

さいごに

SEO対策「SyntaxHighlighter」を使用したページの表示速度改善をする方法

はじめに

SyntaxHighlighterのautoloaderについて

SyntaxHighlighter読込短縮フローチャート

SyntaxHighlighter読込短縮javascript

さいごに

おすすめページ速度チェックサイト

CSSの疑似要素beforeとafterで肉球をつくる

はじめに

作るにあたっての考え方

1.１つ表示する方法

表示結果

こんにちは

解説

2.box-shadowを使い２つ表示する

表示結果

こんにちは

解説

3.box-shadowと擬似要素::before、::afterを使い４つ表示する

表示結果

こんにちは

解説

注目！！

4.お待ちかねの肉球の表示

表示結果

こんにちは

解説

最後に

CSSの疑似要素beforeとafterの簡単な使い方

beforeとafterを使うとどうなるの？

記述の仕方

表示結果

::beforeと:beforeどっちが正しい？

使用例

clearfixの使用

リスト表示に使う（その１）

表示結果

リスト表示に使う（その２）

表示結果

まとめ

スクリーンショットを簡単にJPEGで保存できるちょっと便利な「FireShot」

FireShotについて

使い方レビュー

まとめ

SublimeTextでショートカットを使ってブラウザを開く「ViewinBrowser」をインストールする

View in Browserのインストール

1.Packege Controlを開く

2.インストールされたかの確認をする

3.キーバインドの登録

2.`box-shadow`を使い２つ表示する

3.`box-shadow`と擬似要素`::before、::after`を使い４つ表示する

`::before`と`:before`どっちが正しい？