読者です 読者をやめる 読者になる 読者になる

よなかのはなし

LifeHacks And Hello!Project Blog

はてなブログをシンプル&ミニマルデザインに変える9個のカスタマイズ

ブログ はてなブログ カスタマイズ

f:id:hiroseyonaka:20160527153201p:plain

 ※この記事は2015年7月時点でのカスタマイズについて書いていますので、現在のデザインとは異なる点もあります。ご了承ください。

 

はてなブログを使い始めて約半月、当初はhtml自体をカスタマイズ出来ないので不便かなとも思っていたんですが、思った以上に色々変えられて満足です。

今回は、その中でもミニマルデザイン・シンプルデザイン・レスポンシブデザインに使えそうな、汎用性の高いカスタマイズを9個ご紹介したいと思います。

 

 使用しているテーマはシンプルな「Brank」

f:id:hiroseyonaka:20150623181545p:plain

Blank

 

今回のカスタマイズは、はてなブログが用意しているスマホ用表示を使わずタブレット・スマホ端末と共通のレイアウトを使用するレスポンシブデザインを前提にしています。

 

ブログタイトルを変更する

f:id:hiroseyonaka:20160131184746p:plain

 

 テンプレートのデフォルトだとブログタイトルが小さく目立たなかったので、フォントサイズを25pxに変更しています。フォントは「Googleフォント」のLibre Baskervilleを使用。

 

Googleフォントの導入手順
  1. Google Fontsを開き、好きなフォントを選んでページ下部のUseをクリック。
  2. 自動発行されたhtmlタグを、カスタマイズ→デザイン→ヘッダー→記事下の中にコピー。現在使用しているLibre Baskervilleだと、以下のようになります。

 

HTML

<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>

 CSS

 カスタマイズ→デザイン→CSSの中に貼り付ける。

#blog-title h1{
     font-family: 'Libre Baskerville', serif;

 

プロフィール画像の変更

f:id:hiroseyonaka:20160131184823p:plain

 

使用したテンプレのままだとプロフィール画像が小さくてとても見にくいので、サイドバーの幅に合わせてプロフィール画像を可変で設定しています。

 

プロフィール画像の変更
  1. カスタマイズ→デザイン→サイドバー→プロフィールを開き「プロフィール画像を表示させる」のチェックを外す。
  2. はてなフォトライフを開き、上部の「アップロード」から画像を投稿。
  3. 「このフォルダを編集する」→画像の上にマウスを置くと現れる左下の「編集」にチェックを入れ、「ブログに貼り付ける」で表示されたHTMLタグをコピーする。
  4. カスタマイズ→サイドバー→プロフィールのモジュール内に、③のタグを貼り付ける。
  5. ③のaタグにクラス名をつけ、cssで横幅100%に指定する。これで、レスポンシブ対応になる。

 

HTML

<a class="propic" href="ここに画像のURLを入力"></a>

CSS

.propic img{
       width:100%;
}

 

引用(blockquote)デザインの変更

f:id:hiroseyonaka:20160131205658p:plain

 

引用部分のデザインは、背景色を白にして引用先のリンクをつけています。

 

ソーシャルボタンデザインの変更

f:id:hiroseyonaka:20160131185426p:plain

 

はてなブログやソーシャルボタンはシンプルなレクタングルに。

「引用」「ソーシャルボタン」のカスタマイズに関しては以下の記事内で詳しく説明していますので、よろしければご覧ください。

 

 

ヘッダーの下にグローバルナビゲーションを設置

f:id:hiroseyonaka:20160905182614p:plain

 

 ヘッダーの下にグローバルナビゲーションを設置し、スマホでの閲覧時にはトグルスイッチに切り替えるようにしています。

 スマートフォン端末で見たときは以下のように右上にトグルスイッチが表示され、クリックするとメニューが出現。

 

f:id:hiroseyonaka:20160905182658p:plain

 

実装は簡単ですし、ユーザーの回遊率がアップするので、レスポンシブデザインを採用しているブログでは必須ですね。実装方法については以下のエントリーで詳しく説明しています。

 

 

ヘッダーとフッターを非表示にする【pro限定】

はてなブログのヘッダーと、フッターを残したままにしておくとデザインが一気にダサくなるので、設定画面からさくっと非表示にしてしまおう。

 

  1. 設定→詳細設定→ヘッダーとフッターを非表示にチェックを入れる。

 

ブログのヘッダとフッタを非表示にできるようにしました(有料プラン) - はてなブログ開発ブログ

 

ブログの記事内にブログのコードを記述する

f:id:hiroseyonaka:20160131185305p:plain

 

はてなブログで記事内にHTMLやCSSのコードを記述したいとき、いまは主に「syntaxhighlighter」か「GitHub」を使うのが一般的。

 

私は当初「GitHub」を使用していましたが、今では管理が楽なので「syntaxhighlighter」を使ってコードを表示させています。

 

以下に「syntaxhighlighter」と「GitHub」のそれぞれの使い方を記しておきます。

 

GitHubの使用方法

GitHubを使うには、まずGitHubのサイトからアカウント登録をしなければなりません。必要事項を記入して送信したら、登録作業は終了。ログインして、以下のような手順でコードを記入し、ブログ貼り付け用のタグを作るだけです。簡単ですね!

 

f:id:hiroseyonaka:20150711174919p:plain

 

f:id:hiroseyonaka:20150711174950p:plain

 

生成されたコードを任意の場所に貼り付ければ完成!

 

ただし、登録したアカウントがスパム認定されて、「Whoops. We seem to have missed the gist of that gist you were looking for.」と表示されてしまたら、ページ下部のContactから「スパムではありませんよ!」と運営にメールを送らなくてはいけません。

 

私もこの表示が出てしまったので、こちらのサイトから本文に記入する文言をお借りしてメールを送ったところ、数時間で返信が来て、その後はすぐに通常通り使用できるようになりました。

 

syntaxhighlighterの使用方法

 実装方法については以下の記事を参考にさせていただきました。

 

 

作業用BGMとして設置したYouTubeプレイヤーの表示を変える

f:id:hiroseyonaka:20160131185332p:plain

 

サ イドバーに「今週の作業用BGM」としておすすめのYouTube動画を置いているんですが、音だけが聞ければいいやと思い横幅は100%、高さは40pxに指定して音楽プレーヤー風にカスタマイズ。動画の高さが低いため、YouTube動画にデフォルトで表示される上下のバー非表示にしています。

 

実装方法

まずYouTubeに行き、動画→共有→埋め込みコードをコピー。

 

f:id:hiroseyonaka:20150711172844p:plain

 

  1. カスタマイズ→デザイン→サイドバー→htmlモジュール追加を選び、埋め込みコードを貼り付け。
  2. 動画をdivで囲み、下記のように横幅と高さを指定する。

 

HTML

<div class="youtube">
<iframe width="300" height="212" src="https://www.youtube.com/embed/ZWrUEsVrdSU?modestbranding=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
</div>

 CSS

.youtube iframe{
 width:100%;
 height:40px;
}

 

今回使用したYouTubeのパラメータ
  • modestbranding=1(ロゴ非表示)
  • showinfo=0(上部の動画タイトルを非表示)
  • controls=0(コントロールバー非表示)

 

記事の投稿日時の表示を変更

f:id:hiroseyonaka:20160131185356p:plain

 

記事タイトルの上に投稿時間が表示されますが、今回はスラッシュで区切るようにcssで指定。

 

CSS

/* 記事の日付表記変更 */
.date .date-year:after  {content: "/";}
.date .date-month:after {content: "/";}
.date .hyphen           {display: none;}

 

まとめ

これで現在行っているカスタマイズは終わりです。イイネ!と思ったらぜひ試してみてください。