インサイド シーナ

日々の備忘録(40代男性の場合)

Minimalism 見出しカスタマイズのやり方

デザインCSS

こんにちは。シーナと申します。

本ブログ『インサイド シーナ』は、こどみすさんが公開している大人気のテーマ『Minimalism』 を使用させていただいています。

hitsuzi.hatenablog.com

40代にもなると自分のデザインセンスが少々残念であることは確認済みです。

そこで簡単にスマートなブログにしてくれるテーマが無料で利用できる状況は大変ありがたいことです。

 

ありがとうございます。

 
実生活では自分も相手も気まずくなるため服や靴など人気のものは避ける私ですが、同じことをすれば失敗することは目に見えていますので、素直に第1位のテーマに決めました。

やはり、間違いないですね。大正解です。 

さて、そうはいってもせっかくですし。

 

多少のカスタマイズはしたいですよね。 

見出しを変えてみたい

 

やはり最初は見出しです。

 

文章の見た目が大きく変わる見出しのデザイン変更は記事が少ないうちに行うのがよいと思いましたので、さっそく変更してみようと思いました。

 

ブログっぽくしたい

 

私が最初に使った見出しは以下のようなものになっています。
当面変更する予定はありませんが、いつか変更する日もくると思いますので、画像として残しておきます。

見出しサンプル

Point

紹介するコードをコピペする前にすでに追加しているコードのバックアップ(どこかにコピペ)を取っておくことをお勧めします。

実際に[ダッシュボード] - [デザイン] - [カスタマイズ] - [{}デザインCSS]へコピペしたコードとしては以下になります。

先人の皆様には感謝しかありません。

/* */ で括った文字列はコメントとして扱われますので、一緒にコピペして大丈夫です。

以下をコピペします。

 

/* 見出しの変更 */

.entry-content h3 {
padding: 4px 10px;
color: #3D3F44;
background: #f3f3f3;
border-left: 8px solid #3f3f3f;
margin:60px 0 15px 0;
}

.entry-content h4 {
position: relative;
color: #3D3F44;
border-bottom: 4px solid #f3f3f3;
padding: 3px 10px;
margin:30px 0 10px 0;
}

.entry-content h4::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background:#3f3f3f;
z-index: 2;
content: '';
}
.entry-content h5 {
color:#3D3F44;
position: relative;
padding-left: 1.2em;
line-height: 1.4;
margin:20px 0 8px 0;
}
.entry-content h5:before{
font-family: "Font Awesome 5 Free";
content: '\f35a\00a0';
color: #3f3f3f;
position: absolute;
font-size: 1em;
left: 0;
top: 0;
}

 

また、この見出しはアイコンを利用していますので、以下も必要になります。

 

[設定] => [詳細設定] => [headに要素を追加]

 

に、(すでに何かコードがある場合は、その下に)以下のコードを追記(コピペ)します。

 

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

※改行されているかもしれませんが1行です。

 

上記のコードは、ぬんさんの以下の記事を参考にさせていただきました。

欲しい情報が分かりやすく説明されていて助かりました。

 

www.nunkoro.com

 

スマートに作業完了したかった

 

さらっと書きましたが実際は苦労しました。 

 

詳しいやり方は調べるまでもなく、先ほどのこどみすさんの記事にリンクがあります。

 

サルワカさんの記事です。

saruwakakun.com

 

そして『Minimalism』テーマは、それぞれ

 

大見出し => h3
中見出し => h4
小見出し => h5

 

に対応しているらしい。

 

そのためサンプルのCSSをコピペする際に hx の部分を対応する見出しの数字に修正する必要があるらしい。

 

ということは、すぐに分かりました。

 

デザインも決まりました。


しかし、サンプルCSSのコピペだけでOKと書いてありますが、

 

どこに?

 

というのが、私にはすぐに分からず・・・・・・。

 

検索のはてに

そこからあれこれキーワードを変えて、数十分は探しました。

 

結論としては、はてなブログの

 

[ダッシュボード] - [デザイン] - [カスタマイズ] - [{}デザインCSS]

 

に、(すでに何かコードがある場合は、その下に1行空けて)追記(コピペ)します。

 

これは検索あるあるだと私は信じていますが、いったん分かってしまうと、あれだけ探していた情報が書かれたサイトをたくさん見つけることができますよね。

  

しかも改めて見てみれば、こどみすさんの記事内にちゃんと書いてあります・・・・・・。

 

大人の言い分

 

でもですよ。言い訳させてください。(自分に。)

 

ヘッダの色を変更するときのやり方だと勝手に思ってしまったのです。

 

順番に説明されているカスタマイズ箇所では、サンプルをコピペする場所がそれぞれ異なっているので、見出しについてもまた違うのだろうなと勝手に解釈して検索してしまったわけです。

 

でもですよ。おかげで他にも色々知ることができたので結果よしです。

 

見出しにアイコンを付けてみる

 

例えば、見出しにアイコンを付けられるらしいです。
(これも先ほどのサルワカさんの記事を最後のほうまでちゃんと読めばリンクが書いてありますね。)

 

以下になります。

saruwakakun.com

 

詳しいやり方が丁寧に説明されていますので、詳細はこちらを読んでいただくとして、私の見出しだと以下の手順を行います。

 

head(ヘッド)タグにコピペ

 

はてなブログの場合は、

 

[設定] => [詳細設定] => [headに要素を追加]

 

に、(すでに何かコードがある場合は、その下に)以下のコードを追記(コピペ)します。

このコードで、自分のブログで Font Awesome のアイコンを使えるようにしています。

 

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

※改行されているかもしれませんが1行です。

※2018年6月25日現在、バージョンは 5 のようです。現在も旧バージョンの4も使えるようですので、例えば今後バージョン6に更新されても、すぐに上記を都度修正したりする必要はないと思います。

  

使いたいアイコンフォントのunicodeを[{}デザインCSS]にコピペ

 

前述の以下の部分です。アイコンが不要でしたら以下を削除すればOKです。

 

.entry-content h5:before{
font-family: "Font Awesome 5 Free";
content: '\f35a\00a0';
color: #3f3f3f;
position: absolute;
font-size: 1em;
left: 0;
top: 0;
}

 

f35a がアイコン の unicode です。

00a0 は空白です。

 

アイコンは以下から探せます。

無料で多くのアイコンが利用できます。

有料のものはカーソルを合わせるとPROと表示されます。

 

fontawesome.com

 

これらのアイコンは見出しだけではなく、ブログのいろいろなところに配置できますので、[headに要素を追加]には先ほどの1行のコードをコピペしておくことをお勧めします。

 

少しでも同じ疑問がある人の参考になれば幸いです。

 

終わりに

記事が少ないうちにある程度ブログのデザイン部分のカスタマイズは済ませてしまいたいと思っています。

フッタやグローバルメニュー、プロフィール画像などです。

ただ、本当に基本的なことが分かっていないので時間はかかります。

しかし、やりたいこと、やってみたいことを実現するために四苦八苦しながらも楽しんでいます。

 

それでは、また。

おすすめ記事です。

ブログ更新のお供に体重に優しい飲み物はいかがでしょうか。

www.inside-shiina.com

おやつもあります。特にラスクはおすすめです。

www.inside-shiina.com

ローソンにはおいしい低糖質パンもあります。

www.inside-shiina.com

普段の商品選択の参考になれば幸いです。

www.inside-shiina.com

おいしく食べた後はお口のお手入れも忘れずに行いたいです。

www.inside-shiina.com

メインのネット回線を変えることで通信費を下げることに成功しました。

www.inside-shiina.com

ブログ更新のお供にYouTubeはいかがでしょうか。

作業用に雑談がおすすめです。

www.inside-shiina.com

素晴らしい音楽もあります。

www.inside-shiina.com

食事ネタ多めの森羅万象日常系ギャグ漫画です。

www.inside-shiina.com

日常系ギャグ漫画の古典にして名作です。約30年ぶりの新刊も今年発売しています。

www.inside-shiina.com

大号泣間違いなしの名作テニス漫画です。劇場版アニメもおすすめです。

www.inside-shiina.com