まーさメモ

メモ的なことを書いてます

はてなブログの色を変えてみる２

学習

久々の更新。まーさでございます。

 

はてなブログの色を変えてみる２

ということではてなブログの文字色や背景色をいろいろいじくりまわしてみましょうｗ

今回は中級編です！

実はスタイルシートといいうのは大きく分けて２種類の指定方法がありまして、デフォルトの値(色とか大きさとか)を別ファイル指定する方法と、その領域だけ指定する方法の２種類があります。

このはてなブログでもどっちも使うことが可能です。

 

領域指定

まずは領域指定の種類のから行きましょう！ 

①文字単位領域<span></span>が一般的で<a></a>(リンクタグ)にも使用可能
②行単位領域<div></div>もしくは<p></p>に直接指定
　<h1></h1>(見出し)や
　<ul><li></li></ul>箇条書き
　<ol><li></li></ol>番号付きリスト
　といったものにも使用可能
③ページ全体の領域<body></body>への指定も可能

①と②は記事編集画面の上部にある「HTML編集」にすることで編集可能です。

③は通常は記述する場所が特殊なのですが、単純にページ全体の文字色や背景を変えるだけなら直接書き込みでも問題ないです。

 

例を出していきます。

 ①文字単位領域というのはその文字だけ、その単語だけに色付けたい等の指示をする方法です。

まーさのゲーム垂れ流し配信は主にFF14の日課垂れ流しをしています

という文章に…

まーさの<span style="color:red;">ゲーム垂れ流し配信</span>は主に<span style="color:pink;background-color:gray;">FF14</span>の日課垂れ流しをしています

と、スタイル指定すると…

まーさのゲーム垂れ流し配信は主にFF14の日課垂れ流しをしています

というように、指定部分に色が付きます。

 

②行単位領域はその行全体、つまりHTML的に<div>や<p>に挟まれた行全体を指します。

まーさのゲーム垂れ流し配信は主にFF14の日課垂れ流しをしています

という文章の<p>に直接指定する…

<p style="background-color:lime;">まーさのゲーム垂れ流し配信は主にFF14の日課垂れ流しをしています</p>

と指定してやると…

まーさのゲーム垂れ流し配信は主にFF14の日課垂れ流しをしています

行全体に色がついちゃいます。

<div style="background-color:lime;">まーさのゲーム垂れ流し配信は主にFF14の日課垂れ流しをしています</div>

 と記述しても同様の結果になります。

 

③ページ全体の領域での指定も同様の手順で可能です。

<body style="color:blue;background-color:#ddffdd;">
まーさのゲーム垂れ流し配信は主にFF14の日課垂れ流しをしています
</body>

と指定すれば…

まーさのゲーム垂れ流し配信は主にFF14の日課垂れ流しをしています

となります。 

 

 

はてなブログのデフォルト保存館

動作確認

はてなブログのデフォルト保存館

 

{}デザインCSS

/* <system section="theme" selected="smooth"> */
@import "/css/theme/smooth/smooth.css";
/* </system> */
/* <system section="background" selected="default"> */
/* default */
/* </system> */

 

 

 いまのところ非難させときたいのはこれだけかな！？ｗ

偽まーさ参上！(動作確認用ページ)

動作確認

こんにちわ！
偽まーさです！
張り切っていきましょう！
※動作確認用ページです。

 

大見出し

中見出し

小見出し

箇条書き

  • その１
  • その２
  • その３

 番号付きリスト

  1. その１
  2. その２
  3. その３

https://marthafake.hatenablog.jp/

https://dummy.hatenablog.jp/←押さずに未訪問リンク確認用

引用

あいうえお
かきくけこ
さしすせそ

脚注→*1

Ｂ　ｉ　Ｔ　Ｕ　Ａ

 <div>特別ボックス</div>
 <div class="specialbox">特別ボックス</div>
 <pre>
    成形済みボックス
</pre>
 <pre class="plainbox">
    成形済みボックス
</pre>

 

 

*1:ここに脚注を書きます