CAITO GAME INCEPTION

ゲーム、アニメ、映画、漫画についてオススメ作品の紹介や、独自の魅力をツラツラと。

【雑談】このブログの『カスタマイズ』や『デザイン』について。(はてなブログPRO)

スポンサーリンク

 

どうも! 魁堵(かいと)です!

 

 私の「はてなブログ」のデザインも結構落ち着いてきましたので、今まで「はてなブログ」でカスタマイズや、デザインなどでお世話になったブログ(サイト様)を簡単にご紹介できたらと思います!

※今回紹介させていただくのは「はてなブログ」に対してのカスタマイズ、デザインです。

 

 

はてなブログ』カスタマイズについて

『デザインテーマ』

Minimalism(ミニマリズム

f:id:caito5963:20190808135435p:plain

©codomisu

 


 以前からシンプルなのにしようと思い探していたらcodomisu様が提供されている、

「Minimalism(ミニマリズム)」がフィットしましたので活用させてもらっております。 

 もう一つのポイントとして、スマホデザインにもレスポンシブ対応しているのが一番の利点でもありました。やはり、スマホでもブログデザインが表現できるのは良いですね。

※私はレスポンシブ対応していないサイト様はPC表示で拝見させてもらっております。

 

 背景色なども色々考えましたが、やはり文字が見やすいのと目に優しい「ホワイト」にしてあります。「ブラック」や「レッド」「ダークグレー」など色々試してみたのですがどうしてもサイト全体が暗くなるイメージが抜けきれなかったのでやめました。※画像なども試したのですが「こんなの背景じゃねぇ!見にくい!」ってことですぐ却下しました。

 

『グローバルメニュー』

f:id:caito5963:20190808142359p:plain

 

 他のブログ様でもよく見かける、ヘッダーにあるカテゴリーメニュー表がとてもオシャレだなと感じましたので、こちらも以下のブログサイト様(ゆきひー様)を参考にさせていただきました!

 

 

 上記のブログ様のHTMLコードとCMSコードを「コピーペースト」で張り付けて「グローバルメニュー」を設置することができ若干オシャレチックになりました。

  1. HTMLコードをコピーする。
  2. HTMLコードを下記の場所に貼り付ける。
  3. ダッシュボード「デザイン」⇒「カスタマイズ」⇒「ヘッダ」⇒「タイトル下」
  4. CSSコードをコピーする。
  5. CSSコードを下記の場所に貼り付ける。
  6. ダッシュボード「デザイン」⇒「カスタマイズ」⇒「デザインCSS

 

 中身の変更箇所はゆきひー様のブログ様の手順通りで簡単にできました。色々と細かいコトをこの後にしていましたが覚えていません。笑

 

フリーフォントアイコン

 グローバルメニューの文字の前にフリーフォントアイコンを入れる場合は以下のブログサイト様をご参考にされると言いかと思います!

 

 デザインCSSにカスタマイズコードを入れるのをお忘れなく。

 

『ヘッダー画像』

f:id:caito5963:20190808142800p:plain

 

 こちらはブログのメインとなる"顔だ"と思っておりますので、大きく表現したいと思い下記の過去記事にて詳細を記入させていただいております。

標準のデフォルトですと、画像の両サイドに微妙な空白が出てしまいます…が、それでも構わない方は無視してもらって大丈夫かと思います。

 


 試行錯誤した結果、パソコン(PC)でも、スマホでも良い感じのサイズに変更できました。

 

『サイドバー』

f:id:caito5963:20190808145003p:plain

 

 サイドバーもオシャレにしたいと思いシンプルかつ、色合いという意味でこちらのサイト様で「背景色あり」でカスタマイズさせていただきました。

 

 

サイドバー「プロフィール」

 こちらに関してはデフォルトのプロフィールでの画像が凄く小さかったので、アイコンを全て表現する為に以下のブログ様にて参考にさせていただき、ちゃんとアピールできるようになりました!

 

 

  1. ダッシュボード「デザイン」⇒「カスタマイズ」⇒「サイドバー」⇒「モジュールを追加」を選択する。
  2. ここで「プロフィール」を選択してしまうとデフォルトのままなので、「HTML」を選択する。
  3. タイトルに「プロフィール」と記入して、文面にみっきー様のブログ参考の文章を記入。
  4. 「変更を保存する」にて終了

 

『カテゴリーの階層化』

f:id:caito5963:20190808150856p:plain

 

 

 パンくずリストはデフォルトでは可能なのですが、階層化は標準では難しいのでこちらも以下のブログ様を参考に階層化してみました。

 


 こちらのコードを入れることにより、より一層ジャンルの中身がわかりやすくなりました。このブログが何を書いているわかりやすくなったのは嬉しいです。

 

『文章のフォントサイズ』

 私が愛用させていただいている「Minimalism」の標準のフォントピクセルが、 

テーマ パソコン スマホ
Minimalism 15px 14px


 と、少しみにくいかなと感じて、CSSに文字サイズ変更のコードを打ち込んであります。※デフォルトでブログを見た時に衝撃の小ささでした。

 

[参考ブログ様]

 

  1. ダッシュボード「デザイン」⇒「カスタマイズ」⇒「デザインCSS」を選択。
  2. オークニズム様のコード .entry-content p {font-size: 16px;} を入力。
  3. 「変更を保存する」を選択。

 私のブログはフォントピクセル16px(パソコン、スマホ両方)にしてあります。

 

「見出し」などについて

 記事の見出しについては下記様の有名なブログ様で使わさせていただきました。ブログにジャストフィットする見出しを拘り過ぎたタメに少し手こずりました。

 

 

 『トップページのカードデザイン化』

f:id:caito5963:20190808183006p:plain

 

 始めはMinimalism(ミニマリズム)の記事一覧表示で良しかなと思っていたのですが、「カード型デザイン良いな」と思ってしまい色々探していたら、だいふく (id:daifuku_chan)さんがカードデザイン化されてて、しかも、

デザインのカスタマイズの記事を上げてくださってたので参考にさせていただきました。

 

 

 記事のスタイリッシュさもあがり大変満足しております!

※初めからカードデザインのテーマを使ってらっしゃる方は必要ありません。

 

『アバウトページ(プロフィール)』

f:id:caito5963:20190808183319p:plain

 

 通常時のデフォルトでは味気なかったので、オークニズム様のブログを参考に吹き出し付きのページに少しアレンジさせていただきました。簡単なプロフィール画面でも少しは楽しいページになったかなと思っています。

 

 

 『その他カスタマイズ』

 『ブログの「ヘッダ」と「フッタ」を非表示』

f:id:caito5963:20190808183538p:plain

 

 「はてなブログ」特有のヘッダーとフッターには「はてなブログ」様にすぐ行けるようにアイコンやリンクが表示されているのですが、こちらを非表示にすることで自分らしいブログページになるかなと思い非表示にしました。

※完全に好みが分かれるかと思います。

 

  1. ダッシュボード「設定」⇒「詳細設定」⇒「ヘッダとフッタ」
  2. 「ブログにヘッダを表示しない」「ブログにフッタを表示しない」のいずれかにチェックする。
  3. 一番下の「変更する」で確定
  4. 非表示になる。

 

『コピーライト』

f:id:caito5963:20190808184515p:plain

 

ブログの記事のコピーライトって付けたいですよね。

ということで、フッタにインサイドシーナ様の記事をご参考につけさせていただきました。これでブログらしくなりました。

 

 

さいごに。

 細かい所は微妙に変更しているのですが、大まかなカスタマイズは以上になります!

 CSSのコード、HTMLコードが全くわからないまま参考ブログ様に大きく感謝しております…ああ、少しは良い感じになったかなあと。

 

これからも色々微調整しながらカスタマイズを楽しみたいと思います!

ではでは! カスタマイズを楽しむ魁堵(かいと)でしたー!