はてなブログカスタマイズ*はじめて3カ月までに私がやった20のこと

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

ブログをはじめて3カ月が経ちました。

1カ月ぐらいでデザインが気になりだし、カスタマイズの沼にハマりました^^

初心者の私でもできたカスタマイズや、記事内のテクについて紹介します。

※長め記事です。

難しいことは分からなくても、なんとかここまでできたよ~。

プログラムのことは何にも知らなかった私。

それでもブログのデザインにこだわりたい!

あれこれテーマをインストールして試し、カスタマイズにかなりの時間を使ってしまいました。

今回は今までの振り返りも兼ね、はてなブログのカスタマイズと記事作成の小技について紹介をしていきたいと思います。

\この記事のポイント/

✔はてなブログのテーマ選び

✔ZENO TEALのカスタマイズ

✔(全テーマ共通)おすすめのカスタマイズ

✔ブログ記事作成のおすすめテクニック

 

目次

【はてなブログカスタマイズ】テーマストアでデザイン選び

テーマはダッシュボードの「デザイン」から選べます。

はじめはhandwritingというテーマを使っていました。

正直に言うと、私は最初テーマストアにあるテーマは、有料なのかと思っていました。

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

“ストア”って「売っている」って意味だと思いますよね?

でも良く確認したら、”ストア”の中のテーマも無料だということがわかりました。

そして最初に気になったUnderShirtにしてみました。

すると今まで表示されていた挿入表が表示されなくなってしまいました!

表はGoogleスプレッドシートで作成したものです。

これには困りました。

どうせだからとあれこれインストールして試し、結局このZENO TEALにしました。

男性的な印象のテーマですが、女性らしい色を使えば他の人と被らないデザインになるかも!

挿入表もきちんと表示されるし、人気のテーマなのでカスタマイズの情報も多く出ていたので、とりあえずこのテーマでやってみようと決めました。

テーマを決めることができたのは、はじめて1ヶ月目でした。

私のテーマ選びのポイント

・表がしっかり表示される

・トップページがカード型のデザイン

・レスポンシブ対応(スマホ用画面を自動調整)

私は仕事でアルバイト求人広告を良く使う(発注する)のですが、今時は6~7割の人がスマホで求人広告を見ます。

ブログも同じでほとんどの方がスマホで記事を見るので、スマホ画面が自動で調整されるレスポンシブ対応になっているかどうかは、とても重要です!

ZENO TEALのテーマストはこちら↓

【はてなブログカスタマイズ】ZENO TEALのカスタマイズまとめ

ZENO TEALテーマの必須設定2つ

ZENO TEALは、はてなブログPro用にデザインされたテーマで、無料版では使えません。

無料版で使うと、トップページのカード型部分に広告が表示されるので、Googleアドセンスのポリシー違反になるからだそうです。

最初からProだったので、ここは気にしなくて良し!

【必須設定1】各記事のトップに画像を設定(サムネイルとは別)

各記事の一番最初に画像があることが前提となっています。

その画像がトップページ(ランディングページ)のカード型の画像になります。

また画像も16:9のサイズに統一した方がきれいです。

【作業したこと】

✔投稿した全記事の画像をすべて16:9で作り直し

✔記事の冒頭に作った画像をそれぞれ挿入

トップページの画像になるので、気合入れて作り直しました。

画像はcanvaを使って作りました。

canvaについては記事後半でも紹介します。

【必須設定2】全記事に「続きを読む<!–more–>」を入れる

「続きを読む」<!–more–>タグを入れることが前提になっています。

これを入れないと、記事がクリックできない仕様なのです。

最初これがわからなくて、「私の記事どこクリックしても表示されない~」ってなってました💦

でも設定は超簡単です。

記事の導入文の後に、「続きを読む」のボタンを押して、この<!–more–>タグを入れるだけです。↓

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

【作業したこと】

・すべての記事の導入文後に「続きを読む」を設定

<編集画面↓>

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

<投稿後のブログトップページ↓>

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

ZENO TEALはこの2つの設定を行ってしまえば、とても便利です。

毎回トップに来る画像を設定し、導入文書いて「続きを読む」ボタンを押すだけです。

ただ、テーマ導入時すべての記事に「続きを読む」の設定を行わないと、トップページから記事がクリックできない(表示されない)状態になるので少々厄介です。

そしておのずとトップ画像に出る導入文は、練り直すことになります^^;

おかげで、全部の記事を軽くリライトしました♪

【ZENO TEALカスタマイズ】ヘッダー画像の設定

ブログタイトル入りのオリジナルヘッダーを作成することにしました。

・ブログタイトル入りヘッダーを作成(canva)

・デザイン>カスタマイズ>ヘッダー>画像をアップロード

・スマホ版の画像を確認

ヘッダー画像は横幅1000px

zeno tealの画像は横幅が1000pxで設定しないと、画像がぼやけます!

高さはお好みで設定ください。

私はヘッダーが短いのが好みなので、1000px×200pxで作成しています。

【ZENO TEALカスタマイズ】スマホ版のヘッダ画像をPCと同じにする

ヘッダーをアップロードし設定し、めでたしめでたし…

しかし!

スマホ版のヘッダーを確認すると、ヘッダーの高さが高いまま画像だけスマホ版に調整され、デザイン無視になってしまいました!

↓【カスタマイズ前のスマホ画面】

f:id:life-is-distress-or-beautiful:20201128144458p:plain

ヘッダーでかっ!いらんよこんなん…どうすりゃいいんだ~!

いろいろ検索した結果、冒険者Lv.1さんの記事で紹介されていたcssをコピペし解決しました!

CSSの最後↓は消して、私好みのサイズになりました。

width="100%"

↓これを デザイン>カスタマイズ>ヘッダ>タイトル下 にコピペします。

<style type="text/css">
.header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
max-width:100%;
margin: auto;
display: block;
}
.headernew a{
display:block;
background-color:#fde6ff;
}
.headernew{
margin:0px!important;
}
</style>
<h1 class="headernew">
<a href="ブログのトップページURL">
<img src="ヘッダー画像のURL" alt="ブログタイトル" >
</a>
</h1>

※バックカラー(background-color)の色は白へ変更

#fde6ff→#ffffff

※”ブログのトップページURL“”ヘッダー画像のURL“”ブログタイトル“は自分のブログのものを入れてください。

↓【カスタマイズ後スマホ画面】

f:id:life-is-distress-or-beautiful:20201128144550p:plain

そうそう!ヘッダーはこれがいい♪
短い方が、おすすめ記事が見えて良いよね!

ヘッダー画像のURL確認方法

ヘッダー画像のURLを探すのにも苦労しました。

これははてなフォトから参照できます。

①↓ダッシュボード右上のルービックキューブを押し、はてなフォトライフを開きます。
②フォルダの中のHatena Blogをクリックします。

はてなブログ 画像URL 確認方法
はてなブログ 画像URL 確認方法

③↓「フォルダを編集」をクリックし、ヘッダに設定した画像を見つけてチェックボックスに✔を入れる。

はてなブログ 画像URL 確認方法
はてなブログ 画像URL 確認方法

④「ブログに貼り付ける」をクリックすると画像URLが出ます。

はてなブログ 画像URL 確認方法
はてなブログ 画像URL 確認方法

もしかしたら、ヘッダ画像の上で右クリックし、「画像URLをコピー」すればよいだけの話なのかも…

何をするでもひとつひとつ時間がかかる~

【ZENO TEALカスタマイズ】h2の見出しがトップに固定されるのを解除する

記事を見直していたところ、h2の見出しが上部に固定され、スクロールしてもついてくるのがどうもうざい…

これはZENO TEALサポート記事で速攻解消できました。

↓これを デザイン>カスタマイズ>デザインCSS にコピペします。

.entry-content h2{
position: relative;
}

【ZENO TEALカスタマイズ】テーマカラーを変更する

これもZENO TEALサポート記事で紹介されています。

↓これを デザイン>カスタマイズ>デザインCSS にコピペします。

/* メインカラー 500 */
#blog-title, .entry-content h2, .entry-content ol li:before, .page-index .pager a:hover, .page-entry .pager .pager-prev::before, .page-entry .pager .pager-next::after, .hatena-module-title, .archive-heading
{background-color:#色コード;}
.entry-content p a, .entry-content h3, .entry-content h4::before, .entry-content ul ul li::before, ul.table-of-contents:before, .page-index .pager a, .page-entry .pager span a, .urllist-item::before, .hatena-module-category .hatena-urllist li::before, .entry-content ul li::before
{color:#色コード;}
.archive-heading::before, .entry-content h2::before
{border-top-color:#色コード;}
.entry-content h3
{border-left-color:#色コード;}
ul.table-of-contents, .page-index .pager a, .page-entry .pager span
{border-color:#色コード;}
@media screen and (max-width: 480px){
.entry-content h2
{border-bottom:3px solid #色コード;color:#色コード;background-color:transparent;}
}
/* 濃い色 600 */
#globalheader-container, .zeno-menu li a:hover
{background:#色コード;}
.entry-content p a:visited {color:#色コード;}
/* 薄い色 400 */
.page-entry .pager span a:hover, #zeno-menu, .entry-content ol ol li:before
{background:#色コード;}

↓色コードはこのサイトが便利です。

色を変えるととっても雰囲気かわります♪

色はほとんどを統一させた方がセンス良く仕上がります。

合わせてデザインカスタマイズで背景も変えておきましょう。

はてなブログ 背景色変更
はてなブログ 背景色変更
はてなブログ 背景色変更

【ZENO TEALカスタマイズ】太字<strong>タグに蛍光マーカーが自動で入ってしまう設定を解除

蛍光マーカーの色を変えるCSSを入れたのですが、反映されません。

調べてみると、太字が自動で蛍光マーカーになる設定が実装されており、それを打ち消す必要があることが分かりました。

参考記事↓

本当に先人に感謝です♪

↓これを デザイン>カスタマイズ>デザインCSS にコピペします。

/* 蛍光マーカー打ち消し */
.entry-content strong{background: initial;}

【ZENO TEALカスタマイズ】グローバルメニューの設定

これもZENO TEALサポート記事で紹介されていて、簡単にできました。

↓これを デザイン>カスタマイズ>ヘッダ>タイトル下 にコピペします。

<div id="zeno-menu">
<ul class="zeno-menu">
<li><a href="">SAMPLE1</a></li>
<li><a href="">SAMPLE2</a></li>
<li><a href="">SAMPLE3</a></li>
<li><a href="">SAMPLE4</a></li>
</ul>
</div>

“”の間にカテゴリのURL入れ、

SAMPLEにカテゴリ名を入れます。

↓こんな感じ

 <li><a href="https://www.mrs-solitude.com/archive/category/%E5%AD%90%E8%82%B2%E3%81%A6">子育て</a></li>

するとこのページのトップのように、カテゴリが上部に表示され、トップページを見てくれた人が、気になったカテゴリに直接飛べるようになります。

<li></li>で囲んだ部分を下に増やせばカテゴリも増やせます。

【ZENO TEALカスタマイズ】ヘッダ下におすすめ記事を設置(スマホで横にスクロールできる)

これも簡単でした。

↓これを デザイン>カスタマイズ>ヘッダ>タイトル下 にコピペします。

<div style="overflow-x:auto;">
<div class="recommends">
<a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
<a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
<a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
<a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
<a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
</div>
</div>

加えて下記をデザインCSSにコピペします。

↓これを デザイン>カスタマイズ>デザインCSS にコピペします。

@media screen and (max-width: 480px){
.recommends {
width: 220%;
}
.recommends a.recommend-entry:nth-of-type(n+3){
display: block;
}
.recommends a.recommend-entry:not(:last-of-type){
margin-right: 1%;
}
}

【ZENO TEALカスタマイズ】トップ記事一覧の画像にカテゴリ名が入り込むのを消す

トップ記事一覧の画像にカテゴリ名が入り込むのを消す

↑それぞれの記事に自動でカテゴリ名が入ってしまいます。

これが目立って、せっかく作った画像が目立たない気がするのです。

このカテゴリ名をいっそのこと消したいと思いました。

記事を見れば、パンくずリストでどのカテゴリの記事かは分かるようにしていました。

試行錯誤の結果、このタイトルを消すことができたのですが、いったいどこからこの情報を持ってきたのかを忘れてしまい、探したのですがみつかりません。

記憶をたどって見つけたCSSはつばめブログさんのものでした。

ただCSSを見ると全く同じではないようで、どこから引っ張ってきたか見つからなくなってしまいました。

自分でどこかいじったのかもしれませんが、とにかくこのCSSを入れました。

↓これを デザイン>カスタマイズ>デザインCSS にコピペします。

/*↓----トップ画像----↓*/
.page-index .archive-entries { 
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page-index .archive-entry {
flex: 0 0 48%;
position: relative;
display: flex;
flex-direction: column;
} 
.page-index .archive-entry-header {
order: 2;
}
.page-index .date {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.page-index .categories {

 display : none;
}
.page-index .entry-thumb-link {
order: 1;
height: 200px;
}
.page-index .entry-thumb {
width: 100%;
height: 200px;
background-position: center center;
background-size: cover;
background-repeat: none;
position: absolute;
}
.page-index .archive-entry-body {
order: 3
}
.page-index .entry-title {
padding: 0.5em 0 0 0;
}

【はてなブログカスタマイズ】(全テーマ共通)おすすめカスタマイズ

蛍光マーカーのcssの設定とマークの仕方

蛍光マーカーはsamadaさんの記事を参考にしました。

↓これを デザイン>カスタマイズ>デザインCSS にコピペします。

article u{

  text-decoration: none;

  background: linear-gradient(transparent 40%, #00fa9a 50%);

}

%を変更するとマーカーの太さが変えられます。

もちろん色も#00fa9aを変更すれば変更できます。

使うときは、HTML編集でマーカーしたい文を<u></u>で囲みます

フォントサイズ設定のcss

これはフジブロさんの記事を参考にしました。

↓これを デザイン>カスタマイズ>デザインCSS にコピペします。

/*-----記事本文の設定-----*/ 
.entry-content p {
font-size: 17px; /*フォントサイズ*/
line-height: 1.7; /*行間*/
margin-bottom: 1.5em; /*段落の余白*/
letter-spacing: 0.05; /*文字間*/ }

当ブログは↑この設定です。(参考まで)

パンくずリストの設定

はてなブログ パンくずリストの設定
これはとっても簡単です。

SEO対策でも重要らしいのですが、私自身も結構見ます。

「どのカテゴリの記事見てるのかな」って思うとき良く見ます!

デザインのカスタマイズ(スパナマーク)にある「記事」の欄に、パンくずリストの設定チェックボックスがあるので✔するだけです。↓

スマホで見たときに、横にはみ出す表を指で横にスクロールできるcss

これ便利ですよ~

素敵ですもん!できたときは感動しました♪

参考にした記事はこちら↓

↓これを デザイン>カスタマイズ>デザインCSS にコピペします。

.scroll table{
width:100%;
}
.scroll{
overflow: auto;    /*tableをスクロールさせる*/
white-space: nowrap;  /*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{  /*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{  /*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {  /*tableにスクロールバーを追加*/
 background: #BCBCBC;
}

使う時は、表のtableタグを<div class=”scroll”></div>で囲むだけです。

トップに戻るボタンの設置

これもできたときは感動したな~

スマホで記事を見ると、下の方までスクロールした時に、トップに戻るボタンがないと、普通に直帰してしまうと思うんです。

「邪魔にならないトップに戻るボタン」があったら、やっぱ便利だよね!

参考にした記事はこちら↓

↓まずこちらを デザイン>カスタマイズ>フッタ にコピペします。

<ul class="toTop-nav">
<li><a href="javascript:void(0);" onclick="smoothScroll(0);return false;"><i class="blogicon-chevron-up"></i></a></li>
<li><a href="あなたのブログURL"><i class="blogicon-home"></i></a></li>
</ul>
<script>
function smoothScroll(o){var e=window.pageYOffset,l=o>e;setTimeout(function(){l&&o>=e?(e=e+(o-e)/20+1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):!l&&e>=o?(e=e-(e-o)/20-1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):window.scrollTo(0,o)},10)}
</script>

↓そしてこちらを デザイン>カスタマイズ>デザインCSS にコピペします。

/* To Top */
.toTop-nav {
position: fixed;
bottom: 10px;
right: 10px;
display: -webkit-flex;
display: flex;
padding: 0;
margin: 0;
z-index: 999; }
.toTop-nav li {
list-style-type: none;
background: rgba(0, 0, 0, 0.3);
border-radius: 50px;
text-align: center; }
.toTop-nav li:first-child {
margin-right: 10px; }
.toTop-nav li a {
display: block;
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px; }
.toTop-nav li a {
color: #fff;
text-decoration: none; }
.toTop-nav li a:visited {
color: #fff; }
.toTop-nav li a:hover {
color: #fff;
text-decoration: underline; }
.toTop-nav li a:active, .toTop-nav li a:focus {
color: #fff; }
.toTop-nav li a:hover {
text-decoration: none; }

※フッタに「/* To Top */」が残ってしまうことがあるので、残った場合にはこの「/* To Top */」は消して大丈夫です。

ブログ記事作成おすすめテクニック

表を入れたいときはGoogleスプレッドシートを使う

商品や価格の比較は表を使った方がわかりやすくなります。

googleスプレッドシートを使えば、作った表をそのままブログに挿入することができます。

やり方は、表をコピーし「編集見たまま」で貼り付けるだけ!

超簡単です。

色なんかも反映しますよ。

ボックスデザインを「定型文貼り付け」登録で枠を簡単便利に

ルルママさんのブログで紹介していて、それからこの機能の虜です^^

記事作成画面の「編集サイドバー」に定型文貼り付けマークがあります。

はてなブログ 定型文貼り付け

ここに良く使う定型文を登録すると、ボタンを押すだけでその定型文が表示されます。

ここに枠のhtmlを登録すれば、速攻で枠ができ、見たまま編集で簡単に枠内に記事が書けるというわけです!

素晴らしい!

このやり方を知るまでは、ひとつひとつ枠のhtmlを「HTML編集」でつけていたので大変でした!

詳しいやり方はフジブロさんの記事に載ってます!

アイコン作成で私らしいブログへ変身

以前記事で紹介させてもらいました!

ココナラでオリジナルアイコンを作ってもらいました!

子供のアイコンも作ってもらい、ブログにオリジナリティが出たと思います。

canvaを使ってトップ画像を簡単に作成

たいしてセンスはないんですが、このcanvaでのアイキャッチづくりが結構楽しいんです!

最初は慣れが必要ですが、慣れればいろんなことが無料でできちゃいます。

・ブログ内画像の編集

・アッキャッチづくり

・ヘッダーづくり

・ツイッターのヘッダーづくり

作った画像もそのまま自動保存されるので安心ですし、矢印や吹き出し素材、写真素材もたくさんあって便利です。↓

https://www.canva.com/

吹き出しを使って、読みやすい構成に

アイコンを作ってからは吹き出しはサルワカさんのものを利用しています。

まずデザインCSSに設定し、記事内で使うときはhtmlで囲むわけですが、これはまた定型文貼り付けでも使えるので、一度登録すれば簡単に使えます。

できていないカスタマイズと今後について

目次のカスタマイズ

これはZENO TEALに初期実装されている目次が邪魔をして、現在へんてこりんになってます。

どうやってもできないので、時間があるときまたカスタマイズする予定です。

更新日時設定のカスタマイズ

これも何かが邪魔をして、何をしても正常に作動しません。

これも時間があるときカスタマイズしてみる予定です。

カスタマイズの注意点

カスタマイズをするときは、既に完成しているデザインCSSのバックアップをとることをお勧めします。

テキスト(メモ帳)にコピペで良いのでやりましょう!

失敗すると訳が分からなくなります💦

「ZENOTEALサポート終了」

今回この記事を作るにあたり、ZENO TEALのサポート記事にお世話になりましたが、11/21の最新記事で、サポート終了することが分かりました。

悲しいです…

そりゃないよ~頑張ったのに~

でも確かに目次がうまくいかなかったり、更新日時が表示されなかったり、いろいろ無理はあるみたい…

デザインは良いと思うんですけどね!

しばらくはこのままいく予定です。

さいごに

「デザインばっかで、記事書け!」って感じなのですが、デザインに凝ってみたかったんです!

おかげで、htmlとかcssとか全く分からない私でしたが、少し分かるようになりました。

得意分野じゃないので、この記事書くのも時間がかかりました💦

でもこの記事を書いてみて、自分がやったことの振り返りができたので、少し頭が整理できました。

デザインCSSがもうカオスですので、分からなくなったら、自分で書いたこの記事を読む予定です^^

これからも見やすい記事になるよう、頑張って書いていきたいと思います!

それでは^^/

 

よかったらシェアしてね!

この記事を書いた人

コメント

コメント一覧 (2件)

  • 私のブログへの言及ありがとうございます。
    「上に戻るボタン」設置の参考になり嬉しく思います!

  • ヤドめで夫婦さん
    こちらこそ、本当に助かりました^^
    しかもかわいい♪
    勝手に紹介させてもらいました!
    これかもよろしくお願いしますm_ _m

コメントする

目次
閉じる