はてなブログ 見出し変更
前の記事を途中で投稿してますが更新する予定なのであしからず。
今日はこれ
はてなブログでCSSの見出し変更について
これ、テーマをダウンロードして利用している方も同じような問題に直面したことあるんじゃないでしょうか？
ページの最初でスタイルの変更を促すCSSを記述してもこの■がきえてくれないんですよねぇ…多分なんかしらの要因であることはわかってるんですけど、少し詰まってしまったのもありこちらにいったん投稿させていただきます。もし解決したら新たに投稿を行いますね。
と終わるところだったんですが、■は消せました。しかし、こうなっちゃうんです。
コードは下記の通り。
h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}
こうなっちゃうんです
そう！ういてんですよこれ
四角部分があった場所分浮いちゃってんですよ…
あともう少しな気がするんですけどね…
てことで、今日はここらへんで。
CSS学習帳
みなさんこんにちは。いかがお過ごしでしょうか。
この記事ではCSSを学ぶ上で分かったこと、理解したことをまとめていくつもりです。
間違えないよう気を付けますが、間違いがあるものと思って見てくださいね。
CSSプロパティ一覧
font{}
これは文字に関する情報を設定するものであり、
font-family
font-size
font-stretch
font-style
font-variant
font-weight
font-height
のプロパティを一括で設定できるプロパティです。
font-size・font-familyの値の設定は必須で、それ以外は任意の設定になります。
{}
{}
{}
途中で投稿しますが、これからも更新する予定なので、わかりやすかったら参考にしてみてください(*´▽｀*)
はてなブログでCSS
みなさんどうも。お元気してますか？
前回のブログでCSSとはなんぞやについて軽くまとめましたが、あのやり方だとはてなブログにはCSSの編集項目なんてものはないので実行できないという。
そんな困難に見舞われてしまったのですが、別に.htmlと.cssにわけなくても実装可能なことが分かったのでそれについてまとめたいと思います。
CSSをはてなブログで
さあみなさん、この見出しはどうでしょうか。
こちらはHTMLでの編集を行って表示させているものです。
この機能を使ってみて分かったことが1つあります。
今まで編集見たままのところで記事を書いていたのですが、すべて<p>で書かれています。改行・空白もすべてそうです。めっちゃやばいですね。
なぜやばいのか、そう、CSSでまとめにくいのです。
例えば、今回の見出しはこのようなコードで書いています。
<h3 style="color: #990000;">CSSをはてなブログで</h3>
そう、それぞれの<p>のところに書体の設定を書き込んでいく必要が出てきてしまうということです。
試しに同じ<h3>見出しで設定を与えずに書くとこうなります。
上で設定した後の設定なし見出し
どうでしょう。しっかり黒いですね。つまり毎度書くときは上のように記述する必要があるわけです。デフォルトの設定が嫌で変えたい時とか地獄ですね。
これを設定したままにする方法もあります。
それは、こんな感じにclass分けをしてあげることで、少し書き足すだけで設定が反映されるのです！
<style>
p.bluetext{
color:Blue;
font-size:180%;
}
p.redtext{
color:Red;
font-size:150%;
}
</style>
<p class="bluetext">こんな感じで対応します</p>
<p class="redtext">こんな感じで対応します</p>
こんな感じで対応します
こんな感じで対応します
と、最初に書かなくても全体に反映されるため、一番上に書いておいた方が編集が楽になると思います。
実際に試した結果ですが、フォントの書体の変更はできなかったため全体に適応されているCSSの部分で変更をする必要がありそうです。
他にも各種設定ができそうなので面白くなりそうですね。
それでは皆様もお試しください！
CSSとはなんぞや
以前”HTMLとはなんぞや”の記事でWebサイトのほとんどが「HTML」と「CSS」からできている...的なことを言っていたのだが、「CSS」について触れていなかったのでこちらで分かったこと、理解できたことを共有しようと思う。
CSSとは、HTMLで表示させたものを加工する...例えば、色、背景、文字の大きさ、表示位置、アニメーションなどなど。つまり、HTMLのみで作られたホームページをより華やかに、簡潔に、見やすくするための言語という捉え方で間違っていないと思う。
これまで(この記事も含む)の私のブログを見てもらえばわかると思うが、あれはHTMLのみ(はてなで編集できる部分に限る)で表記されている。どうだろう、お世辞にも見やすいとは言えないと思う。私もそう思う。
これでもはてなブログ側から用意されているテンプレートを使っているので、フォントが変わっていたり、背景色が白じゃなかったり、文字の大きさが調整されていたり…と見やすい処置が施されているのだ。
何が言いたいかというと、HTMLのみから作るサイトは見づらいものしか作れないのではないだろうか？(つまりは、CSSの学習は必須…)
ホームページを作る。これはかなり学習の必要な領域になりそうだ。
今はHTMLのメモ帳みたいなものを作っているが、CSSについてのメモ帳なんかも作っていこうと思った。
肝心なCSSの内容がどんなものかについて触れていなかったので、まとめてみる。
まずは<link rel=”stylesheet”href=”try.css”>を作成したHTMLの<head>の中に追加して
h1{color:red}
これだけを.cssの拡張子で保存(メモ帳とかでヨシ)して、追加したHTMLをブラウザで開けば見出しが赤くなっているという…
あれ？思ったより難しくなくない？
テンプレとして渡すだけだから、それぞれの見出し一つ一つに設定入力しなきゃいけないわけでもないし、別ファイルから書き込むから文字がたくさんある中で作業をしなくて済むし...自分のページのスタイルを確立してしまえば、大きく書き換えずに次のサイトにも使えるし……
やばくね？神使用じゃん。
覚えよ。
これから学習していくから興味があったら一緒に学習していこうね(*'▽')
HTMLタグ一覧23/11/09
この記事ではHTMLのタグについて、著者が見つけた、知った、理解した順に書いていくのであしからず。できるだけ間違いを載せないように努めるけど、学習しながらだから間違いがあると思って読んでくれると嬉しいよ。
余裕ができたら順番も変えていこうと思うよ。
<html></html>
こいつはこの中に書かれてるものはHTMLで書かれてるよって機械側に教えるためのもの。こいつがないとWebで見ることができない…かも。
<head></head>
こいつはページ全体の情報を載せるやつ。ユーザーには見えない部分。検索結果にヒットさせるために必要な情報だったり、外部ファイルの読み込みを行ったりする場所。
<body></body>
ここにブラウザ上で表示されることを書いていく。
<p>...</p>
こいつはHTMLで文字を書き出すうえで必須かも。ひと段落分を「...」に書き込むことで表示可能。
<br>
こいつは改行する役割を持つ。上の段落の中に入れれば話のまとまり(かたまり？)が作れるからあとで編集しやすくなりそう。
<a href="設定したいURL">クリックする文字列</a>
こいつは文字列にURLを対応させる神タグ。…難しそうだけど考え方は単純。hrefっていう「属性」があるらしくて、C言語のint,doubleっていう型と変数が一緒になってる感じかな？変数も一緒っていうと語弊がありそうだけど、とりあえずhrefにURLぶちこめば何とかなりそう。
<h1>...</h1>、<h2>...</h2>、<h3>...</h3>
こいつは見出しの文字の大きさを順に変えてくれるやつ。<h1>が一番大きくて順に小さくなっていく感じ。
<ul></ul>
こいつは順序のないリスト表示をするための外枠。<li>ってやつと組み合わせて使う(2個下に書くね)。順序のないってどういうことってなる人は、
・アマクサクラゲ
みたいなのを想像してね
<ol></ol>
こいつは順序のあるリスト表示をするための外枠。<li>ってやつと組み合わせて使う(下に書くね)。順序があるってどういうこと？？
1.ごはんをよそう
2.卵をご飯の上にわりおとす
3.卵ご飯完成
こういうこと。
<li>...</li>
こいつは上の<ul>,<ol>の中で複数使うやつで、「...」に文字列を入れればこれの個数分リストが作れる感じ。
<img src="plane.jpg" alt="飛行機の写真" />
こいつは画像を表示するときに使うやつ。<a>タグのところでも言った「属性」が2つ出てきちゃったよ。src属性は画像のファイル名を入れるやつで、alt属性は画像が表示されなかったときに代わりに出てくる文字列を入れるやつ。だから、altのほうは必須ではないよ～。ちなみに飛行機は例だから、自分の表示したいやつに置き換えてね。
<table></table>
こいつは表を作るときに使う外枠。中に<tr>,<th>,<td>を使うよ。
<tr></tr>
こいつは表を作るときの中枠。行としての役割があって、中に<th>,<td>を使うよ。
<th>...</th>
こいつは表を作るときに使うやつで、表の中の見出しのセルとして使われる。「...」に見出しの文字列が入るよ。
<td>...</td>
こいつは表を作るときに使うやつで、表の中のデータのセルとして使われる。「...」にデータの文字列が入るよ。
<header></header>
こいつは<head>とは違って、<body>の中のヘッダー部分を構造化できるやつ。
<nav></nav>
こいつさまはサイトのメニュー部分を作ってくれるやつ！見やすい、使いやすいを求めるなら避けては通れないタグですね。中に<ul>,<li>,<a>を使ってメニュー化できるよ。
<section></section>
こいつは第何章とか第何節なんかを構成するやつ。これを使って章、節部分を作っておけばCSS使って整えるときに楽できるって感じかな？<h1>～<h6>の見出しが中に入ってないとだめだから気を付けてね。
<article></article>
こいつは記事部分！ってわかりやすくするやつ。上と似たような感じ。てか一緒じゃね？こいつも<h1>～<h6>の見出しが中に入ってないとだめだから気を付けてね。
<div></div>
こいつに意味はない！でも意味はある！何を言ってるかわからねぇと思うが…俺も何を学んだかわからなかった…って冗談はさておき、まとまりとして分けたいときに使う。
CSSで扱いやすくするためのものだね。みんなも片づけるときは棚とかタンス、引き出しに入れるよね。たぶんそれ。
あと、下で話す<span>と対照的に、中にある要素を下に置いていくよ。<p>みたいなもんだね。
<span></span>
こいつは上で言ってる<div>のようなもの。違う点としては、中にある要素が横につながっていくってこと。
<main></main>
こいつにページ内で一番伝えたいことを入れるといい感じ。<article>,<div>,<span>を中で使って区分けすると整理しやすいね。
<aside></aside>
こいつはサイトのサイドバー部分を構造化するのに役立つよ。
<footer></footer>
こいつはサイトの一番下の部分を構造化できるやつ。
HTMLとはなんぞや
まずはアイコンを丸一日かけて書いてみた。思ったよりはキレイに出来たかも。
よくゲームをするので、こちらに回す時間は少なく、いつの間にか消えている可能性が高い。が、どうぞよろしく。
ではでは、HTMLとはなんぞやから始めたい。
ほとんどのWebページは、「HTML」「CSS」を用いて作成されている...らしい。
HTMLには、他のプログラム言語でいう関数のようなものがあって、その呼称を「タグ」というらしい。<br>なんて見たことがあるんじゃなかろうか？ほかにも<p><h1>なんてのがあるという。
Ｃ言語のprintf("Hello World");をHTMLで表現すると<p>Hello World</p>ってなるのかな？割と行けそうやん。
ってな感じのタグがたーくさんあって、それを駆使してホームページを形成していく…であってるんかな。
ＨＴＭＬの面白いところ！それは、メモ帳にコード書いて、拡張子を.html (例sample.html)で保存した後ブラウザで開けば…ななななんと！
実行結果が見れると！
他の言語系を学習するってなると、なんやVisualStudio、Anacondaなんて環境設定しなきゃだけど、こいつは楽でありがたいね(*'▽')
こんなところ見に来てたのなら、試しに実行してみるとプログラミングの道に片足突っ込めるかもね～。
