スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/7-eccef9e6

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

こんな良い物が・・・

先日私もブログのカスタマイズの手順を書いていたら
HTMLのコードをブログで表示するのに、ブログはHTMLのコドーだと思い表示してくれないし・・・
どうやって、これが表示される文字とブログに認識させたら良いのだろうか???と
考えて、あると♪さんのブログに来て、ブログの文字として表示されているソースコードをセレクトして
マウスの右ボタンを押して”選択したソースを表示”からソースをみて・・・
この”CODE"ってコマンドが表示してくれんのか?って・・・
こんな良い物あったんですね。今度からこれ使います。
ありがとうございます。
  • 2014-11-24 16:47
  • girigiri26さん@管理人
  • 編集

Re: こんな良い物が・・・

> girigiri26さん

ソースコードをブログで表示したい場合、これがあると便利ですよ♪
あと配色などもCSSを編集する事で自由に出来るので
ブログのデザインに合わせて変える事も可能です♪d(≧∀≦)b
  • 2014-11-24 19:20
  • あると♪さん@管理人
  • 編集

No title

一週間前にgirigiri26さんも同じこと考えてたんだって笑ってしまいました(^o^)
記事内容に頭がついて行けず。。。毎日1回ずつ読んだら意味がわかってくるかも(-。-; 明日もう一度読みに来ます(^o^)
  • 2014-12-03 18:32
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

確かに同じようなタイミングですねwwd(* ̄∇ ̄)

またこの記事は結構内容が長いので難しく感じるかもですが...
やってみれば案外いけると思いますw きっとww
  • 2014-12-03 19:25
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

ソースコードを読みやすく表示する方法

 

2014.09.09

「SyntaxHighlighter」(シンタックス ハイライター) HTMLやCSSなど、色んな言語のソースコードを、サイト上で読みやすく表示してくれる「SyntaxHighlighter」(シンタックス ハイライター)というツールを見つけたので導入してみた♪
「SyntaxHighlighter」は、対応言語がとても多く、HTML・XHTML・XML、CSS、JavaScriptの他にもPHP、C++、C#、Java、Visual Basic、Perl、Ruby、Python、Bash、PowerShell、SQL等とにかく色んなソースの表示に対応しています。



「SyntaxHighlighter」導入手順


  1. 1.ファイルをダウンロードする
  2. 2.ファイルを選んでアップロード
  3. 3.ファイルを読み込む為の記述
  4. 4.pre要素を使ってソースを表示
  5. 5.オプション機能の使い方
  6. 6.CSSのサンプルと編集方法


「syntaxhighlighter_3.0.83.zip」をダウンロード

1.ファイルをダウンロードする


「SyntaxHighlighter」のダウンロードページは こちら
http://alexgorbatchev.com/SyntaxHighlighter/download/


ページ内の“Click here to download”の部分をクリックすると
「syntaxhighlighter_3.0.83.zip」がダウンロードされるのでそれを展開(解凍)する。(3.0.83の部分は現在のバージョン)

ツール自体はJavaScriptとCSSで構成されており、下記のように行番号と文字や背景に装飾を付けて、
ソースを見やすく表示出来る。またソース部分をダブルクリックするとソースだけを全選択してる状態になるのでコピペがやり易い。(デザインは8種類用意されてて、自分でも自由に編集可能)

<table width="300" height="80" cellspacing="1" cellpadding="5" bgcolor="#ccc">
<caption>表のタイトル</caption> 
<tr bgcolor="#ffffff">
<td>左のセルの内容</td> 
<td>真ん中のセルの内容</td>
<td>右のセルの内容</td> 
</tr>
</table>





2.ファイルを選んでアップロード


ダウンロードしたファイルを展開(解凍)すると8つのファイルがあり、その中で使うのは「scripts」「styles」の2つのフォルダ

通常は、この2つのフォルダをそのままサイトにアップロードでもOK

ですが、今回はFC2ブログへのアップロードなので、このフォルダの中から必要なファイルだけを選んでアップロードします。 まず「scripts」フォルダには対応言語ごとにjsファイルがあるので、その中から自分がソースの表示で使いたい言語のファイルを選びアップロードします。※「shCore.js」は必須です。

例えば、HTMLとCSSとJavaScriptのソース表示に使う場合は必須の「shCore.js」の他に「shBrushXml.js」、「shBrushCss.js」、「shBrushJScript.js」の合計4つをアップロード。

※詳しくは下記の「対応言語一覧」を参照

次に「styles」フォルダの中から使用するテーマに合わせてcssファイルを選び、アップロードします。

■cssファイルの “shTheme○○○” と “shCore○○○” の違い
「shCore.css」は構造部分(各箇所の位置や大きさ、余白等)を指定してるファイル。(装飾は無し)
「shTheme○○○.css」はテーマ別の装飾を指定してるファイルで、コアになる「shCore.css」と組み合わせて使う。(この場合「shCore.css」+「shTheme○○○.css」の2つを選び、両方をアップロード)
また「shCore○○○.css」は上記の「shCore.css」とテーマ別の「shTheme○○○.css」が一体化したファイルなので、こちらを使う場合は1つのファイルをアップロードでOK。

例えば、「shCore.css」+「shThemeDefault.css」 と 「shCoreDefault.css」は同じ見た目です。
(cssファイルは自身で編集してカスタマイズする事も可能)

■対応言語一覧
対応言語ファイル名
AppleScriptshBrushAppleScript.js
ActionScript3shBrushAS3.js
Bash/shellshBrushBash.js
ColdFusionshBrushColdFusion.js
C++shBrushCpp.js
C#shBrushCSharp.js
CSSshBrushCss.js
DelphishBrushDelphi.js
DiffshBrushDiff.js
ErlangshBrushErlang.js
GroovyshBrushGroovy.js
JavashBrushJava.js
JavaFXshBrushJavaFX.js
対応言語ファイル名
JavaScriptshBrushJScript.js
PerlshBrushPerl.js
PHPshBrushPhp.js
Plain TextshBrushPlain.js
PowerShellshBrushPowerShell.js
PythonshBrushPython.js
RubyshBrushRuby.js
Sass(SCSS)shBrushSass.js
ScalashBrushScala.js
SQLshBrushSql.js
Visual BasicshBrushVb.js
XML・HTML
XHTML・XSLT
shBrushXml.js





3.ファイルを読み込む為の記述


必要なファイルをアップロードしたら、次は「SyntaxHighlighter」を構成するファイルを読み込むよう
HTMLのhead要素内(<head> ~ </head>の間)に以下の記述をする。

1.コアスクリプトファイル「shCore.js」を読み込む記述
2.表示したい言語に応じたjsファイル(shBrush○○○.js)を読み込む記述
3.表示に使いたいテーマのcssファイル(sh○○○.css)を読み込む記述
4.スクリプトを開始する記述

■以下は例としてHTML・CSS・JavaScriptのソース表示を行う場合です。

<head>
<script src="http://~/shCore.js"></script> <!-- コアスクリプト -->
<script src="http://~/shBrushXml.js"></script> <!-- HTML用 -->
<script src="http://~/shBrushCss.js"></script> <!-- CSS用 -->
<script src="http://~/shBrushJScript.js"></script> <!-- JavaScript用 -->
<link rel="stylesheet" href="http://~/sh○○○.css"> <!-- 使用するテーマのCSS -->
<script>
SyntaxHighlighter.config.bloggerMode = true; <!-- ブログの自動改行用 -->
SyntaxHighlighter.all(); <!-- スクリプトを開始する記述 -->
</script>
</head>
※http://~の部分を省略してます。(FC2ブログの場合は絶対パスで記述)
※FC2ブログで自動改行を使う場合、「SyntaxHighlighter.config.bloggerMode = true;」と記述しないとうまく表示出来ないみたいです。しかし、この設定をした場合ソース表示で<br/>タグが使えなくなるので、<br/>タグを表示したい場合はこの設定を外しておく。(上記は例として記述してます)


■「SyntaxHighlighter」のオートローダー(shAutoloader.js)を使う場合
Autoloaderファイルを利用すると、ソースコード別のjsファイルを必要となった時点で読み込む為
余計な読み込みが不要になる分、動作が軽くなるようです。(多くの言語に対応させたい場合に合理的)

その場合のhead要素内への記述例

1.コアスクリプトファイル「shCore.js」を読み込む記述
2.オートローダーファイル「shAutoloader.js」を読み込む記述
3.表示に使いたいテーマのcssファイル(sh○○○.css)を読み込む記述

<head>
<script src="http://~/shCore.js"></script> <!-- コアスクリプト -->
<script src="http://~/shAutoloader.js"></script> <!-- オートローダー -->
<link rel="stylesheet" href="http://~/sh○○○.css"> <!-- 使用するテーマのCSS -->
</head>
※「shAutoloader.js」もアップロードしておく必要がある。

次に、表示したいページのbody要素(<body>)の最後に必要なスクリプトを記述する
Autoloaderは、使用する箇所が全て読み込まれないと言語を判別できないため<body>の一番最後に記述

<script>
SyntaxHighlighter.autoloader
(
"applescript            http://~/shBrushAppleScript.js",
"actionscript3 as3      http://~/shBrushAS3.js",
"bash shell             http://~/shBrushBash.js",
"coldfusion cf          http://~/shBrushColdFusion.js",
"cpp c                  http://~/shBrushCpp.js",
"c# c-sharp csharp      http://~/shBrushCSharp.js",
"css                    http://~/shBrushCss.js",
"delphi pascal          http://~/shBrushDelphi.js",
"diff patch pas         http://~/shBrushDiff.js",
"erl erlang             http://~/shBrushErlang.js",
"groovy                 http://~/shBrushGroovy.js",
"java                   http://~/shBrushJava.js",
"jfx javafx             http://~/shBrushJavaFX.js",
"js jscript javascript  http://~/shBrushJScript.js",
"perl pl                http://~/shBrushPerl.js",
"php                    http://~/shBrushPhp.js",
"text plain             http://~/shBrushPlain.js",
"py python              http://~/shBrushPython.js",
"ruby rails ror rb      http://~/shBrushRuby.js",
"sass scss              http://~/shBrushSass.js",
"scala                  http://~/shBrushScala.js",
"sql                    http://~/shBrushSql.js",
"vb vbnet               http://~/shBrushVb.js",
"xml xhtml xslt html    http://~/shBrushXml.js"
);
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
</body>
※さっきhead要素に記述してた「SyntaxHighlighter.all();」を今度はbody要素に記述する。
※「SyntaxHighlighter.defaults['toolbar'] = false;」はコード右上に出る「?」を非表示にしてます。





4.pre要素を使ってソースを表示


「SyntaxHighlighter」を使ってソースを表示するには、以下のようにpre要素を使ってclass属性で
「class="brush: (ブラシ名);"」と記述します。(下記のブラシ名一覧を参照)

例えばHTMLの場合、下記のように指定します。

<pre class="brush: html;" title="任意でタイトルを入れます">
 &lt;div id="header"&gt;
  表示したいHTMLソース
 &lt;/div&gt;
</pre>
※pre要素のclass属性値に「brush: html」と記述し、ソース中で使われる「<」記号や「>」記号は、
それぞれ「&lt;」・「&gt;」と記述する。

上記のソースをコピペして張り付けると、↓の表示になります。

 <div id="header">
  表示したいHTMLソース
 </div>


■ブラシ名一覧(複数ある物は「,」で区切ってあるので、どれか1つを選びます。)
対応言語ブラシ名ファイル名
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js





5.オプション機能の使い方



5-1.タイトルを付ける


ソースコードを表示する<pre>要素にタイトルを付けて、分かり易く出来ます。
title="タイトル名"

<pre class="brush: html;" title="タイトルを付けるとここに表示されます">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>


5-2.ブログの自動改行機能使用時


FC2ブログで自動改行を使う場合、head要素に「SyntaxHighlighter.config.bloggerMode = true;」と
記述しないとうまく表示出来ないみたいです。しかし、この設定をした場合ソース表示で<br/>タグが使えなくなるので、<br/>タグを表示したい場合はこの設定を外しておく。
(オートローダーを使う場合はbody要素に記述する)

<script>
SyntaxHighlighter.config.bloggerMode = true; <!-- ブログの自動改行用 -->
SyntaxHighlighter.all(); <!-- スクリプトを開始する記述 -->
</script>
※デフォルトでは「SyntaxHighlighter.config.bloggerMode = false;」


5-3.ソース内のリンクを解除する


ソース内にURLを記述した場合、デフォルトだと自動でリンクが貼られますが、
このリンクを解除する場合は「auto-links:false」を付け加えます。(デフォルトは「true」)

<pre class="brush: html;">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

<pre class="brush: html auto-links:false;">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

SyntaxHighlighter.defaults['auto-links'] = false;


5-4.class属性を個別に設定して、特定の<pre>要素だけ装飾を変更


ページ全体に適用してるCSSのテーマとは別に、個別に<pre>要素の装飾を変更する事が可能

<style>
.pre-alter {
  background-color: #F0FFF0 !important;
  border: 2px #ada solid;
}
.pre-alter .line.alt1 {
  background-color: #F7FFF7 !important;
}
.pre-alter .line.alt2 {
  background-color: #fff !important;
}
.pre-alter .line.highlighted.alt1, 
.pre-alter .line.highlighted.alt2 {
  background-color: #cfc !important;
}
.pre-alter .string, .pre-alter .string a {
  color: #333399 !important;
}
.pre-alter .gutter  {
  color: #666 !important;
}
.pre-alter .gutter .line { 
  border-right: 2px solid #9a9 !important;
}
.pre-alter .gutter .line.highlighted { 
  background-color: #393 !important;
  color: white !important;
  font-weight:bold !important;
}
</style>

<pre class="brush: html; class-name: 'pre-alter'"> 
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre> 
※上記では新たに「pre-alter」と言うクラス名を作り、styleで指定した内容を個別に適用してます。
このstyleの内容をここでは、HTML内に直接<style> ~ </style>で囲って記述してますが、
通常は、すでに読み込んである「SyntaxHighlighter」の「sh○○○.css」に書き足すか、
新たにcssファイルを作って読み込ませても良い。但し、CSSは後に読み込まれた方が適用されるので
新たに追加したcssファイルは、head要素内で「sh○○○.css」の後に記述する。

<head>
<script src="http://~/shCore.js"></script> <!-- コアスクリプト -->
<script src="http://~/shBrushXml.js"></script> <!-- HTML用 -->
<script src="http://~/shBrushCss.js"></script> <!-- CSS用 -->
<script src="http://~/shBrushJScript.js"></script> <!-- JavaScript用 -->
<link rel="stylesheet" href="http://~/sh○○○.css"> <!--使用するテーマのCSS-->
<link rel="stylesheet" href="http://~/○○○.css"> <!--追加したオリジナルのCSS-->
<script>
SyntaxHighlighter.all(); <!-- スクリプトを開始する記述 -->
</script>
</head>


5-5.ソースコードを折りたたみ、クリックで開くようにする


初期状態ではソースコードが折りたたんであり、クリックすると開いてソースコードが表示される。
デフォルトは「false」で、「true」に設定すると折りたたみます。

↓こんな感じです。

<pre class="brush: html collapse:true;">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

SyntaxHighlighter.defaults['collapse'] = true;


5-6.開始行の番号を変更する


ソースコードを表示した際の開始行の番号を任意の数字に変更出来る。

<pre class="brush: html first-line:77;">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

SyntaxHighlighter.defaults['first-line'] = 77;


5-7.行番号を表示しない


行番号の表示・非表示を切り替える。デフォルトは「true」で、「false」で非表示になります。

<pre class="brush: html gutter:false;">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

SyntaxHighlighter.defaults['gutter'] = false;


5-8.特定の行をハイライトして強調


特定の行の色を変更して、目立つように強調出来ます。
highlight:[1, 2, 3]のように配列で指定し、1行だけ指定する時はその行番号を指定する。

<pre class="brush:html highlight:[6,7,9]" title="6行目、7行目、9行目をハイライト">
<head>
<script src="http://~/shCore.js"></script> <!-- コアスクリプト -->
<script src="http://~/shBrushXml.js"></script> <!-- HTML用 -->
<script src="http://~/shBrushCss.js"></script> <!-- CSS用 -->
<script src="http://~/shBrushJScript.js"></script> <!-- JavaScript用 -->
<link rel="stylesheet" href="http://~/sh○○○.css"> <!--使用するテーマのCSS-->
<link rel="stylesheet" href="http://~/○○○.css"> <!--追加したオリジナルのCSS-->
<script>
SyntaxHighlighter.all(); <!-- スクリプトを開始する記述 -->
</script>
</head>
</pre>

SyntaxHighlighter.defaults['highlight'] = [1,2,3];


5-9.他言語とHTMLが混在してる時に見やすくする


他言語とHTMLが混在するソースコードを表示する際に、両方を色分けをして見やすく出来る。
※利用するには事前に「shBrushXml.js」を読み込ませる必要があります。
デフォルトは「false」で、「true」に設定すると両方の言語が色分けされます。

下記は、JavaScriptとHTMLの例

<pre class="brush:js html-script:true">
<script> /* JavaScriptのソース */
function ShowNowYear() {
var now = new Date();
var year = now.getFullYear();
document.write(year);
}
</script>

<div class="header"> <!-- HTMLのソース -->
<span>
<p align="left">JavaScriptとHTMLのソースが混在</p>
</span>
</div>
<pre>

<pre class="brush:js">
<script> /* JavaScriptのソース */
function ShowNowYear() {
var now = new Date();
var year = now.getFullYear();
document.write(year);
}
</script>

<div class="header"> <!-- HTMLのソース -->
<span>
<p align="left">JavaScriptとHTMLのソースが混在</p>
</span>
</div>
<pre>
※ソースコードが少ないので変化が微妙ですが、こっちはHTML部分に色が付いて無いです。

SyntaxHighlighter.defaults['html-script'] = true;


5-10.タブサイズを変更、修正する


タブで空くスペースの間隔を指定出来ます。デフォルトの初期値は「tab-size: 4」
「tab-size: 4」=タブ1つ分のスペースで半角スペース4つ分になります。

<pre class="brush: html; tab-size: 4" title="「tab-size: 4(デフォルト)」">
<table>
	<tr>
		<td>あああ</td>
		<td>いいい</td>
	</tr>
</table>
</pre>

<pre class="brush: html; tab-size: 8" title="「tab-size: 8」">
<table>
	<tr>
		<td>あああ</td>
		<td>いいい</td>
	</tr>
</table>
</pre>

SyntaxHighlighter.defaults['tab-size'] = 4;


5-11.ツールバーの表示・非表示


ツールバーとは<pre>の右上に表示される小さな「?」の部分です。
初期値は「true」で表示となり、非表示にする場合は「false」にします。

<pre class="brush: html; toolbar:false">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>
※このブログではツールバーの部分を背景と同色にして見えないようにしてますが、表示はしてますのでソースコードが表示されてる右上にマウスを置くと分かります。(このサンプルでは非表示にしてます)

SyntaxHighlighter.defaults['toolbar'] = false;





6.CSSのサンプルと編集方法


以下はテーマ別CSSのサンプルです。
「shCore○○○.css」もしくは、「shTheme○○○.css」の○○○の部分がテーマ名

「Default」「Default」テーマのサンプル 「Django」「Django」テーマのサンプル 「Eclipse」「Eclipse」テーマのサンプル 「Emacs」「Emacs」テーマのサンプル
「FadeToGrey」「FadeToGrey」テーマのサンプル 「MDUltra」「MDUltra」テーマのサンプル 「Midnight」「Midnight」テーマのサンプル 「RDark」「RDark」テーマのサンプル


■CSSの編集について
オリジナルのデザインにする為にCSSを編集する場合は、まずベースとするテーマを決めて
そのテーマのcssファイルをコピーし、リネームすると楽です。
また、配色のみ変更するなら「shCore.css」+「shTheme○○○.css」の組み合わせで、
「shTheme○○○.css」のファイルを修正すると変更箇所が分かり易い。
構造的な部分も編集するなら、一体化してる「shCore○○○.css」のファイルを編集する。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-09-09 | プラグイン | コメント(4) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/7-eccef9e6

「ソースコードを読みやすく表示する方法」へのトラックバック

- TrackBack -


「ソースコードを読みやすく表示する方法」へのコメント

- Comment -

こんな良い物が・・・

先日私もブログのカスタマイズの手順を書いていたら
HTMLのコードをブログで表示するのに、ブログはHTMLのコドーだと思い表示してくれないし・・・
どうやって、これが表示される文字とブログに認識させたら良いのだろうか???と
考えて、あると♪さんのブログに来て、ブログの文字として表示されているソースコードをセレクトして
マウスの右ボタンを押して”選択したソースを表示”からソースをみて・・・
この”CODE"ってコマンドが表示してくれんのか?って・・・
こんな良い物あったんですね。今度からこれ使います。
ありがとうございます。
  • 2014-11-24 16:47
  • girigiri26さん@管理人
  • 編集

Re: こんな良い物が・・・

> girigiri26さん

ソースコードをブログで表示したい場合、これがあると便利ですよ♪
あと配色などもCSSを編集する事で自由に出来るので
ブログのデザインに合わせて変える事も可能です♪d(≧∀≦)b
  • 2014-11-24 19:20
  • あると♪さん@管理人
  • 編集

No title

一週間前にgirigiri26さんも同じこと考えてたんだって笑ってしまいました(^o^)
記事内容に頭がついて行けず。。。毎日1回ずつ読んだら意味がわかってくるかも(-。-; 明日もう一度読みに来ます(^o^)
  • 2014-12-03 18:32
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

確かに同じようなタイミングですねwwd(* ̄∇ ̄)

またこの記事は結構内容が長いので難しく感じるかもですが...
やってみれば案外いけると思いますw きっとww
  • 2014-12-03 19:25
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。