Air Brog

*Air falcon style*

【ブロガー】私のデザインCSSを紹介 ”初心者ブロガー”向け 『2:タイトルをオシャレに』

こんにちは。Air falconです。

 

f:id:airfalcon:20181107110434p:plain

 1回目に、HTMLとCSSについて簡単な解釈を記事にしました。前回の1回目の記事をご覧になっていない方は、1回目を読んで下さい♪

 

 

www.airfalcon.site

 

 

 

そして、今回はブログタイトル編♪

デザインCSSは、基礎を徹底的に勉強してもいいと思いますが、結構初心者にとっては複雑です。最初のうちは、copy and pasteを繰り返して外観をコーディネートしていくのがいいかと思います。※あくまで、同分野に精通していない私の個人的な見解です。

 

 

ブログタイトルのCSSを編集してみる はてなブログ

f:id:airfalcon:20181108134709p:plain

 

 ブログに訪問して最初に見るのが、ブログタイトル。ブログタイトルが殺風景なもの奇抜で派手なものシンプルなものあります。以前、ブログ査読企画をした時に、ブログタイトル一つで読者が感じる印象は様々です。

 

www.airfalcon.site

 

 こちらの記事で紹介しているキリン・シさんは、黄色を基調とした特徴的なブログですごく印象に残りました。やはり、ブログタイトルのCSSは、PV数を伸ばす以前にまず最初に取り掛かりたい部分です。


 はてなブログ タイトルってどこのことを指すの?

 

f:id:airfalcon:20181108140616p:plain

 はてなブログのタイトルとは、ブログの一番上に位置します。 

タイトルのデザイン変更前後でどれほどの違いがあるか、比べてみます。

f:id:airfalcon:20181108140827p:plain変更前

f:id:airfalcon:20181108140851p:plain変更後

 

これくらいの差があります。具体的には、タイトルの文字フォントと文字色、文字間のスペースです。これくらいの編集は何もしらない私でもどうにかなりました。ちなみに私のブログでピンク黄色を基調としている理由があります。

 

それは、、、

 

一時期好きになっていたスロットのこのマーク

f:id:airfalcon:20181108141319p:plain

悪い意味でもいい意味でも人を惹きつける色なのかな?背景ピンクがかった色で真ん中が黄色なのです。まあ、そんなどうでもいい話は置いといて。。。

 

はてなブログ タイトルCSSを編集して見る

 

前回の記事にて、デザインCSSの編集に取り掛かる部分はお伝えしました。今回は、そのデザインCSSに入力するものを紹介します。

 

 

/* ### ヘッダーの背景色 ### */
#blog-title{background: rgba(255, 0, 255, 0.5) !important;}
/* ### ブログタイトルの文字色 ### */
#title a{color: gold !important;
font-family: 'Gloria Hallelujah', cursive;
font-size: 30px;
letter-spacing: 15px;}
/* ### ブログ説明の文字色 ### */
#blog-description{
color:gold!important;
font-family: 'Gloria Hallelujah', cursive;
font-size: 15px;
letter-spacing: 10px;}

             (タイトルの編集方法)

 

 上記が私のデザインCSSに入力している内容です。そのまま、copy and pasteでも私と同様のスタイルを当てはめる事ができます♪♪1行目から簡単に説明します。 

f:id:airfalcon:20181108140851p:plain

 

/* ### ヘッダーの背景色 ### */
#blog-title{background: rgba(255, 0, 255, 0.5) !important;}

 こちらは、ヘッダー部分の薄くピンク色の背景色の設定。

 rgbaとは、Red/Green/BlueにAlphaを加えたモデルのことです。Alphaとは、透明度を表します。上の内容を解釈すると、赤255緑0青255透明度50%という事になります。原色表のリンクを貼っておきますので活用して下さい。

www.colordic.org

 

 

f:id:airfalcon:20181108143457p:plain

/* ### ブログタイトルの文字色 ### */
#title a{color: gold !important;
font-family: 'Gloria Hallelujah';
font-size: 30px;
letter-spacing: 15px;}

 こちらは、ブログタイトルの文字色と文字フォントサイズの設定。

文字色をGoldに、文字フォントは、Gloria Hallelujahを使用しています。『文字フォント🔎』で検索してみればいろんなものがあります。Letterーspacingとは、文 字 間の間の程度を表します。

 

f:id:airfalcon:20181108143511p:plain

/* ### ブログ説明の文字色 ### */
#blog-description{
color:gold!important;
font-family: 'Gloria Hallelujah';
font-size: 15px;
letter-spacing: 10px;}

 こちらは、ブログ説明欄の文字色と文字フォントサイズの編集内容になります。

上記内容と同様になります。

 

これらを、デザインCSS欄に入力するだけで自分オリジナルのデザインCSSを楽しむ事ができます。

 

まとめ 

今回は、タイトル編になります。あなたのイメージカラーなんかを決めてブログのトップに持ってくるとオリジナリティー溢れるものになるかもしれません。私もまだまだ趣味程度の勉強内容なので、ブログタイトルをもっと個性的にできる術を見出しましたら、追記していきますね。ぜひ、読者登録をして私の勉強に付き合ってください♪♪

 

私が参考にしている図書はこちらです。

HTML5&CSS3標準デザイン講座

 

 

 

*おすすめYoutube*

 

 


にじいろ - 絢香 Ayaka(フル)

 

 

○●○●○●○●○拙い文章ですが、読んで下さりありがとうございました。○●○●○●○●○

 

 

~Thank you for visiting~