あをぎりの小さなおはなし

つれづれなるままにその日暮らし…

せめて見出しくらいは欲しかったスタイルのすゝめ

f:id:akari-hobby:20180108102655p:plain

 こんにちは(´・ω・`)新着ブログを巡ってたら「あれ?はてなブログのメニューバーって半透明だったっけ?」こんな事より他にする事g…で小一時間が二時間になりそうなあをぎりです。

 めずらしくIT系ですが、超初心者用の簡単クッキングなので、CSSいじれるよ・現役だよの方はすっとばでどーぞー♪

発端

 はてなブログ、テーマが用意されてていろいろ便利な所もあるけど、見出しが貧弱だったり、左右・中央寄せがなかったり…と、いろいろ不満があった。

 ちなみにこのテーマ「レトロポップ」では見出しの標準はこんなのになる。

 見出し1

 見出し2

 (*'へ'*) ンーおされ感がイマイチ統一感もちょっとアレだなぁ。なので1行だけ、おされな見出し表示が欲しかったのでその方法をご紹介。

 ちなみにσ(・ω・`)自他共に認めるめんどくさがりである。CSS(おされにするコード)そのものは「サルワカ」様の物を使用させて頂いた。(※商利用・再配布はNGだが、利用・改変利用のOKは確認済み)

CSSってなんじゃらほい?

 Cascading Style Sheets(カスケーディングスタイルシート)の略なのですが、難しく考えず、ざっくりコーヒーで例えてみましょう。

 「アメリカン」「モカ」「ブラック」「カプチーノ」「エスプレッソ」など、名前を付けてそれぞれにお好みのレシピを事前に決めておきます。そうすれば、

 (`・ω・´)<へいマスター!いつものブラック!

で通じ、その時欲しいコーヒーが出ますよね。それと同じで、表示したい文字や背景の色や大きさ、余白なんかをレシピとして登録しておき、後から使うスタイルがCSSと呼ばれるものです。

 実際に使わせて頂いたのは下のページ部分コードになりますが、今回の紹介方法はちょっとだけ変更が必要です。

 すぐにCSSをコピペしておされにしたい所ですが、もちょっとお待ち下さい。

見出しをそのまま使っちゃだーめよ♪

 実際にレシピを反映させるには、HTML編集をちょっぴりいじらなければいけないのですが、はてなブログ上のCSSについては優先順位があります。

 はてなブログ機能利用しているテーマCSSデザインCSS 

 そして赤文字部分は、ユーザ側でいじる事はできません。

 ここでちょっと、このページの「HTML編集」を見てみましょう。 

f:id:akari-hobby:20180127231330p:plain

  (゜ロ゜; 三 ;゜ロ゜)ヒイイイィィ(゜ロ゜; 三 ;゜ロ゜)ヒイイイィィ

  <p> とか <p> とか <p> とか無理ぃいいいいい!!!!!

 そう思ったアナタ、だいじぶです(`・ω・´)

 <p>のPはParagraph:段落の略で、<p>~</p>の間で書かれた文字を1段落として扱います。つまり、はてなブログは「見たまま編集で」書かれた文字を

 段落ごとに区切っている訳ですね。

 ちなみに<xxxxx>~</xxxxx>はタグと言い/が付いた方が終わりで、用途によって、いろんな種類のタグがあります。簡単に言っちゃえば

 HTML言語とは、このいろんなタグの集合体なのです。

 しゃて(´・ω・`)ここで注目なのが図の←部分です。<h1><h4> こいつが「見出し」の正体でヘッダー:見出しタグになります。

 そして思いだしていただきたいのがこの優先順位。

 はてなブログ機能利用しているテーマCSSデザインCSS 

レトロポップテーマの見出しがこんなんなのは

 レトロポップテーマの<h>用CSSが既にあるからなのです。

 なのでそのまま「サルワカ」様のCSSデザインCSSにそのままコピペすると優先順位の都合で

こんなんなっちゃいます(´・ω・`)しょんぼり

 テーマに優先された部分は上書きされ、テーマに設定されてない部分は表示されるというごちゃまぜ状態。

 更に<h>タグは「ブログタイトル」「記事タイトル」にも使われている場合がありますので、そっちも混ざる可能性があります(´・ω・`)しょんぼり。

 なのでこの紹介では<h>は使わない形でやってみよーと思います。

それでは簡単にやってみよー♪

 まずはステキな見出しのCSSを選びましょう。

 例として下のを選んでみました♪「コードを表示」でCSSをコピーしましょう。

f:id:akari-hobby:20180128010046p:plain

 次にはてなブログの「デザイン」→「カスタマイズ」(スパナマーク)→「デザインCSS」へ行き、今あるCSSの最後に追加で貼り付けます。

f:id:akari-hobby:20180128012034p:plain

 ここでちょっと待った!!です。

 最初の1行目「h1」ってなってますよね?

 つまりこれは<h1>タグ用のCSS。このままでは(´・ω・`)しょん。になってしまいます。

 なので先のコーヒーレシピを思い出して下さい。「アメリカン」「カプチーノ」などのレシピ名です。注意点を見た上でお好きなレシピ名(CSS名)に替えちゃいましょう(・∀・)b。

 ※注意点※

 ・必ず半角英数で書く(数字のみはNG、-はセーフだけど*/+などはNG)
 ・1文字はNG(他のタグ名と重なる可能性があるから)
 ・最初に半角の「.」コンマを付ける
 ・現在あるCSSの最後に追加する
 (サンプル画像は分かりやすくするために1行目に貼り付けをしていますが、現在あるCSSの最後に追加しないと、ブログの表示が崩れる原因になります)

  たったこれだけです♪ 今のこんぴーた業界では「プログラムに関する記述は全て英語で表記すべし」という暗黙の掟があるのですが、自分用のブログだし分かりやすいのにしちゃいましょう!(実はかえってその方がいいのです)

 とりあえず変えてみました♪

f:id:akari-hobby:20180128015918p:plain

 「h1」を「.akari-midasi1」へ変えただけ「.taro」でも「.dokidoki」でも構いません。

 そして「文字色」部分は削っちゃいました。このブログの文字は、茶色っぽい黒。それをそのまま使いたいので、削ると先ほどの優先法則が逆に生きてくるのです。

 はてなブログ機能利用しているテーマCSSデザインCSS 

 midasi1にしたのは、慣れたら2とか3とかを作ろうかなで1って付けただけ。必須ではないので、数字は付けなくても構いません。

 ここまで出来たら。「変更を保存する」ボタンをポチってデザインCSS(レシピ)を保存しましょう。

 ※こんぴーたの色は#xxxxxxで表されますが、それの変更は後ほど♪ 

それではやっちゃうYO! (σ´・ω・`)σ

 見出しにしたいタイトル書いて「HTML編集」をポチってみましょう。

 相変わらず(゜ロ゜; 三 ;゜ロ゜)ヒイイイィィな<p>まみれだと思いますが、書いたタイトル部分の<p>部分を探しましょう♪

f:id:akari-hobby:20180128025642p:plain

 ここで不思議な呪文を先頭の<p>に書き加えましょう♪ ※半角英数

 <p class="akari-midasi1">

f:id:akari-hobby:20180128030921p:plain 

 書き加えたらプレビューでチェック♪ するとあら不思議。

 出来たよヾ(●⌒∇⌒●)ノ 

 になります。種明かしは、最初のコーヒーレシピで言うと。

 (`・ω・´)<へいマスター! は 「class」(.で書いたCSS呼出し)

 いつもの は 「

 ブラック!  は 「"akari-midasi1"」(レシピ名)

 に当たると思えばいいでしょう。

 もし、法則が発動して<p>タグに書いてもうまくいかない場合などは

 <div class="akari-midasi1">出来たよヾ(●⌒∇⌒●)ノ</div>

 の様に<p>タグの代わりに<div>タグに書き換えて使ってみてください。

メリット(´・ω・`) なのよ

 <h>タグのように、ガッチガチに制限された状態ではないので、一旦classを付けても「スポットでここ色変えたいなー」なんて時には、太字・斜体・文字サイズや色の指定のツールバー機能が効きます。

デメリット(´・ω・`)

 みたまま編集だと「見たまま」にならないのです。もっとも、はてなブログ自体、見出しの<h>タグは完全サポートしていないので「見たまま」にならないのですが。

 慣れないうちのちゃんとした確認は、プレビューで行う事になります。

いろいろ色いろ

 こんぴーたの色は先に述べた通り#XXXXXXで表されます。ここでRGBの説明をやると、簡単クッキングの意味が無くなるので考えない事にしましょう。(・∀・)

 それに欲しい色ってあるよね。そんな時にはコレ!

 からぁーぴっかぁー!ドラえもん調)ダウンロード後、解凍して使います。

f:id:akari-hobby:20180128041006p:plain

 中身は、アプリと説明書のreadmeが入っています。アプリはインストールの要らない単体プログラムなのでデスクトップや好きな所に移動させられます。

 ちょっと起動させてみましょう。

 自分が本来欲しかった色は、このブログの背景になってる象さんオレンジ。

f:id:akari-hobby:20180128041801p:plain

 ブログを表示させておいてカーソルを移動するとカーソル位置の色コードを表示します。図を見るとこの場合、欲しかった色は「#FEE0C9」である事が分かりますね。

 そのまま左クリックをすれば「FEE0C9」をテキストとしてコピーするのでそのまま、「HTML画面編集」や「デザインCSS」でのペーストも出来るスグレモノです。

  Macの場合はデフォルトアプリでいけます(`・ω・´)

 Macでカラーピッカーが欲しいならデフォルトアプリで十分だった件 - Qiita

 

今日はなんとかまとまった

 ・欲しいCSSはレシピ名を加工してデザインCSSの最後へ

 ・HTML編集を怖がらずタグに class="レシピ名" を

 ・欲しい色はカラーピッカーでゲットだぜ!(ぇ?) 

  まったくCSSはチンプンカンプンな人でも、サルワカ様のサイトで、他の見出しの「コードを表示」をして眺めてると、「余白を入れるのはこの要素(1行)、点線にするには…下線を付けるには…角を丸めるには…線を太くするには…」とかなんとなく分かってきます。

 慣れたらその部分だけ、CSS(レシピ)にちょい足しすれば、また味の変わったオリジナルにもなる訳です。

 もし、見出しの不十分機能や欲しい表示方法がなくて、イラっとしていた方の参考になれば幸いでございます(*- -)(*_ _)

 最後に素晴らしい情報を提供されているサルワカ様に感謝しつつ

 久々にちょっと凝った記事書いたので「ぱとらっす。ボクもう疲れたよ」モードになれました(´・ω・`)まる 

世界名作劇場・完結版 フランダースの犬 [DVD]

世界名作劇場・完結版 フランダースの犬 [DVD]

 

f:id:akari-hobby:20180108102655p:plain
Topへ