Create Self Rails

27歳、北海道に住む元IT企業SE。夢を叶えるために新卒で入社した会社をわずか1年で退職。自立していくために、色々と試行錯誤中。 夢は自分の作ったアプリ・ゲームで人の役に立つこと!主にアプリ・ゲーム・ブログといった創作活動や好きなことについての情報発信をしていきます。 好きなこと/ものは創作活動・プログラミング・ラブライブ!・北海道・オーバーオール。

はてなブログをデザインCSS等で見やすくカスタマイズしてみたので方法をまとめたよ

f:id:projectkanata:20170419175120j:plain

どうも、カナタです。

 

ここ数日、僕はブログのカスタマイズばっかりしてました。

 

なんでカスタマイズしてたのかというと、

  • ブログを差別化したいから
  • ブログが見やすくなるから
  • ブログがわかりやすくなるから
  • 作るのが楽しいから

です。

 

 

僕は他の人と同じようなブログはイヤ!と考えています。個性がでないですからね。

また、見やすさやわかりやすさも大事です。

見にくかったりわかりにくかったりするブログではユーザーに優しくありません。

 

さらに、僕は作品を作るかのように楽しくブログをいじっていました。

まあ、ブログも創作活動のひとつですからね。

 

 

今回は僕のブログカスタマイズ内容をまとめてみました。

少しでもあなたのブログカスタマイズの参考になれたら嬉しいです。

 

ちなみに、これらのカスタマイズははてなブログProでなくてもできますよ。

 

 

レスポンシブデザイン

レスポンシブデザインとは、PCやスマホといったさまざまなデバイスで

大きさを変えただけの同じページを表示できるデザインのことです。

メリットは、PC用にカスタマイズしたデザインがほぼそのままスマホに反映されることです。

あと、Goolgeなどの検索エンジンに優しいです。

Googleもレスポンシブデザインにすることを推奨しています。

 

レスポンシブデザインにしないと、PCで設定したカスタマイズが反映されません。

このように味気ないものになってしまいます。

 

f:id:projectkanata:20170419175804p:plain

 

ですが、レスポンシブデザインにするとこうなります。

 

f:id:projectkanata:20170419180546p:plain

 

PCで設定したカスタマイズが反映されていますね。

このように、レスポンシブデザインにすることでスマホユーザーにも検索エンジンにも優しいブログができあがります。

 

 

ただし、レスポンシブデザインにする前に1つだけ注意!

レスポンシブデザインにするには、

ブログテーマがレスポンシブデザインに対応している必要があります。

レスポンシブデザイン対応テーマをまとめているサイトがありますのでご紹介しますね。

 

<はてなブログ>レスポンシブデザイン対応のおすすめテーマ22選 2016.8更新 - イロイロひとりごと。

 

僕は、「Brooklyn」というテーマを使っています。

割と人気のテーマですが、デザイン次第でいろいろ差別化できますよ。

 

レスポンシブデザインにするには、ブログ管理画面から

 

デザインスマホアイコン詳細設定レスポンシブデザインにチェックをつける

f:id:projectkanata:20170419181112p:plain

これでレスポンシブデザインにできます。

 

あと、レスポンシブデザインにした後にスマホでブログを見ると、

ブログヘッダの画像がおかしくなっている(両端が見えないなど)場合があります。

そうなってしまったら、以下のサイトを参考にヘッダ画像を修正してみてください。

 

はてなブログのヘッダー画像を挿入している方のための適切なCSSスタイリング - ゴトーのブログ

 

グローバルメニュー

f:id:projectkanata:20170419181608p:plain

 

この赤丸で囲った部分がグローバルメニューです。

PCでブログにアクセスしたとき、ドン!と表示されます。

メリットは、アクセスしてすぐブログにどんなコンテンツがあるかわかることです。

 

グローバルメニューがないと、

わざわざスクロールしてどんなコンテンツがあるか見ないといけないですよね。

 

グローバルメニューを設置するには、

以下のサイトに方法が書いてあるので、参考にしてください。

 

CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

 

 

どんな内容をグローバルメニューに入れるかは人によってさまざまですが、

個人的に「プロフィール」は超重要だと考えています。

 

どういう人がブログを書いてるのかわからないと不安になりませんか?

 

プロフィールのない得体の知れない人のブログと、

プロフィールがあってどういう人が書いているのかがわかる人のブログ。

あなたはどちらのブログを信じますか

 

プロフィールの変更

はてなブログのサイドバーに表示されるデフォルトのプロフィールって、こんな感じですよね。 

f:id:projectkanata:20170419182145p:plain

 

これだとプロフィール画像が小さくて目立たないし、何より読みにくくありませんか?

 

僕はそう思ったので、デフォルトプロフィールに頼らない方法を探しました。

で、以下のサイトを見つけました。

 

はてなブログカスタマイズ!プロフィールを目立たせてアピール! - One step at a time

 

これでプロフィール画像を大きくすることができるし、

HTMLで文章を読みやすくカスタマイズすることもできます。

 

これがカスタマイズ後の簡易プロフィールです。 

f:id:projectkanata:20170419192408p:plain

 

カスタマイズ前と比べると、画像も大きくなって文字も読みやすくなり、いい感じですね。

文字を大きくするには、大きくしたい文字を

 

<font size=3> </font>

<div style="font-size:16px;"> </div>

 

で囲います。(katz_uraさんご指摘ありがとうございます!)

 

フォローボタン

f:id:projectkanata:20170419192445p:plain

 

こんな感じに、Twitterのフォローボタンやはてなブログの読者登録ボタンをオシャレにできます。

以下のサイトを参考にしてフォローボタンをつけられます。

 

はてなブログに11種類から選べるSNSフォローボタンをコピペ+αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた?〜

 

これはHTMLなので、サイドバーの好きなところにボタンをつけられます。

デフォルトでは、プロフィールの下にしかつけられなかったですよね。

 

特殊顔文字

フォローボタン下の文章中にある٩(๑)۶は「特殊顔文字」といいます。

特殊顔文字は、普通では使用されない特殊文字というものを使った顔文字です。

 

文章にアクセントがつけられるうえ、

ブログではあまり見かけないのでちょっとした差別化にもなりますよ。

 

| |かわいい

 

特殊顔文字には他にもいろいろと種類があります。

以下のサイトにいろいろな特殊文字があるので参考にしてくださいね。

  

特殊顔文字 | 顔文字カフェ顔文字カフェ

 

ただ、特殊顔文字は機種依存文字のため

ブラウザによっては正しく表示されないこともあるので気をつけましょう。

  

シェアボタン

f:id:projectkanata:20170419192723p:plain

 

シェアボタンもフォローボタンと同じくオシャレな感じにできます。

以下のサイトを参考にしてください。

 

コピペ一発!はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ! - いつ俺〜いつから俺ができないと錯覚していた?〜

 

ただ、これははてなブックマークの数を取得できていないみたいです。

デフォルトのボタンだと取得できているので、はてなブログの仕様が変わってしまったみたいです。

取得先URLを修正することで直せるとは思いますが、今のところ新しい取得先がわからない状態です

 

Twitter埋め込み

f:id:projectkanata:20170419192822p:plain

 

よく見るTwitterの埋め込みですね。

 

以下のコードをコピペしてください。

コードにマウスカーソルをのせると「全選択」ボタンが出てきます。

ボタンを押せばコードが全部選択された状態になるので、そのままコピーしてください。

 

<a class="twitter-timeline" data-width="280" data-height="700" href="https://twitter.com/kanatano_mirai">Tweets by kanatano_mirai</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

 

ペースト場所は、

 

デザインカスタマイズアイコンサイドバーモジュールを追加→HTML

 

です。

 

ペーストして保存する前に、「kanatano_mirai」の部分を自分のTwitterアカウントIDに変更してください。

 

Twitter Publish

このサイトからでも作れますが、上のコードをコピペしたほうがはやいです。

 

「この記事は約◯分で読めます」を表示

f:id:projectkanata:20170419193358p:plain

 

記事を読むときの所要時間の目安を表示します。

方法は僕のブログの過去記事を参考にしてください。

 

ブログの滞在時間が上がる!?「この記事は約◯分で読めます」をはてなブログに実装してみた - Create Self Rails

 

目次を変更

f:id:projectkanata:20170419193530p:plain

こんな風に目次を、数字を使ってわかりやすくします。

以下のサイトを参考にしてください。

 

超初心者のはてなブログカスタマイズ「目次」編② - あせりながらヒマジン 無職なワタシの記録

 

さいごに

僕のブログに行ったカスタマイズを紹介しました。

これからブログカスタマイズを行うあなたの役に立てたなら、とても嬉しいです。

 

他にも気が向いた時にブログカスタマイズをすると思うので

その時は第2弾として記事にしたいと思います。

 

 

それでは!| |