忍者ブログ

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

2017.01│ 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

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

エントリー部分の編集 もう少し変化させる

前回(=エントリー部分の編集)もエントリー部分を編集しました。
今回は、もうちょっと表示に変化をつけたいと思います。

具体的には、日時を記事タイトルの下に持ってきて、その隣に記事の編集へのリンクを、記事の一番最後にページの上へのリンクをつけたいと思います。

また、記事タイトルも、詳細ページではリンクしている必要がないと思うのでそれもはずしたいと思います。

まずは、上から順にタイトルからいじっていきます。

記事タイトルを表示しているのは、
<div class="EntryTitle">
<a href="<!--$entry_link-->"><!--$entry_title--></a>
</div><!-- //EntryTitle// -->
の部分です。
これを、記事詳細ページ以外では、記事詳細ページへのリンクに、記事詳細ページではリンクにしないように指定したいと思います。また、追加して、記事タイトルに見出しとしての意味づけもしたいと思います。h1はブログタイトル、h2はブログ説明文としているので、記事タイトルはh3を振ることにします。

これには、条件式を使って
<div class="EntryTitle">
<!--if_entry-->
<h3><!--$entry_title--></h3>
<!--/if_entry-->

<!--if_not_entry-->
<h3><a href="<!--$entry_link-->"><!--$entry_title--></a></h3>
<!--/if_not_entry-->
</div><!-- //EntryTitle// -->
とします。

ここまでHTMLをしてら、新しく入れた<h3>に対するスタイルシートを指定します。
/*記事タイトルの指定*/
h3 {
margin:0px;
padding:2px 0px 0px 0px;
font-size:14px;
font-weight:normal;
}

さらに、リンクの状態を通常のリンクと変えて
/*記事タイトルのリンク色の指定*/
h3 a:link , h3 a:visited {
color :#503030;
text-decoration:none;
}
h3 a:hover , h3 a:active {
color :#cc9966;
text-decoration:none;
}
とすることにします。
これらのh3に関するスタイルの指定はスタイルシートの「記事ブロック用デザイン」の最後に付け加えました。

今度は日時の表示を記事タイトルの下に移動させたいと思います。
HTMLに
<span class="EntryWriteDate">
<a href="/Date/<!--$entry_year--><!--$entry_mon--><!--$entry_day-->/"><!--$entry_year-->/<!--$entry_mon-->/<!--$entry_day--> (<!--$entry_wday-->)</a>
</span&gt
とある部分を切り取ります。
このままだとこれはこのように表示され、この日付へのリンクとなってます。
2006/03/19 (Sun)

そしてこれを次のように変更します。このとき記事編集へのリンクもつけておいてしまいます。
表示形式は、
2006年03月19日(日) 00時00分00秒 │記事編集

アンダーラインを引いたところはリンクになります。
このHTMLは次のようになります。
<div class="EntryWriteDate">
<a href="/Date/<!--$entry_year--><!--$entry_mon--><!--$entry_day-->/" title="<!--$entry_year-->年<!--$entry_mon-->月<!--$entry_day-->日(<!--$entry_youbi-->)の記事へ"><!--$entry_year-->年<!--$entry_mon-->月<!--$entry_day-->(<!--$entry_youbi-->)</a>
<!--$entry_hour-->時<!--$entry_min-->分<!--$entry_sec-->秒
│<a href="/hoge/EditEntry/<!--$entry_no-->/" title="‘<!--$entry_title-->’を編集">記事編集</a>
</div><!-- //EntryWriteDate// -->
基本はクラス指定は変化させず、div要素に変化させただけです。
これを記事タイトル下、記事本文上に挿入します。
</div><!-- //EntryTitle// -->
ここに挿入
<div class="EntryTextBox">


HTMLに挿入し終えたら、スタイルを編集しておきます。
/*記事を投稿した日が記載されている部分*/というものがスタイルシートにありますのでそこで編集します。
初期設定だと
.EntryWriteDate {
margin-left: 5px;
}
となっているのを
.EntryWriteDate {
margin:0px 5px 0px 0px
padding:0px;
text-align:right;
font-size:10px;
}
と指定しなおします。これで記事タイトル下に日付がきました。

今度は追記へのリンクを編集します。前に右寄せになっているのを左寄せにしましたが今度はリンクの色などを変えたいと思います。
左寄せにした時点でスタイルシートに
/*追記文書が記載される部分*/
.EntryPsText {
padding: 20px;
text-align: left;
}
のように指定されてます。文字サイズを少し大きくしておきます
/*追記文書が記載される部分*/
.EntryPsText {
padding: 20px;
text-align: left;
font-size:13px;
}
そしてこの部分のリンクの指定を
/*追記文書が記載される部分のリンク*/
.EntryPsText a:link {
color:#503030;
text-decoration:none;
background-color:#f5f5cc;
}
.EntryPsText a:visited{
color:#503030;
text-decoration:none;
background-color:#f5f5cc;
}
.EntryPsText a:hover {
color:#cc9966;
text-decoration:none;
background-color:#ffffff;
}
.EntryPsText a:active{
color:#cc9966;
text-decoration:none;
background-color:#ffffff;
}
のようにして、また、スタイルシートの「記事ブロック用デザイン」の最後に付け加えておきました。

最後に、クラス名だとEntryFooterとなっている部分の編集です。先ほどここから日付の部分を切り取っているのでこうなってます。
<div class="EntryFooter">
<span class="EntryUserName">│<!--$entry_name--></span>
<span class="EntryCategory">
<a href="<!--$entry_category_link-->"><!--$entry_category--></a>
</span>
<!--if_tb_receipt-->
<span class="EntryTrackback">
<a href="<!--$entry_link-->#trackback">Trackback(<!--$entry_trackback_num-->)</a>
</span>
<!--/if_tb_receipt-->

<!--if_cm_receipt-->
<span class="EntryComment">
<a href="<!--$entry_link-->#comment">Comment(<!--$entry_comment_num-->)</a>
</span>
<!--/if_cm_receipt-->
</div><!-- //EntryFooter// -->
これを、私の場合カテゴリー名が長いので、Trackback、Commentはカタカナにしてマウスを置いたときに噴出しで説明しておこうかと思います。また、コメントとタイトルの表示順を入れ替えました。さらに最後にページの一番上に戻るリンクをつけることにします。
表示のイメージは
投稿者:名前│カテゴリー│コメント:0│トラックバック:0│TOP
のような感じです。
その結果のソースはこちら
<div class="EntryFooter">
<span class="EntryUserName"></span>
<span class="EntryCategory">
<a href="<!--$entry_category_link-->" title="このカテゴリーの一覧へ"><!--$entry_category--></a>
</span>
<!--if_cm_receipt-->
│<span class="EntryComment">
<a href="<!--$entry_link-->#comment" title="‘<!--$entry_title-->’へのコメント">コメント:<!--$entry_comment_num--></a>
</span>
<!--/if_cm_receipt-->
<!--if_tb_receipt-->
│<span class="EntryTrackback">
<a href="<!--$entry_link-->#trackback" title="‘<!--$entry_title-->’へのトラックバック">トラックバック:<!--$entry_trackback_num--></a>
</span>
<!--/if_tb_receipt-->
│<a href="./#pagetop" title="このページの一番上へ">TOP</a>
</div><!-- //EntryFooter// -->


さらにページのトップに戻るために一番初めの<body>の直後に
<a name="pagetop"></a>
を入れておきます。
この部分に対応するスタイルシートも変更しておきます。
/*記事の投稿者名が記載されている部分*/
.EntryUserName {
margin:0px;
}
/*記事のカテゴリ名が記載されている部分*/
.EntryCategory {
margin:0px;
}
/*記事へのコメントリンクが記載されている部分*/
.EntryComment {
margin:0px;
}
/*記事へのトラックバックリンクが記載されている部分*/
.EntryTrackback {
margin:0px;
}

ここまでで、記事を実際に表示する部分の改造は終了です。

なんだか少しは自分のイメージに合ってきたかな?と思います。(というか思いたいところ)
プレビューで見るとこういう風になりました。
忍者テンプレート10
ランキングとかアドセンス広告は無視してください。

次は、コメント投稿部分を改造しようと思ってます。
PR
*COMMENT-コメント-
*COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
 
Name:
Title:
Mail:
Url:
Color:
Decoration: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message:
Pass: ※編集時に必要です。
Secret:  ※チェックすると管理者へのみの表示となります。
*TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
 徒然倶楽部 →こちらは記事の内容を下に移転&閉鎖しました。
 現在は十六夜's Blogがメインブログになってます。
 Alphaの小部屋・・・BOOKLOGで作った本棚
 Mixi・・・参加中のSNS
 十六夜-the sixteeth night-・・・現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況:Windows XP SP2
ブラウザ:主にFirefox 他IE、Opera等
解像度:1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ1件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
12

02
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
■CM&TB
●コメント

●トラックバック
Scrollbar ONorOFF
■Thanks
テンプレートを作成するに当たってよく利用させていただいているサイト様です。
■QRcode
QRコードをクリックするとメールフォームが開きます。
メールフォームでPCから携帯にこのブログのURLを送ることができます

もし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。

無料体験できるのでぜひお試しください♪
■Template
○公開したテンプレのプレビュー

ブルーチャイナ
詳細
ブルーチャイナ
詳細
Gray2block
詳細
China
詳細
Gray
詳細
JapanBlue
詳細
碧
詳細
蒼
詳細
○公開された携帯用テンプレのプレビュー

The Leaf
詳細
○忍者ブログで共有化中のテンプレ

Alternation-緑×白-
記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
パンくずナビも付いてます♪

The Leaf
初の携帯用テンプレート。さわやかな感じに仕上げてみました
絵文字使用。トップページにカテゴリー表示アリ。

ブルーチャイナ
涼しげなチャイナ風左右メニューテンプレ。
China」の色違いのような感じですが、配置は違いますのでご注意ください。
※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
ピンクチャイナ

Gray2block
ノート風テンプレ「Gray」の2カラム版です。
China
かわいい系の3カラムテンプレート。イメージはチャイナ風♪
同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
China-BlueVer-

Gray
灰色のノート風罫線テンプレ。追記開閉式の3カラムです。

JapnBlue
サッカー日本代表ユニフォームなテンプレ。追記開閉式
※このテンプレには2カラムバージョンもあります。
JapanBlueの2カラム版

碧-midori-
淡いパステルグリーンのテンプレ。追記開閉式


画像使用なしの5ブロックテンプレ。

Scrollbar ONorOFF

○広告




■Recommend
ルナエンバシージャパン

ストレイシープがなんだかかわいくて好き(^-^*)

■Visiter