【デザイン】はてなブログの体裁を整えるためにしたこと【ちょっとおしゃれっぽく】
ブログ作成からはや1年ほどが経っているので、つたないながらもデザイン変更のナレッジが蓄積してきています。
そんなナレッジを忘れないようにまとめてみました。(個人のメモみたいになっています。)
変更するときはバックアップを忘れずに。
参考にさせていただいたサイト様に感謝です。どこも大変わかりやすく、勉強になりました。
基本設定をする
設定
はてな記法モードに設定
設定をしないと、HTMLがそのまま記事に表示されます。
デザインテンプレートを選ぶ
一覧
沢山の種類のテンプレートがあり、どのテンプレートも魅力的なため、とても迷いました。プレビューできるので、どんな仕上がりになるのか確認できるのはありがたいと思いました。あれこれ着せ替えて遊ぶのもたのしかったです。
※テンプレートを変更する際にはもともと書いていたデザイン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&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; }
目次のデザインを整える
目次のデザインもテンプレートのものをそのまま使っています。
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; }
ここに文章
ここに文章
画像を整える
画像の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にあるアイコンを利用できる素敵なサービスがあります。豊富な種類のアイコンがあり、TwitterやInstagramなどのSNSアイコンも複数種類があります。
管理画面\設定\設定詳細設定\検索エンジン最適化\headに要素を追加
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
引用を整える
標準の引用だと少しもの寂しかったので、カスタマイズしました。これもコピペでできます。
/* 文中の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; }
saruwakakun.comCSS Block Quotation Examples
ここに引用する文を書きます。
表を作る
表もテンプレートそのもののデザインで充分おしゃれなのでそのまま使います。
/* 文中の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>
果物 | 味 | 色 |
---|---|---|
イチゴ | 甘い | 赤色 |
リンゴ | 甘い | 赤色 |
その他自分好みにカスタマイズ
シェアボタンとフォローボタンを配置してみる
貼り付け方法
ソースを貼り付けてみる
自称技術系のブログなのでソースコードは良く使います。ソースは外部の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
ソースの貼り付け方法
ソースの表示デザイン修正
/* 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; }
問い合わせフォームを作る
まとめ
当ブログで設定した方法についてまとめました。ノンプログラミングでとても気に入ったブログに仕上がったと思います。いいデザインであればそれだけで記事を書くモチベーションになりますよね。ネットで調べるだけで、わかりやすく素敵なサイトが沢山出てくるのは本当にありがたいです。参考にさせていただいたサイトの著者様方、本当にありがとうございました。