表示されている記事

スポンサーサイト

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


個別の記事ページ記事下の余白を有効に使うためのメモ

サイドバーが長くなりすぎると個別の記事ページで記事の下に余白が多くなるので余白を有効に使うためのメモ
※この記事をカスタマイズ中のテンプレートで確認するリンク
続きを読む >>

このブログのOGPタグの設定は?

デバッガー - Facebook開発者でこのブログ(tid=8)を調べてみると…

修正が必要な[いいね!]ボタンの警告
  • fb:admins
  • fb:app_id
  • og:title
  • og:type
  • og:image
解決する必要があるオープングラフの警告
  • og:url
  • og:title
  • og:image
その他必要とおもわれる項目
  • og:description
  • og:locale
  • og:site_name

JUGEM管理ページで使用されているShadowbox.jsをブログに設置してみる

JUGEMのjquery.min.js・shadowbox.css・shadowbox.js・オプションを設定してみました

追記:2012/06/23-14:01

カテゴリ別に記事IDの昇降順を変えてみる

Sorting Values with JavaScript | Nettuts:jquery.datasort.jsを使用しています
<script src="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/********/js/jquery.datasort.js" /></script>
HTML
<div class="entries">
<!-- BEGIN entry -->
<div class="entry cid1"><div id="{entryarea_id}">
…中略…
{trackback_auto_discovery}
</div>
</div>
<!-- END entry -->
</div>
設定
<script type="text/javascript">
$('.entries .{cid_num}').datasort({
datatype: 'number',
sortElement : 'div',
sortAttr    : 'id',
reverse     : false
});
</script>
./?cid=1の場合のみ記事ID昇降順を若い順から表示する

記事のタイトルに記事のID{entryarea_id}を表示させる

記事のタイトルに記事のID{entryarea_id}を表示させるてみました

<!-- BEGIN entry -->
<div class="entry" id="{entryarea_id}">
<h2>{entry_title_link}:{entryarea_id}</h2>
…中略…
<!-- END entry -->
  • 記事のタイトルに記事のID
    <h2>{entry_title_link}:{entryarea_id}<h2>
  • 記事のブロックにid
    <div class="entry" id="{entryarea_id}">

ページのトップ・ボトムへ移動するボタンを設定してみました

ページのトップ・ボトムへ移動するボタンを設定してみました
この記事「テンプレートを作ってみる【37】」で設定した下記は使用せずに
<script type="text/javascript" src="./template/more/js/scroll.js" /></script>
HTML
<div id="scRoll">
<div class="top"><a href="javascript:(function(){window.scrollTo(0,0);})();" title="ページトップに移動">▲</a></div>
<div class="bottom"><a href="javascript:(function(){window.scrollTo(0,document.documentElement.scrollHeight);})();" title="ページボトムに移動">▼</a></div>
</div>
CSS
#scRoll {
position:fixed;
right:20px;
bottom:20px;
}
#scRoll .top {width:20px;height:20px;background-color:#333333;border-bottom:1px solid #000000;}
#scRoll .bottom {width:20px;height:20px;background-color:#333333;}
via ブラウザでトップに戻る(一番下に移動する)方法いろいろ: 小粋空間

プロフィールの表示のタグを設置してみる

プロフィールの表示のタグを設置してみました

HTML
<!-- BEGIN profile_area -->
<div id="profile">
<div id="profileTitle">{profile_name}のプロフィール</div>
<div id="profileBody">{profile_description}</div>
</div>
<!-- END profile_area -->
CSS
#profile {
width:640px;
margin:0 auto 20px;
padding:10px;
background-color:#ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#profileTitle {border-bottom:1px solid #cccccc;}
#profileBody {}

カテゴリー・アーカイブ(月別/日別)表示で記事の本文を非表示にする

カテゴリーの表示・アーカイブ(月別/日別)の表示の最大表示件数は30件なので一覧表示として使いたいので本文を非表示にしてみました
※日別の表示はは本文表示しています
HTML
<div class="entryBody">{entry_description}</div>
CSS
body#cid .entryBody {display:none;}
body#cid .readMore {display:none;}
body#month .entryBody {display:none;}
body#month .readMore {display:none;}
日別の本文を非表示にしたい場合
CSS
body#day .entryBody {display:none;}
body#day .readMore {display:none;}

ブログ広告の表示を調整してみる

無料ブログなので記事毎に広告が表示されるので位置など調整してみました

CSS
div#gEntryAdContainer {margin:10px 0px 0px 0px;}
div#gEntryAdContainer img {margin: 0 0 0 165px; padding: 0 0 0 0;}
div#google_flash_inline_div {margin: 0 0 0 165px; padding: 0 0 0 0;}
.jugem_blog_ad_by {text-align:right !important;border-bottom:1px solid #f5f8ff !important;font-size:12px !important;}
.jugem_blog_ad_by a {color:#000000;text-decoration:none !important;}

tableタグを使って表を表示してみる

1 2 3 4 5 6
1-1 1-2 1-3 1-4 1-5 1-6
2-1 2-2 2-3 2-4 2-5 2-6
続きを読む >>