忍者ブログ

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

TOP部分の編集

前回(=Body部分とスクロールバーを指定する)はスタイルシートだけの変更でした。
今回はTOP部分の編集なので、HTMLも同時に編集するつもりです。

ここに機能として管理室へのログイン・ログアウトするリンクをつけたいと思います。
まずは、HTMLの確認から・・・
HTMLのBody部分の最初は
<body>
<div id="mainBlock">
<!--if_not_edit-->
<div id="TopBlock">
<div id="TopTitle">
<a href="<!--$g_url-->"><!--$g_title--></a>
</div>
<div id="TopExplanation">
<!--$g_explanation-->
</div>
</div>

続く・・・

2行目のmainBlockの指定までは終わっているので次は3行目からになります。
3行目の指定は忍者ブログの独自タグです。
<!--if_not_edit--><!--/if_not_edit-->
の間の「~」に入るものはコメント編集のページ以外で表示されるという意味です。
これは後々いじることになりますが、今はそっとしておきます。

次にTOP部分の編集に入ります。
編集はまず編集画面でできるものから先に指定してしまいます。
テンプレート編集画面TOP部分
ここでは、私の場合
背景色・・・#FFFFFF(白)
背景画像・・・未使用
タイトル文字サイズ・・・24px
タイトル文字色・・・#cc9966
高さ・・・100px
に指定しました。
忍者テンプレート6
↑が指定した結果になります。タイトルが大きくなりました。
そのせいかすこし上に詰まって見えてしまってます。
また、下の記事部分やサイド部分との境がなくちょっとぼやけた感じがするのでここにも枠線を下に指定したいと思います。

また、スタイルシートのほうは次のようになりました。
/*一番上のブロック(タイトルが書かれる場所)の設定*/
#TopBlock {
width:770px;
height:100px;
text-align: left;
background-color:#ffffff;
}
/*ページタイトル文字部分の設定*/
#TopTitle {
padding: 10px 0px 0px 20px;
font-weight:bold;
font-size:24px;
color:#cc9966;
}
/*ページタイトルの下に来るブログの説明文書*/
#TopExplanation {
padding: 10px 0px 0px 20px;
}

まず、TOP部分全体を指定しているのはTopBlockの部分なので、ここに枠線の指定を加えます。
また、上に詰まった感じをなくすために余白を指定します。
#TopBlock {
width:770px;
height:100px;
text-align: left;
background-color:#ffffff;
margin:0px;
padding:10px;
border-bottom:3px double #e6e6cc;

}

これで、TOP部分の下に2重の線が引かれると思います。

次の/*ページタイトル文字部分の設定*/はスタイルシートはこのままでよいと思いますが、外側の余白もついでなので指定しておき
/*ページタイトル文字部分の設定*/
#TopTitle {
padding: 10px 0px 0px 20px;
font-weight:bold;
font-size:24px;
color:#cc9966;
margin:0px;
}

とします。同様に/*ページタイトルの下に来るブログの説明文書*/にも外側の余白の指定をしておきます
/*ページタイトルの下に来るブログの説明文書*/
#TopExplanation {
padding: 10px 0px 0px 20px;
margin:0px;
}


ここまででとりあえず終わりにしてもいいのですが、見栄えを変えて機能を追加したいのでもう少し今度はまたHTMLを編集してみます。

先ほど上で表示したTOP部分に見出し用のタグを入れます。
見出しはその部分がページの中で重要ですよという意味を持ちます。
文字サイズを変えるだけではないのでご注意を・・・
<div id="TopBlock">
<div id="TopTitle">
<h1><a href="<!--$g_url-->"><!--$g_title--></a></h1>
</div>
<div id="TopExplanation">
<h2><!--$g_explanation--></h2>
</div>
</div>

<h*>と指定したのが乱しようのタグですが*の数字の部分が小さいほど重要度が増します。*は6まで設定できます。

この上で、タイトル部分の文字のリンクの指定を行います。
全体のリンク指定だと、カーソルが上に来たときにアンダーラインが出てしまうのでここではそれを消すことにします。
また、特にリンクだからといって色も変えないように設定しようと思います。

それではスタイルシートに次の指定を加えます。
h1 {
margin:0px;
padding:0px;
font-size:24px;
}
h1 a:link, h1 a:visited {
color :#cc9966;
text-decoration:none;
}
h1 a:hover, h1a:active {
color :#cc9966;
text-decoration:none;
}
h2{
margin:0px;
padding:0px;
font-size:12px;
font-weight:normal;
}

これを「フッターブロック用デザイン」とある直前、「トップブロック用デザイン」の項目の最後に入れます。

最後にログイン・ログアウトのリンクを作ろうと思います。

<div id="TopBlock">
<div id="TopTitle">
<h1><a href="<!--$g_url-->"><!--$g_title--></a></h1>
</div>
<div id="TopExplanation">
<h2><!--$g_explanation--></h2>
</div>
<div align="right">
<a href="<!--$g_url-->hoge/" title="管理部屋に入る">ログイン</a>│<a href="<!--$g_url-->hoge/Logout/" title="管理部屋から出る">ログアウト</a>
</div>

</div>

上の青い部分が付け加えたところです。

以上でTOP部分が完了です。
忍者テンプレート7
↑のようにログイン・ログアウトボタンが無事設置できました(^^)
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