ＣＳＳのしっぽ

いつも私を困らせるあのＣＳＳさんについて中心

私のgoogleフォントいつも使うの

もう完全に自分専用ですが、グーグルフォントの設定。二つ。

まずはZen Antique

お硬いですが、その教科書チックな文字はなんだかんだで使います。

@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');
  
:root{
  --font-family:"Zen Antique", serif;
  --font-size:21px;
  --width:640px;  
}

/**/
html{
  font-family:var(--font-family);
  font-size:var(--font-size);
}

もうひとつはM PLUS Rounded ラウンデッド

こっちはボールドで使うのがおすすめ。

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap');
:root{
  --font-family:'M PLUS Rounded 1c', sans-serif;  
  --font-size:21px;
  --width:640px;  
}

/**/
html{
  font-family:var(--font-family);
  font-size:var(--font-size);
}

とりあえずベタ貼り。

frameまたはiframe要素内のdocumentを取得して操作

このiframeの操作は、自分で設定したiframeに対してです。 外部のサイトの操作は、クロスサイト的に難しいと思います。

iframeを外から操作する

そんなことはめったにありませんが、たとえば、純粋なサイトでＣＳＳを試したり 見た目をチェックする機会は有るかと思います。 そんなときのジャバスクリプト。js

答えはこちら下

//<iframe></iframe>
var iframe=document.querySelector('iframe')
var ihead=iframe.contentDocument.head
var ibody=iframe.contentDocument.body

ibody.innerHTML=`
<style>body{color:red;}</style>
<h1>header</h1>
`

やっていること

やっていることは、HTMLにiframeタグを一つ用意して、まず取得します。 それから「contentDocument」でアイフレームのドキュメントを取得します。 その後は、ヘッダとボディに「innerHTML」でごりごりと流し込みます。 こうすると、ヘッダにＣＳＳを入れておいて、お試し文字列をＢＯＤＹに入れると 見た目チェックに使えます。

以上、編集とプレビューを自分で実装するような話でした。

はてブロカスタマイズ案、追記

やるかどうかは別だったり。

１．ヘッダ情報の変更。ブログの詳細設定ページにてヘッダを変更できる。スクリプトや外部ＣＳＳを入れることができる。

２．レスポンシブル対応。すでに対応しているテンプレートみたいですが、タブレット版基準の６４０ピクセルにしたい。

３．Hタグの冒頭に「＃」を入れる。これはやろうとすると簡単で「h1:before{content:'＃';}」あたりでできる。

４．文字。MＰＬＵＳラウンドが好きなので、そちらに変更するかも。

５．ラインハイトが微妙。幅が多すぎる。改行と段落の違いはあったほうがいい。

６．ハニワバックについて、もっといいのがあるのかも。

はにわかはにわ。要検討。

追記。 ７．コードをコピーする右上のアイコン。ＪＳのライブラリであるはず。

８．HTML入れられるなら、ハイライトいれる？

「＠media」でレスポンシブル対応

レスポンシブル対応

ＰＣ版とタブレットでは、横幅が大きく違い、スマホ版ではさらに大きな差になります。 ので、レスポンシブル対応が必要になります。

そこで必要になるのが「@media」あっとめでぃあ。 アットメディアはブラウザ幅によってＣＳＳを切り替えるものですが、印刷時などにも使えるようです。（まま使わない）

@media使ってみる

６４０ピクセルとそれ以上にするには次のようにします。

body{
  margin:1rem;
}@media (min-width: 640px){
  body{
    margin:1rem auto;
    width:640px; 
  }
}

書いてあることは、６４０ピクセル未満なら、ボディのマージンは１レムで（左右に１文字分あける）、そうして６４０ピクセル超えたら、マージンは自由で中央にボディを持ってきてよし。という意味になります。

書き方としては「min-width」ではなく「max-width」もありますが、スマホ全盛の今では、まずスマホに対応させてから、それ以上を設定したほうが、適切でしょう。ね、メイビー。

はてブロはスマホではHTML無理って云うけれど

CSS

ＨＴＭＬの記述は、ＰＣ版であればできるので、レスポンシブルとしてＰＣ版と同じすればできる。 カスタマイズして気づいた。

ああ無理というのはプロ版でなければという意味です。

最初の記事はマークダウン

CSS

マークダウンの件です。とりあえず、知っている知識を総動員して書いてみます。

ヘッダ、タイトル

「# タイトル」半角シャープの次にスペースでタイトルになります。タグは「＃」がひとつで「ｈ１」ふたつで「ｈ２」と云った風に基本的には「＃」半角シャープの数だけｈが上がります。あがるというか、重要度がさがるというか。

パラフレーズ

パラフレーズは、マークダウンの場合は、直書きです。改行をしっかり開けると、段落が変わる仕様のようです。この改行問題はそれぞれのマークダウンで少し違うみたいなので「はてブロ」に合わせなければなりません。

とりあえず空改行すれば、つぎのパラフレーズに移ります。（移ってるはず）

強調とか

強調は二種類あり、斜体の強調は、エンファシス。通常の強調は、ストロングです。 斜体強調は単語を「＊」で囲みます。（囲んだ）半角アスタリスク。 通常の強調は単語を「＊＊」で囲みます。（囲んだ）半角アスタリスク二つで囲う。 テーマによって、斜体強調は、斜体でないことがありますね。これはＣＳＳの設定で、グーグルのクローラなどでは正しくエンファシスとなっているでしょう。

リンク

リンクは区切りカッコ、カッコで表します。基本的には「[リンク名]（URL）」です。いずれも半角。基本的にはマークダウンの記号は半角のようです。（全角で＃したい） これはリンクです。

画像

画像はリンクの記号の頭に「！」ビックリマークをつけると画像になります。「![リンク名]（URL）」 画像のリンクはリンクと画像の組み合わせなので、リンク名の区切りカッコの中に画像を入れます。 「[ ![これはイメージ]（image.jpg）]（#）」

最後に、単純な文字列

単純な文字列を書く時は、特にプログラムのコードなどがそうですが破線にょろにょろで囲います。「~~~ （改行）ここが単純な文字列（改行） ~~~」単純な文字列はマークダウンであっても、無視されるので、単純な文字列とすることができます。

まとめ

# ヘッダ
パラフレーズ何も記号はいらない
*斜線強調*
**通常の強調**
[これはトップに戻るリンク](#)
[![これは画像でトップに戻るリンク](image.jpg)](#)
~~~ （改行）破線の間は単純な文字列（改行）~~~

以上、１０００文字ぐらいでした。記事書く時に使うもの。