らたの日々

子連れ男らたのブログ奮闘記

なんかみんなのブログにある見出しみたいなやつ

どうも、らたです。

 

ちょっと旅行に行っていたり体調崩したりでブログお休みしていました。け、けしてさぼっていたわけではないですよ!ただちょっと眠気に負け・・・ゲフンゲフン!

 

気を取り直して・・・

 

さて、最近ブログを書き始めてから、他の方々のブログを見る目も変わってきました。今までは情報のみを見ている感じでしたが、ブログの構成であったり、書き方であったり、ブログ玄人の方々のページは勉強になる部分がたくさんあります。

そこでふと目に留まったものがあるのですよ。

 

皆さまが記事の中ほどにちょいちょいと入っている

 

  □□□□□□□□□□□□□□□□□□□□

□  オサレな色使いの大きな文字!  □

  □□□□□□□□□□□□□□□□□□□□

 

・・・これ、なに?

 

 

見ると1つの話の切れ目に入り、次の話題についてのタイトル、そう!見出しみたいな感じになってる!

 

・・・ちょー見やすい。

え、なにこれなにこのオサレなの?え、僕でもできますか?

始めて2記事書いてサボり体調を崩したボクでも?

 

「・・・安心してください、できます!そんなあなた様にもピッタリのプラン、ご用意してございます!」 

えっ、うそ!ほんと!あらやだ!おやすーい!

・・・ってダレ!?

 

まあ冗談はよしこちゃんとして、どうやら有料版とか関係なくできそうな感じ。

となればあとは

「ん~、やっちゃおうかな!☆」

的な買いたかったお高めお財布がバーゲンになってて思い切って奮発しちゃうOLさんのごとく、やってみることにしたわけです。

 

まずは情報収集。

ん?HTML

ん?CSS

なるほどなるほど。

さっぱりわかんねぇ。

 

覚えたての文字を大きくする魔法を使ってみました。

やり方は簡単、ニワトコの杖を持って

エクスペクト・パトローナム!

と叫ぶだけです。ね、簡単でしょ?

たまに変な鹿みたいな守護霊みたいなやつ来るから注意ね。

 

まあ冗談はよしおおじさんとして、

HTMLとは

Hyper Text Markup Language(ハイパーテキストマークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつだそう。WebページはほとんどHTMLで作られているみたいですな。

 

CSSとは

Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、ウェブページのスタイルを指定するための言語。 HTMLで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されているそうですな。

 

2つともウェブページの言語のこと言ってたんですな。

 

ではこれを理解しつつ、さらにいろいろ調べてみましょう。

 

pea-nut.hatenablog.com

こちらの記事を参考にさせていただきました。

ありがとうございます。

 

saruwakakun.com

見出しデザインはこちらの記事からコピーさせていただきました。

ありがとうございます。

 

  ほむほむ、では早速やってみましょう。

上記のさるわかさんのページよりおしゃれな見出しデザインの中から気に入ったもののコードを表示し、コピー。

そして貼り付け!

h1 {
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;/*上下中央*/
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

h1:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

 

 じゃなかった。

上記のつなろっくさんのページより、

えーと「ダッシュボード」⇒「デザイン」⇒「カスタマイズ」⇒「デザインCSS

ここの既存のやつを消して貼り付け!

これでできたはず!

 

 早速使ってみましょう。

 

 できてるかな

 

・・・できてないね。

あれー上の「見出し」ってとこを設定するだけじゃだめなのかな。

 

これでどうだ

 

・・・だめだねえ。

ナニコレ、全然できへんやん。

オレは文章の中ほどにオサレな見出しを作りたいのよ!

 

・・・しばし熟考・・・

ん、プレビュー見るとタイトルはオサレに変わっているね。

そーいえば貼り付けした時「番号を変えて使ってくださいね」的なのがあったような・・・

よし、やってみよう。

さっき貼り付けたとこに番号を変えてさらに1~5まで張り付けて・・・

 

どうかな?

 

おー今度はできてる!

これは感激!

これでマイブログもおされなブログに一歩近づいたってわけだ、うんうん。

 

では早速使わせてもらって、

 

まとめ 

  1. 使いたいオサレな見出し用CSSをフリーでくださるページを探す。
  2. そこからCSSコードをコピーさせてもらう。
  3. ダッシュボード」⇒「デザイン」⇒「カスタマイズ」⇒「デザインCSS」のとこに貼り付け。
  4. ここで貼り付けるCSSのアタマと末尾のとこの数字(つまり2か所)を1~5に書き換える。それぞれに対応する見出しが変更。どうも数字1から順に小さい見出しになっていくっぽい。全部変えるなら5個貼り付ける。
  5. 使う。

 

ん~これで少しは見やすい記事が書けるようになったかな?

まだまだブログは学ぶことたくさんですな。

 

注:ちなみにこの記事を書いた現在、オサレ見出しが反映しているのはPC版だけの様子・・・ いずれスマホでもオサレ見出しを表示させたいですな。