INTEREST

画像やテキストを要素単位でランダムに表示

 

2014.12.09

画像やテキストを要素単位でランダムに表示 テキストだけ、画像だけ、その両方でもランダム表示

またまた頂いたお題での記事ですｗ(￣^￣)ゞ
今回は表示する画像をランダムで変更すると言う内容だったのですが、それならいっその事「テキストだけ」「画像だけ」「テキスト+画像」どのパターンでも対応出来るよう、要素単位でランダム表示出来ると便利じゃないかな？と思って試してみました♪
ランダムで毎回違う内容が表示されると「おっ！何か変わってる！」って感じで新鮮ですよね♪(￣ε￣〃)ｂ


色んなパターンのランダム表示


  1. 1.重複しないランダム表示
  2. 2.ランダムに表示するjQueryのソース
  3. 3.画像をランダムに表示
  4. 4.テキストをランダムに表示
  5. 5.画像＋テキストをランダムに表示
  6. 6.この記事へトラックバックする
  7. 7.この記事へコメントを投稿する



1.重複しないランダム表示


例えば10種類の画像をランダムに表示するとして “1つずつ表示する” なら単にランダムで表示すれば良いのですが、一度に “3つずつ表示する” など複数になると単にランダムで表示する仕組みだと内容が重複してしまう可能性が出て来ちゃいます... （；＞＜）

せっかくランダム表示にしてるのに、同じ内容が被ってしまうと残念な感じになっちゃいますよね？...ｗ

またランダムに表示したい内容が「画像だけの場合」「テキストだけの場合」「画像＋テキストの場合」など複雑な内容になればなるほど難しくなっちゃいますが、今回ご紹介する「jQuery」の仕組みならシンプルに「画像もしくはテキストの１つをランダムに表示する」事から、画像とテキストの両方を含んだ「複数の要素を重複せずランダムに表示する」事まで対応出来るのですごく便利だと思います♪(≧∇≦)b

▼こんな感じです♪（画像のみをランダムに表示してるサンプルページ）
「画像をランダムに表示する 」

※画像を１つだけランダムに表示するなら、もう少し簡単なスクリプトでも可能ですが「jQuery」の記述を１つ追加する事で幅広く対応出来るのでサンプルではランダムに１つ表示と複数表示をしてます。

またテキストも組み合わせたり、もちろんそれぞれにリンクを付けることも可能なので工夫次第で色んなことが出来ると思います♪(￣ε￣〃)ｂ


と言う事で今回は、この「jQuery」を使った重複しないランダム表示で「画像だけを表示」「テキストだけを表示」「画像＋テキストを表示」のそれぞれのパターンを試してみます♪



2.ランダムに表示するjQueryのソース


まずはjQueryの記述をHTMLのhead要素内（<head>～</head>の間）に記述します。

今回このjQueryのソースは以下のページの物を使わせて頂きました。
「jQueryプラグインの簡単な書き方と、ランダム表示プラグインの例 」 - murak.net 様
とても詳しく解説されてるので詳細は上記のページでご確認下さいませ♪

▼HTMLのhead要素内に記述するjQueryのソース

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$.fn.extend({
	randomdisplay : function(num) {
		return this.each(function() {
			var chn = $(this).children().hide().length;
			for(var i = 0; i < num && i < chn; i++) {
				var r = parseInt(Math.random() * (chn - i)) + i;
			$(this).children().eq(r).show().prependTo($(this));
			}
		});
	}
});
$(function(){
	$("[randomdisplay]").each(function() {
	$(this).randomdisplay($(this).attr("randomdisplay"));
	});
});
});
</script>

※1行目はGoogleにホストされているjQueryファイルを読み込む為の記述です。（jQuery本体）
すでにjQuery本体を読み込んでる場合は記述しなくてOKです♪（ Google Hosted Libraries 　 ）


※3行目～20行目を外部ファイルとして読み込んでもOKです♪
参考ページでは「jquery.randomdisplay.js」と言うファイル名で外部ファイル化されてます。


このjQueryの記述をするだけでランダム表示の準備は完了なので、あとは実際に表示したい内容をHTML内に記述するだけです♪(￣ε￣〃)ｂ



3.画像をランダムに表示


まずは上記のサンプルページのように画像だけをランダムに表示する場合の記述例です。

▼サンプルページでは以下のようにリストタグの中に画像を入れてます。
親要素の<ul>タグに「randomdisplay="3"」を記述してランダム表示を指定しています。
そして、ランダムに表示したい内容を子要素の<li>～</li>の間に記述しています。


<ul randomdisplay="3" class="sample-list">
<li><img src="画像のURL" alt="サンプル1" /></li>
<li><img src="画像のURL" alt="サンプル2" /></li>
<li><img src="画像のURL" alt="サンプル3" /></li>
<li><img src="画像のURL" alt="サンプル4" /></li>
<li><img src="画像のURL" alt="サンプル5" /></li>
<li><img src="画像のURL" alt="サンプル6" /></li>
<li><img src="画像のURL" alt="サンプル7" /></li>
<li><img src="画像のURL" alt="サンプル8" /></li>
<li><img src="画像のURL" alt="サンプル9" /></li>
<li><img src="画像のURL" alt="サンプル10" /></li>
</ul>

※親要素に「randomdisplay="表示件数"」と言う記述をすることによって、指定した表示件数ずつ子要素がランダムに表示されます。（もちろんidやclassを付けてCSSで装飾する事も可能です）


※サンプルでは表示する内容を10種類用意してますが、これより少なくても多くてもOKです♪
<li>～</li>を減らせば少なくなり、逆に<li>～</li>を増やせば多くなります。



▼サンプルページでのスタイルシート（CSS）の設定は以下の通りです。


.sample-list { list-style:none; }/* リストマークを非表示 */
.sample-list:after {/* 回り込みを解除 */
content: "";
clear:both;
display: block;
}
.sample-list li { float:left; }/* 回り込みでリストを横並びに表示 */


▼サンプルページ
「画像をランダムに表示する 」



4.テキストをランダムに表示


上記の画像をランダムに表示する方法とほぼ同じなのですが、今度はテキストだけの表示でそれぞれにリンクを付けてみました♪d(*￣∇￣)

▼HTMLにはこんな感じで記述しました♪ （画像のパターンとほぼ同じなので説明は割愛しますｗ）


<ul randomdisplay="3" class="sample-list">

<li><a href="リンク先のURL">テキスト1</a></li>
<li><a href="リンク先のURL">テキスト2</a></li>
<li><a href="リンク先のURL">テキスト3</a></li>
<li><a href="リンク先のURL">テキスト4</a></li>
<li><a href="リンク先のURL">テキスト5</a></li>
<li><a href="リンク先のURL">テキスト6</a></li>
<li><a href="リンク先のURL">テキスト7</a></li>
<li><a href="リンク先のURL">テキスト8</a></li>
<li><a href="リンク先のURL">テキスト9</a></li>
<li><a href="リンク先のURL">テキスト10</a></li>
</ul>


▼そしてスタイルシート（CSS）の設定はこんな感じです♪（サンプルなのでシンプルにｗ）


.sample-list { list-style:none; font-size:16px;}
.sample-list li { margin-bottom:10px; }


▼サンプルページ（最近の記事をランダムに表示してみました♪）
「テキストをランダムに表示する 」



5.画像＋テキストをランダムに表示


今度はランダム表示される子要素の中に、さらに要素を追加して画像＋テキストを表示してみました♪

▼HTMLにはこんな感じで記述しました♪（今回はサンプルページのHTMLをそのまま貼ってます）
子要素の<li>～</li>の中にさらに<ul>タグと<li>タグを入れて<a>タグで囲ってます。
（このブログの「最新記事」や「関連記事」と同じような構造です）


<ul randomdisplay="3" class="sample-list">

<li><!-- ▼ ランダム表示される子要素【1】 ここから ▼ -->
<a href="http://interest2014.blog.fc2.com/blog-entry-64.html">
<ul class="box">
<li class="thumbnail">
<img src="http://blog-imgs-46-origin.fc2.com/i/n/t/interest2014/blog0252.gif" 
alt="2014年11月 忍者アドマックスの収益" /></li>
<li class="article-title">2014年11月 忍者アドマックスの収益</li>
<li class="article-date">2014.12.05</li>
</ul></a>
</li><!-- ▲ ランダム表示される子要素【1】 ここまで ▲ -->

<li><!-- ▼ ランダム表示される子要素【2】 ここから ▼ -->
<a href="http://interest2014.blog.fc2.com/blog-entry-63.html">
<ul class="box">
<li class="thumbnail">
<img src="http://blog-imgs-46-origin.fc2.com/i/n/t/interest2014/blog0250.gif" 
alt="FC2ブログにグローバルメニューを付ける方法" /></li>
<li class="article-title">FC2ブログにグローバルメニューを付ける方法</li>
<li class="article-date">2014.12.04</li>
</ul></a>
</li><!-- ▲ ランダム表示される子要素【2】 ここまで ▲ -->

<li><!-- ▼ ランダム表示される子要素【3】 ここから ▼ -->
<a href="http://interest2014.blog.fc2.com/blog-entry-62.html">
<ul class="box">
<li class="thumbnail">
<img src="http://blog-imgs-46-origin.fc2.com/i/n/t/interest2014/blog0244.gif" 
alt="FC2ブログにパンくずリストを付ける方法" /></li>
<li class="article-title">FC2ブログにパンくずリストを付ける方法</li>
<li class="article-date">2014.12.03</li>
</ul></a>
</li><!-- ▲ ランダム表示される子要素【3】 ここまで ▲ -->

<li><!-- ▼ ランダム表示される子要素【4】 ここから ▼ -->
<a href="http://interest2014.blog.fc2.com/blog-entry-61.html">
<ul class="box">
<li class="thumbnail">
<img src="http://blog-imgs-46-origin.fc2.com/i/n/t/interest2014/blog0243.gif" 
alt="常に表示されるコンテンツを両サイドに配置" /></li>
<li class="article-title">常に表示されるコンテンツを両サイドに配置</li>
<li class="article-date">2014.11.30</li>
</ul></a>
</li><!-- ▲ ランダム表示される子要素【4】 ここまで ▲ -->

<li><!-- ▼ ランダム表示される子要素【5】 ここから ▼ -->
<a href="http://interest2014.blog.fc2.com/blog-entry-60.html">
<ul class="box">
<li class="thumbnail">
<img src="http://blog-imgs-46-origin.fc2.com/i/n/t/interest2014/blog0241.gif" 
alt="スタイルシート（CSS）をスイッチで切り替え" /></li>
<li class="article-title">スタイルシート(CSS)をスイッチで切り替え</li>
<li class="article-date">2014.11.26</li>
</ul></a>
</li><!-- ▲ ランダム表示される子要素【5】 ここまで ▲ -->

<li><!-- ▼ ランダム表示される子要素【6】 ここから ▼ -->
<a href="http://interest2014.blog.fc2.com/blog-entry-59.html">
<ul class="box">
<li class="thumbnail">
<img src="http://blog-imgs-46-origin.fc2.com/i/n/t/interest2014/blog0240.gif" 
alt="やっぱマウスは有線が良いと思った今日この頃" /></li>
<li class="article-title">やっぱマウスは有線が良いと思った今日この頃</li>
<li class="article-date">2014.11.24</li>
</ul></a>
</li><!-- ▲ ランダム表示される子要素【6】 ここまで ▲ -->

<li><!-- ▼ ランダム表示される子要素【7】 ここから ▼ -->
<a href="http://interest2014.blog.fc2.com/blog-entry-58.html">
<ul class="box">
<li class="thumbnail">
<img src="http://blog-imgs-46-origin.fc2.com/i/n/t/interest2014/blog0239.gif" 
alt="FC2ブログで公開中の記事数を表示する方法" /></li>
<li class="article-title">FC2ブログで公開中の記事数を表示する方法</li>
<li class="article-date">2014.11.22</li>
</ul></a>
</li><!-- ▲ ランダム表示される子要素【7】 ここまで ▲ -->

<li><!-- ▼ ランダム表示される子要素【8】 ここから ▼ -->
<a href="http://interest2014.blog.fc2.com/blog-entry-57.html">
<ul class="box">
<li class="thumbnail">
<img src="http://blog-imgs-46-origin.fc2.com/i/n/t/interest2014/blog0238.gif" 
alt="RSSでお友達ブログの新着記事を一覧表示" /></li>
<li class="article-title">RSSでお友達ブログの新着記事を一覧表示</li>
<li class="article-date">2014.11.20</li>
</ul></a>
</li><!-- ▲ ランダム表示される子要素【8】 ここまで ▲ -->

<li><!-- ▼ ランダム表示される子要素【9】 ここから ▼ -->
<a href="http://interest2014.blog.fc2.com/blog-entry-56.html">
<ul class="box">
<li class="thumbnail">
<img src="http://blog-imgs-46-origin.fc2.com/i/n/t/interest2014/blog0235.gif" 
alt="オリジナル画像でアクセスカウンターを設置" /></li>
<li class="article-title">オリジナル画像でアクセスカウンターを設置</li>
<li class="article-date">2014.11.20</li>
</ul></a>
</li><!-- ▲ ランダム表示される子要素【9】 ここまで ▲ -->

<li><!-- ▼ ランダム表示される子要素【10】 ここから ▼ -->
<a href="http://interest2014.blog.fc2.com/blog-entry-55.html">
<ul class="box">
<li class="thumbnail">
<img src="http://blog-imgs-46-origin.fc2.com/i/n/t/interest2014/blog0231.gif" 
alt="最近ブログの表示速度が遅い気がする..." /></li>
<li class="article-title">最近ブログの表示速度が遅い気がする...</li>
<li class="article-date">2014.11.19</li>
</ul></a>
</li><!-- ▲ ランダム表示される子要素【10】 ここまで ▲ -->

</ul>

※リストタグ（<ul>と<li>）を入れ子にしてるので、10パターン全てのソースを書くと上記のように長くなりちょっと複雑に見えますが１ブロックずつ見てみるとそんなに難しくないと思います。
サンプルの表示内容がちょっと多かったかな？ｗ... (￣▽￣;)



▼スタイルシート（CSS）の設定はこんな感じになってます♪
簡単な説明をコメントアウトで付けて見ました。


.sample-list { list-style:none; font-size:16px; }/* マークの非表示＆文字サイズ */
.sample-list:after {/* 回り込みを解除 */
content: "";
clear:both;
display: block;
}
.sample-list li{ float:left; }/* 回り込みでリストを横並びに表示 */

.box {/* ランダム表示される子要素内に入れたulタグ部分 */
list-style:none;/* リストマークを非表示 */
position:relative;/* 画像やテキストの表示位置の基準位置 */
width:290px;/* 外枠の横幅 */
height:122px;/* 外枠の縦幅 */
border:1px #CCC solid;/* 外枠の線（太さ、色、線種） */
border-radius:8px;/* 外枠の角を丸く */
margin:0 14px 14px 0;/* 右と下に14pxずつ余白 */
-webkit-transition: 0.5s;/* マウスオーバー時の時間変化 */
transition: 0.5s;/* マウスオーバー時の時間変化 */
}
.box:hover {/* マウスオーバー時 */
border:1px #09f solid;/* 外枠の線（太さ、色、線種） */
box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);/* 外枠に影を表示 */
}
.thumbnail { position:absolute; top:10px; left:10px; }/* 画像が入ってる部分 */
.thumbnail img{/* 画像自体に対しての指定 */
width:100px;/* 画像の横幅 */
height:100px;/* 画像の縦幅 */
border-radius:5px;/* 画像の角を丸く */
border:1px #CCC solid;/* 画像に枠線を表示（太さ、色、線種） */
}
.article-title {/* 記事タイトルが入ってる部分 */
position:absolute;
top:10px;
right:10px;
width:160px;/* 記事タイトルが表示されるスペースの横幅 */
text-align:left;/* テキストを左寄せ */
word-break:break-all;/* テキストの改行方法の指定 */
}
.article-date {/* 記事の日付が入ってる部分 */
position:absolute;
bottom:10px;
right:10px;
width:160px;/* 日付が表示されるスペースの横幅 */
text-align:right;/* テキストを右寄せ */
padding-top:5px;
border-top:1px #CCC dotted;/* 日付の上の点線（太さ、色、線種） */
}

※ランダム表示される子要素の中に入れた<ul>タグ（class="box"）と３つの<li>タグ（class="thumbnail"、"article-title"、"article-date"）の構造は以下の画像のような感じです。

<ul>タグ（class="box"）にマウスが乗ると外枠の色が変更になり影が付きます（CSSの21～22行目）


ランダム表示される子要素の中の構造


▼サンプルページ（最近の記事をサムネイル付きでランダム表示にしてみました♪）
「画像＋テキストをランダムに表示する 」

サンプルでは記事をランダムに表示してますが、その他にも訪問者に対してのメッセージや画像をランダムに表示したり、広告をランダムに表示したりなど、色んな使い方が出来ると思います♪ｄ(≧∀≦)ｂ

って事で今回は要素単位でのランダム表示についてでした♪(￣^￣)ゞ


最後に...

話は全然変わりますが、私の部屋のエアコンが故障したっぽくて暖房が出来ませんっ!!Σ(￣ロ￣lll)

マジで激寒いっすっ!! 早く修理を頼まなきゃ...

てか、買い替えなきゃいけないとか言われたら... （；＞＜）

それで無くても年末年始は色々とお金が掛かるのに...

さらに嫁が「お正月、ウチもお年玉欲しいっ!!」とか意味不明な事言ってるし...

マジどうにかして下さい...(￣▽￣;)
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 ＩＴ技術ブログ Webサイト構築へ
B!

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

http://interest2014.blog.fc2.com/tb.php/65-da0a0600

「画像やテキストを要素単位でランダムに表示」へのトラックバック

- TrackBack -


「画像やテキストを要素単位でランダムに表示」へのコメント

- Comment -

コメント一番乗りです。笑

あると♪さん

ランダム表示、私もブログのhead(笑)の画像、４枚をランダムに出してます。
ランダムも色々出来るんですね。じっくり研究します。
そして、マウスオーバー、スーっと上がってカッコ良いです。私も何処かでまねっこします。笑
いやぁ、この時期にエアコンが壊れるのは痛いですよねぇ。私も昨夜、リモコンの調子が悪くなって、これから、電池買いに行って来ます。
年末だからか、お金かかる事ばかりですよねぇ。泣
友達は色々年末の予定入れてくるし・・・
本当に生活苦だっつーの・・・すみません、愚痴でした。
  • 2014-12-09 14:07
  • girigiri26さん@管理人
  • 編集

No title

あると♪さん

相変わらず頑張っておられる様子が拝見できて嬉しい限りです！
益々カスタマイズに関する記事が増え多くの皆さんのお役に立っているようですね。（素晴らしい）
やがて更に多くの人に求められる日が楽しみです。

暖房無しですか＾＾私も暖房無しで生活してますが厳しいですね・・・＞＜；
今後もご活躍を期待しております！

応援ポチです！
  • 2014-12-09 20:12
  • T.Oさん@管理人
  • 編集

Re: コメント一番乗りです。笑

> girigiri26さん

確かに色んな方法がありますね♪

どの部分に何をどんな風に表示したいかで変わって来るので、
また今度、別の方法も試してみようと思います♪(≧∇≦)b

マウスオーバーのエフェクトはあると何かカッコイイですよねｗ

エアコンに関しては今日修理に来てもらって無事直りました♪ｗ
とりあえず買い替えはしなくて済みました(￣ε￣〃)ゞ

年末年始は何かと忙しくなりますよねｗ
それに伴い出費の方も...(TヘT)
  • 2014-12-09 21:02
  • あると♪さん@管理人
  • 編集

Re: No title

> T.Oさん

ありがとうございます♪(￣ε￣〃)ゞ

スローペースですが、自分のペースで続けれるよう頑張ります^^

エアコンは早速今日修理に来てもらったので無事直りました♪
暖房無しはホント厳しいですね...（；＞＜）

また応援もありがとうございますっ!!ｄ(≧∀≦)ｂ
  • 2014-12-09 21:06
  • あると♪さん@管理人
  • 編集

またも複雑な・・・

凄いなー♪

以前、無料カスタマイズサイトから、

記事に貼り付けた画像を、ランダムに3カットずつ表示するのを、

サイドバーに付けていましたが、時折ブログ村のバナーなどが表示されるので、止めました（笑）

奥さんのお年玉欲しい発言・・・ｗｗｗ

多分、誰でもいくつになっても、

くれる人が居たら、欲しいですよね（笑）

副業頑張って、あげるしかないですね（爆）

ささやかですが、応援ポチでｗ
  • 2014-12-10 03:06
  • らいふさん@管理人
  • 編集

こんにちは

あると♪さんこんにちは。

またとても手の込んだ記事で感心しています。

やっぱりパソコンのスキルがあるってすごいなぁと思います(゜_゜>)

ところで１つお聞きしたいことがありまして…

レンタルサーバーについてですが、
私のメインブログでもうすぐレンタルサーバーについての
記事を書こうと思っているのですがあるとさんのオススメとか
ありましたら参考にしたいなと思いまして(^.^)

私はいま「エックスサーバー」を使っていますが
調べてみると「お名前.com」のサーバーも値段・内容ともに
かなり優秀だと思っているんですがどうでしょう。

こちらを参考にしています。
http://レンタルサーバ比較.jp/

  • 2014-12-10 16:37
  • じゅんぴーAさん@管理人
  • 編集

Re: またも複雑な・・・

> らいふさん

ありがとうございます^^

記事中の画像をRSSで取得してランダムに表示してたんでしょうかね？ｗ

ブログランキングなどの画像が表示されちゃうと、
ちょっと残念な感じになっちゃいますよね...（；＞＜）

またお年玉については...　確かにくれる人が居るなら... 私も欲しいですｗ
  • 2014-12-10 17:43
  • あると♪さん@管理人
  • 編集

Re: こんにちは

> じゅんぴーAさん

いつもありがとうございます(￣ε￣〃)ゞ

レンタルサーバーの記事、いいですね～♪
ちなみに私のオススメは「エックスサーバー」ですね^^

でも、確かに「お名前.com」のサーバーも良さそうですねｗ

やはり「何がしたいか？」次第でしょうね...(￣ε￣〃)ゞ

また状況次第では最初はコストが安いレンタルサーバーを選び、
必要性が出て来たら、他のサーバーに引っ越すってのもアリだと思います♪
  • 2014-12-10 18:04
  • あると♪さん@管理人
  • 編集

やって来ましたぁ♪・・・あれ？

おお！？今回はだいぶ出遅れたぁ！！

・・・いろいろと年の瀬は忙しいもので。
今週はＰＣ前に居る時間もガタ落ちです。貧乏ヒマなしです（涙）

さて、今回のスクリプトも
スッキリしていて良いですね。

ワタシが最初に余所のサイトから拾ってきたスクリプトは
機能はこの記事とほぼ同じですが
無駄にゴチャゴチャと長ったらしくて
だいぶ使いにくい代物でした。

さすがは“jOuery使い”のあるとサンですね。
もう少しでケアルラが使えるようになりますよ♪

あ、あとワタシにはお年玉なんて結構ですよ。
いやいやそんなそんな、ホントもう
お気持ちだけで十分です。
ええ、もう、ほんの２５０万ほどで。
  • 2014-12-10 22:41
  • ペロリさん@管理人
  • 編集

Re: やって来ましたぁ♪・・・あれ？

> ペロリさん

私も同じく貧乏ヒマなしやってます...（；＞＜）

スクリプトに関してはすでにシンプルに作られてる物でしたのであれですが...ｗ
こう言うのはやっぱシンプルに作られてる方が分かりやすくて使いやすいですよね♪

そして今回はFFネタですねｗｗ
ほんとネタが幅広いｗ

てか、お年玉の金額が... パネェっす!!Σ(￣ロ￣lll)
  • 2014-12-11 00:27
  • あると♪さん@管理人
  • 編集

コメントありがとうございます♪

勝手に記事にもリンクさせて、スンマセン(笑)

まぁ、それで少しでもアクセスがUPしたら・・・的な話です(笑)

ほんと遅くなりましたが、やっと導入しました♪

いやー、もっと早くやれば良かったです。

お蔭で、これからのブログの画像貼り付けの幅が広がりました♪

感謝です！！

応援ポチの乱れ打ち～～～（笑）
  • 2014-12-11 17:58
  • らいふさん@管理人
  • 編集

コメントの投稿

- Post a Comment -










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

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

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

White
Black

プロフィールClick

プロフィール画像

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

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

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

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ