忍者ブログ

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

ENTRYの編集に入る前に・・・

前回(=TOP部分の編集)でTOPにログイン・ログアウトボタンをつけました。

だんだんHTMLが長くなってくると</div>の入れ忘れが気になってきます。
なのでHTMLに「<!-- この中にメモ -->」のように注釈を入れて忘れないようにしておこうと思います。
HTMLでの注釈は「<!-- -->」ですが、スタイルシートでの注釈は「/*ここにメモ*/」ですのでお待ちがえなく(^^)

そんなことしなくても大丈夫!!という方は無視してください。

それから、コメント編集画面ではサイドメニューも何もかもが表示されません。
コメント編集画面でもTOP部分とサイドメニューは表示したいのでここで、閉じタグの位置を入れ替えます。
その際に注釈が役に立つと思います。
実際にHTMLを改造する前に</div>のあとに注釈を入れておくことにします。
例えばmainBlockなら
<div id="mainBlock">
ここに内容
</div><!-- //#mainBlock// -->

のようにして閉じタグを分かりやすくしておきます。
mainBlock以外にはTOP部分しか編集してないのであとはTOP部分だけこれをしておきます。
他の部分はやらないで置くと自分がどこまで編集したかが分かります♪…ということもあります。
これは、</div>をつけるたびにやっておくと便利です。

また、「ここからここまではエントリーブロックです」のようなメモもつけておくと便利かもしれません。

閉じタグの注釈と合わせると、トップ部分は次のようにしてます。
<!-- ▼TOP部分▼ -->
<div id="TopBlock">
<div id="TopTitle">
<h1><a href="<!--$g_url-->"><!--$g_title--></a></h1>
</div><!-- //TopTitle// -->
<div id="TopExplanation">
<h2><!--$g_explanation--></h2>
</div><!-- //TopExplanation// -->
<div align="right">
<a href="<!--$g_url-->hoge/">ログイン</a>│<a href="<!--$g_url-->hoge/Logout/">ログアウト</a>
</div><!-- //align-right// -->
</div><!-- //TopBlock// -->
<!-- ▲TOP部分▲ -->

こういう風にしておくと、後で見直すときに少しは楽になります(^^v

注釈を付けたら、さっそくコメント編集時に見える部分を変更します。

トップ部分を改造する前に、そっとしておいたタグをここでいじることにします。
<!--if_not_edit--><!--/if_not_edit-->の部分です。<!-- ▼TOP部分▼ -->~<!-- ▲TOP部分▲ -->でくくったとしたら、<!-- ▼TOP部分▼ -->の直前に<!--if_not_edit-->があるはずです。
また、<!--/if_not_edit-->のタグは、大分下のほうに行って「コメントを編集する」という言葉がある2.3行上にあります。

これは前にも書いたとおり、忍者ブログの独自タグで、このタグの間に入るものは「コメント編集のページ以外で表示される」という意味らしいです。
これに対応するというか、逆の意味、つまり「コメント編集のページでのみ表示される」というものが<!--if_edit--><!--/if_edit-->になるとあります。
<!--/if_not_edit-->が探せたら、そのすぐ下に<!--if_edit-->があると思います。<!--/if_edit-->は、<div id="FooterBlock">の上辺り、もうHTMLの最後のほうにあります。

さぁて、ちょっと混乱してきたので、HTMLの略図を書きます。

<div id="mainBlock">
<!--if_not_edit-->
<!-- ▼TOP部分▼ -->
<div id="TopBlock">
タイトルなどを表示
</div><!-- //TopBlock// -->
<!-- ▲TOP部分▲ -->

<!-- ▼プラグイン部分▼ -->
<div class="PluginBlock">
プラグインカテゴリー1から5を表示
</div><!-- //PluginBlock// -->
<!-- ▲プラグイン部分▲ -->

<!-- ▼エントリー部分▼ -->
<div id="EntryBlock">
記事・コメント投稿フォーム・コメント・トラックバック・ページリンクなどを表示
</div><!-- //EntryBlock// -->
<!-- ▲エントリー部分▲ -->

<!--/if_not_edit-->

<!-- ▼コメント編集部分▼ -->
<!--if_edit-->
コメント編集ページ
<!--/if_edit-->
<!-- ▲コメント編集部分▲ -->

<!-- ▼フッタ部分▼ -->
<div id="FooterBlock">
<!--CM1--> <!--CM2-->
</div><!-- //FooterBlock// -->
<!-- ▲フッタ部分部分▲ -->
</div><!-- //mainBlock// -->

大体こんな感じになっているかと思います。
これをどうするかというと、<!--if_not_edit--><!--/if_not_edit-->つまり上の2つの緑色のタグは削除します。
そして赤く示してあるタグを<!-- ▲コメント編集部分▲ -->の下に移動します。

その結果・・・
<div id="mainBlock">

<!-- ▼TOP部分▼ -->
<div id="TopBlock">
タイトルなどを表示
</div><!-- //TopBlock// -->
<!-- ▲TOP部分▲ -->

<!-- ▼プラグイン部分▼ -->
<div class="PluginBlock">
プラグインカテゴリー1から5を表示
</div><!-- //PluginBlock// -->
<!-- ▲プラグイン部分▲ -->

<!-- ▼エントリー部分▼ -->
<div id="EntryBlock">
記事・コメント投稿フォーム・コメント・トラックバック・ページリンクなどを表示



<!-- ▼コメント編集部分▼ -->
<!--if_edit-->
コメント編集ページ
<!--/if_edit-->
<!-- ▲コメント編集部分▲ -->

</div><!-- //EntryBlock// -->
<!-- ▲エントリー部分▲ -->


<!-- ▼フッタ部分▼ -->
<div id="FooterBlock">
<!--CM1--> <!--CM2-->
</div><!-- //FooterBlock// -->
<!-- ▲フッタ部分部分▲ -->
</div><!-- //mainBlock// -->

となります。
これでコメントの編集のときにも、タイトルなどが表示された詳細ページのままになる・・・ハズです。
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