不可逆的パラダイムシフト

華麗なる陰キャワールド

幼稚園卒と行うブログ改修-1 創刊号

先程

 https://ehther.hatenablog.com/entry/2018/10/11/151819 述べた感じで適当にブログを改修していきます.結論から言うと今回僕が自分で悩んでコードをかいた部分はありませんでした.

 

というのも大体ググったら出ちゃったんですよね.まあそれくらい簡単な部分でした.

 

 

初回である今回はブログの顔といってもよいであろうタイトル部の改修です.創刊号ってのはなかなかいいパーツ付けてくるものなのでそんな感じです.

 

今回の改修は偉大なるインターネットと以下の書籍を参考にして作っていきます.

 

f:id:Ehther:20181011212544j:plain

図1 参考書籍

 

右から2つ目が弊学図書館で借りてきたやつです.右二つはまああって損はないよなてきなアレで用意したので基本的には左二つとネット頼りです.そも一番左のレベルまでいかないだろうけどね.

 

 

 

早速作業に入ります.

これが改修前ですネ.

f:id:Ehther:20181011212826p:plain

図2 改修前タイトル

 

まあなんというかそのままテンプレ使ってるねって感じです.弄っていきましょう.

f:id:Ehther:20181011213050p:plain

図3 デザイン編集

 

ここら辺のあれこれをいじってデザインを変えていきます.

今回の目標としてはタイトルとブログ説明のフォントとフォントサイズ変更なのでまずはフォントを探します.

ここでWordとかみたいにフォントで選んで設定出来たらホイ卒でも余裕ですけどなにせwebページ上なのでうまくいきません.ここがホイ卒と幼卒の違いです.

 

まあうまいことwebページ上で使えるフォントサービスがあるんですわ.

googlefonts.github.io

いつも通りグーグル様です.早期アクセスって書いてるし最近のアレなのかもしれません.

 

ここから任意のフォントを選んできます.今回はさわらび明朝を選びました.

本当はこころ明朝がよかったです.フォントだけに.

 

 

 

それでこれを使うために以下文をヘッダタブのタイトル下ってところに記述してやります.よくわからんのですけどイメージとしてはC言語のmath.hとかそういうインクルード系のアレなんでしょうか.だからしてデザインCSSのところに書いたらうまく反映されないんだと思います.ものすごい個人の感想ですけど.

 -------------------------------------------------

 

<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />

 

-------------------------------------------------

これでフォントが使えるようになりました.

では次にデザインCSSの設定に移ります.

 

 

f:id:Ehther:20181011214841p:plain

図4 デザインCSS

 

たぶん何も弄ってない人はこんな感じで記述されているはずです.

上の区切りはテーマのやつですね.追加していくときはここの下に記述しないと終わります.

 

以下文です.

フォントサイズは言うまでもなく,letter-spacingは文字間のスペースです.任意にイカした感じに調整しましょう.font-familyで上記で設定したフォントの名前を打ちましょう.セミコロンを忘れがちです.

 

-------------------------------------------------

#title{
font-family: "Sawarabi Mincho";
font-size: 28px;
letter-spacing: 10px;
}

#blog-description {

font-family: "Sawarabi Mincho";
font-size:100%;
text-align:left;
}

 

-------------------------------------------------

 

これらの結果がこちらです.

f:id:Ehther:20181011220028p:plain

図5 完成形

 

後ろの背景ははてブロの機能で替えました.

 

いい感じにイキリ感が出てますね.今回はコピペで終わったのであれでしたが明日以降は自分で応用するところが出てくると思うので頑張りたいです.

 

 

今回はタイトル周り改修編でした.

参考記事の筆者さんに対しては完全に二番煎じですが許してくださいという気持ちです.

 

 

 

参考記事

mudaide.hatenablog.com

 

www.a-s-blog.com