(cache) 【保存版】2ヵ月必死にはてなブログのデザインをカスタマイズしてきたのでまとめて紹介するぞぉぉぉ！！！【初心者向け】

f:id:toshitiru:20160212141600j:plain

長かった！ここまで長かった…！

まとめてみたら1万文字の大ボリュームになってしまった！

それなりに満足する出来になってきたので当ブログで行ったカスタマイズをまとめて大公開するぞっ！！（といっても初心者向け）

カスタマイズする際は前のコードを取っておきましょう！カスタマイズ用のサブブログもあると便利！紹介だけなので各自で頑張ってみてね。僕も素人だったのでやればいろいろできますぞ。

導入テーマ

当ブログで採用してるテーマは半月 (id:waitingmoon)さんの「Innocent」！

シンプルでカスタマイズ性を重視したデザインだっ！

ブログでありつつ、ちょっとしたメディア風にきれいに整えていきたかった僕にはピッタリのテーマ！

レスポンシブデザインにも採用されてて最高！

同じ作者さんの「Blank」もあるけど新しいのは「Innnocent」の方。

こっちにはタイトル下に作者さんが用意したグローバルメニューとはてなの注目記事が表示できてそこが気に入って導入している。

おまけに言うと、はてなのカスタマー界を牛耳る？ゆきひー (id:ftmaccho) さんもこのテーマ*1を使っているのでカスタマイズの恩恵を受けやすいのも個人的魅力の一つ！

タイトル周辺

タイトル画像

タイトルはただの文字から画像に差し替えてみた！

看板となるイラストを持つだけで全然気持ちが違う！

文字もイラストも自由に配置できるので是非やってみることをおすすめしたい。

f:id:toshitiru:20160206160605p:plain

「Innnocent」のタイトル変更方法はこちら↓

イラストはillustratorを駆使して素人なりに作ってみてすごく気に入ってる！

けど、さすがに白地にイラストだけだとちょっと物寂しい。

そこで今度はPhotoshopでペイントをばらまいてみた！

f:id:toshitiru:20160211231238p:plain

かなり個性が出ていい感じな気がする！（少しうるさいかも…）

ブラシをダウンロードすればいろんなパターンで作れそうなので余裕があれば季節毎とかにいくつかパターンを用意しておけばもっと面白そう！

フォントはGoogleフォントからダウンロードして使ってみた。

ここを参考にしてやってみればできますぞ。

ちなみにタイトルには「青い鳥」と「白いキャンパス」をかけているぞい！

ここでちょこっと説明してみた。

グローバルメニュー

「Innocent」はちょっとコードを付け足せばナビゲーションバーをセットできるぞ！

だが、僕は一つの問題にぶち当たった。

ほぼ雑記ブログなのでカテゴリーがたくさんできてしまったのだ。

パンくずリストを導入して階層にして整理してみたけどそれでも煩雑な有様に…

ところでパンくずリストはこちらを参照すれば簡単にできます。

SEO的にも良いのでまだの人はぜひどうぞ！

普通なら半月 (id:waitingmoon)のナビゲーションバーでも十分なのだけど、タブレットやスマホで表示すると親カテゴリと子カテゴリがメニューバーを押した時にすべて一緒に表示されてしまう…

そうすると、スクロールもたくさんしなきゃだし何より見づらい。

PCなら全然問題ないんだけど、やっぱりモバイルからの閲覧性を良くしたい…

そこで僕はタブレットは諦めるとしてスマホははてな標準のもので運用してみることに。しかし、やっぱり機能性を考えるとPCと共有して使いたくなった。カスタマイズも楽だし、きれいだったからだ。せっかくレスポンシブデザインなんだからということでやっぱり止めることに！

というわけで導入したのがまたまたゆきひー (id:ftmaccho) さんのレスポンシブ対応トグルメニュー！

これは半月 (id:waitingmoon)さんのナビゲーションバーと違って、子カテゴリまでしか表示できない。

けれど、モバイル表示の時に親カテゴリしか表示されないためスッキリして非常に見やすくなった！

その代わりに表示されるカテゴリの数が限られるようになってしまう。

そこで考えたのがブログ内にサイトのカテゴリーを一覧にしたサイトマップ的なページを設けること！

親カテゴリにサイトマップを設置しておけばどんなジャンルの記事がサイトにあるか把握しやすい。

ちなみに箇条書きなどをを使ってリンクページをまとめるとSEO的にいいという話をどこかで見た。大した効果はないかもだけど、やらないよりマシだろくらいの気持ちで実践してみた。

記事本文

記事本文のCSS

まずは記事の文字。

文字の大きさは16～18px（モバイルは15,16px）くらいがいいと言われてますぞ。全体のフォントは各自で好きなものを入れてみてくだされ。

/* ----- 記事の文字 ----- */
.entry-content {
font-size:17px;
color: #111;
margin-bottom: 1em;/*行間スペース*/
line-height: 1.6;/*文字の高さ*/
letter-spacing: 0.8px;/*文字間隔*/
}
/* -----全体のフォント----- */
body {
font: 17px/1.8 "游ゴシック","YuGothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
font-weight:500;
}
/*記事のタイトル*/
h1.entry-title a { font: 28px/1.8 "游ゴシック","YuGothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif; color: #212121; font-weight: bold;}

記事内の一部を背景色と蛍光ペンみたいな下線で装飾する方法

こちらはオプションとしての機能。まず下のコードをCSSに書きます。

/*背景色*/
.background-gray{
    background: #f0f0f0;
    padding: 30px;
    margin: 5px;
}
/*下線の色*/
.ul {
  background: linear-gradient(transparent 80%, #FFF176 0%);
}

そして背景色で囲む、または蛍光ペンのような線を引いて見やすくしたいという時にHTML編集画面でそれぞれ以下のように入力します。

まずは背景色↓

class="background-gray"

こちらが下線

class="ul"

背景色はpタグかdivタグで囲むことを忘れずに。

下線は「見たまま編集画面」で引きたい箇所すべてに標準の下線を引きます。

記事を書き終えたら「HTML編集画面」で<span style="text-decoration: underline;">の「style="text-decoration: underline;"」を「class="ul"」にすればただの下線から蛍光ペンのような下線に変えることができます。

ちなみに下線の色はCSSに書き込めばそれぞれ異なる色を設定できます。

※ HTMLに書き込む時も「ul2」とやることをお忘れなく。ここは自分で好きなように設定できます。

/*下線の色（赤）*/
.ul2 {
  background: linear-gradient(transparent 80%, #ffc1c1 0%);
}

これを引くと長い記事でも重要で強調した箇所がくっきり浮かび上がって流し読みでも読みやすくなるし、ちょっとおしゃれに見えるのでおすすめ！

リンクの色

/*リンクの色*/
a:link { color: #色コード; } /*未訪問のリンク*/
a:visited { color: #色コード }/*訪問済みのリンク*/
a:hover { color: #色コード; } /*ポイント時のリンク*/
a:active { color: #色コード; } /*選択中のリンク*/

hoverとactiveの違いが分かりづらいんですけど、hoverは「カーソルを合わせた時」activeは「クリックしてホールドするなどした時」の色です。

変な行間の消し方

デザインによって記事の幅などが決められてしまっていて、PCとスマホで間隔が少し変わってしまうなど調節に最初は苦労していました。

そこで導入したのがこちら！

/*行間をつぶす*/
.entry-content p { margin:0}

編集画面でHTML編集を見てもらえば分かるのだけど、はてなは自動的に〈p〉タグが付くことで行間などを調節しています。

そこでこの〈p〉タグの空きスペースを消す「margin: 0」を使って消しています。

marginってなんだよって方はこちらの図を参考にどうぞ！

f:id:toshitiru:20160117175428g:plain

ここでは文字がcontentになっています。

見出しのカスタマイズ

以下は僕の例だけどここはいろんなのがありますよね。

/* ----- 見出し関連 ----- */
/* 大見出し */
.entry-content h3{
color: #212121;
padding: 10px 15px; 
border-left: 10px solid #6D4C41;
border-bottom: 1px solid #6D4C41;
}
/* 中見出し */
.entry-content h4{
color: #444444;
padding: 10px 15px; 
border-left: 5px solid #6D4C41;
}
/* 小見出し */
.entry-content h5{
color: #3f3f3f;
padding: 10px 15px; 
border-bottom: 3px dotted #6D4C41;
}
/* サイドバー用の緊急見出し */
h6 { 
border-bottom:
solid #6D4C41 3px;
font-size: 18px;
padding-left: 1px;
margin: 0px 0px 20px 0px; 
}

サイドバー用の緊急見出しとは「HTML」でサイドバーを作った時用に使っていたもの。このようにCSSに書き込んで<h6>タグで囲めばうまい具合に下線を引くことができるのだ。

見出しはいろんなものがあるのだけど、ベーシックなものはここにだいたいまとまっているぞい。

枠線

次は記事内で枠線を付けたい時の方法。こういうのです↓

コピペすればそのまま使えます。

実線。

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
ここに文字を入力する。
</div>

細かい点線。

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
ここに文字を入力する。
</div>

ダッシュで粗い点線みたいなの。

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
ここに文字を入力する。
</div>

色付き。

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>

【応用編】

文字をセンターに寄せる+線を太くする+角を丸くする+文字＆背景＆線の色を変える

いろいろMIX！

<div style="padding: 10px; margin-bottom: 10px; border: 2px solid #00a381; border-radius: 10px; background-color: #efffef; ; color: #7f7fff;" text-align: center;>
ここに文字を入力する。
</div>

「border」が線の太さ
「solid」の部分が線の形（dotted、dashed、doubleなどなどに変更可能）
「border-radius」で角を丸くする。（左上、右上、右下、左下の順に角を調節できる。例：10px 0px 10px 0pxのようにしたら右上と左下は直角のままになる）
「background-color」で背景色、「color」で文字色、「solid」の次が枠線の色
「text-align: center」でセンターに寄せる。（right、leftなどに可能）

こんな感じになってます。それぞれ調節すればオリジナルティのあるデザインにできまっす！

ちなみにこんな風にもできる。これも枠線のHTMLをいじれば調整できまする。

タイトル付き枠ここに文字を入力する。

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

枠線はここで勉強させてもらいました～

HTMLのお勉強･枠をつける - ウェブサイト制作ツール紹介 Jimdo diy

記事タイトル等

日付

/* ----- 日付 -----*/
.date
{
color: #fff; /*日付の文字色*/
background: #e57373;/*日付の背景色*/
padding: 0px 6px ;/*日付の文字まわりのスペース（二個だけの時は「上下」「右左」）*/
margin: 0px 0px 0px 10px;/*左から順に「上、右、下、左」のスペース*/
width: 65px;/*ボックスの幅（100%にすれば端まで広がる）*/
font-size:12px;
text-align: center;/*文字の位置を真ん中にする*/
}

記事タイトルの見出し

/* 記事一覧の見出し */
.entry h1{
padding:10px;/* 文字周辺の見出し内のスペース */
background: #FFF;/* 見出しの背景色 */
border-left:10px solid #6D4C41; /* 左端の縦線 */
}

僕の設定では「日付」のmargin-leftを10px空け、それに合わせて記事タイトルの縦線をboder-left:10pxにすることで合わせています。

f:id:toshitiru:20160212145215p:plain

記事上のタグと記事間のスペース調整

あとタグのスペースと別の記事の間がスマホだと特に空き過ぎていて気になったので詰めてみた。

f:id:toshitiru:20160212150250p:plain

ここ！

/* ----- 記事上のスペース -----*/
.entry-content{
    margin-top:10px;
}
/* ----- 記事間のスペース -----*/
.entry, .page-archive .archive-entry {
    margin-bottom: 24px;
    padding-bottom: 12px;
}

続きを読むボタン

下のコードは影をつけた「続きを読むボタン」です。記事内のフォロー・シェアボタンとデザインを少し統一してみました！

/* -----　「続きを読むボタン」----- */
.entry-content .entry-see-more{
    background-color: #1A237E;
    box-shadow: 0 -3px 0 rgba(0,0,0,0.36) inset;
    margin-top:20px;
}
.entry-content .entry-see-more:hover {
    background-color: #6D4C41;
}

こちらを参考にいじりました。他にもたくさん表示してくれていますっ！

ちなみにまたまたゆきひー (id:ftmaccho) さんのですけど、こうした関係をすごく良くまとめてくれているのでブックマーク必須です！笑

挿入する画像に枠を付ける

あと画像に枠を付けたかったらこれでできます。

/* ----- 画像の枠 ----- */
.entry-content img{
    border: 1px solid #757575;
}

記事の文字関連はだいたいこんなもんかな。次はサイドバーです！

サイドバー

プロフィール

サイドバーといったらやっぱりまずはプロフィールを強調したいところ。

はてなのサイドバーにも画像を入れられる機能があるんだけど、すごくちっちゃいんですよね。そこでHTMLを打ち込んでそのまま画像を挿入してみみました！

はてなフォトライフからの画像活用方法はこちらで説明してます。

普通に画像入れるだけだったらdivとwidth,hightのところは消して大丈夫。

スマホで表示される時、はみ出してしまったので調節するためにwidth,hightは入れてます。

divの中に入れたshadowは写真に影を付けるエフェクトをCSSで表現するためのものです。下のやつを入れればできます。widthは写真の大きさと合わせてくだされ。

/*プロフィール写真*/
.shadow{
	position: relative;
	display: block;
	width: 280px; /* 画像の横幅 */
	margin: 0 auto;
	z-index: 1;
}
.shadow:before{
	content: "";
	position: absolute;
	bottom: 6px;
	left: 18px;
	width: 50%;
	box-shadow: 0 0 4px 8px rgba(0,0,0,0.6);
	z-index: -1;
	transform:rotate(-3deg)
}
.shadow:after{
	content: "";
	position: absolute;
	bottom: 6px;
	right: 18px;
	width: 50%;
	box-shadow: 0 0 4px 8px rgba(0,0,0,0.6);
	z-index: -1;
	transform:rotate(3deg)
}

こちらを参考にやらせてもらいました。枠付きのやり方も紹介してくれてます。

ちなみにプロフィール内には普通にHTMLで書き込みができます。なので、

<a href="挿入したいURLはここに入力">表示する文字</a>

を入れればリンクを付きの紹介にすることが可能です。

ただし、そのままだと文字に色がつかないので、

<span style="color: #0000cc;"><a href="挿入したいURLはここに入力">表示する文字</a></span>

のようにすると色がつきます。

サイドバーには簡潔にブログの趣旨と詳しい方針、プロフィール、定期的に更新している主な記事などを紹介してみました！

ただサイドバーに上手くリンクの色変更が反映されないのだけど、そのうち調べて直したい…なぜだろう。