だって楽したいじゃんか!

大学院(機械工学科)を首席で卒業した男がこれまでの経験を生かさず殺さず発信していく

【デザイン】はてなブログの体裁を整えるためにしたこと【ちょっとおしゃれっぽく】

f:id:makimakimakino:20190113012620p:plain
ブログ作成からはや1年ほどが経っているので、つたないながらもデザイン変更のナレッジが蓄積してきています。
そんなナレッジを忘れないようにまとめてみました。(個人のメモみたいになっています。)
変更するときはバックアップを忘れずに。

参考にさせていただいたサイト様に感謝です。どこも大変わかりやすく、勉強になりました。

基本設定をする

設定

はてな記法モードに設定

設定をしないと、HTMLがそのまま記事に表示されます。

レスポンシブデザインにチェックをする

デザインテンプレートがレスポンシブに対応している場合、選択する事でスマホから見た時でも同じデザインで記事が表示できます。※レスポンシブ非対応だと、スマホで綺麗に表示させたい場合、自分でそれ用にCSSを書く必要があります。

デザインテンプレートを選ぶ

一覧

沢山の種類のテンプレートがあり、どのテンプレートも魅力的なため、とても迷いました。プレビューできるので、どんな仕上がりになるのか確認できるのはありがたいと思いました。あれこれ着せ替えて遊ぶのもたのしかったです。
※テンプレートを変更する際にはもともと書いていたデザインCSSが初期化されてしまうので、そこだけ注意が必要です。あらかじめメモ帳やGistなどのクラウドサービスにテキストのバックアップを取っておくといいでしょう。
neoako.hatenablog.com

zeno tealを利用

正直言って一目惚れでした。シンプルかつフラットなデザイン。グリーンなのにくどくなく爽やかな印象。さらにブログトップがカードタイプなので一覧が見やすい。目次や見出しなどがほぼノンカスタマイズで使えるほどのデザインのかっこよさ。きわめつけはコードを書いた時の真っ黒なCUI感。素晴らしすぎます。
pea-nut.hatenablog.com

このテンプレートに設定する時はいくつか注意点があります。

① 無料版でGoogleアドセンスの広告を表示させている場合は使えない
Pro版を登録してもいいかもしれませんね。

②ブログトップページで記事一覧をカード形式で表示させるには記事を全記事表示にして、最大表示数を偶数に設定する
ここを設定しないとカード形式が使えないみたいです。

③ カード形式を使う場合、記事の構成ははじめに画像、テキストを配置し、もっと読むを必ず入れる
こうしないと記事一覧を表示させた時、カードの中が崩れてごちゃっとなってしまいます。

④ h2タグが追いかけてくる
h2タグを設定していると、一番上のh2タグの要素が、スクロールしてもページ上部に固定表示されます。
私はh2をよく使うので下記のCSSで、回避します。

/*zeno-tealでh2を追いかけない */
.entry-content h2{
    position: relative;
}

ブログ全体のフォントを設定する

GoogleWebフォント

標準搭載の文字フォント以外を使いたい場合は、外部のクラウドサービスが利用できます。
今回設定した値はこちら。
管理画面\設定\設定詳細設定\検索エンジン最適化\headに要素を追加

<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,500,700,800,900&amp;subset=japanese" rel="stylesheet">

管理画面\デザイン\カスタマイズ\デザインCSS

/* Google Web Font */
body{
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

affiliate-couple.hatenablog.com

レイアウトをCSSで整える

見出しを整える

zeno-tealの標準の見出しは気に入っているので、そのまま使います。ただ、h2タグだけ、カスタマイズします。

/* ---- 見出しcss ---- */ 
.entry-content h2 {
    background: #009688;
    color: #fff;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 1.1em 1em;
    margin: 3em 0 1em 0;
    font-size: 1.4rem;
    line-height: 1;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 99;
}

saruwakakun.com

目次のデザインを整える

目次のデザインもテンプレートのものをそのまま使っています。
www.parucock.com

文字のフォントを整える

文字の太さや、色や大きさなどはタグでくくって表現します。特にカスタマイズしておきたい場合はCSSで定義して、記事内で呼び出すといいです。

/* 文中のHTML */
<b>太字</b>
<u>下線</u>
<i>イタリック</i>
<span class="marker_yellow"><b>蛍光ペン</b></span>
/* 蛍光ペン黄色のCSS */
.marker_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

太字
下線
イタリック
蛍光ペン
www.sukeblog.com

囲い線を整える

囲い線も気に入ったものがあれば、サンプルのCSSとHTMLをカスタマイズして使います。

/* 文中のHTML */
<div class="box"><span class="box-title"><b>ここにタイトル</b></span><p>ここに文章<br>ここに文章</p>
/* タイトル付き囲い線のCSS */
.entry-content .box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
    border-radius: 8px;
}
.entry-content .box .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #62c1ce;
    font-weight: bold;
}
.entry-content .box p {
    margin: 0; 
    padding: 0;
}

ここにタイトル

ここに文章
ここに文章

saruwakakun.com

画像を整える

画像のCSS

ここもお好みで。私の場合、記事の背景が白く、白い画像を載せることが多いので、境界がわからずのっぺりしてしまいます。記事で枠線だけつけてます。

/* 画像の枠線 */
img {
    border : 1px solid #DADADA ;
    border-bottom : 1px solid #757575 ;
    box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}

充実した素材置き場

無料で使える素材置き場です。圧倒的な画像数と知名度です。
www.pakutaso.com

さくさくキャプチャ

プリントスクリーンボタンが押しづらかったのでショートカットキーを指定できるキャプチャツールを使っています。
保存するフォルダや名前、ショートカットキーをフレキシブルに設定できます。
qwerty.work

さくさく加工

撮ったキャプチャを秒で加工して貼り付けまでできる優れものです。ショートカットでクリップボードから画像を呼び出し、サイズを変更、文字、矢印、枠線入力、そのままドラッグ&ドロップでブログに貼り付けができるのでとても楽で重宝しています。
gabekore.org

Webアイコンを使えるように設定

ちょっとしたアイコン使いたいけど探したり作ったりはめんどくさい。そんな時はちょっとした設定をするだけで、Webにあるアイコンを利用できる素敵なサービスがあります。豊富な種類のアイコンがあり、TwitterInstagramなどのSNSアイコンも複数種類があります。

管理画面\設定\設定詳細設定\検索エンジン最適化\headに要素を追加

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

saruwakakun.com

引用を整える

標準の引用だと少しもの寂しかったので、カスタマイズしました。これもコピペでできます。

/* 文中のHTML */
<blockquote><p>CSS Block Quotation Examples</p>
<p>ここに引用する文を書きます。</p>
</blockquote>
/* 引用CSS */
.entry-content blockquote {
    position: relative;
    padding: 7px 16px;
    box-sizing: border-box;
    font-style: italic;
    color: #585858;
    border: solid 3px #585858;
}
.entry-content blockquote:before{
    display: inline-block;
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    content: "\f10d";
    font-family: FontAwesome;
    background: #585858;
    color: #FFF;
    font-size: 22px;
}
.entry-content blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    background: #585858;
    color: #FFF;
    font-size: 22px;
    font-weight: 900;
}
.entry-content blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}
.entry-content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

CSS Block Quotation Examples

ここに引用する文を書きます。

saruwakakun.com

表を作る

表もテンプレートそのもののデザインで充分おしゃれなのでそのまま使います。

/* 文中のHTML */
<table border="1">
  <tr><th>果物</th><th></th><th></th></tr>
  <tr><td>イチゴ</td><td>甘い</td><td>赤色</td></tr>
  <tr><td>リンゴ</td><td>甘い</td><td>赤色</td></tr>
</table>

果物
イチゴ甘い赤色
リンゴ甘い赤色
saruwakakun.com

その他自分好みにカスタマイズ

シェアボタンとフォローボタンを配置してみる

貼り付け方法

blog.kaerucloud.com

ソースを貼り付けてみる

自称技術系のブログなのでソースコードは良く使います。ソースは外部のGistというクラウドサービス上に一覧で保存してあるのですがそこに保存しておいたものをはてなブログに貼り付けられます。

/* 文中のHTML */
<div style="padding: 1px 1px; line-height: 100%;font-weight: bold; text-align: left; font-size: 90%">
mysite/polls/views.py</br>
<script src="https://gist.github.com/makinos100/5f4cb82ee2c120c4cfe256dd183b06fb.js?file=mysite_polls_views.py"></script>
</div>


mysite/polls/views.py


ソースの貼り付け方法

javacurry.hatenablog.jp

ソースの表示デザイン修正

/* gistのCSS */
/*gistの行数を設定*/
.gist-data {
  max-height : 20em ; 
    overflow : auto ;
}
/*行の背景色を統一する*/
.gist table tr {
  background-color: rgba(256,256,256,1) !important;
}
/**コードのフォントを太字にする**/
table.highlight tr td, table.highlight tr td span {
  font-weight: bold;
}
/* フッタ非表示 */
.gist-meta {
  display: none;
}
/* コード領域の下枠線削除 */
.gist-file {
  border-bottom: none !important;
}
/* フォントをプログラミング用に変更する */
.gist * {
  font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace !important;
}
/* コードエリアの上部の余白を開ける */
.gist tr:first-child td {
  padding-top: 15px !important;
}
/* コードエリアの下部の余白を開ける */
.gist tr:last-child td {
  padding-bottom: 15px !important;
}
/* 行数を非表示にする */
.blob-num {
  display: none;
}

a-habakiri.hateblo.jp
reasonable-code.com

問い合わせフォームを作る


www.uxirisu.tokyo

はてなブログでの編集のコツ

PCでのhtmlタグの簡単貼り付け

yossense.com

スマホでの簡単貼り付け

端末の辞書登録をすればタグを記録して置けるので便利です。

まとめ

当ブログで設定した方法についてまとめました。ノンプログラミングでとても気に入ったブログに仕上がったと思います。いいデザインであればそれだけで記事を書くモチベーションになりますよね。ネットで調べるだけで、わかりやすく素敵なサイトが沢山出てくるのは本当にありがたいです。参考にさせていただいたサイトの著者様方、本当にありがとうございました。