いつもの暮らしに+αの小遣いを

30代サラリーマンが自分のお小遣いを自分で稼ぐ為のブログ

《ブログ初心者におススメ》記事の装飾cssの使い方について調べてみた。



こんにちは、ブログ生活2か月目のここじです。

 

最近、いろいろな方のブログを見ていると、

『これいいな!』

『かっこいい!』

と思う表現が多々あることに気が付きました。

 

そこで、私も少しずつではありますが、記事の書き方やデザインについて調べてみましたので、まとめてみます。

 

特に、今回習得したい内容はこちらの3点です。

 

 

少しずつ調べながら、サイトを充実したものにしたいと考えております。

 

目次の作り方とデザイン

 やはり記事を作成する上で、目次があると非常に見やすいサイトになる印象を受けました。

ここまで読んでいただいた方なら、すでに上の目次は見ていただいていると思います。

まともな目次は初めて導入しました。

いろいろ知ることで、ブログの世界が広がりそうですね。

 

私はブログ初心者として、『そもそも目次の作り方がわからないよ・・・』から始まりました。

 

そこで、まずは目次の作り方を簡単に書きます。

 

ブログの目次を入れたい箇所に編集アイコンの目次(下記参照)アイコンを押します。

f:id:savingko:20190206221136p:plain

すると、編集見たまま画面上に

f:id:savingko:20190206221448p:plain

 と表示されます。

(この状態では、プレビューで確認しても何も表示されません。)

 

次に、実際に目次に表示される見出しを設定して目次が完成します。

 


文章中の見出しにしたい文章を選択(反転)した状態で、編集アイコン一番左にある『見出し』プルダウンメニューから、文字の大きさを選択すれば、目次として表示されます。

 f:id:savingko:20190206222528p:plain

知ってさえしまえば、ほんとに簡単ですよね。 

 

 

さて、ここからが本題です。

下のデザインなしとありで比較してみてください。

全然違いますよね。

 

~デザインなしパターン~ 

 f:id:savingko:20190206224529p:plain

デザインありパターン~

f:id:savingko:20190206224740j:plain

 

今回はデザインを参考にさせていただきましたが、いろいろ勉強して自分色の強いサイトを作れたら最高ですよね。

 今後もいろいろ勉強していきます。

今回、参考にさせていただいたサイトを紹介いたします。

blog.minimal-green.com

 Minimal Greenさん参考にさせていただきまして、本当にありがとうございます。

 Minimal Greenさんのブログはデザインが本当におしゃれでした。

いつかこんなデザインのブログが作りたいです。皆さんもぜひ見てみて下さい。

おしゃれブログ惚れてしまいます。

 

実際にデザインをカスタマイズする場合は、

ダッシュボード]⇒[デザイン]⇒[カスタマイズ]⇒[デザインCSS]の順にアクセスして下さい。

デザインCSS上でカスタムしたいCSSコードを貼り付けることで装飾できます。

 

 

見出しのデザイン

 見出しのデザインに関しても、すでに設定しておりますので、見ていただけていると思います。

かっこいいですね。

 

見出しに関しても、先ほどの目次と同じように

ダッシュボード]⇒[デザイン]⇒[カスタマイズ]⇒[デザインCSS]の順にアクセスして下さい。

デザインCSS上でカスタムしたいCSSコードを貼り付けることで装飾できます。

 

見出しデザインの関しては、書きの記事を参考にさせていただきました。

非常におしゃれなデザインがたくさんありました。

saruwakakun.com

 さるわかさん、参考にさせていただきました。

ありがとうございます。

 

※ブログ初心者の見出しに関しての注意点※

ブログ初心者の私は、デザインを見つけて、CSSコードを貼り付けてみたのですが、

いきなりうまくはいきませんでした。

 

見出しはHTML編集画面で確認したときに

<h4>見出しのデザイン</h4>

このような形で表記されます。 

両サイドの<h>で挟まれた箇所が見出しなのですが、

テンプレートは<h1>となっておりましたので、ブログタイトルが編集されました。

 

確認すると、

<h1>:ブログタイトルの割り当て

<h4>:記事中の見出しタイトルの割り当て

となっておりましたので、<h1> ⇒ <h4> へ変更が必要になります。

これもわかれば簡単な内容でした・・・。勉強あるのみ!!

 

文字の装飾

文字の装飾

 とくに文字に背景色を付けてみたいと思いました。

こちらは、目次や見出しほどインパクトはないかもしれませんが、

どうやっているのかわからなかったので、調べてみました。

 

実際には、下記のコードをHTML編集にて追加することで、装飾することが出来ました。

<span style="background-color:yellow">文字の装飾</span>

 

他にもCSSを使った方法もありました。

shizenkarasuzon.hatenablog.com

こちらかなりデザインにこだわったかっこいいサイトになってました。

今後もアクセスさせてください!

早速読者になってしまいました。

ありがとうございます。

 

いろいろ調べてみましたが、方法はいくつもあるみたいです。

今後も引き続き調べながら、少しずつブログ生活を充実させていきたいと感じました。

 

ご一読いただきありがとうございました。