忍者ブログ
*ADMIN*

Customize in Ninja Blog

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

≪ 2024.11│ 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 ≫
2024-11-22(Fri)

[PR]

×

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

author:あるふぁ [01:25:36]│ Comment(-) │ Trackback(-) │〆

│▲

2006-06-03(Sat)

エントリーの見え方―Ninjaの機能を使う

Ninjaにも絵文字機能など、新機能がいろいろと加わったので改めて見え方をテストしています。

文章の装飾

記事入力欄の上のボタンを使うと文章に色をつけたり、文字の大きさを大、中、小と変えたり、太くしたりできる。
そのほかにも、文字のスタイルを斜体にしたり、打ち消し線を引いたり、下線を引いたりできる。
さらにはリンクテキストはこのようになる。

絵文字

絵文字はボーダフォン、ドコモ、AUが使用可能。

絵文字は記事タイトルにも入力可能。（この記事のタイトル参照）
記事タイトルへの入力法は、記事本文で絵文字のコードを出し、それをタイトル欄のところに貼れば反映される。

文章の装飾―引用文―
この部分は引用文である。
<blockquote>～</blockquote>で囲まれた文が引用文となる。
引用文でも、文章の装飾は本文と同じようにできる。
記事入力欄の上のボタンを使うと文章に色をつけたり、文字の大きさを大、中、小と変えたり、太くしたりできる。
そのほかにも、文字のスタイルを斜体にしたり、打ち消し線を引いたり、下線を引いたりできる。
もちろん絵文字も可。ボーダフォン、ドコモ、AU
さらにはリンクテキストはこのようになる。


ここまでが通常の本文。この先は追記に書くことにする。
追記を書くには、「続きを書く」というところをクリックすると本文の入力欄と同じような入力フォームが出てくる。

ここからが追記文章となる。

追記へのリンクテキストをクリックすると追記が開くのは、javascriptを組み込んでいるため。通常は、この記事の詳細ページ（http://■■■.blog.shinobi.jp/Entry/●●/）へと飛ぶのが一般的。

追記へのリンクテキストを個別に変更するには、「詳細設定」というところをクリックすると一番下に投稿時間の設定、追記のリンクテキスト、記事の状態、テキストフォーマット、TB/RSSのPING送信、コメント、トラックバックの設定ができる画面がでる。
ここの「追記のリンクテキスト」にリンク文字にしたいテキストを入力すれば
全体で変える場合は、管理画面の環境設定から、ブログの詳細設定へといき「デフォルトの「つづきを読む」文言」を入力すればよい。

文章の装飾―追記文―

追記でも当然同じように装飾可能。
記事入力欄の上のボタンを使うと文章に色をつけたり、文字の大きさを大、中、小と変えたり、太くしたりできる。
そのほかにも、文字のスタイルを斜体にしたり、打ち消し線を引いたり、下線を引いたりできる。
もちろん絵文字も可。ボーダフォン、ドコモ、AU
さらにはリンクテキストはこのようになる。

追記分の引用でも同様だか、省略。

まとめ：文章の修飾コード

・文字色：<span style="color:色コード">装飾するテキスト</span >
・文字サイズ：<span style="font-size:大きさの指定">装飾するテキスト</span >
　※大きさの指定は大＝220％、中＝150％、小＝70％が初期値。この初期値を変えるには、管理画面から環境設定⇒管理画面の設定⇒新しい記事を書くの設定で変更できる。
・太字：<strong>装飾するテキスト</strong>
・斜体：<i>装飾するテキスト</i>
・打ち消し線：<s>装飾するテキスト</s>
・下線：<u>装飾するテキスト</u>

画像

画像は、記事入力欄のカメラのボタンで文章に挿入できる。通常挿入されるのは、サムネイル画像のほうである。
ひまわり←画像サイズ373*336

サムネイル画像の大きさは、管理画面の環境設定からブログの詳細設定⇒サムネイルの設定で、縦幅と横幅を決めることができる。（ちなみにこのブログは縦横共に150で設定）
サムネイルはこの設定した幅よりも大きいものを小さくして表示する。したがって、コレより小さいものは、そのまま表示するのと変わりなく見える。

碧のサンプル画←画像サイズ100*100

画像を挿入するときのコードは次のようになっている。
<a href="http://file.ユーザーID.blog.shinobi.jp/画像の名前" target="_blank"><img src="http://file.ユーザーID.blog.shinobi.jp/Img/画像のID番号/" border="0" alt="画像のタイトル"></a>

・ユーザーID･･･ブログのURLの一部になっているもの。ホスト名。
・画像の名前･･･画像のファイル名。上の向日葵のがぞうなら「himawari.gif」の部分。
・target="_blank"･･･新しく別窓を開いてUPした本来の画像を表示するという意味。別窓表示したくない場合はここを削除。
・画像のID番号･･･UPした順番に画像に振られる番号。この番号でサムネイルを作っている。
・border="0"･･･画像の枠を決めている。スタイルシートに枠を指定していても、ここに「"0"」と指定されていると反映されない。
・画像のタイトル･･･画像をUPしたときにタイトルを入力していれば、ここに表示される。実際には、マウスを画像の上においたときにチップとして表示される。

サムネイルを使わない場合画像
サムネイルを使わないで画像を表示するには次のようにコード組み替える。
<img src="http://file.ユーザーID.blog.shinobi.jp/画像の名前" border="0" alt="画像のタイトル">

実際の表示は下のようになる。
ひまわり


ちなみに、向日葵の画像は、背景が透過しているのだが、サムネイルでは反映されていない。
PR

author:あるふぁ [19:45:44]│ Comment(4) │Trackback() │〆

プレビュー用記事

│▲

エントリーの見え方―HTMLでの装飾← HOME →お知らせとお詫び
＊COMMENT-コメント-
▽コメントというより･･･
レスの部分かな？
posted by あるふぁ ::2006-06-08-Thu 13:12:44 ::EDIT
△Re:コメントというより･･･
>レスの部分かな？

チェックしてみる
あるふぁ│2006-06-08-Thu 13:13
▽今気づいた
タイトルに絵文字使うとひたすらへんなことに･･･
posted by あるふぁ URL ::2006-06-08-Thu 13:06:15 ::EDIT
△Re:今気づいた
>タイトルに絵文字使うとひたすらへんなことに･･･

返信テスト･･･

修正版UPしないとかなりヤバイ･･･
あるふぁ│2006-06-08-Thu 13:07
▽コメントテスト
コメントがだんだん多くなるとへんなことになるらしい･･･
posted by あるふぁ URL ::2006-06-08-Thu 13:05:42 ::EDIT
△Re:コメントテスト
レスもテスト。

どんなかんじかなぁ？
あるふぁ│2006-06-08-Thu 13:07
▽コメントのテスト
コメントのテストをしています。
絵文字：ボーダフォン　ドコモ　AU

リンク：<a href="./">top</a>
リンクテキストは反映されないっぽい。

その他はどうなのか？
・文字色：<span style="color:#ff0000>装飾するテキスト</span >
・文字サイズ：<span style="font-size:150%">装飾するテキスト</span >
・太字：<strong>装飾するテキスト</strong>
・斜体：<i>装飾するテキスト</i>
・打ち消し線：<s>装飾するテキスト</s>
・下線：<u>装飾するテキスト</u>
・強調：<em>装飾するテキスト</em>
・太字：<b>装飾するテキスト</b>

画像は？

リンク付きサムネイル
<a href="http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/72" target="_blank"><img src="http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/72?w=150&h=135" alt="ひまわり" border="0"></a>

サムネイルのみ
<img src="http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/72?w=150&h=135" alt="ひまわり" border="0">

画像を直接貼る
<img src="http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/72" alt="ひまわり" border="0">

以上より、コメントには画像は貼れないよう。まぁこれは普通ですよね。
posted by あるふぁ URL ::2006-06-04-Sun 03:03:59 ::EDIT
△Re:コメントのテスト
>コメントのテストをしています。
>絵文字：ボーダフォン　ドコモ　AU
>
>リンク：<a href="./">top</a>
>リンクテキストは反映されないっぽい。
>
>その他はどうなのか？
>・文字色：<span style="color:#ff0000>装飾するテキスト</span >
>・文字サイズ：<span style="font-size:150%">装飾するテキスト</span >
>・太字：<strong>装飾するテキスト</strong>
>・斜体：<i>装飾するテキスト</i>
>・打ち消し線：<s>装飾するテキスト</s>
>・下線：<u>装飾するテキスト</u>
>・強調：<em>装飾するテキスト</em>
>・太字：<b>装飾するテキスト</b>
>
>画像は？
>リンク付きサムネイル
><a href="http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/72" target="_blank"><img src="http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/72?w=150&h=135" alt="ひまわり" border="0"></a>
>
>サムネイルのみ
><img src="http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/72?w=150&h=135" alt="ひまわり" border="0">
>
>画像を直接貼る
><img src="http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/72" alt="ひまわり" border="0">
>
>以上より、コメントには画像は貼れないよう。まぁこれは普通ですよね。

コメントをそのままレスにしてみました。
あるふぁ│2006-06-04-Sun 03:18
＊COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
　
Name：
Title：
Mail：
Url：
Color：
◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆
Decoration： Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message：
Pass： ※編集時に必要です。
Secret： 　※チェックすると管理者へのみの表示となります。
＊TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
←No.90No.89No.88No.87No.86No.64No.85No.38No.84No.83No.82→
■Category
■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一括送信サイトです。ここ１件に送るだけでいろいろなところに送ってもらえます♪

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

■Calendar
10

12
日 月 火 水 木 金 土
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
■CM&TB
●コメント

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

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

    無料体験できるのでぜひお試しください♪
    ■EntryNavigation
    ≪ *90*89*88*87*86*64*85*38*84*83*82* ≫
    ■Template
    ○公開したテンプレのプレビュー

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

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

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

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

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

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

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

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

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

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

    Scrollbar ONorOFF

    ○広告




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

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

    ■Visiter