忍者ブログ

Customize in Ninja Blog

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

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

コメント部分の編集

大分、やったつもりでいたものの、まだ編集機能がついている部分はコメント部分、トラックバック部分、コメント投稿部分、カレンダー部分の4つ残ってます。

今回は、コメント部分を編集することにします。

いつものとおり、始めに編集機能で指定してみてから、じかにいじっていくことにします。


コメントの編集部分は次のようになってます。
テンプレート編集画面コメント編集部分
ここをこんな風に指定しました。

・コメント記事全体の背景色: #ffffff
・コメント記事全体の背景画像:なし
・コメントのタイトル背景色: #ffffff
・コメントのタイトル背景画像:なし
・コメントのタイトル文字: サイズ 12px 色 #503030
・コメントのタイトル余白: すべて5px
・コメントタイトル周りのボーダー: 種類 隆起した線 すべて1px 色 #cccccc
・コメント部分の背景色: #ffffff
・コメント部分の背景画像:なしwi
・コメント本文の文字: サイズ 12px 色 #656565
・コメント情報部分の文字: サイズ 10px 色 #503030
・本文部分と情報部分の境界線: 種類 線を引く 太さ:1px 色 #656565

これをプレビューで見てみ対のですが、うまく見れないのでかわりにテスト画面をみるとこんな感じになります。
忍者テンプレート13
相変わらずこれだけだと変ですね。

さらに、編集機能を使ってコメントフォーム部分を指定します。
テンプレート編集画面コメントフォーム
ここは、始めはこんな感じに指定しておきました。
・コメントフォームの背景色: #ffffff
・コメントフォームの背景画像:なし
・コメントフォーム余白: 上下左右10px
・フォーム見出しの背景色: #f5f5f5
・コメント見出しの背景画像:なし
・見出し部分の余白:上下左右5px
・見出し部分のボーダー: 種類 破線 上下左右1px 色 #cccccc
・見出しの文字:サイズ 12px 色 #656565
・フォーム部分の背景色: #f5f5f5
・フォーム部分の背景画像:なし
・フォーム部分の余白:上下左右5px
・フォーム部分のボーダー:種類 破線 上下左右1px 色 #cccccc
・フォームの背景色:#ffffff
・フォームの背景画像:なし
・フォーム周りのボーダー:種類 二重線 上下左右3px 色 #cccccc
この指定でテンプレートを保存してみてみるとこんな感じに見えます。
忍者テンプレート14
これはあんまり変える必要なさそう♪

で、ここまで編集機能を使って編集したのですが、編集機能にない項目とか、いろいろあって次のようにスタイルシートを書きました。
(たぶん本当はこれじゃ駄目だと思うけど、見えてればいいかと思って。。)

「各コメント表示部分の設定」はこうしました。
/*コメント全体の設定*/
.CommentBlock{
margin:10px 0px;
padding:10px;
background-color:#ffffff;
}
/*この記事にコメントする と書かれてる部分の設定*/
.CommentMenuTitle{
margin:10px 0px ;
padding:0px;
text-align: left;
color:#cccccc;
font-size:14px;
font-weight:bold;
}
/*コメントのタイトル、コメント、コメント情報の全ての背景部分*/
.CommentTextBox{
margin:0px;
padding:0px;
border :1px dotted #cccccc;
}
/*コメントのタイトル部分*/
.CommentTitle{
text-align: left;
background-color:#ffffff;
font-size:13px;
color:#656565;
padding:5px 10px;
border-bottom :1px dotted #cccccc;
font-weight:bold;
margin:0px;
}
/*コメント部分*/
.CommentText{
padding: 10px;
background-color:#ffffff;
font-size:12px;
color:#656565;
margin:0px;
}
/*投稿者や投稿時間などが表示されている部分*/
.CommentFooter{
text-align:right;
padding:0px;
font-size:10px;
color:#656565;
border-top :1px dotted #cccccc;
margin:0px;
}
/*投稿者名の部分*/
.CommentUserName{
margin-left: 0px;
}
/*投稿者のホームページへのリンク部分*/
.CommentURL{
margin-left: 0px;
}
/*投稿された時間が記載されている部分*/
.CommentWriteDate{
margin-left: 0px;
}
/*コメント編集へのリンク部分*/
.CommentEdit{
margin-left: 0px;
margin-right:10px;
}
/*コメントを投稿するフォーム全体の設定*/
.CommentFormBlock{
margin-bottom:20px;
padding-top:10px ;
padding-right:10px ;
padding-bottom:10px ;
padding-left:10px ;
}
/*コメントフォーム用テーブル*/
.CommentFormTable{
background-color:#ffffff;
margin:0px auto;
}
/*コメントフォームTHタグ設定*/
.CommentFormTh{
padding-top:5px;
text-align:right;
background-color:#f5f5f5;
padding-right:5px ;
padding-bottom:5px ;
padding-left:5px ;
border-style:dashed;
font-size:12px;
color:#656565;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-color:#cccccc;
}
/*コメントフォームTDタグ設定*/
.CommentFormTd{
padding-top:5px;
text-align:left;
background-color:#f5f5f5;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;
border-style:dashed;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-color:#cccccc;
}
/*コメントフォーム送信ボタンのTDタグ設定*/
.CommentFormSubmit{
text-align:center;
background-color:#f5f5f5;
border-style:dashed;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-color:#cccccc;
}
/*inputタグやtextareaの設定*/
input.CommentForms{
background-color:#ffffff;
border-style:double;
border-top-width:3px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:3px;
border-color:#cccccc;
width:200px;
}
textarea.CommentForms{
background-color:#ffffff;
border-style:double;
border-top-width:3px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:3px;
border-color:#cccccc;
width:350px;
height:300px;
}
/*投稿者や投稿時間などが表示されている部分のリンク*/
.CommentFooter a:link {
color:#656565;
text-decoration:underline;
}
.CommentFooter a:visited {
color:#656565;
text-decoration:underline;
}
.CommentFooter a:hover{
color:#cccccc;
text-decoration:none;
}
.CommentFooter a:active {
color:#cccccc;
text-decoration:none;
}


もう一箇所「コメント -> 管理者返信部分デザイン」の指定はこうなりました。
.CommentResBlock {
margin:0px;
padding:20px;
background-color:#ffffff;
border-left:1px dotted #cccccc;
border-right:1px dotted #cccccc;
border-bottom :1px dotted #cccccc;
}

.CommentResBox {
margin:0px 0px 0px 30px;
padding:10px;
background-color:#f5f5f5;
}

.CommentResTitle {
font-size:13px;
font-weight:bold;
border-bottom:1px dashed #cccccc;
}

.CommentResText {
padding:10px 0px 0px 10px;
}

.CommentResFooter {
text-align:right;
margin:5px 0;
border-top:1px dashed #cccccc;
font-size:10px;
}

これを実際に見てみるとこのようになります。
忍者テンプレート15
忍者テンプレート16
注:HTMLを少し変えてあります。

ここと同じように見えるようにトラックバック部分も編集。
テンプレート編集画面トラックバック部分
指定はもうコメントとほぼ同じなので省略。

これで後はカレンダーだけです。

ここまでやってきて思ったこと。
編集機能、無理に使わないほうが早くできるそう。
それとHTML4.01はなれてなくて使いにくい・・・

今度作るときは慣れているXHTML1.0で作ることにしようっと。
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
06

08
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