Endoo Site

好きなこと、感じたことを、ちょっぴり誰かのために。

【はてなブログ/カスタマイズ】無料版でOK!レスポンシブ対応のブログ作り【コピペ】

f:id:eshateblo:20170629005549p:plain

はてなブログを使っている人は無料版のままの人もいれば、はてなブログProという有料版を使っている人もいます。

 

無料版ではスマホ表示のデザインを思うようにカスタマイズできないため、PCとスマホを同じ表示にしてレスポンシブ対応のブログにしている人も多いはず。

 

今回はそんなレスポンシブ対応のブログ向けに、カスタマイズ方法をどっさり紹介していきます。(と言っても、ほとんど他ブログの転載なんですが…)

 

 

 

はじめに

完成図はこんな感じ

▼左はスマホ表示・右の上下はPC表示

f:id:eshateblo:20170629135755j:plain

 

はてなブログは有料版(はてなブログPRO)にしなくてもOK!無料版でここまでデキル!

はてなブログではデザインのカスタマイズや仕様が有料版と無料版で差があります。もちろん、有料版の方ができることは多いですし、広告や不必要な装飾を消すこともできます。

 

僕の場合は、カスタマイズの広がりを求めて有料版にしたのではなく、アドセンス等の広告をオリジナルで貼りたかったのと、独自ドメインで運営したかったってのが要因です。

 

▼はてなブログ「有料版」でできること

はてなブログPro - はてなブログ

 

 

なぜPCと同じ?レスポンシブ対応の強み

EndooSiteは何度かPCとスマホで表示を変えたりしていました。現在はどの端末からアクセスしても同じように表示される「レスポンシブ対応」のテーマを使っていますが、これにも理由があります。

※その後、頑張ってスマホ向けのカスタマイズをしてみました。

 

レスポンシブ対応にする理由
  • デザインの管理がしやすい
  • PC用のデザインをいじるだけなので、無料版でOK
  • サイドバーが便利

 

レスポンシブ対応の一番の良さは、PC用だのスマホ用だのデザインを考えなくて済むってところです。ユーザーのことを考えるなら、アクセスしている端末ごとに一番良い表示をさせることだとは思うんですが…とにかく管理しやすいんです。

 

また、レスポンシブ対応のサイトは、基本的にPC用のカスタマイズだけでOKなので、はてなブログも無料版のままできちゃいます。

 

個人的なことですが、スマホ用デザインの編集が苦手です(笑)どこをどう変えたらいいのか分からなくなります。コードを入力しても、うまく反映されてなかったり…。

 

それに引き換えPC用のデザインは(何故か)簡単です。サイドバーをうまく活用すれば、いろんな項目をパパッと表示させることができます。

 

デザイン

全体のデザイン・ブログテーマは「Spirea」

ブログデザインについては、あまり細かくいじってません。「テーマ」を適応したのと、テーマ作者のshunさんのカスタマイズ記事を参考にマネただけです。

 

▼EndooSiteで利用中のテーマ「Spirea」

テーマのダウンロードはこちらから

 

▼shunさんのカスタマイズ記事

www.ituore.com

 

ブログタイトルのフォントを変えてみる

はてなブログのヘッダーにブログタイトルを表示させる際、デフォルトでは味気ないフォントになってしまいますよね。

 

▼デフォルトの場合

f:id:eshateblo:20160813072537j:plain

▼グーグルフォントで変えた場合

f:id:eshateblo:20160813072602j:plain

 

画像をアップさせるのもいいんですが、個人的にはブログタイトルをでかでかと表示させる方がインパクトもあるし、シンプルかなーって思うんです。

 

▼ひとまず、EndooSiteと同じフォントにする方法

➡デザイン>カスタマイズ>デザインCSSにコピペ

#title
{
font-family: 'Roboto', sans-serif;
font-size: 50px;
  margin:0 auto;
}

 

下記の関連記事でフォントの変え方を紹介しているので、挑戦してみてください。

 

  

上に戻るのボタンを配置する

▼記事をスクロールしていくと、途中から出てくる右下のコイツ。

f:id:eshateblo:20170629140128j:plain

 

けっこう使っていない人も多い「上に戻るボタン」ですが、これは絶対に配置した方がいいです。

 

読者の目線に立つという意味でも大切なことですが、EndooSiteの場合、これが必須の理由があります。それは「メニューバーへの誘導」です。

 

僕のブログではメニューが追尾するタイプではないので(追尾すると邪魔だから)、気軽に上に戻ってもらって、メニューバーをクリックしてもらいたいってのがあります。故に「上に戻るボタン」は必須なのです。

 

僕の場合は参考記事をまるまるコピペしたのではなく、ボタンを表示する条件を少し指定した気がします。結構前のことなので詳しくは忘れました(笑)

 

▼EndooSiteと同じ「上に戻るボタン」を表示させる方法

➡設定>詳細設定>headに要素を追加にコピペ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

➡デザイン>カスタマイズ>フッタにコピペ

<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>
<script>
$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});
$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
});
</script>

➡デザイン>カスタマイズ>デザインCSSにコピペ

#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:rgba(0,0,0,0.4);
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:rgba(0,0,0,0.6);
}
img.hatena-fotolife, img.http-image {
display: block;
margin: 0px auto;

}

 

▼参考にした記事

azanaerunawano5to4.hatenablog.com

 

SNSシェアボタンの設置

SNS系のシェアボタンの設置もブログを作る上で必須項目だと思います。僕の場合、記事の始まりと終わりに設置しています。

 

シェアボタンのデザインやカスタマイズはいろんな人が記事にしています。僕が参考にしたのはYukihyさんの記事です。なんていうか、シンプルだけどシェア数が見やすいですし、多くのブロガーが利用しているってのが決め手でした。

 

ちなみに、記事の上下はSNSシェアボタンだけにしています。サイドバー(スマホ表示の場合は記事下のプロフィール欄)にはSNSのフォローボタンを表示させています。

 

▼参考にした記事

www.yukihy.com

 

Googleの問い合わせフォームを設置する

EndooSiteではブログ上部(メールのアイコン)とサイドバーのプロフィールに「お問い合わせ」のURLを載せています。

 

お問い合わせフォームについては検索すれば、いろんなサービス・デザインがあります。無料版は~ができるとか、有料版は~が拡張されているとか。

 

ただ、個人的に気になったのがお問い合わせフォームのデザインです。気に入ったものがありませんでした(笑)

 

そこで考えたのがGoogleのお問い合わせフォームです。デザインもシンプルですし、項目も簡単に編集できます。

 

▼EndooSiteの問い合わせフォーム

お問い合わせ-Endoo Site-

 

▼参考にした記事

www.ex-it-blog.com

 

サイドバーについて

サイドバーの見出し

サイドバーの項目デザインもカスタマイズした方がいいです。僕の場合はシンプルに青色で塗りつぶしたデザインにしています。文字色や背景色を変更して、試してみてください。

 

▼EndooSiteと同じサイドバー見出しにする方法

➡デザイン>カスタマイズ>デザインCSSにコピペ

.hatena-module-title, .hatena-module-title a {
color: #ffffff; /* 文字色 */
background-color: #286da8; /* 背景色 */
}
.hatena-module-title {
padding: 5px 10px; /* 余白 */
}

 

プロフィール画像の設置・画像に枠をつける方法

ブログのサイドバーにはプロフィールが必要ってことと、運営者のアイコンや画像があった方が信頼性が高まるっていう誰かの記事に共感し、EndooSiteも大きく大きく僕の顔が載ってます。

 

ポイントは画像のサイズ・枠です。サイズはなるべく大きく、そしてちょっとカスタマイズしたくて画像の周りを細線が囲ってます。

 

ひとまず下記をコピペしてもらえればOKなんですが、画像のURLやプロフィールページの作成など多少の下準備もあります。

 

▼EndooSiteと同じくサイドバーに画像を表示させる方法

POINT-下準備-

プロフィール画像は「はてなフォトライフ」に一度アップロードして、その後に画像の上で右クリック(画像アドレスをコピー)で画像のURLを取得してください。

プロフィールページは自己紹介記事でも書いてもらって、そのURLを貼り付けるだけです。問い合わせページもGoogleで問い合わせフォームを作り、そのURLを貼り付けるだけです。

 

➡デザイン>カスタマイズ>サイドバー>モジュールを追加(HTML)にコピペ

<center><div class="shadow"><img src="画像のURL"width="260" height="200"class="frame" /></div></center>
<p>自己紹介文</p>■<a href="プロフィールページのURL">詳細プロフィール</a><br><br>■<a href="問い合わせページのURL">お問い合わせ</a>

➡デザイン>カスタマイズ>デザインCSSにコピペ

.frame{
display: block;
margin: 0 auto;
padding: 10px;
background: #fff;
border: 1px solid #bfbfbf;
}

 

上記の自己紹介文で改行する場合は「<br>」を使ってください。

 

▼参考にした記事

ideahacker.net

www.no-overtime-day.com

 

サイドバー用SNSフォローボタンの設置

サイドバーのプロフィール欄にはSNSのフォローボタンも設置しています。自己紹介文の下にフォローボタンを設置すれば、そこから読者・ファンの獲得にも繋がりやすいのでおすすめです。

 

▼参考にした記事

www.yukihy.com

 

記事内について

見出し

見出しはブログを書く上で非常に大事な存在です。SEO的にも、読みやすさという点でも、必ず設定してください。

 

▼EndooSiteで使っている見出し

➡デザイン>カスタマイズ>デザインCSSにコピペ

.entry-content h2{
color: #444444;
background: #f3f3f3;
padding: 10px 15px;
border-left: 10px solid #002c94;
}


.entry-content h3{
color: #444444;
background: url(http://www.easyicon.net/api/resizeApi.php?id=1101338&size=16) no-repeat 0 4px;
padding: 0px 25px;
font-size: 110%;
border-bottom: 2px solid #444444;
}

 

 

太字のマーカー

文章の中で重要な個所や目立たせたいところを蛍光マーカーで引いたように線を加えることができます。こんなふうに。

 

文集を太字に変えると変更されるので、設定してみてください。

 

▼太字を蛍光マーカーに変える方法

➡デザイン>カスタマイズ>デザインCSSにコピペ

.entry-content strong {
background: linear-gradient(transparent 60%, #fff200 40%);
}

 

画像に影をつける

ちょっとしたことなんですが、白背景の画像をアップロードすると、枠がないので個人的に見づらかったりします。で、探して見つけたのが画像に影をつける方法です。

 

これをやるのとないのでは見やすさが全然違います。

 

▼画像に影をつける方法

➡デザイン>カスタマイズ>デザインCSSにコピペ

.hatena-fotolife{
-moz-box-shadow: 1px 3px 7px 2px #C5C5C5;
-webkit-box-shadow: 1px 3px 7px 2px #C5C5C5;
box-shadow: 1px 3px 7px 2px #C5C5C5;
}

 

枠組み

文章の一部やリンクを目立たせるときに活用する「枠組み」ですが、これも設定しておくと便利です。

 

▼例えば…

こんなのとか

 

 

こんなの

 

▼参考にした記事

shiromatakumi.hatenablog.com

 

ボタン

「ズバリ、このリンクを踏んでほしい!」って時はボタン系のデザインを活用するといいかもしれませんね。シンプルでリンクを押しやすいです。

 

で、ボタンのデザインもいろいろあるんですが、僕ははてなブログにある既存のデザインを再利用してカスタマイズしてます。それが、「読者になる」ボタンです。

 

▼例えば…

 

▼EndooSiteのボタンデザインを使う方法

➡デザイン>カスタマイズ>デザインCSSにコピペ

.reader-button1 {

width: 300px;
height: 46px;
margin-top: 0;
margin-bottom: 20px;
}
.reader-button-inner1 a {
position: relative;
display: table-cell;
width: 300px;
height: 46px;
border-radius: 4px;
background-color: #ffcc00;
font-size: 20px;
font-weight: bold;
color: #fff;
text-align: center;
vertical-align: middle;
box-shadow: 0 2px 4px rgba(0,0,0,.4);
text-decoration: none;
transition: all .6s;
}
.reader-button-inner1 a:hover {
top: 3px;
box-shadow: none;
transition: all .6s;
}

➡記事中で使う場合は「HTML編集」にペースト

<center>
<div class="reader-button1">
<div class="reader-button-inner1"><a href="リンクURL">文字</a></div>
</div>
</center>

※文字数が多い場合は「<br>」で上手く改行してください。

 

アイコン

リンク前後や見出しの頭にアイコンをつけると見栄えも良くなります。EndooSiteもメニューバーは「アイコン+文字」の構成にしてますし、よかったら使ってみてください。

 

 

画像について

おすすめの画像編集アプリ

EndooSiteで最近メインで活用しているアプリは、2つです。基本的には、PCの画像編集ソフトは使わず、スマホやタブレットで編集することが多いです。

 

Adobe Photoshop Express

▼例えば、こんなのとか。

f:id:eshateblo:20170317223202j:plain

 

商品レビューの時に使うことが多く、主にいろんな角度から撮った写真や比較写真を1枚にまとめる時に使います。

 

数枚の写真を1枚にまとめる機能は他のアプリにもありますが、アドビってことと、使い勝手がシンプルなので愛用しています。

 

画像が多すぎてしまう場合は、このアプリで1枚にまとめるとスッキリして見やすくなりますよ。

 

Adobe Photoshop Express: 写真の編集、コラージュの作成
Adobe Photoshop Express: 写真の編集、コラージュの作成
開発元:Adobe
無料
posted with アプリーチ

canva

▼例えば、こんなのとか。

f:id:eshateblo:20170627201211j:plain

 

文字入れ画像を作るときは、canvaを使ってます。最近の画像はほとんどコレで編集してますね。お洒落です。

 

 

canvaは最近誕生したアプリです。正直、このアプリだけで画像編集は十分です。web版もあるので、PCからの編集も容易にできます。もちろん無料で使えます。

 

Canva - グラフィックデザインとフォトエディター
Canva - グラフィックデザインとフォトエディター
開発元:Canva
無料
posted with アプリーチ

 

画像の取入れ方法

画像に関して付け加えると、共有方法はDropBoxを活用しています。

 

写真をスマホやタブレットやPCで移動するのが便利で、タブレットで画像を編集してPCに転送することが多いですね。

 

 

便利な裏技

よく使うコードは辞書に登録

僕の場合、参考記事・関連記事・合わせて読みたいなどの「枠組み」やボタン、改行のコードをよく使うので、あらかじめPCの辞書機能を使ってコードを登録しています。

 

「さんこう」と入力すれば「<div class="emphasize-link2">」と出てきますし、「改行」と打てば「改行」と出てきます。

 

 

メモの活用

上記の、PCの辞書に登録できない長いコードは「メモ帳」に保存しています。必要な時に簡単にコピペで呼び出せます。

 

さいごに

いかがでしょうか。ここまでカスタマイズすれば、それなりに見栄えの良いブログになると思います。

 

レスポンシブ対応のブログは本当に管理がしやすく、カスタマイズすればモバイルでもいい感じに表示されます。おすすめです。

 

まずは見た目から自身のブログを変えてみてはいかがでしょうか。

 

では。