U-BOX/うさぎの小箱

FC2ブログのテンプレートを配布しています

  1. スポンサー広告
  2. [ edit ]

スポンサーサイト

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


  1. -
  2. tb: 0
  3. cm: 0
  4. [ edit ]

本文の追記に関して

追記機能を考える。

簡易モードの記事の編集画面では以下の機能が非表示になります。
・ジャンル、テーマ、トラックバック送信の項目
・記事のツールバーの機能の一部、高機能テキストエディタ切り替えツール
・追記の編集
・記事の設定

まず追記するには、簡易モードをOFFにしなくてはならない。

  1. -
  2. tb: 0
  3. cm: 2
  4. [ edit ]

jQuery-memo

accordion-v45.js
1KB 2014/09/21 21:37:14(45)  v45mono2
$(function(){
$('.write2')
.not('.write2:first').hide()
.css('display','none');
//
$('.body3 h3').click(function(e){
$('.write2').slideUp();
if($('+.write2',this).css('display') == 'none'){
$('+.write2',this).slideDown();
}
});
//
});



accordion.js
1KB 2014/09/21 21:37:13(45)
$(function(){

$(".accordion p").click(function(){
$(this).next("ul").slideToggle();
$(this).children("span").toggleClass("open");
});

$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
});

});



pagetop300-500.js
1KB 2014/09/20 22:15:09(45)
$(document).ready(function(){
$("#pagetop").hide();
$(function () {$(window).scroll(function () {
if ($(this).scrollTop() > 300) {$('#pagetop').fadeIn();} else {$('#pagetop').fadeOut();}});
$('#pagetop a').click(function () {
$('body,html').animate({scrollTop: 0}, 500);return false;});});
});



scrolltopcontrol100-500.js
1KB 2014/09/20 21:27:50(45)  v45mono2
$(function() {
var topBtn = $('#pageTop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});



PIE.js
40KB 2014/09/14 01:08:49(70)



selectivizr.js
19KB 2014/09/14 00:55:13(70)



slidetogglesample-v25.js
1KB 2013/10/06 22:33:29(58)  v25cloud, v26cloud2, v27cloud3
$(document).ready(function() {
$(".body3 h3").hover(function(){
$(this).css("cursor","pointer");
},function(){
$(this).css("cursor","default");
});


$(".write2")
.not(".write2:first")
.css("display","none");
$(".body3 h3").click(function(){
$(this).next().slideToggle("fast");
});
});



http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js  v24shine, v28shine2, v29mono, v45mono2

http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js  v25cloud, v26cloud2, v27cloud3

http://code.jquery.com/jquery-1.7.1.min.js  v31-33sakura, v33_2reef, v33_3mw_sea, v34kamiW, v35floral, v36g3tyou, v37krage, v37_2shark, v38flo01, v39flo02, v40voyage, v41mjL, v42flo03, v43green, v44green2

scrolltopcontrol-script  v24shine, v25cloud, v26cloud2, v27cloud3, v28shine2, v29mono, v31-33sakura, v33_2reef, v33_3mw_sea, v34kamiW, v35floral, v36g3tyou, v37krage, v37_2shark, v38flo01, v39flo02, v40voyage, v41mjL, v42flo03, v43green, v44green2

jumpmenu-script  v24shine



  1. cf.
  2. tb: 0
  3. cm: 0
  4. [ edit ]

月別・カテゴリ別アーカイブのドロップダウンリスト

■■■月別・カテゴリ別共通JavaScript・・・< head>~< /head>

< script type="text/javascript">
< !--
function jumpmenu(targ,selObj,restore) {
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
< /script>


■■■月別アーカイブ

< h2 class="monthly-archives">MONTHLY< /h2>
< form id="monthly_archives" name="monthly_archives" action="">
< select name="menu" onchange="jumpmenu('parent',this,0)">
< option value="< %url>" selected="selected">■月別< /option>
< !--archive-->
< option value="< %archive_link>">■< %archive_year>-< %archive_month> : < %archive_count>< /option>
< !--/archive-->
< /select>
< /form>


■■■カテゴリ別アーカイブ

< h2 class="categories-archives">CATEGORIES< /h2>
< form id="categories_archives" name="categories_archives" action="">
< select name="menu" onchange="jumpmenu('parent',this,0)">
< option value="< %url>" selected="selected">■カテゴリ別< /option>
< !--category-->
< option value="< %category_link>">■< %category_name> : < %category_count>< /option>
< !--/category-->
< /select>
< /form>



  1. -
  2. tb: 0
  3. cm: 0
  4. [ edit ]

blogタイトルと本文の文字サイズ・色

tempによっていろいろある、下は一例です。(U-BOXv08Sora-binを使用)

本文の文字サイズ・色

css_________________________
body {
background-color: #fff;
color: #6e727f;/*230-13-50*/
font-size: 12px;
line-height: 160%;
font-family: arial,"MS Pゴシック",sans-serif;
margin: 0;
pading: 0;
}



blogタイトルの文字サイズ・色

HTML_______________________

< div id="top">
< h1>< a href="< %url>">< %blog_name>< /a>< /h1> ・・・blogタイトル
< h2>< %introduction>< /h2>           ・・・サブタイトル
< /div>< !--top-->

css_________________________

h1 {
font-family: sans-serif, Verdana, "メイリオ", Meiryo;
color: #373a49;/*228-25-29*/
}                 ・・・blogタイトルの文字サイズ、サイズ指定がないのでデフォルト
                   (h1のデフォルト=本文文字サイズの200%)
h2 {
font-size:130%;   ・・・サブタイトルの文字サイズ(本文文字サイズの130%)
margin-left: 3%;
}
* h2はblog内の見出しにも使われているため、サイズを指定するときは使用箇所ごとの指定が望ましかったりする




/ * header */
#top {
color: #080e26; /*228-25-29*/・・・サブタイトルの色
width: 99.8%;
margin: 0 0.1% 0 0.5%;
padding: 1em 0 9.5em;
word-break: break-all;
}
#top h1 a:link, #top h1 a:visited {color: #080e26} /*228-77-15*/・・・blogタイトルの色
#top h2 {
font-weight: normal;
margin: 0.5em 0 0 0.3em;
}

blogタイトル、サブタイトルの文字サイズの変更例(赤字挿入)

#top h1 a:link, #top h1 a:visited {
color: #080e26; /*228-77-15*/
font-size: 24px;
}
#top h2 {
font-size: 16px;
font-weight: normal;
margin: 0.5em 0 0 0.3em;
}

* サイズはpxで指定すると本文文字サイズに影響されない。
* 上記は本文12pxのときの%指定をpx換算した数字です。この数字を希望のものに変更する。


  1. color_code
  2. tb: 0
  3. cm: 0
  4. [ edit ]

color184CA2

Adobe’s Kuler
monochromatic
{ color: #2370EE } /*217-85-94*/
{ color: #5074B1 } /*217-55-70*/
{ color: #184CA2 } /*217-85-64*/
{ color: #6B9CEE } /*217-55-94*/
{ color: #10346F } /*217-85-44*/

shades
{ color: #0F2E62 } /*217-85-39*/
{ color: #2370EE } /*217-85-94*/
{ color: #184CA2 } /*217-85-64*/
{ color: #1A52AF } /*217-85-69*/
{ color: #144088 } /*217-85-54*/

analogous
{ color: #2A11AF } /*249-90-69*/
{ color: #1225B9 } /*233-90-73*/
{ color: #184CA2 } /*217-85-64*/
{ color: #127DB9 } /*202-90-73*/
{ color: #119FAF } /*186-90-69*/

compound
{ color: #2A0AD5 } /*249-95-84*/
{ color: #25213C } /*249-45-24*/
{ color: #184CA2 } /*217-85-64*/
{ color: #AE8145 } /*34-60-68*/
{ color: #D5600A } /*25-95-84*/

Color Wizard
HUEvariation
{ color: #1891A2 } /*187-85-63*/
{ color: #186EA2 } /*202-85-63*/
{ color: #184CA2 } /*217-85-64*/
{ color: #1829A2 } /*232-85-63*/
{ color: #2918A2 } /*247-85-63*/

SATURATIONvariation
{ color: #0046BA } /*217-100-72*/
{ color: #0547B4 } /*217-97-70*/
{ color: #184CA2 } /*217-85-64*/
{ color: #335286 } /*217-61-52*/
{ color: #4F596A } /*217-25-41*/

TINT&SHADEvariation
{ color: #96B8EF } /*217-37-93*/
{ color: #3D7BE2 } /*217-73-88*/
{ color: #184CA2 } /*217-85-64*/
{ color: #0A2249 } /*217-86-28*/
{ color: #01040a } /*217-85-4*/

monochromatic
{ color: #040D1C } /*217-85-10*/
{ color: #184CA2 } /*217-85-64*/
{ color: #6A99E8 } /*217-54-90*/
{ color: #58595b } /*217-4-36*/

analogous
{ color: #181DA2 } /*237-85-63*/
{ color: #184CA2 } /*217-85-64*/
{ color: #1879A2 } /*197-85-63*/
{ color: #3D7BE2 } /*217-73-88*/
{ color: #58595b } /*217-4-36*/
{ color: #01040a } /*217-85-4*/

toriodic
{ color: #184CA2 } /*217-85-64*/
{ color: #A2184B } /*338-85-63*/
{ color: #4BA218 } /*97-85-63*/













  1. cf.
  2. tb: 0
  3. cm: 0
  4. [ edit ]

公式プラグインのHTML

■■■月別アーカイブ

< ul>< !--archive-->
< li &align>
< a href="<%archive_link>" title="<%archive_year>年<%archive_month>月"><%archive_year>年<%archive_month>月 (<%archive_count>)< /a> < /li>
< !--/archive-->< /ul>


■■■カテゴリ

< div>< !--category--> < div &align>
< !--category_sub_hasnext-->┣< !--/category_sub_hasnext-->
< !--category_sub_end-->┗< !--/category_sub_end-->
< a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)< /a>
< /div>< !--/category-->< /div>



■■■カテゴリ2

< ul class="main_menu">
< !--category-->
< !--category_sub_begin-->
< ul class="sub_menu">
< !--/category_sub_begin-->
< !--category_nosub-->
< li class="main_list" &align>
< !--/category_nosub-->
< !--category_parent-->
< li class="main_list" &align>
< !--/category_parent-->
< !--category_sub_hasnext-->
< li class="sub_list" &align>
< !--/category_sub_hasnext-->
< !--category_sub_end-->
< li class="sub_list_end" &align>
< !--/category_sub_end-->
< a href="< %category_link>" title="< %category_name>">< %category_name>(< %category_count>)< /a>
< !--category_nosub-->
< /li>
< !--/category_nosub-->
< !--category_sub_hasnext-->
< /li>
< !--/category_sub_hasnext-->
< !--category_sub_end-->
< /li>
< /ul>
< /li>
< !--/category_sub_end-->
< !--/category-->
< /ul>


■■■カレンダー

< div class="plugin-calender" &align> < table summary="カレンダー" class="calender">
< caption>
< a href="<%prev_month_link>"><%prev_month>< /a>
| <%now_year>/<%now_month> |
< a href="<%next_month_link>"><%next_month>< /a>
< /caption>
< tr>
< th abbr="日曜日" scope="col" id="sun">日< /th>
  ==★月、火、水、木、金~ は記載上省略==
< th abbr="土曜日" scope="col" id="sat">土< /th>
< /tr>
< !--calender--> < tr>
< td><%calender_sun>< /td>
 ==★mon、tue、wed、thu、fri~ は記載上省略==
< td><%calender_sat>< /td>
< /tr> < !--/calender-->
< /table>< /div>


■■■ユーザータグ

ユーザータグを表示します。
表示順は、新着順/カウント順/ランダム の3種類から選んで設定できます。
< p class="plugin-tag" &align>
< !--ctag--> < a href="<%ctag_url>"><%ctag_name>< /a> < !--/ctag-->
< /p>


■■■プロフィール

プロフィールを表示します。
< !--myimage--> < p class="plugin-myimage" &align>
< img src="<%image>" alt="<%author_name>" />
< /p> < !--/myimage-->
< p &align> Author:<%author_name>< br /><%introduction2> < /p>


■■■検索フォーム

検索フォームを表示します。
< form action="./" method="get">< p class="plugin-search" &align>
< input type="text" size="20" name="q" value="" maxlength="200" />< br />
< input type="submit" value=" 検索 " />
< /p>< /form>


■■■リンク

リンクを表示します。
< p style="text-align:left">< !--@-->< /p>
<ul>
<!--link--><li &align>
<a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a>
</li><!--/link-->
<li><a href="<%server_url>control.php">管理画面</a></li>
</ul>
< p style="text-align:left">
< /p>< p>< a href="javascript:window.location.replace('http://blog.fc2.com/?linkid=aogaras10box');">このブログをリンクに追加する< /a>< /p>< !--@@-->
< p>< /p>

■■■全記事表示リンク

全記事タイトル一覧ページ(/archives.html)へのリンクを表示します。
適用中のテンプレートに titlelist_areaブロックがない場合は、
システム側の標準ページで表示されます。
< p class="plugin-all" &align"
< a href="<%url"archives.html""全ての記事を表示する< /a"
< /p"


■■■Powered By

Powered By を表示します。広告(ad変数)ではないので、表示の義務はありません。
< p class="plugin-powered" &align>
< a href="http://blog.fc2.com/" target="_blank" title="Powered By FC2BLOG">
< img src="<%portal>image/powered.gif" alt="Powered By FC2BLOG" border="0" />
< /a>< br />
< a href="http://blog.fc2.com/" target="_blank" title="FC2BLOG">FC2BLOG< /a>
< /p>


■■■メールフォーム

メールフォームプラグインです。
これを設置することで、閲覧者がブログ上からメッセージ(メール)を送ることができます。
メールフォームを経由するので、アドレスを相手に知られることがありません。(返信はできません)
メールフォームから送られたメッセージは、ブログ管理者の登録メールアドレス(FC2IDを登録しているアドレス)へ転送されます。
(旧ユーザは「環境設定の変更→ユーザー情報の変更→メールアドレス」に登録されているメールアドレス宛)
メールフォーム経由のスパム対策として、投稿確認画面に文字認証(Captcha)を表示させることもできます。

< form action="./" method="post"> < p class="plugin-mail" &align>
名前: < input type="text" size="10" name="formmail[name]" value="" maxlength="100" style="width:90%;" />< br />
メール:< input type="text" size="10" name="formmail[mail]" value="" maxlength="150" style="width:90%;" />< br />
件名: < input type="text" size="10" name="formmail[title]" value="" maxlength="150" style="width:90%;" />< br />
本文:< br />
< textarea name="formmail[body]" cols="10" rows="6" style="width:90%;">< /textarea>
< input type="submit" value=" 確認 " />
< input type="hidden" name="mode" value="formmail" />
< input type="hidden" name="formmail[no]" value="&formno" />
< /p> < /form>


■■■フリーエリア

< div class="plugin-freearea" &align>
 &freearea
< /div>




スタイルシート(CSS)の編集に検索が行えます>>Windowsの場合はCtrl+F






  1. color_code
  2. tb: 0
  3. cm: 0
  4. [ edit ]

color

{ color: #00ffff } /*180-100-100*/

{ color: #c7cce2 } /*230-12-89*/

{ color: #3d4f96 } /*227-59-58*/
{ color: #051e84 } /*228-96-52*/
{ color: #6e717f } /*230-13-50*/

{ color: #393d4f } /*229-27-30*/
{ color: #373b49 } /*228-25-29*/
{ color: #373a49 } /*230-24-28*/

{ color: #121212 } /*0-0-7*/

{ color: #eee } /*0-0-93*/
{ color: #ddd } /*0-0-86*/
{ color: #ccc } /*0-0-80*/
{ color: #bbb } /*0-0-73*/
{ color: #aaa } /*0-0-66*/
{ color: #999 } /*0-0-60*/
{ color: #888 } /*0-0-53*/

{ color: #808080 } /*0-0-50*/gray

{ color: #777 } /*0-0-46*/
{ color: #666 } /*0-0-40*/
{ color: #555 } /*0-0-33*/

{ color: #444 } /*0-0-26*/
{ color: #333 } /*0-0-20*/
{ color: #222 } /*0-0-13*/
{ color: #1e1e1e } /*0-0-12*/
{ color: #1c1c1c } /*0-0-11*/

{ color: #191919 } /*0-0-10*/
{ color: #161616 } /*0-0-9*/
{ color: #141414 } /*0-0-8*/
{ color: #121212 } /*0-0-7*/
{ color: #111 } /*0-0-6*/

{ color: #0c0c0c } /*0-0-5*/
{ color: #0a0a0a } /*0-0-4*/
{ color: #070707 } /*0-0-3*/
{ color: #050505 } /*0-0-2*/
{ color: #020202 } /*0-0-1*/









  1. tag_sample
  2. tb: 0
  3. cm: 3
  4. [ edit ]

tag_memo

>IE7以降,_IE6まで       http://www.css-style.net/styles/use-style13.html

ソースコード       < code>< /code>

/* スペース要素としてのライン --< div class="lin">< hr>< /div>-- */
< div class="lin3">< hr>< /div>
.lin hr, .lin2 hr, .lin3 hr { border: 0px; width: 90%; display: none }
.lin3 {
float: right;
padding: 0;
margin: 0;
width: 220px;
height: 470px;
border: 0px solid red;
}




color: #;
font-size: 12px;

font-weight: normal;
font-weight: bold;


font-family: sans-serif,arial,"MS Pゴシック",;/*06Moon*/
font-family: "Century Gothic", "Bodoni MT Black", "Tahoma", "Arial";/*06Moon-h1*/
font-family:arial,"MS Pゴシック", sans-serif; /*07Komon*/
font-family: sans-serif, Verdana, "メイリオ", Meiryo; /*07Komon-h1*/
font-family: Verdana,"Arial Black","Meiryo UI","MS UI Gothic","ヒラギノ角ゴ ProN W",Osaka,Sans-Serif;/*18night*/


text-align: left;
text-align: right;
text-align: center;
line-height: 160%;
letter-spacing: 0;



text-transform: uppercase; /*全ての文字を大文字に変換*/
text-transform: lowercase; /*全ての文字を小文字に変換*/
text-transform: capitalize; /*単語の先頭文字を大文字に変換*/




a:hover { text-decoration: underline }
a:active { text-decoration: line-through }
a:active { text-decoration: blink }



background-color: transparent;
background-color: #000000;
background-image: url(http://blog-imgs-56.fc2.com/a/o/g/aogaras10box/.jpg);
background-repeat: no-repeat;
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;


width: 120%;
height: 105%

margin: 0;
pading: 0;


float: left;
float: right;



text-decoration: none;

word-break: break-all;

overflow-x: hidden;


list-style-type: square;
list-style-image: url(.gif);

デフォルトの余白を取り除く
ul {
margin: 0 0 0 1em;
padding: 0;
}

display: inline;

position: relative;
z-index: 2;


table/隣接するセルのボーダーを結合
border-collapse: collapse;
border-collapse: separate;
セルの境界線の間隔 > [上下左右]/[左右][上下]
border-spacing: 5px 30px;

border-top: 0px solid #000;
border-left: 1px solid #333;
border-bottom: 0px solid #000;
border-right: 1px solid #333;


color: red;
background-color: red;




input:first-child,input#name,input#subject,input#mail,input#url,input#pass,textarea {
color:#304589;
font-size: 11px;
background-color: transparent;
background-image: url(http://blog-imgs-56.fc2.com/a/o/g/aogaras10box/w30.png);
background-repeat: repeat;
margin: 0;
padding: 0.2em;
border: 0px solid ;
}

input#name, input#subject, input#mail, input#url, input#pass, textarea {
font-size: 100%;
background-color: transparent;
background-image: url(http://blog-imgs-56.fc2.com/a/o/g/aogaras10box/w80.png);
background-repeat: repeat;
margin: 0;
padding: 0.2em;
border: 1px solid #999;
}

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
< h1> 200%(32px)
< h2> 150%(24px)
< h3> 113%(18px)
< h4> 100%:標準文字サイズを太字にしたものと同じ(16px)
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
(default)

< !-- 以下のカレンダーを表示しないときは"*"を"display: none"に置き換えて下さい。-->
< div class="body3" style="*">< !-- ■ -->






<<NEW ENTRY  | BLOG TOP |  OLD ENTRY

プロフィール

usagi

Author:usagi
FC2ブログへようこそ!

information

2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ

管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。

お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。

カレンダー

07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

ユーザータグ

* 



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