The Cat's Pajamas

旅と読書をこよなく愛する平成育ちの猫好きです。自分の好きなことだけをのんびりぽつぽつ紡いでいく趣味ブログを目指しています。

ブログタイトル

はてなブログをスマホで見たときのトップページ*簡単カスタマイズ方法【コピペOK】

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

過去記事でも少し紹介したように、最近HTMLとCSSの勉強を始めました。

webデザイン超初心者が入門書1冊の独学1週間で、どこまでウェブサイトが作れるか試してみた - The Cat's Pajamas

おかげではてなブログのカスタマイズ方法が大分わかるようになってきましたので、今回の記事では自分が行ったブログカスタマイズを備忘録(2017.3現在)として、まとめます。

ちなみに素人のカスタマイズデザインですので、カスタマイズに伴ったトラブルの責任は負いかねます。予めご了承ください。

f:id:eno1081:20170312205638j:plain

なお、今回の記事ではスマホで見たときの画面カスタマイズです。はてなPRO会員でないとできないカスタマイズになると思われますので、ご注意ください。

1、基本のカスタマイズ画面

まず最初にカスタマイズの基本を説明しておきます。まず管理画面の【デザイン】を選択してください。そこから【スマートフォン】を選択します。

以下の画面からカスタマイズを行います。

f:id:eno1081:20170312170717p:plain

レスポンシブル(PCのデザインとスマホのデザインを同じものにする設定)は、私の場合はoffにしています。

ちなみにカラー変更は、以下のカラーチャートを参考にするとよいです。

カラーチャート[HTMLカラーコード・カラーネームの一覧] - TAG index

いちいち参考にするのが面倒な場合は、英語名(whiteやblackやgrayなど)で覚えてしまうと楽ですよ。

2、一番上のバーを消す

一番上についているはてなブログのバーを消します。これがあると、いかにもはてなブログというデザインになりますので、一番最初にカスタマイズする部分かと思われます。

f:id:eno1081:20170312175353p:plain

以下のコードを【ヘッダ】➡【タイトル下】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

<!--はてなヘッダ―を消す--!>
<style>
#globalheader-container {
display:none;
}
</style>
<!--代わりの余白調整--!>
<style>
#container {
padding-top:5px;
}
</style>

これでバーが消えると思います。

代わりの余白調整という部分は、バーが無くなった代わりに真っ白な余白を入れる設定です。自分のブログデザインに応じて「padding-top:」の後ろの数値を変えるとよいかと思われます(数値を大きくすると、余白も大きくなります。逆もまた然りです)。

3、下の色々と余分な項目を消す

次に行いたいのは、下の図にあるような「記事を書く」や「はてなブログ開発ブログ」といった表記を消す作業です。

f:id:eno1081:20170312200400p:plain

以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

<!--余分なフッタ項目の非表示設定--!>
<style>
.footer-action-wrapper{display:none}

/*はてなブログを始めようの非表示*/
.touch-item-list{display:none}

/*はてなブログ開発ブログ等のリンクの非表示*/
</style>
<!--非表示ここまで--!>

これで要らない項目を消すことが出来ると思います。

4、トップに並んでいる記事の画像の大きさを変える

トップページに並んでいる記事紹介の画像部分のデザインを変更できます。

f:id:eno1081:20170312172737p:plain

以下のコードを【ヘッダ】➡【タイトル下】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

 <!--アイキャッチ画像大きさ--!>
<style type="text/css">
.list-entry-article .thumb-image {
width: 110px;
height: 105px;
border-radius: 10px;
border: solid 1px 好きな色;
}
</style>
<!--ここまで--!>

画像を少し大きめに、周りの角を少し丸く設定している状態です。「好きな色」というところは、画像を囲む線の色を書いてください。囲み線がいらなければwhiteと書けばOKです。

また必要に応じて、数値を変えてみてください。

たとえば

  • 角の丸みが強くなる➡「border-radius:」という部分の数値を大きくする
  • 角が丸くならない(直角)➡「border-radius:」の項目を全部消す
  • 画像が小さくなる➡「width:(幅)」「height:(高さ)」の数値を小さくする
  • 囲み線が太くなる➡「border:」の後ろの数字を大きくする

など、ちょっとしたカスタマイズが可能です。

補足*記事紹介文の文字の大きさを大きくする方法

ちなみに私は以下の設定で紹介文の文字を大きくしています。

f:id:eno1081:20170312192336p:plain

ものすごく微妙な部分なので、要らないという方は気にしないでください。気になる方は、以下のコードを【ヘッダ】➡【タイトル下】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

<!--記事トップ文字の大きさ--!>
<style>
.list-entry-article .entry-content
{font-size:100%;
line-height:1.8}
</style>
<!--ここまで--!>

こちらの方が見やすいかなと個人的には思っています。細かな設定ですので、気になる方だけ参考にしてください。

5、日付のデザインを変える

次は日付のデザイン変更の仕方を紹介します。

f:id:eno1081:20170312173519p:plain

以下のコードを【ヘッダ】➡【タイトル下】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

このままコピーすると上の図と同じデザインになると思います。

<!--日付のデザイン --!>
<style type="text/css">
.list-entry-article .date, .date {
color:#663333;
background:#99cccc;
font-size:10px; 
font-style:italic;
border-radius: 8px;
font-family:Franklin Gothic Medium;
padding:2px;
}
</style>
<!--日付のデザインここまで--!>

必要に応じて、デザインを変えてみてください。

例えば

  • 「color:」の後ろを変える➡数字の色が変わります。whiteと記述して白抜きにするなども考えられますね。
  • 「background-color:」の後ろを変える➡背景色が変わります。どんな色を使うかはカラーチャート(カラーチャート[HTMLカラーコード・カラーネームの一覧] - TAG index)を参考にするとよいでしょう。
  • 「border-radius: 」の数値を大きくする➡角の丸みが強くなります。逆に丸くしたくないときは、項目を消してしまってください。

好みで私は日付をやや斜めになるデザインにしています。気になる方は「font-style:italic;」という部分を消してしまってください。

6、下(ヘッター)の見出しのデザインの変え方

下に続く見出しのデザインを変更していきます。

f:id:eno1081:20170312182821p:plain

以下のコードをコピペして貼ると、上記のデザインになります。【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

<!--へッター見出し--!>
<style type="text/css">
.hatena-module-title {
font-size:16px;
color:#3d3f44; 
border-top:double 3px gray;
border-bottom:double 3px gray;
padding:5px 18px; 
margin:10px 0px 15px;
}
</style>
<!--へッター見出しここまで--!>

好みでデザインを変えていただいて、結構です。

*見出しデザインの原理

ちなみに見出しは原理がわかると、自分で好きなようにカスタマイズできるようになります。下にポイントとなる部分を解説しておきます。

font-size:文字の大きさ(16pxがおすすめ);
color:文字の色(カラーチャートを参考にすると◎); 
border-top(見出しの上の線):double(二重線) 3px(線の太さ) gray(色); 
border-bottom(見出しの下の線):double(二重線) 3px (線の太さ)gray(色);

基本的に見出しのデザインは「border」という部分の表記で好きなように変えることが出来ます。線の種類は、「solid(実線)」、「dotted(点線)」、「double(二重線)」などがあります。

border: 線の種類 線の太さ 色;

=これは上下左右に線を表示できる設定です。

以下のようにそれぞれ個別に設定することもできます。

border-top: ➡上の線

border-bottom: ➡下の線

border-left: ➡左の線

border:right: ➡右の線

例えば、下のような見出しは「border-left:」 と「border-bottom:」を使って、デザインしています。

こういうタイプの見出しです。「border-left:」に続く線の太さを少し太めにしているんですね(このサンプルはスマホからのみ見ることが出来ます)。

参考になれば、幸いです。

7、プロフィール画像のデザインの変え方

スマホで見たときのはてなブログのプロフィール欄のデザインを変更します。

下のコードをこのまま貼ると、以下のようなデザインになるかと思われます。二重線でアイコンを縁取るようなデザインです。

f:id:eno1081:20170312181504p:plain

以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

<!--プロフィール --!>
<style type="text/css">
.hatena-module-profile .profile-icon, .hatena-module.profile .profile-icon{
border:3px double gray;
width: 80px;
height: 80px;
margin:10px;
border-radius:8px;
}
</style>
<!--プロフィールここまで--!>

好みに応じて、デザインを変えてみても良いともいます。

  • 角をもっと丸くする➡「border-radius:」の数字を大きくする
  • 角を直角にする➡「border-radius:8px;」の項目を消す
  • 画像を大きくする➡「width(幅)」と「height(高さ)」の数値を大きく

ちなみに「border:」の項目は順に

border: 線の太さ 線の種類 色の指定; 

 となっています。

ですので、線の太さの部分の数値を大きくすると、線が太くなります。

線の種類は「solid」にすると実線になります。

色もカラーチャート(カラーチャート/カラーネーム 分類別 - TAG index)を参考に変えることが出来ます。

8、「次のページ」ボタンのデザインを変える

トップページの「次のページ」というボタンのデザインを変えます。

デフォルトのデザインだと存在感が薄いので、以下のようなデザインにカスタマイズしてみました。

f:id:eno1081:20170312184749p:plain

以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

上の画像と同じデザインになるかと思います。

 <!--次のページのデザイン--!>
<style>
.btn-lg {font-size:14px;
border-radius:100%;
background-color:#dfe5e7;
}
</style>
<!--次のページのデザインここまで--!>

フォントサイズは写真のものよりも少し大きめに修正しました。

自分の好みのデザインに変えても良いと思います。

例えば

  • 丸みをなくしたい➡「 border-radius:100%;」を消す
  • 文字の大きさを変えたい➡「font-size:」の後ろの数値を変えてみる
  • 文字の色を変えたい➡「color: 色の指定;」でOK
  • 背景を変えたい➡「background-color:色の指定;」でOK
  • 囲み線を加えたい➡「border: solid 1px black;」を追加コピペでOK。色を変更したければ、カラーチャートを参考にしてblackの部分を変える。

色を変更するだけで、がらりとデザインが変わるかもしれませんね。

9、注目記事の画像の大きさを変える

凄く細かいデザインになりますが、個人的には重要な部分でした。デフォルトのままですと、いかにもはてなブログという感じでしたので、大きくしたかったんです。

f:id:eno1081:20170312191153p:plain

以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

上の画像と同じデザインになるかと思います。

 <!--注目記事の画像大きさ--!>
<style>
.hatena-module-entries-access-ranking .urllist-image {
width:90px;
height:90px;
border-radius:3px;
margin:5px;
}
</style>
<!--大きさここまで--!>

例によって、角を丸くしています。

直角にしたい方は「border-radius:3px」という部分を消してください。画像の大きさも「height」と「weight」の数値で変更できます。

10、「上へ」ボタンの位置を真ん中にする

これも凄く地味な設定です。

一番下の「上へ」というボタンの位置を真ん中にします。以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

<!--ページ戻るボタン--!>
<style>
.pagetop {text-align:center}
</style>
<!--ページ戻るボタンボタン--!>

特に気にならない方もいらっしゃると思います。しかし、私は左利きのため、右にボタンがついていると大変使いにくいので、中央に配置をしました。

参考にしてください。

11、カテゴリーを作成する

カテゴリーの作り方を紹介しておきます。

こちらはいささか面倒なカスタマイズになりますので、ご了承ください。

f:id:eno1081:20170312194626p:plain

まずはカテゴリーを作成します。

以下のコードを【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

<!--カテゴリー作成--!>
<div class="hatena-module-title">
カテゴリー
</div>
<span class="tag">
<a href="カテゴリー1のURL">カテゴリー1のタイトル</a>

<a href="カテゴリー2のURL"カテゴリー2のタイトル</a>

<a href="カテゴリー3のURL">カテゴリー3のタイトル</a>

<a href="カテゴリー4のURL">カテゴリー4のタイトル</a>

<a href="カテゴリー5のURL">カテゴリー5のタイトル</a>

<br><a href="ブログのトップページURL">TOPへ戻る</a></span>

「カテゴリー1のURL 」といった部分に、各カテゴリーのURLを順にコピペしてください。少し分かり辛いでしょうか?

例えば、自分のブログを開いて「旅行」のカテゴリーをクリックすると、そのカテゴリーに分類された記事がずらっと出てくるページが表示されますよね。そのときのURLをコピペするということです。

「カテゴリー1のタイトル」というところには、「旅行」のように表示したいカテゴリー名を記述してください。

この作業を自分の作りたいカテゴリーの数だけ、繰り返し行います。

ただしこの作業だけですと、簡素なデザインになってしまうでしょう。

そこでデザインを指定するコードを張ります。

*カテゴリーのデザインを指定する

以下のコードも【フッタ】➡【フッタ】の「HTMLを記述できます」というところにあるボックスにコピペして貼ってください。

 <!--フッタのカテゴリーデザイン--!>
<style>
.tag {font-size:13px}
.tag a {color:#3d3f44;
background-color:#99cccc;
padding:3px;
border-radius:3px;
line-height:2.5;
margin-left:3px}
</style>
<!--フッタのカテゴリーデザイン--!>

自分の好みに変更してもらっても構いません。

例えば

  • 背景の色を変える➡「background-color:色の指定;」でOK
  • 文字の色を変える➡「color:色の指定;」でOK
  • 角の丸みを大きくする➡「border-radius:数値を大きくするpx;」でOK
  • 角を直角にする➡「border-radius:3px;」の項目を消す
  • 背景色の部分(内側)の余白を増やす➡「padding:数値を大きくするpx;」でOK

場合によって「margin(外側の余白)」や「padding (内側の余白)」の数値を変えてみると調整が上手くいくかもしれません。

 

自己責任でお願いいたします。

12、下(フッター)の見出しを好きなように増やす

カテゴリーを作成したように、好きな見出しを増やすことが出来ます。

<div class="hatena-module-title">
見出しのタイトル</div>
内容を好きなように打ってOK

例えば、私はこのような感じでプライバシーポリシーの明記を行っています。

f:id:eno1081:20170312195818p:plain

これは、このようなコードを使っています。

 <div class="hatena-module-title">
プライバシーポリシー</div>
当サイトのプライバシーポリシーに関しましては<a href="プライバシーポリシーの書いてある記事のURL">こちらからどうぞ </a>

応用すれば、なんでも項目を自由に作ることが出来ます。

カスタマイズのポイント

以上でカスタマイズ方法の紹介を終えたいと思います。最後に、自分でカスタマイズを行う際に失敗しそうなポイントを補足しておきます。繰り返しますが、この記事のデザイン設定そのものが素人のお遊びのようなものですので、責任は負いかねます。

そのためうまくいかないということがありましたら、以下のポイントを確認してみてください。

ポイント①抜けている記述がないかを確認する

例えば、それぞれの記述項目の最後に「;」という記号が打ってありますが、これは非常に大事な記号です。抜けていると記述が反映されません。注意してください。

同じように、時たま記述の冒頭に打ってある「.」も非常に大事な記号です。勝手に消したり、コピペをする際に忘れていないかを確認してください。

他にも「<」や「>」、「{」や「」いったかっこ記号はも重要です。

このような記述がコピペの際に抜けてしまうと、トラブルのもとになります。カスタマイズの際は、ご注意ください。

ポイント②CSSとHTMLを学んでしまうのが一番楽

個人的には、CSSとHTMLを学ぶのが一番手っ取り早いと思います。やみくもにネットで検索してコピペして、ごちゃごちゃと推測でいじるよりも、原理をしてしまった方が早いです。

私は以下の本を一冊やっただけですが、ずいぶんとHTMLとCSSの知識が身に付いたと感じております。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

これをやるだけで天空の城のラピュタに出てくるムスカばりに「見える、見えるぞ…これがHTMLとCSSかああああ」となります。面白いくらいです。

もっと早く勉強していれば、時間を無駄にすることもなかったなあと後悔しています。参考にしてください。

ポイント③Google Chromeの検証機能を利用する

ちなみに今回紹介したカスタマイズはGoogle Chromeの検証機能を使って、行いました。使い方は、Google Chromeを開きます。

コードを知りたいページを開き、「F12」ボタンを押します。

そしてコードを知りたい部分で「Ctrl」と「Shift」と「c」のキーを同時に押します。そうすると知りたい要素の名称を確認することが出来ます。

あとはポイント②のような本を読んで得た簡単なHTMLとCSSの知識があれば、カスタマイズ可能になります。

興味がある方は参考にしてください。

最後に

以前からはてなブログのカスタマイズに興味があり、色々とやってきました。しかし、結局はきちんとHTMLとCSSを学んだ方が早いということに気づきました。まだまだ毛の生えたばかりのヒヨコのような初心者の身ですが、もっと知識をつけて、思い通りのカスタマイズができるように成長していきたいところです。

今回の記事は、以前から私が知りたいと思っていたカスタマイズをまとめました。

同じように困っている方の参考になれば、幸いです。

 *関連記事もよろしければお読みください。

www.nekopajamas.net