最新情報

  • 2020/10/30
    ブログを更新しました。
    2018/04/30
    冷やし中華...じゃなかった、Twitterはじめました。

このサイトに関して



当サイトご利用上の注意

  • 記事へのリンクはご自由になさって結構です。
    但し、画像等、記事内のコンテンツの無断転載、画像への直接リンクによるまとめサイト等他サイトへの転載は固くお断りします。

    2019/04/14現在、コメント欄の認証方法やNGワード設定等、時々変更しています。メールアドレスの入力が求められる場合、とりあえずメールアドレスの形をしていれば(@の前は適当でも)OKです。

    上記に関し、詳しくは下記バナーから「当サイトについて」をお読み下さい。

    コメントは承認無しで掲載されますが、ココログの仕様で投稿されたコメントが画面に反映されるのにはしばらく時間が掛かります。ご了承下さい。



    このブログの趣旨など。コメント欄はゲストブックとしてご利用下さい。


    記事についてご不明な点などはメールでは回答しかねますので、各記事のコメント欄にお願いします。




特設コーナー

  • Banner_wuhanvirus2

    banner_kunimori01


















外部サイト(その他)

  • 台湾の名前で東京オリンピック参加を!署名活動


    憲法改正を実現する1,000万人ネットワーク 美しい日本の憲法をつくる国民の会









管理人ポータル

大師小同窓会関連












  • 画像を提供、あるいはオリジナル写真を貸して下さる方は管理人までご連絡ください。


我が町!大師の情報

  • 大師の歴史・町名の由来

各種ノウハウ集



私家版スクラップブック

  • ブログ主の個人的スクラップブック集です。

    100円ショップの木箱やディスプレイケースなどを利用したドールハウスのまとめページです。

    メンテナンス中のため一時アクセスを制限しています。

友達の輪・お薦めSHOP

  • CHITIのボディデザイン
    魅せるボディデザイン/カラダ作りの本質とは!?
    川崎市在住のインストラクターが近隣のスポーツ施設や公園・ご自宅でのパーソナルトレーニング受け付けます。




    かわさき楽大師

    ファッション・雑貨の店 「+R」

    ヘアーサロンE'(イーダッシュ)


« 横浜美術館 『ロバート・キャパ/ゲルダ・タロー 二人の写真家展』を観てきた | トップページ | 【ブログの楽しみ方】他の記事の任意の箇所にリンクするには?【ココログ】 »

2013/02/22

【ブログの楽しみ方】段落(領域)を枠線で囲む/背景色をつける【ココログ】

はじめに

この説明は、過去の記事で説明した基本的なHTMLタグを理解していことを前提とします。

 

この記事の目的

HTMLタグの知識がない方でも、「HTMLの編集」で編集し、「領域/段落(<p>~</p>)を枠線で囲むんだり背景色をつける」ことができるように説明するもの。

なお、以下の説明にも書いているように、HTMLを手入力しても、cocologの仕様で、一部のタグは自動的に変換されてしまいます。この部分はユーザにはブラックボックスであり、今後、仕様の変更により使用できなくなる可能性もあることをご了承ください。あくまでもこの記事を書いている時点で有効な方法です。

 

   

ココログで記事を書く場合、通常は「リッチテキスト」モードで編集しますが、「HTMLの編集」に切り替えると、「<p>~</p>」、「<a href="~">」などのHTMLタグが自動的に付加されることが分かります。

HTMLタグの知識が無くてもwebサイトを作れるのがブログの利点ですが、リッチテキストモードでは編集できないようなHTMLタグを知っていると、ブログの表現方法にバリエーションが出ます。

  

上の2つの段落は緑色の枠線(破線)で囲まれていますが、実際は、全体をドラッグで範囲指定してから「引用の開始」ボタンを押して、「<blockquote>」・「</blockquote>」(引用ブロック)というHTMLタグで囲んでいるだけです。(下図参照)

Border01

 

しかし、枠線の装飾はこのブログが使用している『デザイン』(スタイルシート/CSSファイル)で設定されているもので、どのブログでもこのように表示されるわけではありません。

一方、下はHTMLタグを編集して、段落の周囲を破線の枠で囲んでいます。

段落を枠で囲む

以下、このような段落の装飾方法(プロパティ)を、使用頻度が高そうなものをピックアップし、実例を挙げて解説します。(全てのプロパティを網羅しているわけではなく、詳細な説明も敢えて避けています。)

段落装飾のバリエーション

段落記号「<p>~</p>」の「<p>」の部分を「<p style="・・・">」として、「・・・」の部分に各種スタイル(=プロパティ名とその値)を「;」(半角セミコロン)で区切って指定する。「プロパティ名」と「その値」の間には「:」(半角コロン)を置く。

以下にHTMLタグとサンプルを提示するので、HTMLタグをコピーして使用する場合は、「HTMLの編集」モードにして貼り付ける。

 

■枠線の種類は「border-style: 」で指定する

1.dotted (マージンなし)

<p style="border-style: dotted;">段落を枠で囲む</p>

段落を枠で囲む

 

2.dotted (マージン:10px 以下同じ)

<p style="border-style: dotted; padding: 10px;">段落を枠で囲む</p>

段落を枠で囲む

 

3.solid

<p style="border-style: solid; padding: 10px;">段落を枠で囲む</p>

段落を枠で囲む

 

4.dashed

<p style="border-style: dashed; padding: 10px;">段落を枠で囲む</p>

段落を枠で囲む

 

5.double

<p style="border-style: double; padding: 10px;">段落を枠で囲む</p>

段落を枠で囲む

 

6.outset

<p style="border-style: outset; padding: 10px;">段落を枠で囲む</p>

段落を枠で囲む

 

■枠線の色は「border-color:  」で指定する。

カラーのコードが分からない場合は、適当な文字に「フォントカラー」で色を付けてHTMLの編集で見るとよい。この「適当な文字」の箇所は、

<span style="color: #0066CC;">適当な文字</span>

となっているので、「#0066CC」というコードだと分かる。

 

<p style="border-style: solid; padding: 10px; border-color: #0066CC;">段落を枠で囲む</p>

段落を枠で囲む

<p style="border-style: outset; padding: 10px; border-color: #0066CC;">段落を枠で囲む</p>

段落を枠で囲む

なお、「 border-color: #0066CC;」と入力しても、一度「リッチテキスト」モードにして再び「HTMLの編集」で見ると「 border-color: rgb(0, 102, 204);」のように自動的に変わっているが、表現方法の違いなので気にしなくて良い。

 

■背景色の指定: background-color:

<p style="border-style: double; padding: 10px; background-color: #FFFFCC;">段落を枠で囲む</p>

段落を枠で囲む

下は、枠線を付けず、背景色を■(こげ茶:#663300)、文字色を白にしたもの。(HTMLタグの提示は省略)

 私のしようとしたこと、したかったことは、キャパの虚像を剥ぐというようなことではなかった。
 ただ、本当のことを知りたかっただけなのだ。「崩れ落ちる兵士」は本当に撃たれていたのか、本当に死んでいるのか。その問いが、さらに大きな、別の謎をを生み出すことになるなどとは、まったく思ってもいないことだった。
 
(『キャパの十字架』帯から)

見出しのような例ばかりなので、少し長めのテキストを書いてみました。段落を変えずに改行するには、[Shift]+[Enter]を押します。(あるいは、「HTMLの編集」モードで「<br />」=「改行タグ」を記入する。)

 

■文字位置: text-align:

<p style="border-style: solid; padding: 10px; text-align: center;">段落を枠で囲む</p>

段落を枠で囲む

text-alignプロパティには他に「left」(左揃え)、「right」(右揃え)等の値を指定できる。(「text-align: left;」はデフォルトなので、何も指定しないと、text-align: left; と同じ結果になる。)

 

なお、<p>~</p>タグの内側に<span>タグを使用することで、段落全体ではなく、任意の文字列にのみ修飾を行うことができる。

<p><span style="font-size: 1.2em; color: #FFFFFF; font-weight: bold; background-color: #0066CC; padding: 10px;" >文字列を枠で囲む</span>ここから属性解除</p>
  

文字列を枠で囲むここから属性解除

 

<p>タグ同様、「<span>~</span>」の最初の「<span>」の部分を「<span style="・・・">」として、「・・・」の部分に「プロパティ名」と「その値」を「;」(半角セミコロン)で区切って指定する。以下、使用しているプロパティの簡単な説明を記す。

  • font-size: 文字の大きさ ( 数字+em)
  • color: 文字色 
  • font-weight: 文字の太さ 

「HTMLの編集」で編集後、一度「記事の作成」に切り替えると、一部の記述が自動的に変更されることがある。

 

 

■枠線の属性を終了させ、通常の文字を入力するには

段落に装飾を加えた状態で「リッチテキスト」モードのまま改行すると、枠線の属性を持ったまま改行されてしまう。

これを回避するには、一度「HTMLの編集」に切り替え、段落記号の結び=「</p>」よりも後ろに適当な文字を入力するとよい。(下図参照)

Carriage

この例では「ああ」と入力したが、再び「HTMLの編集」で見ると、「ああ」には自動的に段落マークが付与されて「<p>ああ</p>」になっていて、属性が解除されているのが分かる。

 

web拍手 by FC2

(拍手はブログ主のモチベーション維持程度の目的です。面白かった、役に立った、等々、宜しければクリックしてください。)

« 横浜美術館 『ロバート・キャパ/ゲルダ・タロー 二人の写真家展』を観てきた | トップページ | 【ブログの楽しみ方】他の記事の任意の箇所にリンクするには?【ココログ】 »

コメント

先にメール致しましたように、これ以降のやりとりはメールということで。

こんばんは、yamayamadesu です。またアドバイスお願いします。
文章を囲む設定をしたとき、「記事の作成」の画面では、文字と囲み線を調整して
OKと思って、表示をすると縦も横も文章から離れた枠になります。

私のブログの「就活支援⑧落ちる面接」の場合、表面上は枠内におさまっていますが
「記事の作成」の画面では、かなり重なったじょうたいになっています。
従って何回も修正をしないと、ちょうど良い枠になりません。

すみません、教えてください。
ココログにも質問をした方がよければ、そうします。よろしくお願いします

>yamayamadesuさん

おはようございます。
ココログのFAQは、他の方の質問を読んで学ぶことも多いのですが、 yamayamadesuさんのご質問を元に記事を書くことができました。ありがとうございます。

サイドバーは思いつきで追加しているので、ゴチャゴチャし始め、少しずつ整理をしようかと思っています。「お薦め本」も追々手を付けようと思ってるので、一旦、テストで追加したものは外しました。

その内、ちゃんと紹介したいと思っています。

 おはようございます。
【段落(領域)を枠線で囲む/背景色をつける】のご案内ありがとうございました。
そうなんです、少しお化粧をしてあげようと思って、先々週くらいから、質問したり、
あちこと見ていました。
 非常に助かります。
 
後日『Web Page Contents お役立ちノウハウ集』に追加をされるとのことで
更に助かります。

★コメントを書いていたら、左側のテストに本の紹介がありました。
 一区切りで、どうぞ外してください。

コメントを書く

(ウェブ上には掲載しません)

« 横浜美術館 『ロバート・キャパ/ゲルダ・タロー 二人の写真家展』を観てきた | トップページ | 【ブログの楽しみ方】他の記事の任意の箇所にリンクするには?【ココログ】 »

counter since 2018/12/25

  • Flag Counter

    FLAG Counterのロゴをクリックすると、更に詳しい分析結果が表示されます。
    ココログのアクセス解析よりは少ない数字になるようです。
サイト内検索
ココログ最強検索 by 暴想
2020年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          

sponsored link


ドールハウス工作おすすめ参考図書

カテゴリー

無料ブログはココログ