忍者ブログ

Customize in Ninja Blog

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

2017.05│ 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ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

エントリー部分の編集

ようやくエントリー(記事)部分に入ります。

今回は、記事を表示している部分をカスタマイズしようと思います。
具体的には、記事タイトル・本文・日付などが表示されている部分です。

どういう風に表示させるか悩むところです。

ここで作成・デザインするものを列挙しておきます。
・日付、時間
・タイトル
・記事編集リンク
・カテゴリ
・著者
・本文
・追記のリンク
・追記本文
・コメントへのリンク、数
・トラックバックへのリンク、数
・引用文
・部分引用
といったところです。
今回全部は無理かもしれないですo( _ _ )o
エントリー部分(id=EntryBlock)の冒頭にあるページリンク
<div class="PageLinkBlock">
<!--pagelink_10--> [<!--$pagelink_10_link-->]
<!--/pagelink_10-->
</div><!-- //PageLinkBlock// -->

は、前後5ページ分のリンクだそうです。
初期設定だと「[1][2][3]・・・」のように表示されているもののようです。
[]でくくられれているが味気ないし、ページリンクだということをもうちょっと分かるようにしてみようかと思います。

<div class="PageLinkBlock">
<!--pagelink_10-->*頁<!--$pagelink_10_link--> <!--/pagelink_10-->
</div><!-- //PageLinkBlock// -->

という感じにしてみました。
実際の表示「*頁1 *頁2 *頁3・・・・」のように表示することにしました。
(3/20追記:前後5ページへのリンクの表示をページ別表示ににあるとおり、表示を変えました)

この10ページリンクの下に<!--entry-->とありますので、ここからが本格的に記事を表示させる部分です。

まずは、忍者ブログの編集機能を利用してみます。
テンプレート編集画面エントリー
編集機能はこのような感じになってます。
ある程度はありますが、あまり細かくは設定できなそうです。
とりあえずここでは
全体の背景色・・・#ffffff(白)
全体の背景画像・・・網目の記事タイトルのアイコン 繰り返しなし 位置:左の中央
記事タイトルの背景色・・・#f5f5dd(ベージュ)
記事タイトル文字・・・サイズ:14px 色:#503030(こげ茶)
記事タイトル余白・・・上下右すべて0px 左は20px
記事タイトル周りのボーダー・・・線を引く 上:0px 右:0px 下:1px 左:0px 色:#cccccc(灰色)
記事ブロックの背景色・・・#ffffff(白)
記事ブロックの背景画像・・・画像使用なし
記事本文の文字・・・サイズ:12px 色:#656565(濃灰色)
記事へのリンク部分の文字・・・サイズ:10px 色:#503030(こげ茶)
記事とリンクの境界線・・・線を引く 太さ:1px 色:#cccccc(灰色)
としました。これをプレビューで見るとこんな感じになります。(記事のアイコンが入ってない状態ですが・・・)
忍者テンプレート8
なんだかちょっと変です。それはこれからスタイルシートで直すこととします。

設定終了後の「記事ブロック用デザイン」のところのスタイルシートをみてみます。
まずは一番上の/*記事繰り返し処理全ての部分の設定*/です。
設定終了後は青字の部分はありません。青字は追加したところです
#EntryBlock {
width: 550px;
float: left;
text-align: left;
margin:0px;
padding:0px;

}
これは余白の指定を追加しただけです。

次は、/*記事表示部分の背景や余白等の設定*/です。

.EntryInnerBlock {
padding: 10px;
text-align: left;
margin:5px 0px 5px 0px ;
}
これも余白の設定の追加のみです。

こんどは/*各記事タイトル部分の設定*/の指定になります。
.EntryTitle {
text-align: left;
border-style:solid;
background-color:#f5f5dd;
font-size:14px;
color:#503030;
padding-top:0px;
padding-right:0px;
padding-bottom:0px ;
padding-left:20px ;
border-top-width:0px;
border-right-width:0px;
border-bottom-width:1px;
border-left-width:0px;
border-color:#cccccc;
line-height:20px;
}

paddingやborderの要素は統合したくなりますが、編集機能が使えなくなりそうなのでそのままにします。
追加は行間の指定です。

/*各記事やコメント、トラックバックなどの総合のブロック部分*/は設定後の指定のままです。
.EntryTextBox {
margin: 5px 0px;
background-color:#ffffff;
}


/*記事本文が記載される部分*/も今のところは設定後のままです。

.EntryText {
padding: 10px;
font-size:12px;
color:#656565;
}


/*追記文書が記載される部分*/は追記があるときの詳細記事へのリンクです。右寄せになっているのを左寄せにします。
.EntryPsText {
padding: 20px;
text-align: right;
}

これは右寄せになっているので、左寄せにすることにします。
.EntryPsText {
padding: 20px;
text-align: left;
}

これで左寄せになりました。

今度は/*記事へのリンク(コメントやトラックバック等)の背景*/とあります。
各記事の一番下にあるコメント数などを表示してあるところです。
ここは、編集機能で設定したborderがちょっと変なので、直したいと思います。
.EntryFooter {
text-align:right;
padding:5px;
border-style:solid;
color:#503030;
border-top-width:1px;
border-color:#cccccc;
font-size:10px;
border-left:0px;
border-right:0px;
border-bottom:0px;

}

枠線をこの部分の ̄にだけ表示するようにしました。

以下のスタイルシートは、後ほどHTMLを改造してから使うことになる・・・と思います。今のところはこのままで。
/*記事の投稿者名が記載されている部分*/
.EntryUserName {
}
/*記事を投稿した日が記載されている部分*/
.EntryWriteDate {
margin-left: 5px;
}
/*記事のカテゴリ名が記載されている部分*/
.EntryCategory {
margin-left: 5px;
}
/*記事へのコメントリンクが記載されている部分*/
.EntryComment {
margin-left: 5px;
}
/*記事へのトラックバックリンクが記載されている部分*/
.EntryTrackback {
margin-left: 5px;
}


最後に/*次の記事やHOMEへのリンクが表示される背景部分*/です。
ナビの部分なので文字サイズを他の部分より少し小さくしておこうかなと思います。

.PageLinkBlock{
text-align:center;
padding:10px;
margin:5px 0px;
font-size:10px;

}

これをプレビューすると以下の感じになります。
忍者テンプレート9

このくらいで大体のスタイルシートの指定は終わりました。
でも、これだと個人的に使い勝手が悪いので、次回HTMLを編集してさらにカスタマイズすることにします。
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
04

06
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