TureTiru Times

つれづれ「ちる」ままに日常や学問、ライフハックについて書き綴るブログ

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

あとで読む

スポンサードリンク

f:id:toshitiru:20160212141600j:plain

 

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

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

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

 

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

 

 

 

導入テーマ

※ 2015/5/23追記

現在は『Naked』というテーマを採用しています。

この記事でも何度も紹介するゆきひーさんが作ったカスタムテーマです。また、改めてカスタム記事を書きますが、基本的なことはテーマに関係なく応用できるのでご安心ください。

 


 

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

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

 

 

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

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

 

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

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

 

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

タイトル周辺

タイトル画像

※ 2016/10/17追記

タイトルを「つれづれTiru`s Life」から「TureTiru Times」に変更に伴って画像も変更しました。

 

f:id:toshitiru:20160925194454p:plain

 

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

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

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

 

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-family: 'Noto Sans Japanese', sans-serif;
font: 17px/1.7 }
/*記事のタイトル*/
h1.entry-title a {
font: 28px/1.8 'Noto Sans Japanese',sans-serif;
color: #212121;
font-weight: bold;
}

※  現在、全体のフォントに使用している「Noto Sans Japanese」はCSSに

 

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

 

と書いてWebフォントとして読み込む必要があります。

すごくきれいで読みやすいんですけど、読み込むのに時間がかかってしまうのが欠点です…軽量する方法があるのですが、まだよくわかってないので出来たら記事にしたいと思います。

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

こちらはオプションとしての機能。まず下のコードを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 h1{
padding:10px;
background: #FFF;
border-left:10px solid #6D4C41; 
}
/* 大見出し */
h3 {
position: relative;
padding: .75em 1em .75em 1.5em;
border: 1px solid #9FA8DA;
}
h3::after {
position: absolute;
top: .5em;
left: .5em;
content: '';
width: 6px;
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #1A237E;
border-radius: 4px;
}
/* 中見出し */
h4 {
padding: .5em .75em;
background-color: #efefff;
border-bottom: 1px solid #1A237E;
}
/* 小見出し */
h5 {
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #9FA8DA;
}
h5::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 4px;
background-color: #1A237E;
}
h5 {
font-size: 1.125rem;
margin-top: 1em;
margin-bottom: 1em;
}
/* サイドバー用の緊急見出し */
h6 { 
border-bottom:
solid #6D4C41 3px;
font-size: 21px;
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をいじれば調整できまする。 

 

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

 

<fieldset style="border: 1px dotted #000000; padding: 10px;">

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

 

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

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

 

目次

目次は自動で入力する方法もあるんだけどはてなブログなら[]で囲んで:contentsと打つだけで目次が超簡単にできるし、自由な位置に置けるから自動挿入は止めました

それでもカスタマイズしないとしょぼいです。

 

いつものここにまとまってますぞっ!

※ ただし、スマホのだと左端が上手く表示されない。レスポンシブならNo problem。

 

 

 ちなみに自動化してた時はこちらを参考にさせてもらいました。

 

 

あと、情報過多だなーでも書いておきたいなーという時はこんなの使わせてもらってます!

 

記事タイトル等

日付
/* ----- 日付 -----*/
.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を打ち込んでそのまま画像を挿入してみみました!

 

<center><div class="shadow"><img src="はてなフォトライフにアップロードした写真のURL" width="280" height="200"></div></center>

 

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

 

 

普通に画像入れるだけだったら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: #色コード;"><a href="挿入したいURLはここに入力">表示する文字</a></span>

 

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

 

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

 

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

フォロー、シェアボタン

フォローやシェア用のはまたまたゆきひー (id:ftmaccho) さんのです。笑

 

 

 

ちなみにですが、サイドバーと記事下にフォローボタンを設置しようとするとデザインをにしないとどちらかがちょっと変になってしまいます

 

その時はHTMLとCSSの「follow_btn」の部分を記事下かサイドバーのどちらか一方でいいので変更すれば別々にデザインを設定することができます。

 

僕の場合は記事下のフォローボタンのコードは適当に「follow_btn_down」とかやりました。なんか「down」って変じゃね?って思わなくもないですがめんどうなので放置してます。笑

 

さらにちなみに記事下のフォローボタン、シェアボタンは枠で囲って見やすくしました。

 

<div style="padding: 10px; margin-bottom: 10px;  background-color: #efefff;">

ここに挟みたいコードを入れる

<div>

 

ちょっといじるのめんどくさいけど、そこそこデザインのいいものを使いたいって人はこちらがHTMLを挿入するだけなので簡単でおすすめです。ちゃんとスマホ対応!

 

サイドバーのモジュール

いろいろ試したんですけど、最終的にこれに落ち着きました。笑

 

※  現在はこのモジュールバーはサイトの速度を改善するために解除してみています。

 

 

ただ「Innocent」でこれを使いタイトル下に注目記事を表示するとこのモジュールバーには表示されません

そこで僕はRankletというGoogleアナリティクスの検索ランキングなどを載せられるサービスを代用として使っています

 

※  こちらもモジュールバー使用中止をしたので現在は利用していません。

 

 

はてブを入れている人も多いですね~僕のは少ないのでやってません…

良かったらはてブしてねはは…

 

次にやってみたいのは記事をスクロールした時に追随してくれるやつなんですが、調べてみた感じちゃんと勉強しないと難しそうなので断念してます

誰か分かりやすく作ってくれないかなぁ…需要あると思うんだけど

 

なんて思ってたらすぐ見つけました。笑 

 

まとめ

他にも細かいところはいろいろカスタマイズしてるんですが、長いので今回は以上です。

大雑把にまとめたものですが、役立ちそうなことはまた記事にしていこうと思うのだけど、読者登録はしてもしなくても構いません!!!

 

↓↓↓↓↓↓↓↓↓↓↓↓

    

↑↑↑↑↑↑↑↑↑↑↑↑

 

最後におすすめの方法があって、これを覚えれば自分でどんどんカスタマイズしていくことができます。

それはChromeの「要素の検証」機能を使うことです。

 

 

簡単に説明するとある部分のHTMLとCSSなどがどのようになっているのかを調べることができます

選択した部分が分かりやすく色で表示されるので、コードの名前が知りたかったり試しにいじってみたりするときにすごく便利です。これ知ってからしょっちゅう使ってます。

 

右クリックして一番下にある「検証」ってやつかF12を押せば使えます。

 

これはあくまでも疑似的に検証するためのものなので、デザインを変えるには編集画面で実際にコードを入力する必要があります

 

何も知らずに初めて使った時に、変なカスタマイズをしてしまって直そうと半日奮闘してしまったことは秘密です。変にいじっても新しいウィンドウで開けば元に戻るので安心して使ってみてください。

 

適当にいじってればそこそこ勉強になるのでおすすめ!

ちなみにスマホ版にしたものも見れます。

 

最後に多くの先輩ブロガーさんたちのおかげでど素人の僕がここまでカスタマイズできるようになりました!

本当にありがとうございます<(_ _)>

 

あとですが、ブログはあんまりきれいにし過ぎるより多少ごちゃごちゃしてた方がブログっぽくていい気がします

ちょっときれいに整えすぎたかなと思うところもあるのでまた少しずついじっていく予定です。

細かく修正したいところはまだまだあります…

 

デザインに終わりはない…すべてのカスタマーに幸あらんことを…Good luck

 

【おまけ】

【その他ブログ関連のおすすめ】

 

*1:もしかしたらまだBlankのままかもしれないがカスタマイズがたくさん施されていて分からない haha

広告を非表示にする