表示されている記事

スポンサーサイト

一定期間更新がないため広告を表示しています


Youtubeの動画を埋め込んでみる

続きを読む >>

このページのトップへのボタンをウインドウ右下に表示する

この記事「テンプレートを作ってみる【37】」で設定したページのトップへのボタンをウインドウ右下に表示する設定をしました

HTML
<div id="backtoTop"><a href="javascript:scrollTop(0,0)" onclick="slowdownScroll();return false;" onkeypress="slowdownScroll();return false;" title="このページのトップへ">▲</a></div>
CSS
#backtoTop {
width:20px;
height:20px;
background-color:#333333;
position:fixed;
right:20px;
bottom:20px;
}
#backtoTop a {color:#000000;text-decoration:none;}
#backtoTop a:link {color:#000000;text-decoration:none;}
#backtoTop a:visited {color:#000000;text-decoration:none;}
#backtoTop a:hover {color:#ffffff;text-decoration:underline;}
#backtoTop a:active {color:#000000;text-decoration:none;}

Amazon Web サービスの表示のタグの表示をカスタマイズしてみる

<!-- BEGIN amazon -->〜<!-- END amazon -->内に設置するAmazon Web サービスの表示のタグ
  • {amazon_item}
この独自タグが出力するHTML
<div class="amazon">
<a href="URL" target="_blank"><img src="URL" alt="タイトル" class="amazon_pict" border="0"></a>
<div class="amazon_text">
<a href="URL" target="_blank"><strong>タイトル</strong></a>&nbsp;<span class="amazon_monocolle"><a href="URL" title="タイトル" target="_blank">(JUGEMレビュー »)</a></span><br>著者<br>
</div>
<div class="amazon_memo">ご自分のコメント</div>
</div>
CSS
.amazon {clear:left;}
/*float:leftの解除*/
.amazon_pict {width:60px;float:left;margin:0px 5px 5px 0px;}
/*画像幅・説明文回り込み・説明文との余白*/
.amazon_text {font-size:10px;overflow:hidden;}
/*文字高さ・画像高さが終わってもに文字を回り込ませない*/
.amazon_text strong {font-weight:normal;}
/*文字太さの調整*/
.amazon_monocolle {}
/*(JUGEMレビュー »)を非表示にしたい場合はdisplay:none*/
.amazon_memo {font-size:10px;margin-left:65px;border-top:1px solid #cccccc;}
/*商品へのコメント文の文字高さ・位置・上枠線の設定*/

設置したjQueryが動作するかのテスト3

この記事の本文

設置したjQueryが動作するかのテスト3の本文です

<div id="jQopenclose">
<div class="listTitle">この記事の本文</div>
<div class="list">
<p>設置したjQueryが動作するかのテスト3の本文です</p>
</div>
</div>

設置したjQueryが動作するかのテスト

サイドバーにjQueryの動作テストを設置してみました

記事内
jQueryサンプル1

これはjQueryのサンプル1です。

これはjQueryのサンプル1の中のdiv内です。

jQueryサンプル2

これはjQueryのサンプル2です。

jQueryサンプル3

これはjQueryのサンプル3です。

これはjQueryのサンプル3の中のdiv内です。


via jQueryによる表示、非表示切り替え | WEBプログラム覚書

このブログ内の検索を設置してみる

サイドバーにブログ内の検索を設置してみました

HTML
<div class="sideContent">
<div class="sideContentTitle">このブログ内の検索</div>
<div class="sideContentItem">
<!-- search -->
<form method="get" action="./">
<input id="search" name="search" class="search" />
<input type="submit" value="Search" />
</form>
<!-- /search/ -->
</div>
</div>
CSS
.sideContentItem .search {
width:177px;
margin:0px 0px 5px 0px;
}

JUGEMブログにJavascriptライブラリを組み込んでみる

JUGEMで提供されているJavascriptライブラリ
  • Lightbox:http://js.jugem.jp/Lightbox/2.04/js/lightbox.js
  • jQuery:http://js.jugem.jp/jquery/1.3.2/jquery.min.js
  • prototype.js:http://js.jugem.jp/prototype/1.6.0.3/prototype.js
  • script.aculo.us:http://js.jugem.jp/script.aculo.us/1.8.2/scriptaculous.js
それと一部公開テンプレートで使用されている 他にもありそうですが…今回はjQueryを組み込みます<head>~</head>に追記
<script src="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>
詳しくは:jQuery1.3.2 リリースノート - jQuery 日本語リファレンス

JUGEMブログ管理ページのユーザー設定からプロフィール画像で登録した画像をアイコンとして使う

JUGEMブログ管理ページのユーザー設定からプロフィール画像で登録した画像をアイコンとして使う

プロフィール画像を登録後画像が反映されたら管理ページのHTMLから下記を<head>~</head>へ追記する
<link rel="shortcut icon" href="http://image.jugemkey.jp/user/ユーザー名/16" />

記事の日付にその日に投稿した記事の一覧を表示させるリンクを付ける

記事の日付にその日に投稿した記事の一覧を表示させるリンクを付ける

記事の日付にその日に投稿した記事の一覧を表示させるリンクを付ける
HTML
<div class="entryDate">
<a href="./?day="{entry_year}{entry_month}{entry_day}" title="{entry_year}年{entry_month}月{entry_day}日の記事一覧">
{entry_year}.{entry_month}.{entry_day}&nbsp;{entry_eng_week}
</a>
</div>
※修正:赤色文字部分不要[2012/06/17]
 <a href="./?day="{entry_year}{entry_month}{entry_day}" title="{entry_year}年{entry_month}月{entry_day}日の記事一覧">
※修正後
<a href="./?day={entry_year}{entry_month}{entry_day}" title="{entry_year}年{entry_month}月{entry_day}日の記事一覧">
CSS
.entryDate a {color:#000000;text-decoration:none;}
.entryDate a:link {color:#000000;text-decoration:none;}
.entryDate a:visited {color:#000000;text-decoration:none;}
.entryDate a:hover {color:#000000;text-decoration:underline;}
.entryDate a:active {color:#000000;text-decoration:none;}

ブラウザのキャッシュをクリアする

テンプレートをカスタマイズしているとブラウザにカスタマイズする前のHTML・CSSがキャッシュされているとカスタマイズした部分が読みこまれていない場合があるのでHTML<body>~</body>に下記を追記しました
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">