HTMLとCSSの使い方

 

ブログデザインのカスタマイズ!HTMLとCSSの使い方を簡単に理解する! 

ブログデザインのカスタマイズ!HTMLとCSSの使い方を簡単に理解する! 

  2015/12/19    あとで読む

 約 4 分で読めます

 

 

html_css

ブログのデザインをカスタマイズをする上で、避けて通れないのがHTMLとCSS.

で、でた━━( ゚∀゚)人(゚∀゚ )━━!!
聞いたことあるけどイヤだーと思ったそこのあなた!

いや何事もそうですが、1つ1つ見て行けば難しいことはありません。

挫折するとしたら難しいからではなく、簡単そうが故に一気に色々とやろうとし過ぎたり、種類が多くてパニックになってしまっているだけです。

(∩゚д゚)アーアーきこえなーい

いやいや大丈夫。HTML、CSSともデザインをカスタマイズする上ではとても重要ですが、実際はとってもシンプルです。

ここでは概要を説明しますので、この後の章に進むため、ここでしっかり理解しておきましょう。

ポイントは、ブログではテーマを元にデザインを修正することになるため、その修正に必要なもののみを使えるようになれば良い、ということ。(極端に言えば最低限コピペする術を覚えれば良い)

0から10まで全てを理解して使いこなせるようにならないとダメ!などということはありませんので、ゆったりした気持ちで理解を進めましょう(Webデザイナーを目指すなら話は別ですよ!)

必要な部分だけでも一旦身に付ければ、あなたもメイクアップアーティスト!今後に向けてとてつもなく強力な武器を身に付けたことになります。

 

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

HTMLとは CSSとは

ブログを運営して、デザインを少し変えたいな、などと色々調べたすと出てくる「HTML」と「CSS」。

ブログのデザインをカスタマイズするのに必要となるのがこのHTMLとCSSですが、いきなり英語で来られると、

ナンデスカソレ? (?_?)

となるのが普通です。それでも慣れれば大したものではありませんので安心して下さい。

HTML, CSSを簡単にいえば以下のようになります。

  • HTMLとは
    • HTMLとは、「ここはヘッダー」「これはタイトル」、「これは見出し」、「これは文の塊」(段落)、「これは画像」、など、文の構成や要素を指定するもの。
  • CSSとは
    • CSSとは、それら要素に対して、フォントや文字の大きさ、背景の色、周りを線で囲む、など、見た目のデザインを指定するもの

つまり各々一言で言えば、

  • HTML 文の構成や要素
  • CSS 構成や要素に対するデザイン

これらの指定があってこそ Google Chrome や IE などのブラウザは、ウェブページが表示できるんですね。
(今見ているこの記事も、HTMLとCSSで成り立ってます)

これだけでは全くイメージが湧きませんので、以下具体例で見てみましょう。

HTMLの具体例

例えば身近なところではブログの記事のタイトル。

ブログの記事のタイトルを例えば「明日に向かって頑張る!」と付けた場合、HTMLは自動的に以下の様な記述になっています。

  • <h1>明日に向かって頑張る!</h1>

このタイトルの前と後を囲っている記号 <h1> …. </h1> がHTMLです。

ここでは一種類だけの登場ですが他にも色々なものがあり、それぞれが”タグ”と呼ばれます。(h1でいえば、”h1タグ”という言い方ですね)

  • タグは<>で囲まれ、
  • 終わりは、終りを示す / を付けたタグで閉じる
    <タグ> ・・・・</タグ>

というのが形です。
(<>を含めてタグという場合もあります)
(imgタグ や単独で使用する brタグ など、イレギュラーな形をとるものもあります)

上で見た <h1>明日に向かって頑張る!</h1> も確かにこの形。

タグには主に以下の様なものがあり、他にも沢山ありますが全て覚える必要はありません。必要となるものだけ調べればOKです。

  • body:ブラウザで表示されるもの全て
  • h1, h2, h3, h4, h5, h6: タイトルや見出し
    (WordPressの記事を書く時に、記事中の見出しは基本h2を使います。
    これは記事のタイトルに h1 が割り当てられるためです)
  • p: 文のまとまり、段落。
  • br: 改行
  • div:まとまった範囲の指定
  • ul:リスト形式で表示
  • li:ulの中の1つの項目
  • a:リンク(アンカー)
  • img: 画像を表示

※)タグの種類は多くても、デザインを結構いじっていると自然と覚えます

CSSの具体例

上で見たHTMLのタグに対し、文字の色は黒、とか、太字にする、等を指定するのがCSSです。

  • 文字色の指定は、例えば黒色なら、
    • color: black;
  • 太字は
    • font-weight: bold;

このように、左に指定する項目名(プロパティ)、コロン「:」を挟んでその右に値、最後にセミコロン「 ; 」といった形で指定します。

  • プロパティ: 値;

(上の例では、color や font-weight がプロパティ、black, bold が値)

※)プロパティに対して指定できる値の種類は決まっています。

具体例

先ほどのタイトルはh1タグで囲まれてましたので、h1に対して「文字色は黒」「太字にする」という指定の仕方は以下のとおり。

  • h1{
        font-weight: bold;
        color: black;
    }

HTMLのタグに{}をつけ、その中にCSSの指定を書く、という形です。
(font-weightなどの先頭に半角スペースが入ってますが、スペースはあってもなくてもOK。このように半角スペースを入れたりタブを入れたりして見やすくします。)

  • HTMLのタグ {
        プロパティ: 値;
        プロパティ: 値;
        プロパティ: 値;
        ・・・・
    }

なんとシンプルな。
この形を覚えておけば、色々なことが分かるようになります。(本当)

「プロパティと値」は幾つ指定してもOKです。

デザインを細かく修正する場合は、こうした指定を数多くすることになるため手間暇がかかります(このため途中で挫折していくいんですね)。

それでも1つ1つを見れば難しいものではありません。

今回の復習

  • HTMLとは、文の構成や要素
    • 形式: <タグ>・・・</タグ>
  • CSSとは、構成や要素に対するデザインの指定
    • 形式: プロパティ: 値;
  • HTMLにCSSを適用するときの形式
    HTMLのタグ {
         プロパティ: 値;
         プロパティ: 値;
         プロパティ: 値;
         ・・・・
    }

     

    • 具体例
      h1{
           font-weight: bold;
           color: black;
      }

HTMLとCSSをざっくり見てみました。

まずは概要ですがここを理解しておけば、この次に見るCSSのクラスなどの理解がとても早くなり、デザインカスタマイズが非常にやりやすくなります。

ブログのテーマを0から全て自前で作る、となると、深い知識が必要となりますが、元々あるテーマに対してデザインをカスタマイズする、といったスタイルが普通であり、この場合はポイントをおさえるだけで、かなりのカスタマイズが行えます。

0から全てを理解する必要はない、ポイントだけを吸収すれば良い、ということを改めて認識し、個性の出る、読者もあなた自身も気に入ったブログを構築すべく、HTMLとCSSの武器として取り込んでいきましょう。

次回はCSSの肝となるクラスやidについて見てみます。

 

 

 

 

この記事を読んだ人はこんな記事も読んでます

 
カテゴリー: 夕陽のある海岸通り | タグ: | コメントをどうぞ

第二の壁、CSSの id の使い方

 

 

ブログデザインのカスタマイズ!CSSのidの指定法を理解する 

  2015/11/28    あとで読む

 約 8 分で読めます

 

 

html_css

ブログのデザインをカスタマイズをする上で、前回の記事では1つの課題となるCSSのクラスについて使い方をおさえました。
(参照:ブログデザインのカスタマイズ!CSS基本のクラスを理解する

今回はいよいよ第二の壁、CSSの id の使い方です。

CSS のクラスと id は、CSSを理解して利用するには避けては通れないとても大切な要素です。
多くの人がこの辺りで分からなくなり挫折していきますが、難しく考える必要はありません。

なぜなら0から全てを築くわけではなく、WordPressで利用しているテーマに対してカスタマイズをする、といった
部分修正が基本であり、そのために必要なことだけを理解していけば良いからです。
(あなたがCSSのエキスパートになりたい!と考えていれば話は別ですよ!)

この記事を読むことで、CSSの クラス と id の違い、そして id の形式や指定法を学び、CSSの骨格を習得します。

あなたのデザインスキルを上げるため、前回に続き更に磨きをかけて、独自のブログ構築へ大きな力として行きましょう!

 

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

CSSのクラスの復習

まずは少しだけCSSのクラスの復習です。

  • クラスとは、
    • 色の指定や太字など、デザインを指定する内容が複数入ったセットメニューみたいなもの。
    • このセットメニューに、英数字で固有の名前を付けたものがクラス
  • クラスの形式

    .クラス名{
        プロパティ:値;
        プロパティ: 値;
        プロパティ: 値;
        ・・・・
    }

  • 具体例

    .title21{
       font-weight: bold; /* 太字 */
       color: black; /* 文字色は黒 */
    }

  • 特定のタグへの限定した設定
    • 形式
      タグ.クラス名 {
          プロパティ: 値;
          プロパティ: 値;
          プロパティ: 値;
          ・・・・
      }
    • 具体例
      h2.title21{
          font-weight: bold;
          color: black;
      }
  • タグへの指定の仕方
    • 形式
      <タグ class=”クラス名”>・・・・</タグ>
    • 具体例
      <h2 class=”title21″>明日に向かって売れ!</h2>

いかがですか?
今ひとつ理解に不安がある場合には、以下の記事をもう一度見ておきましょう。

ブログデザインのカスタマイズ!CSS基本のクラスを理解する

idの使い方

さて、クラスの次はいよいよ難敵の id です。
いや、難しいことありませんのでリラックスして読み進めてください。

クラスとidの違い

まずはクラスとidの違いについてですが、ここは混乱するところ。

基本はどちらも指定するために使う識別子、というところですが、大きな違いは以下のようになります。

  • classは、個別の指定に使われる
  • idは、特定の範囲やグループを指定するために使われる

簡単すぎてイメージが湧きません!。・゚・(ノД`)・゚・。

具体的によく使用される例として、ブログでは、

  • ヘッダー
  • 本文
  • サイドバー
  • フッター

といった領域にわかれます(下の図参照)

2015-09-09_213205

このヘッダーやフッター、本文やサイドバーといった
大きなまとまりを id というもので表します。

つまり、 id は、ある領域やグループを表すのに使うもの。
そのため、ページ内に1度しか利用できない、という制限もあります。(逆にクラスは何度でも利用でる)

id, クラス、どちらもCSSで表示を指定するものですが、その性質から、id はページ内に一度しか使えない。

領域やグループを意識したものは id を使い、そうでない単に識別子としてどこでも使う場合にはクラス、となります。
(良くわからないから全てクラスを使えばいいや、という人も多いですが、一応理解はしておきましょう)

プラグインでの活用法

その性質上、WordPressではプラグインでよくidが活用されてます。

つまり、プラグイン独自の表示領域(自動的に表示される目次の領域であったり、新着表示、人気記事、関連記事などの表示領域)
を id で指定して、その領域内で使っているタグ(a, p, ul 等)に対し CSS で表示の仕方を指定する、という使い方です。

こうすることで、プラグインで仮に aタグとかpタグなど、明らかに他で使用している一般的なHTMLタグ
に対してCSSでデザインを指定しても、他の領域の表示に影響を及ぼさず、プラグインが独自に表示する領域内のみに効果のある表示ができる、というわけです。

idの形式と具体例

id の形式は「#」を先頭に付け、続けて名前、といった単純なもので、以下のとおりです。

  • idの形式
    #名前
  • idの具体例
    #header

これに従って、例えば上の図にあるように、

  • ヘッダー #header
  • 本文 #contents
  • サイドバー #sidebar
  • フッター #footer

のように id の名称をつけたりします。
(名称は分かりやすく、他に使用されていなければOK)

idを使ったCSSの適用は、以下の形式になります。

  • 形式
    #id名 タグ {
        プロパティ: 値;
        プロパティ: 値;
        プロパティ: 値;
        ・・・
    }
  • 具体例
    #header  h1{
        color: black;
        font-size: 24px;
    }

この具体例では、ヘッダー領域にある h1 (図の例では”明日は明日の何故が付く”)は、文字色が黒で、文字の大きさは24pxにする、という指定になります。

2015-09-09_214119

idの具体例

よくある具体的としては、リンクで使用する「aタグ」が分かりやすいです。

aタグは「クリックすると別のページが開く」といったような「リンクを指定するタグ」です。
メニューは勿論、記事のタイトル一覧などにはこのタグが使用されています。

ここで具体的な例として、

  • ヘッダー領域(#header)のメニューは、リンク色をピンク
  • でも本文内(#contents)のリンク色は青色

としたい場合には、

  • #header a では、リンク色をピンクに指定
  • #contents a では、リンク色を青色に指定

という形になります。
具体的には、以下の様な指定ですね。

  • #header a {
         color: pink; 
    }
  • #contents a {
         color:blue;
    }

先頭に場所を示す id(ここでは #header や #contents )が来て、HTMLタグ、そしてCSSの指定という形です。

※)idは特定の領域、グループを示すといった性質上、同じページ内に複数同じ名前のidがあってはいけないルールです。(同じ名前は1つのみ)

idへの設定

また id 自体にCSSを設定して表示を指定する、ということも勿論出来ます。

  • ヘッダーの領域 – 背景色:白、境界:1pxの黒色の実線
  • 本文の領域 – 背景色:白、内側の余白:1文字分

としたい場合には、

  • #header {
        background-color: white; /* 背景色:白 */
        border: 1px solid black; /* 境界:1px の黒の実線 */
    }
  • #contents {
        background-color: white; /* 背景色:白 */
        padding: 1em; /* 内側の余白:1文字分 */
    }

タグへの指定の仕方

タグへの指定の仕方は、クラスの場合、タグの中に class=”xxx” と書いた所、idの場合では、id=”xxx”となります。(xxxがid名)

例えば今まで見てきたように、header という id を定義した場合のタグへの適用は以下のようになります。

  • idをタグへ指定する形式
    <タグ id=”id名”>・・・</タグ>
  • 具体例
    id=”header”>・・・

いろいろな指定の仕方

以上で、CSSにおける、id, クラスの違いやその使い方、タグへの指定の仕方がおおよそ分かりました。

補足として、これらの複合した指定方法を見ておきます。

※)以下が全てではありませんが、慣れておけば他のサイトのCSSも構造がわかるようになり、必要な箇所の抜き出しやコピペに役立ちます

1)複数同時指定

CSSでは、複数同時に指定できます。

例えば2つのクラス(text01 , text02 )があり、ほとんど同じ内容だけど一部だけ違う、といった場合には、

  • 1)まず text01 , text02 を同じ内容として定義
  • 2)異なる部分だけ改めて定義する

という形にもできます。

同じ内容を定義するには、コンマ(,)で区切って並べればOKですが、良く分からないので具体例を見てみましょう。

  • text01 –  文字色:黒, フォントサイズ: 24px, 背景色: 白
  • text02 –  文字色:黒, フォントサイズ: 24px, 背景色: 黄色
    (違いは背景色のみ)

個別に指定すれば以下のようになります。

  • .text01{
        color: black; /* 文字色*/
        font-size: 24px; /* 文字サイズ*/
        background-color: white; /* 背景色 白 */
    }

  • .text02{
        color: black; /* 文字色*/
        font-size: 24px; /* 文字サイズ*/
        background-color: yellow; /* 背景色 黄色 */
    }

これを同時に text02 も text01 と同じ内容として定義して、その後に異なる部分だけ定義すると、以下のようになります。

  • .text01, .text02{
        color: black; /* 文字色*/
        font-size: 24px; /* 文字サイズ*/
        background-color: white; /* 背景色 白*/
    }
  • .text02 {
        background-color: yellow; /* 背景色 黄色 */
    }

CSSでは後に出てくるものが優先される(後に出てくる内容が上書きされる)というルールが有ります。

このため上の例では、

  • text02は最初は背景色は白で定義され、
  • その下で黄色と再定義されている

とういうことから、結果的にtext02の背景色は黄色となります。

補足)同時定義の仕方

同じ内容を定義するには、コンマ(,)で区切って並べます。ここでは2つの例ですが、3つ、4つでも同じです。(.text01, .text02, .text03, …)

タグも勿論同じように定義できます。

  • a, p, h2 {
        color: black; /* 文字色 黒 */
    }

みたいな感じですね。
(a:リンク用のタグ、p:段落を示すタグ、h2:タイトルを示すタグ)

2)id とクラス

同じクラス名でも場所が変われば内容を変えたい、という時にこの組み合わせとなります。

  • ヘッダーでは、
    text01 – 文字色:黒, 背景色: 白, フォントサイズ:24px
  • 記事本文では、
    text01 –  文字色:白, 背景色: 黒、フォントサイズ:12px

といった場合、ヘッダーを示す id が #header, 記事本文を示す id が #contentsとすると、

  • #header .text01{
        color:black; /* 文字色 黒 */
        background-color: white; /* 背景色 白 */
        font-size: 24px; /* 文字の大きさ 24px */
    }
  • #contents .text01{
        color:white; ; /* 文字色 白 */
        background-color: black; /* 背景色 黒 */
        font-size: 12px; /* 文字の大きさ 12px */
    }

という形で定義することになりますね。

3)id とタグ

この組み合わせは記事の中にも出てきてますが、場所によって同じタグでもCSSの内容を変えたい!といった場合に使う組み合わせです。

  • ヘッダーでは、
    p – 文字色:白, フォントサイズ:24px, 外側の余白:無し
  • 記事本文では、
    p – 文字色:黒, フォントサイズ:16px, 外側の余白:上1文字分、右1文字分、下2文字分、左1文字分
  • サイドバーでは、
    p – 文字色:茶色, フォントサイズ:12px, 外側の余白:上下左右1文字分

といった場合、ヘッダーを示す id が #header, 記事本文を示す id が #contents、サイドバーを示す id が #sidebar とすると、

  • #header p{
        color: white; /* 文字色 白 */
        font-size: 24px; /* 文字の大きさ 24px */
        margin: 0; /* マージン 0 */
    }
  • #contents p{
        color: black; /* 文字色 黒 */
        font-size: 16px; /* 文字の大きさ 16px */
        margin: 1em 1em 2em 1em;
        /* マージン 上1文字、右1文字、下2文字、左1文字*/
    }
  • #sidebar p{
        color: brown; /* 文字色 茶色 */
        font-size: 12px; /* 文字の大きさ 12px */
        margin: 1em; /* マージン 上下左右1文字 */
    }

という形で定義することになります。

4)id とクラスとタグ

場所、クラス、タグを明確にして定義する場合の組み合わせです。

  • ヘッダーにある リンクタグ a に適用されるクラス maintitle は、
    文字色:白、背景色:黒、文字の大きさ:32px
  • ヘッダーにあるリンクタグ a に適用されるクラス subtitle は、
    文字色:灰色、背景色:黒、文字の大きさ:20px
  • 本文にあるリンクタグ a に適用されるクラス normal-linkは、
    文字色:青、背景色:白、文字の大きさ:16px

といった場合、ヘッダー、記事本文を示す id が #header, #contents とすると、

  • #header a.maintitle {
        color: white; /* 文字色 白 */
        background-color: black; /* 背景色 黒 */
        font-size: 32px; /* 文字の大きさ 32px */
    }
  • #header a.subtitle {
        color: gray; /* 文字色 灰色 */
        background-color: black; /* 背景色 黒 */
        font-size: 20px; /* 文字の大きさ 20px */
    }
  • #contents a.normal-link{
        color: blue; /* 文字色 青色*/
        background-color: white; /* 背景色 白 */
        font-size: 16px; /* 文字の大きさ 16px */
    }

まずは中身より形に慣れて行って下さい。

他のブログをCSSを見たり、そこから必要な部分をコピーしたりする時に必ず役立ちます。

今回の復習

  • idとクラスの違い
    • idは特定の領域やグループを指定するために使われる。
    • そのため1つのidは、同一ページ内では一度のみ利用可。
    • 逆にクラスは何度でも利用できる。
  • idの形式
    #名前 – 具体例:#header
  • idを使ったタグへのCSSの適用
    • 形式
      #id名 タグ {
          プロパティ: 値;
          プロパティ: 値;
          プロパティ: 値;
          ・・・
      }
    • 具体例
      #header h1{
          color: black;
          font-size: 24px;
      }
  • タグへの指定の仕方
    • idをタグへ指定する形式
      ・・・
    • 具体例
      ・・・

CSSの クラス や id の概要をざっと見てきました。

本当は更に深く広く色々な要素や指定の仕方などがありますが、ゼロから全てを学ぶのは非常に時間がかかりますし、全てを学ぶ必要性もありません。
(いや、全て知っているに越したことはないですけど、時間と効果を天秤にかけてどうするかというお話しです)

ベースにあるのはWordPressのテーマのデザイン。

あとはそれを元に、どうカスタマイズして個性を出していくかを考え、その中で必要に応じて新しい知識とテクニックを取り入れつつカスタマイズの実践をしていくのが一番です。

読者もあなた自身も気に入る個性あるブログデザインにして行くこと。それがグーグルからのペナルティーから離れ、読者の滞在時間を延ばし、息の長いブログの構築につながります。

カテゴリー: 夕陽のある海岸通り | タグ: | コメントをどうぞ

CSSには”クラス”と”id” ➡︎ CSSの最初の難関、クラス

 

 

ブログデザインのカスタマイズ!CSS基本のクラスを理解する

 

ブログデザインのカスタマイズ!CSS基本のクラスを理解する 

  2015/11/27    あとで読む

 約 5 分で読めます

 

 

html_css

ブログのデザインをカスタマイズをする上で、前回の記事でHTMLとCSSの概要をおさえました。

(参照:HTMLとCSSの使い方を簡単に理解する!

今回はいよいよ最初の壁となるCSSのクラスの使い方です。

HTMLとCSSを使ってみようと思ったはいいけど、結局良くわからずにやめてしまった、という場合、原因の多くは以下2点。

  • 「簡単そうなので一気にやろうとして分けわからなくなった」
  • 「クラスとかidが出てきて分からなくなった」

ネットビジネスではWordPressを使い、外観のデザインは”テーマ”を選ぶこと自ら体を入れることなく、基本は全てでき上がっています。

それでも他のブログと外観で差別化をはかるには、ヘッダー画像を変えたり、個別のパーツの色や大きさ、形を変える、といったように、
何もないところから全て作る、というのではなく「部分修正が基本」。
つまりCSSの全てを理解し習得する必要はなく、修正したい箇所に対して必要なもののみを使えるようになれば良い、ということがポイントです。

(極端に言えばどこかに示されているサンプルをコピペして使えるようにする術だけを覚えれば良い)

ここでは一歩進んでCSSの最初の難関、クラスについて理解を深めます。

あなたのデザインスキルを上げるため、ここで更に武器に磨きをかけ、成功への足取りを楽しくします。

関連記事 ブログのヘッダー画像の作り方!簡単リサイズから文字入れまで独自性を打ち出す

 

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

HTMLとCSSの復習

まずは少しだけHTMLとCSSの復習です。

  • HTMLとは、文の構成や要素
  • CSSとは、構成や要素に対するデザインの指定
  • HTMLにCSSを適用するときの形式

    HTMLのタグ {
        プロパティ: 値;
        プロパティ: 値;
        プロパティ: 値;
        ・・・・
    }

  • 具体例

    h1{
        font-weight: bold;
        color: black;
    }

さてこの内容に対して、ちょっと待った!イマイチ理解が...と言う場合には、以下の記事をもう一度見て復習しておきましょう。

ブログデザインのカスタマイズ!HTMLとCSSの使い方を簡単に理解する!

誰もがつまづくクラス

ぱっと眺めればとてもシンプルなHTMLとCSSですが、CSSには”クラス”と”id”というものがあります。

★多分多くの人が 最初につまずく1つがこの”クラス”と(次回解説の)”id”ですが、ここが理解できれば怖いものはありません。

CSSは上で見たように、HTMLのタグに対して直接指定できます。が、これだと不便な場合も出てきます。

例えば、記事本文にある見出しは h2タグを使いますが、この h2 に対して文字色を緑で太字にしよう、ということで、

  • h2 {
        color: green; /* 文字色を緑 */
        font-weight: bold /* 文字を太字に */
    }

※)/* ~ */ はコメントを示します

と指定すると、 h2 で指定された箇所全てALL「文字色が緑で太字」に変化します。
おぉ、CSSって凄い!と思いつつも、

実は、❶ブログの一番下の部分(フッター)や❷新着記事の表示などをする横のサイドバーなど、
思わぬ所で 同じタグ(h2)が使われてたりして、実際表示してみるとゲゲ!となることも少なくありません。

こういう場合があるからこそ活躍するのが「id」や「クラス」です。

クラスとは

(今回の記事では基本となるクラスの解説です)

クラスとは、色の指定や太字など、デザインを指定する内容が複数入ったセットメニューみたいなもの。

例えば、

  • セットメニュー1は、太字と文字色は黒
  • セットメニュー2は、文字色は黄色で、下線付き
  • セットメニュー3は、周りを黒色の線で囲む

これらのセットメニュー1~3に対して、英数字で固有の名前を付けたものがクラスです。例えば、

  • セットメニュー1 → title21
  • セットメニュー2 → title22
  • セットメニュー3 → box01

※)ここでは意味なく適当に名前を付けてます

他に使ってない名前なら基本はOK.
自分にとってその中身がよく分かる名前にします。(具体例は以下参照)

クラスの使い方

こうしてクラス(セットメニュー)を作り、それをHTMLのタグに適用する、とうい使い方になります。

クラスの形式

実際のクラスの書き方は、最初に「.」(ピリオド)を付けて以下の形。
(頭に「.」を付ける以外は最初に復習したHTMLのタグの場合に同じです)

  • クラスの形式
    .クラス名{
        プロパティ:値;
        プロパティ: 値;
        プロパティ: 値;
        ・・・・
    }
  • 具体例
    .title21{
       font-weight: bold; /* 太字 */
       color: black; /* 文字色は黒 */
    }

※)/* ~ */ はコメントを示します

これで title21 というクラスは、太字で文字色は黒、という内容になります。

タグへの指定の仕方

タグへの指定の仕方は、タグの中に class=”xxx” を書き、xxxの部分に作成したクラス名を記述します。

これを先ほどのh2に適用する場合では以下の様な形です。

  • クラスをタグへ指定する形式
    <タグ class=”クラス名”>・・・・</タグ>
  • 具体例
    <h2 class=”title21″>明日に向かって売れ!</h2>

このようにクラスを使ってデザインを指定することで、

  • 1つ目のh2には title21 を指定し、
  • 2つ目のh2には title22 を指定する、

という使い方ができます。

  • <h2 class=”title21″>明日に向かって売れ!</h2>
  • <h2 class=”title22″>明後日に向かって釣れ!</h2>

クラスの使い回しとタグの限定

感覚の鋭いあなたなら「お、ということは...」とわかると思いますが、ここで作成したクラス「title21」などはどこにでも使えます。

例えば、

  • <p>これは記事本文です。内容は...</p>

といった最もよく見かける「p」タグ(paragraph:段落や文章のまとまりを意味するタグ)ですが、ここに太字で文字色は黒、と上で定義でしたクラス「title21」」を同じように適用したいとします。

この場合、正に上でしたように以下のように指定すれば良いんですね。

  • <p class=”title21″>これは記事本文です。内容は...</p>

このように使い回しが出来てとても便利なクラス。

それでも★異なるHTMLのタグに対して同じCSSのクラスを使うと、結果としてどこでどのように使っているか分からなくなり、
後で修正を入れる時に大変なことになったりします。(経験者、大いに語る σ😉

(タイトルだけ文字色を黒から紫に変えるつもりが、記事の本文まで全て紫色に変わってしまい大パニック、みたいな感じですね)

特定のタグへ限定する指定法

ということから、特定のHTMLタグに限定して有効とするクラスの書き方も勿論あります。形式は以下のとおり。

  • 形式
    タグ.クラス名 {
        プロパティ: 値;
        プロパティ: 値;
        プロパティ: 値;
        ・・・・
    }
  • 具体例
    h2.title21{
        font-weight: bold;
        color: black;
    }

このように、クラス名の前にHTMLのタグを書けば、この「title21」はh2のタグだけに有効なクラス、となります。
(逆にいえば、HTMLタグを書かなければ、全てに対して使えるクラスになる、ということですね)

つまりこの場合、

  • <h2 class=”title21″>明日に向かって売れ!   ⭕️</h2>

では、title21の指定は有効であり、内容が反映されて表示されますが、

  • <p class=”title21″>これは記事本文です。内容は...❌</p>

では、title21の指定は無効になる、ということです。
(間違って使われることはない。間違って使われても機能しない、となります)

今回の復習

難関の1つとなるCSSのクラスについて見てきました。

  • クラスとは、色の指定や太字など、デザインを指定する内容が複数入ったセットメニューみたいなもの
  • クラスの形式
    • .クラス名{
          プロパティ:値;
          プロパティ: 値;
          プロパティ: 値;
          ・・・・
      }
    • 具体例
      .title21{
          font-weight: bold;
          color: black;
      }
  • 特定のタグへの限定
    • 形式
      タグ.クラス名 {
          プロパティ: 値;
          プロパティ: 値;
          プロパティ: 値;
          ・・・・
      }
    • 具体例
      h2.title21{
          font-weight: bold;
          color: black;
      }
  • タグへの指定の仕方
    • 形式
      <タグ class=”クラス名”>・・・・</タグ>
    • 具体例
      <h2 class=”title21″>明日に向かって売れ!</h2>

CSSのクラスの形式、タグへの指定の仕方は分かりましたか?

実際のCSSはどういう指定の仕方をすると、そうなるんだろう、と先ばかりが気になりますが、まずはこの形を理解するようにして下さい。

極端に言えば、形さえ理解すれば、必要な所を抜き取ってコピペすればデザインカスタマイズはできるのです。あせらず1つづつ自分のものにしていって下さいね。

次回はもう1つの難関、id について解説します。

クラスとidをものにして、その後は具体的カスタマイズへ移行です!

カテゴリー: 夕陽のある海岸通り | タグ: | コメントをどうぞ

Chromeの開発者ツールでCSSを操る! 「賢威」

 

 

ブログのデザインカスタマイズ!Google Chromeの開発者ツールでCSSを思いのままに操る!

 

今回のまとめ

  • ブログのデザインカスタマイズでは, Chrome の開発者ツールが便利で強力
  • 開発者ツールを使えば、
    • HTMLを見る
    • CSSの設定を見る
    • CSSの設定を変えてリアルタイムで見る
    • 設定をコピーする
      ということが出来る
  • 最後に設定をコピーして自分のブログに貼り付ければ、意図した通りのデザイン

 

ブログのデザインカスタマイズ!Google Chromeの開発者ツールでCSSを思いのままに操る!

  2015/11/30    あとで読む

 約 8 分で読めます

 

 

html_css

Blogのデザインカスタマイズでは多少は必要なHTMLとCSS。

ゼロから全ては、時間もかかり大変ですが、深く広く全て知る必要はなく、必要な所のみで十分です。
コピペを基本に覚えれば良い!

まずは他の記事(HTMLとCSSの使い方CSS基本のクラスCSSのidの指定法)で見てきたように

「HTML、CSSの記述の形に慣れること」、あとはDevツールを使ってカスタマイズを実践していきましょう。

ここではデザインカスタマイズにとても便利な「Google Chromeの開発者ツール」の使い方の紹介です。

この使い方を覚えれば、コピペが基本、の意味が分かります。

 

 

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

ブラウザで見る!

ブログを見ていると、

  • このタイトル?このボックスがカッコイイけど、同じようにできないかな?

などなど思ったことありませんか?

そういう場合に役立つのが、ブラウザ「Google Chrome」(グーグル・クローム)です。

おすすめはGoogle Chrome!デザインカスタマイズで力を発揮するの記事を参考!)

Chromeの開発者用のモードを使うと、

  • 1)HTML(ソース)が見れる
  • 2)CSSの設定がどうなっているか見れる
  • 3)CSSの設定を変えて、その場でどう変わるか見れる
  • 4)CSSはテキストをコピーするようにコピーが出来る

 

  • どういう作りになっているんだろう?
    • ということであれば、ソースを見て作りを参考できる。
    • これはHTMLをよく知る、テーマを自前で作る、という人に役立ちます。
    • ここでは軽く見るだけにしておきます。
      (だって、すでにあるテーマでカスタマイズした方が早いし整ってるし)
  • この表現がしたいんだ!
    • CSSの設定を見て必要な部分をコピーして、ブログへ取り込めばいいですね。
  • ここを少し変えるとどう見えるかな?
    • その場でCSSの設定値を変えて確認し、
    • 確認した後、コレでよし!となれば、そのCSSの設定をコピーしてブログに貼り付けでOK!

1つめのHTMLを見るのはどちらかと言えば上級者向けです。

 

Blogカスタマイズには、以下が重要です。

❶CSSの設定が見れてコピーが出来る!

❷その場で設定値を変えて変わり具合が見られる!

ここではネットビジネスで人気のテーマ「賢威」を例に見てみます。記事に従って同じように操作できます。

ここではコピーの仕方を理解しておいて下さい。

 

HTMLをみる     上級者向けです

では参考ながら、まずブログのHTMLを見てみましょう。

ブログにアクセス

まずは以下のテストサイトにアクセスします。
http://tabibitocafe.com/theme-keni/

2015-09-10_185807

HTMLを見てみる

ではこのブログのHTML(ソース)はどうなっているか見てみます。

  • ブログ上の画像”以外”の適当な所を右クリックしてメニューを表示
  • メニューから「ページのソースを表示」を選択!

2015-09-10_190232

↓↓↓↓↓↓

すると、以下のようにソース(HTML)が表示されます。

2015-09-10_190548

テーマを自前で作るなど、HTMLに詳しい場合にはとても参考になります。

 

 

CSSの設定がどうなっているか見る

次は、CSSの設定がどうなっているかが見て、CSSの設定をそのままコピーすれば全く同じデザインができます。

今回「最新情報」の背景(グレーの背景に ★上部が黒の線)をどうやって実現しているか!

  • 見てみたい箇所(今回では「最新情報」の帯)の上で右クリック
  • メニューから「要素を検証」を選択!

2015-09-10_192751

↓↓↓↓↓↓

そうすると「Developper Tools」(開発者用のウインドウ)が開きます。
記号やら何やらがいっぱい並んでますが、慌てない、慌てない。)

(※)独立したウインドウとして開かない場合には下方参照してください

左側には、クリックされた箇所のHTML表示が選択された状態で表示されます。
(ここでは「<h2>最新情報</h2>」にグレーのラインが当たってます。)

それに関するCSSの設定が右側に表示されます。
最新情報は h2タグで囲まれたものなので、h2に対してCSSでデザインが設定されている、ということになります。

ということから右側に赤枠で囲われた h2 の設定が  <h2>最新情報</h2> に関係する。

一番上の設定が、その特徴的なデザインを指定しているが、一番上の以下の部分。

  • #main-contents h2 {
        margin: 0 0 1.5em;
        padding: 0.9em;
        border-top: 3px solid #000;
        background: url(./images/title/bg-conts-h2.gif) left top repeat-x #eaeaea;
        font-size: 1.286em;
        font-weight: bold;
    }

#main-contents という id で指定された領域の中に h2タグ があり、{ }の中にその設定が書かれている。
( CSSのidの指定法を理解する 参照)

デザイン変更をしたい場合は、左側にあるプロパティ(margin, padding, border-top など)が、どういうものか調べればいいんですね。(全部で6つ)

出ているプロパティを簡単に説明。

  • margin: 外側の余白
  • padding:内側の余白
  • border-top: 境界線(上)
  • background: 背景
  • font-size: 文字の大きさ
  • font-weight: 文字の太さ

ポイントは設定をコピーできること

ここでのポイントは、この設定はコピーできる、ということです。

テキスト選択と同様に、#main-contents h2 の先頭から(先頭の#から)➡︎ 最後の ” } ” までマウスでドラッグして選択。

上の図のように青色などで反転し、全体を選択した後、  「Ctrl + C」か、右クリックで下の図のように「コピー」が出てきます。

2015-09-11_032547

簡単なCSSの設定なら、こうしてコピーしてあなたのブログのCSSファイル(スタイルシート)に貼り付ければ、そのまま同じデザインとなる。

※)勿論 id や クラスの指定が違う場合には中身だけをコピーする、とか、上の例の様に、backgroundの指定が画像であった場合には違うものにする、などの工夫が必要になる。

 

「Developper Tools」(開発者用のウインドウ)が独立したウインドウとしてではなく、以下のようにブラウザと同じ画面内に表示された場合について。

2015-09-10_205407

赤枠の四角を2つ重ねたようなアイコンをクリックすると、独立したウインドウとして表示されます。

 

CSSの設定を変えてみる

では次に設定を少し変えてみます。

これができるようになると、使っているテーマをいろいろと簡単にカスタマイズができるようになります。

ここではまず分かりやすく、「最新情報」の上の黒の線の色を変えてみます。

 

 

❶色の変更

border-top (境界線(上部))のところにある黒四角をクリックします。

2015-09-10_210000

色変更用のウインドウが表示されますので、好きな色に変えてみます。

↓↓↓↓↓↓

色変更用のウインドウでは、以下のように色が変更できます。

  • 上部の好きな場所でクリック
    (すると色が選択されます)
  • 中段のカラフルなバーで色の変更
    (をすると、上部の色が変わります)
  • その下は透過度
    (左が透過する割合が高くなり、右に行くに従って透過する割合が低くなります)

2015-09-10_210340

ここでは変化がよく分かるように、紫にしてみました。

↓↓↓↓↓↓

2015-09-10_210854

ブラウザ画面のブログを見てみて下さい。実際に上部の線の色も変わってます。

こうして色を変更して実際の画面でどうなるか見ることができるんですね。

❷値の変更 ➡︎ 線の太さを変更

数値などの値も変更でき、線の太さ等を変更する。

例として、線の太さを変える。

同じ プロパティ(border-top)の値の部分(1px solid ….)を一度クリックすると、下図のように、数値全体が反転表示され、選択された状態になります。

2015-09-10_211514

 

更にもう一度クリックすると、以下のように編集が出来る状態になりますので、今度は「3px」の数値を変えてみます。

2015-09-10_211711

↓↓↓↓↓↓

ここでは、頭に1を足して13pxにしてみました。            3px ➡︎13px

ブラウザの画面を見ると、紫の線が太くなっている。

2015-09-10_211851

他のプロパティーの数値も変更でき、その場でどう変わるかが見れる!

 

 

 

 

 

❸設定の追加  ➡︎  box-shadowで影をつける

今あるプロパティーの値の変更だけでなく、設定の追加(プロパティの追加)もできます。

例として「最新情報」にプロパティを追加して、 少し影を付けてみましょう。
#main-contents h2 に設定されたプロパティーの一番下に追加した。

一番下の行の右で( ➡︎boldの少し右辺りで)クリックすると、更に、一番下に入力できるような1行が現れますので、そこに入力する。

2015-09-10_213803

                               ↓↓↓↓↓↓

2015-09-11_034852

影をつけるプロパティは box-shadow です。

box … と入力していくと、プロパティ候補が下に表示されるので、目的の box-shadow が分かれば、↓キーで選択すればOKです。(全て box-shadow と入れてもらっても構いません)

2015-09-10_214130

以下のようにプロパティの入力が終われば次は値の入力です。

2015-09-10_214534

「Enter」キーか「Tab」キーを押下して下さい。
↓↓↓↓↓↓

プロパティ(box-shadow)の右に値入力の場所が現れます。
(下に 色々と名前がリストで表示されますが、まぁ、気にしないでください)

2015-09-10_214847

値として例えば、2px 2px 2px blue と入力します。

2015-09-11_040004

入力後は Enterキー押下!
↓↓↓↓↓↓

実際見てみると、左のブログ画面ではしっかり青色の影がつきました。

右の Developer Toolsのウインドウにも、今入力したプロパティと数値が見えますね。

2015-09-10_215444

以上のような操作で好みの表示となるように、数値や色を調整すればOKです。

色々と調整後は、先程も見たようにプロパティーなどをコピーして自分のブログに貼り付ければ、今試した表示ができる!というわけです。

 

※)参考 box-shadow プロパティの説明

box-shadow は文字通り box に影を付けるプロパティ。

ここでは、2px 2px 2px blue と値を入れましたが、値の意味は左から順番に、

  • 水平方向の影(マイナスの値を設定すると影の方向は左)
  • 垂直方向の影(マイナスの値を設定すると影の方向は上)
  • 影のぼかし

となっています。box-shadow はとても便利で、よく使うプロパティーの1つ。

 

 

 

❹設定の削除

プロパティの追加の次は、プロパティーの削除です。

今 box-shadow を追加してみましたが、やっぱりいらない!ということで削除する場合、プロパティを一度クリックして反転させます。

2015-09-11_042310

そして「BackSpace」キーか、「DEL」(Delete)キーを押下!
↓↓↓↓↓↓

プロパティーが消えますので、後は適当な所でクリックするか、「Enter」キーなどを押下すれば設定自体が消えます。

2015-09-11_042811

適当な所でクリック!
↓↓↓↓↓↓

2015-09-11_043016

無事、削除されましたね!➡︎削除を取り消したい場合には、「Ctrl + z」で復活します。復活の呪文


 

❺設定のON/OFF  ➡︎ 先頭のチェックマーク

最後は設定のON/OFFです。

実際、どのプロパティーが、どのように、表示に影響しているか、を見るには、プロパティーをON/OFFしてみるのが早いです。

「#main-contents h2」の色々なプロパティーの上にカーソルを 持ってくると、先頭にチェックマークが表示されますね?

2015-09-11_044113

ここをクリックしてチェックを外したり、付けたり(OFFしたりONしたり)することで、実際のブログの表示もリアルタイムで変化する。

そのプロパティーの設定が、どこに、どのように影響しているか見れます!

試しに、分かりやすい「border-top」(上から3番目)の★先頭のチェックを外してみると...「最新情報」の上の線が消えました

2015-09-11_044624

「最新情報」の上の線が消えました。

Developer Tools のウインドウではチェックマークが外れ、プロパティーの設定の無効を示す 取消し線 が表示されます。

また、先頭の四角をクリックすると設定が有効に戻り、「最新情報」の上に再び線が表示(border-top=赤い太線に変更)されます。

↓↓↓↓↓↓

2015-09-11_045100

このようにプロパティをON/OFFしてみると、表示がどのように変わるか分かります。

カテゴリー: 夕陽のある海岸通り | タグ: | コメントをどうぞ

ブログのデザイン!CSSの適用範囲を確認する技→範囲を絞っていく

ブログのデザインカスタマイズの決め手!CSSの適用範囲を確認する技

ブログのデザインカスタマイズの決め手!CSSの適用範囲を確認する技

  2015/11/28    あとで読む

 約 7 分で読めます

 

glass-473758_1280

デザインを簡単に修正できるよう、多くのサイトでCSSの具体的記述例が公開されています。

(見出しのデザインならは ブログの見出しデザインを制覇せよ!CSS貼り付けだけの簡単素材で記事を彩るの記事を参照してみてくださいね!)

CSSをサクッとコピーしてブログに貼り付ければすぐ利用ができる、といった手軽さでとっても便利ですが、問題となるのがその影響範囲(設定が適用される範囲)。

 

例えば WordPress で記事作成する場合、見出しは h2タグ(見出し2)が基本に使われますが、

コピーしてきたCSSを単に h2 に適用すると、

➡︎使用しているテーマによっては❶記事の中の見出しは勿論、❷タイトルも変わった!❸サイドバーも変わった!❹フッターも変わった!❺トップページまで変わってるぅ!と、何だかわからないけどトンデモなくたいへーん、ということにもなりかねません。(私は何度となく経験してますけど )ゞ

 

 そんな思いはもうしない!だって今では強い味方となる便利なツールがあるんです!ということで、ここではツールを利用して、適用したいところだけに適用する方法を解説します。

この技をマスターすると、デザインカスタマイズはもう思いのまま。
(言い過ぎではないですよ。適用すべき箇所が分かってしまえば、あとはどれだけ時間をかけてこだわるかだけ)

あなたのブログは、正にあなた次第で如何ようにも変えられます。あなた色にドンドン染めて、訪れる読者にもっともっと楽しんでもらいましょう!

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

[1] 単に適用してはダメ

例えば「記事の中にある見出し」に対して、CSSを適用させてデザインを変更することを考えてみます。

ここでは分かりやすく、記事の中にある見出し2(h2)に対して以下のようにしてみましょう。

  • 背景を黒
  • 文字色を白
  • 外枠の色をピンクの太い線
    見出し2の具体例

そのCSS、

を自分で設定したり他のサイトなどからコピーして来た時、単にこれをブログのCSSに反映するとどうなるか、

 

有名テーマの3つで見てみます。

❶「賢威」

➡︎背景は黒になってない、枠は全てピンクになってない、文字色だけ白になってる

❷「Simplicity」

➡︎タイトル等、他に影響は出てなく、目的の見出し2だけが変更できている❸「Stinger5」

➡︎枠の色だけ変わり、文字色、背景色は変わってませんが、あらら~、トップページがいろいろと変わってしまってます。


※)ブログのCSSへの反映法は以下記事参照
WordPressのCSSカスタマイズ!読み込み用プラグインとCSS反映の具体例!

❶威の場合

2015-09-18_062850

見て分かるように、記事の一番上のタイトルまで変わってしまいました。

しかも全て中途半端で、背景は黒になってない、枠は全てピンクになってない、文字色だけ白になってる、というかんじです。

❷Simplicityの場合

2015-09-18_063256

Simplicity はいい感じですね。

タイトル等、他に影響は出てなく、目的の見出し2だけが変更できているように見えます。

と、安心してる所にトップページを見てみると...

2015-09-18_063524

あらら~、トップページがいろいろと変わってしまってます。

これではおちおち変更も入れられません。

❸Stinger5の場合

2015-09-18_063625

Stinger5の場合も、枠の色だけ変わり、文字色、背景色は変わってません。

これでは変更したくても変更できない状態ですね。

[2] CSSを適用するセレクタ(タグ)の確認

上で見たように、CSSの設定が正しく反映されないのは「変更したい箇所」(★変更したい箇所のセレクタ(タグ))の指定がうまくいってないからです。

そこで登場するのがGoogle Chrome の開発ツール

Google Chrome の開発ツールを使えば、変更したい箇所の指定をどうすればよいかがすぐ分かるんですね。

では早速Google Chromeを起動して、セレクタ(タグ)の確定から見てみます。

  • ① 変更したい箇所にカーソルをあてた状態で右クリック
  • ② 表示されるメニューの一番下「要素を検証」をクリックすることで
  •      開発ツールを起動する

2015-09-18_065133

↓↓↓↓↓↓

Google Chrome の開発ツールが起動されました。

ここで薄くフォーカスがあたっている所(①)にカーソルを持って行きクリックすると、

  • ① クリックした所がハッキリと反転する
  • ② ブラウザ上では、そこの箇所に対応する場所が色がつく
    (オレンジは余白を示す)
  • ③ その時に左に表示される諸々のCSSが、その箇所の設定値。

ここで ③の箇所で

 “element.style”の下に記述されるものが、CSSで指定するセレクタ(タグ)となります。

ここでは「#main-contents h2」となりますね。

デザインカスタマイズを行なう場合、

  • まずはこのように開発ツールを使い、
  • CSSで指定するセレクタ(タグ)を確認して、
  • そのセレクタに対してCSSを設定する

ということを行えば良いわけです。

ただ上の方で例の見たように、セレクタの範囲が十分絞りこまれてなく、想定以外にもCSSの値(色など)が反映されてしまうこともあり、そいった場合には以下のように範囲の絞込を行います。

[3] セレクタ(タグ)の範囲の確定

上で見た例では、h2タグ に対する場所(範囲)の指定は、”#main-contents” となっていますので、この “#main-contents” はどの領域を指しているのかまず見てみます。

開発ツール上、上の階層を遡って見ていくと、

2015-09-18_071531

少し上の所①にありました。 
<div id=”main-contents“> とid指定されてます。

この id はどの領域(範囲)を指定しているかを見るには以下を行います。

  • ① <div id=”main-contents”>の箇所にカーソル移動
  • ② ★ブラウザ上で色がついて表示される領域を確認する

上の図で②を見ると、青色がで覆われる部分(つまりここでは #main-contents の領域)が、記事のタイトルまで含まれていることが分かります。

ということから、タイトルを含めない範囲で h2 を指定する必要がある、ということになり、次は範囲を絞っていくわけです。

  • 1)CSSを適用したいタグが含まれ
  • 2)CSSを適用したくない領域は含まれない指定のできる id や class を探す

調度よいところはどこか、カーソルを移動しながらブラウザ上に表示される青色の範囲を見てみると、

2015-09-18_071848

  • ① <div class=”contents clearfix”>というところで、
  • ② タイトルを抜かした記事の内容に範囲が絞られる

ということがわかりますので、この class の最初の contents を利用します。
(結果としてセレクタは以下となります)

  • #main-contents .contetns h2
    (classには 先頭に” . “を付けるのを忘れずに!)
  • または、htmlのタグを一緒につけて以下としてもよいです
    #main-contents div.contetns h2

🍎これは「#main-contents」内にある「.contents」の下の「h2」という意味です。

このセレクタを使って、改めて以下のようにCSSに指定してみると...

2015-09-18_072554

おぉ、いいじゃないですか。しっかり想定した見出しの部分だけ、CSSが適用されました。やったね b)v

他の例も見てみる(Simplicity)

では同様に、Simplicityの見出し2の指定はどうすれば良いか見てみましょう。

同じように、変更したい箇所で右クリックして開発ツールを起動します。

2015-09-18_084426

起動した開発ツール上、薄くフォーカスがあたっている所(①)にカーソルを持って行きクリックすると、

  • ① クリックした所がハッキリと反転する
  • ② ブラウザ上では、そこの箇所に対応する場所が色がつく
    (オレンジは余白を示す)
  • ③ その時に左に表示される諸々のCSSが、その箇所の設定値。

③の箇所で “element.style”の下に記述されるものが、CSSで指定するセレクタ(タグ)となることから、Simplicityの記事中の「見出し2」は「.article h2」ということが分かります。

試しにこの「.article h2」で、先ほどのCSSを指定し直すと…

2015-09-18_085227

記事本文は、問題なく想定箇所のみに設定したCSSが反映されています。

では、物凄いことになっていたトップページを見てみると...

2015-09-18_085335

見事、普通に戻ってました。
想定外の所に影響が出るとパニックになってしまいますが、ひとまずめでたしめでたしですね。)ゞ

[4] 具体例: ❶ 記事のタイトル

では練習も兼ねて「賢威」「Simplicity」「Stinger5」の記事のタイトルをデザインカスタマイズしたい場合、セレクタはどうすればよいか見てみましょう。

① 賢威の記事のタイトル

変更したい箇所(ここでは記事のタイトル)で右クリックして開発ツールを起動します。

2015-09-18_090349

起動した開発ツール上、薄くフォーカスがあたっている所(①)にカーソルを持って行きクリックすると、

  • ① クリックした所がハッキリと反転する
    (正に記事タイトルですね!)
  • ② ブラウザ上では、そこの箇所に対応する場所が色がつく
    (オレンジは余白)
  • ③ その時に左に表示される諸々のCSSが、その箇所の設定値。

③の箇所で “element.style”の下に記述されるものが、CSSで指定するセレクタ(タグ)となることから、賢威の「記事中のタイトル」は

「#main-contents h2.post-title」を指定すれば良い、

ということが分かります。

② Simplicityの記事のタイトル

Simplicityの記事のタイトルも同様に見てみると、

2015-09-18_091532

③の箇所を見れば、Simplicityの「記事中のタイトル」は

「.article h1」を指定すれば良い、

ということが分かりますね。

③ Stinger5の記事のタイトル

Stinger5の場合は少し特殊みたいです。

2015-09-18_092044

同様に見ると、Stinger5の場合、記事のタイトルのセレクタは、

「.entry-title」を指定すれば良い、

ということが分かりますが、h1タグが入ってないですね。

①を見てみると、この「.entry-title」は h1 に指定されている class であることから、少し明確化するには「h1.entry-title」を指定する、としても良いですね。

[5] 具体例:  ❷ サイドバーのタイトル(見出し)

ではもう1つ練習も兼ねてサイドバーについても見てみましょう。

こちらもデザインのポイントとなるタイトル(見出し)をカスタマイズしたい場合、セレクタはどうすればよいか、ですが...

① 賢威のサイドバー

上で見てきたのと同じように操作します。
変更したい箇所(ここではサイドバーのタイトル(見出し))で右クリックして開発ツールを起動します。

2015-09-18_101643

③の箇所を見れば、テーマ「賢威」のサイドバーのタイトル(見出し)はセレクタとして、

  • .sub-column .contents h3

を指定すれば良い、ということが分かりますね。

② Simplicity のサイドバー

同様に Simplicity の場合も見てみると、

2015-09-18_102551

③の箇所を見れば、テーマ「Simplicity」のサイドバーのタイトル(見出し)はセレクタとして、

  • #sidebar h4

を指定すれば良い、ということが分かります。

③ Stinger5 のサイドバー

同じく、テーマ「Stinger5」のサイドバーを最後に見ておきます。

2015-09-18_103541

③の箇所を見れば、テーマ「Stinger5」のサイドバーのタイトル(見出し)はセレクタとして、

  • #side aside h4

を指定すれば良い、ということですね!

いやいや簡単じゃないですか。あとは気に入ったデザインがあればそのCSSをコピーして、ここで見てきたようにセレクタを調べて貼り付ければ良いわけです。

どうですか?正に「デザインカスタマイズしたいなら思いのまま!」状態になりました。(o)v

今回のまとめ

  • ブログデザインをカスタマイズするためのCSSが、いろいろなサイトで公開されている
  • コピーしてブログに貼り付ければ利用できるが、問題となるのがその影響範囲。
  • デザイン変更したい箇所のみの指定(セレクタ)を調べるには、Google Chromeの開発ツールを利用するのが便利。
  • 範囲の絞りこみが足りない場合、調度よい範囲をしていするための id や class を探し、セレクタに含めれば良い。

かっこいいデザイン、少しトリッキーなデザイン、とネットで探せばいろいろと楽しいデザインが紹介されてますが、適用箇所の指定の仕方が分からず、あれこれ試してみたが結局使わずじまい、となってしまう場合も多いでしょう。

全ては適用箇所に対するセレクタが正しく指定できていないからですが、この記事で見たようにGoogle Chrome の開発ツールを使えばそれもすぐ分かるんですね。この利用方法をマスターすればデザイン変更は思いのまま!

正にブログデザインに対しては必殺の武器を身に付けることになり、あとはどれだけ凝るかだけ。

この武器によりあなたのブログに独特の個性をもたせ、グーグルのペナルティリスクの少ない、読者が長く滞在したくなるようなブログ運営を目指しましょう。

読者が長く滞在し楽しめるブログ、それが息の長い成功につながります。

この記事があなたの成功に役立つことを願っています。

カテゴリー: 夕陽のある海岸通り | タグ: | コメントをどうぞ

見たまま編集 Stylish →FIrefox から Chrome へ移行 →WPへ投稿 =アドオン「Make Link」の代替は「Create Link」

[1]WordPress のビジュアルエディタを見たまま編集にする

WordPress のビジュアルエディタを 見たまま編集 にする方法についての覚書です。

投稿の編集 ‹ t demo — WordPress-6

投稿の編集 ‹ t demo — WordPress-5

とりあえず、私自身が使っている記事部分の CSS の一部を使って、ビジュアルエディタの画面を見やすくする方法を考えてみました。

以下がその結果です。

ビジュアルエディタへの CSS の追加Stylish という Firefox のアドオンで行います。Chrome でもできます。

 1 アドオン「Stylish」を Web ブラウザにインストール後、以下のページの「Install with  Stylish」ボタンをクリックすれば、半自動的に WordPress のビジュアルエディタに上の動画のような CSS が適用されます。

インターネットエクスプローラでの CSS の適用方法については以下の記事等をご参照ください。

記事での CSS の適用具合については以下の HTML を使ってください。

Simplenote
&lt;!-- 見出し等の表示確認 -comemo-entry-html-2014-06-11-  --&gt;
&lt;!--  CC0 1.0 Universal (CC0 1.0)|http://creativecommons.org/publicdomain/zero/1.0/deed.ja  --&gt;

&lt;h3&gt;見出し3&lt;/h3&gt;
&lt;h4&gt;見出し4&lt;/h4&gt;
&lt;h5&gt;見出し5&lt;/h5&gt;
&lt;h6&gt;見出し6&lt;/h6&gt;
&lt;blockquote&gt;引用文
&lt;ul&gt;
	&lt;li&gt;箇条書き&lt;/li&gt;
	&lt;li&gt;箇条書き&lt;/li&gt;
&lt;/ul&gt;
引用文&lt;/blockquote&gt;
&lt;pre&gt;整形済みテキスト&lt;/pre&gt;
&lt;ul&gt;
	&lt;li&gt;箇条書き&lt;/li&gt;
	&lt;li&gt;箇条書き&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
	&lt;li&gt;連番&lt;/li&gt;
	&lt;li&gt;連番&lt;/li&gt;
&lt;/ol&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;dfasd&lt;/th&gt;
&lt;th&gt;adfasd&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;fadsfas&lt;/td&gt;
&lt;td&gt;fadfa&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;fadfdas&lt;/td&gt;
&lt;td&gt;fadafds&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
自分用メモ(記事「デザイン:自分用メモ」参照)

&amp;nbsp;

!

&lt;/div&gt; &amp;nbsp; &lt;/div&gt; &amp;nbsp;

見出し

本文 本文 本文 本文 本文

 

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

&lt;/div&gt;

見出し

本文 本文

 

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

 

見出し

本文 本文

&lt;/div&gt;

見出し

本文 本文

 

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

 

見出し

本文 本文

 

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

&lt;/div&gt;

また、テーマ等で利用するときには以下の CSS を使ってください。

Simplenote
/* 見出し等の装飾等「comemo ベーシック」 comemo basic-2016-05-02 */
/* Copyright (c) 2015 katsuhiro fuchinoue / MIT License / http://opensource.org/licenses/mit-license.php(日本語訳 / http://sourceforge.jp/projects/opensource/wiki/licenses558MIT_license)
 *
 *(以下、参考(katsuhiro fuchinoue( http://comemo508.wordpress.com )の解釈))
 * 以下の条件を満たす限り、自由な複製・配布・修正を無制限に許可する。
 * ・上記の著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない(変更点を示す必要はない)。
 * ・作者または著作権者は、ソフトウェアに関してなんら責任を負わない。
 */
/*
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif !important;
}
*/
/* 画像に枠をつける */
.entry-content img:not(.bordernone):not(.emoji),
.entry img:not(.bordernone):not(.emoji),
.post-content img:not(.bordernone):not(.emoji) {
	border: 1px solid #eeeeee !important;
	padding: 6px !important;
	background-color: rgba(230,230,230,0.4) !important;
	box-sizing: border-box !important;
}

#content .entry-content .tiled-gallery-item img,
#content .entry .tiled-gallery-item img,
#content .post-content .tiled-gallery-item img {
/*
	border: none !important;
	*/
	padding: 0 !important;
	box-sizing: border-box !important;
}

.entry-content img.bordernone,
.entry img.bordernone,
.post-content img.bordernone {
	border: none;
}

#content embed, 
#content object, 
#content iframe:not([src*="google"]):not(#pocket-button-0):not([src*="facebook"]):not([src*="twitter"]):not(.post-likes-widget) {
	border: 1px solid #eee !important;
	padding: 6px !important;
	background-color: rgba(0,0,0,0.04) !important;
}

.entry img:not(.bordernone), 
#content video, 
#supplementary img {
	border: 1px solid #eee !important;
	padding: 6px !important;
	background-color: rgba(0,0,0,0.04) !important;
	box-sizing: border-box;
}

.entry-content .tiled-gallery img {
	margin: 0 !important;
}

.wp-caption {
	box-sizing: border-box !important;
}

.wp-caption img {
	box-sizing: content-box !important;
}

/* 見出し */
.entry-content h3:not(.sd-title),
.entry h3:not(.sd-title),
.post-content h3:not(.sd-title),
.entry-content h4,
.entry h4,
.post-content h4,
.entry-content h5,
.entry h5,
.post-content h5,
.entry-content h6,
.entry h6,
.post-content h6 {
	margin: 25px 0 !important;
}

.entry-content h3:not(.sd-title),
.entry h3:not(.sd-title),
.post-content h3:not(.sd-title) {
	line-height: 1.3em !important;
	border-left: 10px solid #888888 !important;
	margin: 40px 0 20px -18px !important;
	padding: 7px 0 7px 10px !important;
	font-size: 24px !important;
	font-weight: bold !important;
	letter-spacing: 1px !important;
	text-transform: none !important;
}

.entry-content h4,
.entry h4,
.post-content h4 {
	font-weight: bold !important;
	margin-top: 40px !important;
	font-size: 18px !important;
	border-left: none !important;
}

.entry-content h4:before,
.entry h4:before,
.post-content h4:before {
	color: #888888 !important;
	content: '●' !important;
	padding-right: 5px !important;
	display: inline-block !important;
	vertical-align: middle !important;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif !important;
	font-size: 18px !important;
	margin-left: -20px !important;
	padding-bottom: 2px !important;
}

.entry-content h5,
.entry h5,
.post-content h5 {
	background: none repeat scroll 0 0 #eeeeee !important;
	border-radius: 3px !important;
	font-weight: 700 !important;
	margin-left: -15px !important;
	padding: 3px 15px !important;
	font-size: 14px !important;
	line-height: 17px !important;
	border-left: none !important;
}

.entry-content h6,
.entry h6,
.post-content h6 {
	border-bottom: 1px solid #888888 !important;
	padding-left: 3px !important;
	font-size: 11px !important;
	font-weight: normal !important;
	border-left: none !important;
}


/* 引用文 */
.entry-content blockquote:not(.nonstyle),
.entry blockquote:not(.nonstyle),
.post-content blockquote:not(.nonstyle) {
	font-family: inherit;
	position: relative;
	font-size: 14px !important;
	padding: 20px 30px !important;
	margin: 2.625em auto !important;
	background-color: #fff !important;
	box-shadow: -1px -1px 2px rgba(0,0,0,0.6), 1px 1px 2px rgba(255,255,255,0.8), inset 0 0 50px #EADED3 !important;
	border: 1px solid #ccc !important;
	background-color: #f0f0f0 !important;
	width: 80% !important;
	overflow: visible !important;
}

.entry-content blockquote:not(.caution):not(.nonstyle):before,
.entry blockquote:not(.caution):not(.nonstyle):before,
.post-content blockquote:not(.caution):not(.nonstyle):before {
	content: "他のブログなどからの引用部分";
	position: absolute;
	bottom: -22px;
	right: 20px;
	height: 20px;
	background-color: #666666;
	background-color: rgba(0,0,0,0.600);
	border-radius: 0 0 5px 5px;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 20px;
	z-index: 1;
	color: #fff;
	text-shadow: -1px -1px 1px #777;
	padding-right: 7px;
	padding-left: 7px;
	font-size: 10px;
}
.entry-content blockquote:after,
.entry blockquote:after,
.post-content blockquote:after {
content: "";
display: table;
clear: both;
}

.entry-content blockquote:not(.nonstyle) .cite,
.entry blockquote:not(.nonstyle) .cite,
.post-content blockquote:not(.nonstyle) .cite,
.entry-content blockquote:not(.nonstyle) cite,
.entry blockquote:not(.nonstyle) cite,
.post-content blockquote:not(.nonstyle) cite {
	font-size: 11px !important;
	margin-top: 15px !important;
	margin-bottom: -10px !important;
	text-align: right;
	display: block;
}

/* 整形済みテキスト */
.entry-content pre,
.entry pre,
.post-content pre {
	background: none repeat scroll 0 0 #EEEEEE;
	border-radius: 3px;
	font: 12px/18px Consolas, Monaco, monospace;
	margin: 2em 0;
	padding: 8px 18px;
}

/* 箇条書き・連番 */
.entry-content ul li,
.entry ul li,
.post-content ul li {
	line-height: 1.5em;
}

.entry-content ul:not(.display-posts-listing),
.entry ul:not(.display-posts-listing),
.post-content ul:not(.display-posts-listing) {
	margin-left: 2.2em !important;
}

.entry-content #jp-post-flair ul,
.entry #jp-post-flair ul,
.post-content #jp-post-flair ul {
	margin-left: inherit !important;
}

.entry-content ol,
.entry ol,
.post-content ol {
	margin-left: 2.7em !important;
}

.entry-content ul:not(.display-posts-listing) li,
.entry ul:not(.display-posts-listing) li,
.post-content ul:not(.display-posts-listing) li {
	list-style: none !important;
}

.entry-content:not(.sd-content) ul:not(.display-posts-listing) li:not([class^="share"]):before,
.entry:not(.sd-content) ul:not(.display-posts-listing) li:not([class^="share"]):before,
.post-content:not(.sd-content) ul:not(.display-posts-listing) li:not([class^="share"]):before {
/*
	color: #888888;
*/
	content: '

▶

';
	padding-bottom: .3px;
	padding-right: 5px;
	display: inline-block;
	vertical-align: middle;
	margin-left: -10px;
	font-size: 10px;
}

/* 表(テーブル) */
.entry-content table,
.entry table,
.post-content table {
	background-color: #F7F7F7;
/*
	border-collapse: collapse !important;
*/
	margin: 2.625em 0 !important;
	width: 100% !important;
	border-top: 1px solid #888888 !important;
	table-layout: fixed;
}

.entry-content tr:hover,
.entry tr:hover,
.post-content tr:hover {
	background-color: #eeeeee !important;
}

.entry-content table th,
.entry table th,
.post-content table th {
	border-top: 1px solid #888888 !important;
	border-bottom: 1px solid #888888 !important;
	border-right: 1px dashed #aaa !important;
	border-left: 1px dashed #aaa !important;
	font-size: 14px !important;
	padding: 10px 18px !important;
}

.entry-content table td,
.entry table td,
.post-content table td {
	border-top: 1px solid #ffffff !important;
	border-bottom: 1px solid #888888 !important;
	border-right: 1px dashed #aaa !important;
	border-left: 1px dashed #aaa !important;
	font-size: 14px !important;
	padding: 10px 18px !important;
}

/*
.entry-content tr:first-child td,
.entry tr:first-child td,
.post-content tr:first-child td {
    border-top: none !important;
}
*/
/* 自分用メモ */
.memo {
	display: none;
	border: 1px solid #c9c9c9 !important;
	padding: 10px 5% !important;
	width: 80% !important;
	margin: 10px auto 10px 14px !important;
	background-color: #efefef !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	position: relative !important;
	font-size: 13px !important;
}

.memo:before {
	position: relative !important;
	content: "" !important;
	width: 70px !important;
	height: 40px !important;
	float: right !important;
}

.memo p {
	margin: 1em 0 !important;
}

.memo ul,
.memo ol {
	margin: 1em 0 1em 2% !important;
}

@media (max-width: 767px) {
	.memo ul,.memo ol {
		margin: 1em 0 1em 5% !important;
	}
}

.memo:after {
	position: absolute !important;
	content: "memo" !important;
	background-color: rgba(0,0,0,0.2) !important;
	color: #777777;
	border: 1px solid rgba(150,150,150,0.2) !important;
	top: -2px !important;
	right: -27px !important;
	transform: rotate(30deg) !important;
	-ms-transform: rotate(30deg) !important;
/* IE 9 */
	-webkit-transform: rotate(30deg) !important;
/* Safari and Chrome */
	-o-transform: rotate(30deg) !important;
/* Opera */
	-moz-transform: rotate(30deg) !important;
/* Firefox */
	padding: 2px 40px 2px 70px !important;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 10px rgba(255,255,255,0.4) !important;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.2) !important;
	font-weight: bold !important;
	font-size: 13px !important;
}

/* 自分用メモ -Stylish に追加する CSS- */
/*
.logged-in .memo {
    display: block !important;
}
*/
/* 注意書きボックス */
.caution {
	border: 1px solid #eceff6;
	padding: 10px 5%;
	width: 80%;
	margin: 30px auto 30px 14px;
	background-color: #f5f6f9;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	box-shadow: 1px 1px 5px white inset, 0 0 3px #cccccc;
	color: #777777;
	text-shadow: 1px 1px 1px white;
	font-size: 14px;
}

.caution:before {
	position: relative;
	content: "";
	width: 40px;
	height: 40px;
	float: right;
}

/*
.caution:after {
	position: absolute;
	content: "!";
	background-color: #b0b1b4;
	color: #fff;
	border: 1px solid #b0b1b4;
	top: 10px;
	right: 10px;
	padding: 2px;
	box-shadow: 0 0 0 2px white, 0 0 0 4px #b0b1b4;
	text-shadow: -1px -1px 1px #9c7c81;
	font-weight: bold;
	font-size: 20px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 20px;
}
*/
.caution p {
	margin: 1em 0;
}

.entry-content .caution &gt; h5,
.entry .caution &gt; h5,
.post-content .caution &gt; h5 {
	display: inline-block;
	margin-top: 1em;
}

.caution ul,
.caution ol {
	margin-bottom: 0;
}

/* 「注意書きボックス」へのアイコンの上書き -comemo 2014-05-15- */
.superscriptionicon {
	box-sizing: border-box;
	background: none repeat scroll 0 0 #FFFFFF;
	border: 4px double #AAAAAA;
	border-radius: 30px;
	font-size: 20px;
	width: 46px;
	height: 46px;
	line-height: 36px;
	padding: 0;
	position: absolute;
	right: 5px;
	text-align: center;
	top: 5px;
	z-index: 1;
	overflow: hidden;
}

.superscriptionicon .noticon,
.superscriptionicon .genericon {
	font-size: 26px;
	vertical-align: middle;
	padding-bottom: 2px;
	width: auto;
	height: auto;
}

.superscriptionicon img {
	margin: -1px !important;
	padding: 0 !important;
	vertical-align: middle;
}

/** 記事を複数のカラムに分ける・段組み -2016-04-08- **/
.tablecolumn {
	display: table;
	table-layout: fixed;
	width: 100%;
	border-collapse: separate;
	border-spacing: 10px;
}

.tablecolumn &gt; div {
	display: table-cell;
	border: 1px dashed #cccccc;
	border-radius: 7px;
	padding: 3px .7%;
}

.tablecolumn img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.tablecolumn,.tablecolumn &gt; div {
		display: block;
		width: 100%;
		margin: 1.625em 0;
	}
}

.tablecolumn &gt; .w100 {
	width: 100%;
	vertical-align: top;
}

.tablecolumn &gt; .w50 {
	width: 47%;
	vertical-align: top;
}

.tablecolumn &gt; .w33 {
	width: 31%;
	vertical-align: top;
}

.tablecolumn &gt; .w25 {
	vertical-align: top;
	width: 22%;
}

@media screen and (max-width: 767px) {
	.tablecolumn &gt; .w50,.tablecolumn &gt; .w33,.tablecolumn &gt; .w25 {
		width: 100%;
	}
}

/* 注釈のリンクの位置調整 */
.logged-in li[id^="fn-"],
.logged-in sup[id^="fnref-"] {
	margin-top: -50px;
	padding-top: 50px;
}

li[id^="fn-"],
sup[id^="fnref-"] {
	margin-top: -20px;
	padding-top: 20px;
}

@media only screen and (max-width: 768px) {
	.logged-in li[id^="fn-"],.logged-in sup[id^="fnref-"] {
		margin-top: -70px;
		padding-top: 70px;
	}
}

@media only screen and (max-width: 320px) {
	.logged-in li[id^="fn-"],.logged-in sup[id^="fnref-"],li[id^="fn-"],sup[id^="fnref-"] {
		margin-top: -50px;
		padding-top: 50px;
	}
}

/* ShareHtml の装飾 -comemo 2016-02-04- */
div.mshots {
	margin: 30px 0 !important;
}

div.mshots:before, div.mshots:after {
	content: "";
	display: table;
}

div.mshots:after {
	clear: both;
}

div.mshots img:not([src*="b.hatena.ne.jp"]:not(.emoji)) {
	float: left;
	width: 120px !important;
	max-width: 120px !important;
	height: auto !important;
	margin: 0 1.71429rem 0 .857143rem !important;
}

/* その他 */
del, del a {
	color: #ccc !important;
}

色を変更するときには「#888888」の部分を任意の色のものと置換してください。

なお、上記 CSS は、微修正を加えることで WordPress 以外の、例えば、はてなブログ等で使うこともできます。

tomemo forum

  1.  2014-08-25現在、Chrome では記事編集画面に対して CSS が反映されないことを確認済みです。その他、Firefox 以外の挙動については未調査です。
    2015-09-27現在、mac の Chrome では OK、mac の Safari では適用できないことを確認済みです

[2] mac の Chrome 上から WordPress.com への投稿について

最近、Web ブラウザの環境を FIrefox から Chrome へ移行しました。
調整内容は多岐に渡ったわけですが、それらのうち、ここでは、WordPress.com への投稿について覚え書きしたいと思います。

Stylish による装飾

ここの部分が私自身のこだわりの一つなのですが、どんなに便利なツールであっても、WordPress.com の記事編集画面に CSS を追加できないのであれば、使うつもりはなく、ほぼその理由で、これまで Firefox を頑なに使い続けてきたわけですが、最近、Chrome の方でも Stylish を使って、WordPress.com の記事編集画面の方に CSS を追加できることに気づきました。

WordPress.com の記事編集画面に追加した CSS は以下のページよりダウンロードできるようにしてあります。

上記の CSS を適用させると、WordPress.com の記事編集画面が以下のような感じで装飾され、
Windows Live Writer 等と同様に 見たまま編集 をすることができるようになります。

e68a95e7a8bfe381aee7b7a8e99b86-e280b9-t-demo-e28094-wordpress-6

comemoarrow

e68a95e7a8bfe381aee7b7a8e99b86-e280b9-t-demo-e28094-wordpress-5

アドオン「Make Link」の代替は「Create Link」で

ビジュアルモードで各種 HTML を貼り付ける際、
Firefox 上では「Make Link」というアドオンを使っていたのですが、Chrome では「Create Link」を使うこととしました。

2015-10-13 at 10.36

機能上は特に問題ないのですが、設定画面のほうで順番の入れ替えができず、

2015-10-13 at 10.35

ちょっと不便を感じているので、もし、より使い勝手のいいものがあれば切り替えたいなと思っています。

なお、登録しているスニペットについては以下の記事をご参照ください。

単純に Firefox よりも軽い

このあたりは体感してもらった方がいいと思うのですが、Firefox より Chrome の方が若干、動作が軽いような気がします。このあたりは導入しているアドオン・拡張機能の数や種類等で変わってくるので一概には言えませんが。

❓

2015-10-25現在は、また、Firefox を使っています。現状、どちらでも作業可能な状態ですが、Chrome では、ポップアップの広告をその都度、削除する作業 (リダイレクトしているサイトを調べて、その根っこの部分をブロックする作業) がちょっと面倒な感じです。

詳細な事情はよくわかりませんが、Firefox ではなぜかそのような現象は起きません。アドオンの関係でしょうか? それとも、Chrome だけに適用されるウイルス?

カテゴリー: 夕陽のある海岸通り | コメントをどうぞ

Firefox Make Link スニペット集

 

 

私が使っている・使っていた Make Link スニペット集

 

各自、さまざまな方法でリンクタグ等の貼り付けを行っていますが、
Firefox のアドオン「Make Link」に以下のスニペットを登録して、
主に WordPress.com のビジュアルモード上でリンクタグ等の貼り付けを行います。

ここでは、現在、使っている・使っていないにかかわらず、とりあえず、アドオン「Make Link」に登録しているものを公開します。

Make_Link_オプション

 

なお、アドオン「Stylish」を使って、以下の CSS を追加すると「Firefox」上に限り、ビジュアルモード上での編集がしやすくなると思います。

また、WordPress.com 等のブログ・サイトに以下の CSS を追加すると、以下のすべてのスニペットを使えるようになると思います。 1

以下、Firefox のアドオン「Make Link」に登録してあるスニペットの一覧です。

 名前 スニペット  備考
 リンク
 &lt;a href="%url%"&gt;%text%&lt;/a&gt;
 リンクの貼り付け用。
 リンク(Twitter)
 "%text%" %url%
 Twitter にリンクを貼り付けるときに使用しているもの。2015-02-17現在は Drafts を使用。
 リンク(Markdown)
 [%title%](%url%)
 Markdown 記法でのリンクの貼り付け用ですが、一番上のものを使うことがほとんどです。
 テーマ仕様
&amp;nbsp; &lt;table border="1" width="387" cellspacing="0" cellpadding="2"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td valign="top" width="148"&gt;テーマの解説&lt;/td&gt; &lt;td valign="top" width="237"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top" width="148"&gt;デモ&lt;/td&gt; &lt;td valign="top" width="237"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top" width="148"&gt;更新情報(英語)&lt;/td&gt; &lt;td valign="top" width="237"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top" width="148"&gt;〃(日本語)&lt;/td&gt; &lt;td valign="top" width="237"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top" width="148"&gt;価格&lt;/td&gt; &lt;td valign="top" width="237"&gt;$(現在)&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top" width="140"&gt;レンタルサーバ等にインストールして使うタイプの WordPress 用テーマの解説等&lt;/td&gt; &lt;td valign="top" width="237"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top" width="140"&gt;サポートページ(英語)&lt;/td&gt; &lt;td valign="top" width="237"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top" width="140"&gt;テーマの制作者&lt;/td&gt; &lt;td valign="top" width="237"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;!--more--&gt; &amp;nbsp; &lt;h3&gt;テーマ「」の背景/特徴&lt;/h3&gt; &amp;nbsp; &lt;h3&gt;外観設定のバリエーション&lt;/h3&gt; &lt;p&gt;つのウィジェットエリアがあります。  &lt;/p&gt; &lt;p&gt;つのメニューエリアがあります。      &lt;/p&gt; &lt;p&gt;つのソーシャルアイコンエリアがあります。      &lt;/p&gt; &lt;p&gt;ヘッダー画像を追加することができます。&lt;/p&gt; &lt;p&gt;背景を変更することができます。      &lt;/p&gt; &lt;h3&gt;記事設定のバリエーション&lt;/h3&gt; &lt;h4&gt;テンプレート&lt;/h4&gt; &amp;nbsp; &lt;h4&gt;投稿フォーマット&lt;/h4&gt; &amp;nbsp; &lt;h4&gt;アイキャッチ画像&lt;/h4&gt; &amp;nbsp; &lt;h3&gt;カスタマイズ(色等)・CSS 編集のバリエーション&lt;/h3&gt; &amp;nbsp; &lt;h3&gt;その他特記事項&lt;/h3&gt;
 これは個人的に使っているテンプレートのようなもの。こんな感じで、普段、よく使うものを HTML の状態で Make Link に登録しておけば、記事の作成が捗ります。
 注意書き
Simplenote
&lt;blockquote class="caution"&gt;
!
&lt;/div&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;/blockquote&gt; &amp;nbsp;
 あとから注意書きを加えるときに使っています。ブログ・サイトへの CSS の追加が必要です。
 memo
Simplenote
 
 こちらは注意書きの非公開版。ブログ・サイトへの CSS の追加及びアドオン「Stylish」を使用します。
 引用
 &lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;blockquote&gt;%text_br%&lt;br style="clear: both;" /&gt;&lt;cite&gt;引用先:&lt;a href="%url%"&gt;%title%&lt;/a&gt;&lt;/cite&gt;&lt;/blockquote&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 引用。詳細な引用をする場合は、ブックマークレットを使っています。
 矢印
 &lt;img class="bordernone" border="0" alt="comemoarrow" src="https://comemo508.files.wordpress.com/2014/09/comemoarrowg3871.png?w=1100" title="comemoarrow" style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border:0;"&gt;
 矢印の画像を貼り付けます。
 関連マップ
&lt;h6&gt;関連情報・トピックのマップ&lt;/h6&gt;
 個人的に使っているテンプレートのひとつ。
 サンプル文書
&lt;a href="http://comguideja.wordpress.com/43432月34343水c432月c434315年2月4日水曜日 12時34分54秒 Asia/Tokyocontentsidebar43       4/cropped-cropped-a0023_000007_m-jpg/" rel="attachment wp-att-12227"&gt;&lt;img class="alignleft size-medium wp-image-12227" src="http://comemo508forum.files.wordpress.com/2013/03/cropped-cropped-a0023_000007_m.jpg?w=300" alt="cropped-cropped-a0023_000007_m.jpg" width="300" height="74" /&gt;&lt;/a&gt;本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 &lt;a href="http://comguideja.wordpress.com/43432月34343水c432月c434315年2月4日水曜日 12時34分54秒 Asia/Tokyocontentsidebar43       4/cropped-a1380_000009_m-jpg/" rel="attachment wp-att-12211"&gt;&lt;img class="alignright size-thumbnail wp-image-12211" src="http://comemo508forum.files.wordpress.com/2013/03/cropped-a1380_000009_m.jpg?w=200" alt="cropped-a1380_000009_m.jpg" width="200" height="69" /&gt;&lt;/a&gt;本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
  個人的に使っているテンプレートのひとつ。
 表 (2列)
&lt;table border="1" cellspacing="0" cellpadding="2"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &amp;nbsp;
 2列の表を貼り付けます。表の中に注釈を入れたい場合には Markdown 記法で表を作成します。
 表 (3列)
&lt;table border="1" cellspacing="0" cellpadding="2"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &amp;nbsp;
 3列の表を貼り付けます。
 表 (4列)
&lt;table border="1" cellspacing="0" cellpadding="2"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;td valign="top"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &amp;nbsp;
 4列の表を貼り付けます。
 new マーク
&lt;em&gt;&lt;span class="new%input%"&gt;&lt;span style="display: none;"&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/em&gt;
 new マークを貼り付けます。ブログ・サイトに CSS を追加する必要があります。
 rev マーク
&lt;em&gt;&lt;span class="rev%input%"&gt;&lt;span style="display: none;"&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/em&gt;
  rev (修正)マークを貼り付けます。ブログ・サイトに CSS を追加する必要があります。
 使用中
&lt;span class="useitem"&gt;&lt;span style="display: none;"&gt;.&lt;/span&gt;&lt;/span&gt;
 使用中のマークを貼り付けます。ブログ・サイトに CSS を追加する必要があります。維持・管理が大変なので、2015-02-17現在はほとんど活用していません。
 段組み (2列)
Simplenote

見出し

本文 本文 本文 本文 本文 本文
&lt;/div&gt;

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
&lt;/div&gt; &lt;/div&gt;&amp;nbsp;
 2列の段組みを貼り付けます。ブログ・サイトに CSS を追加する必要があります。なお、アドオン「Stylish」を使って、編集画面にも CSS を適用すると、記事の編集がやりやすくなります。
 段組み (3列)
Simplenote

見出し

本文 本文 本文
&lt;/div&gt;

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
&lt;/div&gt;

見出し

本文 本文 本文
&lt;/div&gt; &lt;/div&gt;&amp;nbsp;
 3列の段組みを貼り付けます。
 段組み (4列)
Simplenote

見出し

本文 本文 本文
&lt;/div&gt;

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
&lt;/div&gt;

見出し

本文 本文 本文
&lt;/div&gt;

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
&lt;/div&gt; &lt;/div&gt;&amp;nbsp;
  4列の段組みを貼り付けます。
 CC0 (HTML)
&lt;!-- License: CC0 1.0 Universal (CC0 1.0)|http://creativecommons.org/publicdomain/zero/1.0/deed.ja --&gt;
 著作権表示のテンプレートです。
 お知らせ欄
Simplenote
&lt;!-- お知らせ欄 -comemo 2014-09-24- --&gt;
&lt;!-- License: CC0 1.0 Universal (CC0 1.0)|http://creativecommons.org/publicdomain/zero/1.0/deed.ja --&gt;
&lt;/code&gt;&lt;/pre&gt;

お知らせ

てすてす
&lt;/div&gt;
 お知らせ欄のテンプレートです。

 

  1. それぞれのスニペットの制作時期がまちまちなので、もしかしたら、CSS の方でまだ対応できていないものや説明不十分な点があるかもしれませんが、とりあえず、公開します。
カテゴリー: 夕陽のある海岸通り | コメントをどうぞ

Winの「メモ帳」←Webからコピーでフォントサイズやカラーがそのまま持ってこられてRTF

Mac標準のエディタ「テキストエディット」を「メモ帳」の使い勝手に近づける
公開日: 2013年1月29日著者: fujimottaカテゴリー: etc, Macタグ: Mac : アプリ
MacでもWinのメモ帳はほしい。
Windowsにはメモ帳というテキストエディタがある。
Macで同じようなもの、というと「テキストエディット」になるのだが、これが標準だとリッチテキストエディタとなり、Webからコピーするとフォントサイズやカラーがそのまま持ってこられてちょっと煩わしい。
それを回避するためのショートカットなんかも存在はするのだけれど、やっぱりWinの「メモ帳」のような「何も気にしなくていい」感じにはならない。

そんな時見つけたのが、テキストエディットのこのメニュー。

「フォーマット」メニュー内に「標準テキストにする」が。
テキストエディットでは標準テキストに変換する設定があったようだ。
さらにテキストエディットの環境設定を調べてみると、こんなものも。

環境設定内に、デフォルトのフォーマットを設定する箇所が。
これを標準テキストに変更すると、あとは新規作成時に自動的に標準テキストで用意される。
あとは、自分の見やすいフォントに調整し、ようやくメモ帳っぽいテキストエディットが完成した。

ようやく僕の理想のテキストエディットが完成した。
これなら、標準のテキストエディタとしてテキストエディットを使っても良いかもしれない。
今まではわざわざCotEditorを使っていたが、やっぱり自動保存に対応しているテキストエディットの方がファイルの取り回しが楽なので、当面はこちらを使ってみようと思う。
ちなみに、テキストエディットには「リッチテキストを作って、HTMLに出力する」という機能があるみたいだ。
メモ帳には無い凄さもあるテキストエディット、リッチテキスト機能ももうちょっと使ってみようと思う。

| コメントをどうぞ

LINEやFacebookみたいな会話をブログで使う、めちゃくちゃ便利な吹き出しプラグイン

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”A さん”] おっす! [/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”2.jpg” name=”B さん”] なんだちみは!?[/speech_bubble]

LINEやFacebookみたいな会話をブログで使う事ができる、めちゃくちゃ便利な吹き出しプラグインを見つけました。

WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる!

毎年平社員の佐伯さん
こんにちは。WordPressではこんな便利なプラグインがあるんですね。

OLの長野さん
佐伯さん、”毎年平社員”っていう肩書がつけられてますよ。チョー似合う。
今回は、こんなふうに漫画風や会話風にブログを進行することができるようになるワードプレスのプラグイン『Speech Bubble』というプラグインのインストール方法&使い方をご紹介します。

吹き出しプラグインSpeech Bubbleを使って投稿をする方法

| コメントをどうぞ

Body css style適用

会場 1丁目公園
開催期間 毎月第3日曜日
料金 大人1,000円 子供500円
駐車場 なし(最寄りに公共駐車場あり 詳しくはこちら→)
開催事務局 TEL:0120-000000

サンプル

この段落のborderは赤。

この段落のborderは黄色。

この段落のborderはグレー。

この段落はborder無し。上のsectionのスタイルが適用されない。

サンプル

この段落のborderは赤。

この段落のborderは黄色。

この段落のborderはグレー。

この段落はborder無し。上のsectionのスタイルが適用されない。

scoped属性のある<style>要素で、CSSを<body>内に書いてみよう

最後に「scoped属性」を使ってみましょう。HTML5から新しく加わった属性です。
「scoped」は、スコープするという意味。スタイルシートを適用する範囲を指定する事ができます。

この「scoped属性」を付けた<style>要素は、
フローコンテンツの置ける場所に書く事ができます。
具体的には、body, article, aside, section, div, footer, header, nav, address の中に書ける。
(他には、blockquote, caption, figcaption, figure, li, dd, td, form の中にもかけるはず)
便利ですよね。本文中(body内)に書けるなんて〜。

「scoped」を使えば、親要素の範囲内にのみスタイルシートが適用されます。

?
下の例では、スタイルはstyle要素があるsection要素内だけに適用されます
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<section>
<style scoped>
p { border: solid 3px #CCC; padding:1em; }
p.bRed { border-color:#f66; }
p.bYellow { border-color:#fc0; }
</style>
<h1>サンプル</h1>
<p class=”bRed”>この段落のborderは赤。</p>
<p class=”bYellow”>この段落のborderは黄色。</p>
<p>この段落のborderはグレー。</p>
</section>

<section>
<p>この段落はborder無し。上のsectionのスタイルが適用されない。</p>
</section>
実際にサンプルを作ってみました。
→scoped属性のあるstyle要素でCSSをbody内に書いてみよう
(honttoni43.html)をご覧ください。(別ウィンドウで開きます)

それから、
HTML4やXHTML1の頃には、スタイルシートをコメントタグで囲む書き方をしていました。
このブログの初期(2010年11月〜2011年3月)では、コメントタグを付けて紹介してます。
?
1
2
3
4
5
<style>
<!–
body { background:#FFC; color:#966;}
–>
</style>
コレは、かなり古いブラウザが<style>要素に対応していなかったときの対策でした。
( 内容をそのままテキストとして表示してしまうという動作を防ぐため、コメント化してた。)
今ではそんなめっちゃ古いブラウザを使っている人も珍しいと思われますので、まぁ不要でしょう。
しかし、ちなみに、HTML5でコレを入れても、別に問題なく動作します。

(2015年7月追記です)
ちなみに、今どきのHTML5対応のブラウザなら、
<style>要素を「scoped属性」無しで <body>内に書いても、ちゃんと反応するんだよね。
ほんとうは、これではコンテンツモデル的に違反なのですが、
ブラウザは、<body>内にある<style>要素でも、あたかも<head>内にあるように扱うよう義務づけられているのだそうです。(いずれ、各ブラウザがバージョンアップしていったらどうなるか不明。scopedありのほうが無難かな。って私もscoped無しでよく使ってるけど…)

「scoped属性」が無い場合は、HTML文書全体に関わるスタイルシートになるので要注意。
ちゃんと要素に id属性をつけるなどして、他に影響しないように気をつけましょう。

カテゴリー: 夕陽のある海岸通り | コメントをどうぞ