全くの素人がテーマを作成して公開するまでに色々とお世話になったサイトたちです❤︎
テーマを作りながら、その都度、参考にしたページを追加しているので、基本的なこと〜マニアックなことまで、きちんと整理ができていなくて、キーワードの羅列など少し読みにくいかも知れませんが、これからテーマを作る方やカスタマイズをされる方には、めちゃためになるサイトばかりです！
テーマ制作に関して
はてなブログのテーマは、CSSで組み立てて行くのですが、私のような素人がゼロからCSSを勉強して組み立てて行くのは、ちょっと難しそうです...^^;
そこで、はてなブログでは、とても親切なことに自作テーマの元になる基本のテーマ「boilerplate.css」と言うのを用意していてくれているんです。
実はこのテーマをただ単にCSSの部分にコピペするだけでも、とてもシンプルなテーマとして使用することもできるくらい普通にブログの形になっているんです。
なので、私はまずはこの「boilerplate.css」をダウンロードして、これを変更して行くことからコツコツ始めました。
↓↓記事は少し古いみたいですが、詳しく書かれています。
ダウンロードする最新の「boilerplate.css」はきちんとHTTPSにも対応しています。
基本的には全てネットで調べて、本は殆ど読みませんでしたが、いちいち、ちょっとしたCSSをネットで調べるのは面倒臭かったので辞書的な感じで本を利用しました。
ちなみに私の作ったテーマはこちら♡
自分が初心者でカスタマイズに苦労した経験から、簡単にカスタマイズできるように考えました♪
好きな色を選ぶだけで、イイ感じになるテーマです(^-^)
参考にしたページを適当にカテゴリー分けしてみました★
- テーマ制作に関して
- 基本のCSS
- layout—ウェブサイトのレイアウトについて
- parts —各パーツごと
- side bar —サイドバー
- navi - グローバルナビゲーション
- design—ウェブサイトのデザイン
- テーマ公開にあたって
boilerplate.cssについて
そもそものboilerplate.cssの中身について、詳しく書かれているページが見つけられなかったので、結局ひとつひとつパーツ毎に調べていくしかなかったのですが、少しずつ自分でも書いていこうと思っています。
ただ、調べることによってCSSの知識も深まって行ったし（？）ちょっとした記述も本を見なくても書けるようになったと思います。
CSS編集 エディタ
Mac と Chrome で html CSS 編集する
CSS HTML 編集 エディター エディット テキストエディター
かなり昔の記事だし、今回はプログラミングもしないけど、やり方書いてある。
↑↑デベロッパーツール？が良くわからなかったけど、
（その後、デベロッパーツールが使えるようになって、とても便利ということがわかりました！）
CSS編集 - 私のやり方：
まずは、サンプルページをテキストエディット（フォーマットを「標準」にする）にコピペして、ファイル名を「◯◯.html」で保存する。
「boilerplate.css」もテキストエディット（標準フォーマット！）にコピペ、「boilerplate.css」のファイル名で保存。
「〇〇.html」と「boilerplate.css」どちらも同じフォルダ内に保存。
「◯◯.html」を開いて、CSSのリンクの部分を下記に変更する。
↓↓
Macのテキストエディットは、デフォルトのままだと「""」←ダブルクォーテーションを勝手に「“ ”」こんな風に向かい合わせの処理をしてくれちゃうので、それを解除しないと「""」で囲った部分を読み込んでくれない。
Mac のダブルクォーテーションが勝手に変換される問題の対処法 - 強火で進め
「文字列：stylesheetを探す方法→（検索「command+F」）」
参考にしたサイト↓↓
この方のサイトでは、boilerplate.cssとtheme.css２つ作ってtheme.cssの方を自分で変えていくとなっていたのですが、私は最初からboilerplate.cssだけにして、それを変更していった。
実際、何を変えて良いか分からないので、元を少しずつ変更しながら、どこと連動しているのかとか確認した。
途中まで作ったら、バージョンを変えて保存して、boilerplate01~05.cssとか何個もできる感じ。boilerplate.cssじゃなくて最初からオリジナルの名前にしても大丈夫です。
もし、ぐちゃぐちゃになっても、boilerplate.cssはいくらでもダウンロードできるので、またダウンロードすればOK!
はてなテーマ自作に関するページ
参考にしたページいっぱい
他の人のテーマを知る方法や、素敵なテーマの良いところのコードなどを見て、それを真似する方法などが丁寧に書かれています。
非エンジニアさんと言うことで、私にとってはとてもわかりやすい記事です。
コードがMinifyしてる（なんのこっちゃ？）場合の対処方などが書いてある。
MinifyはCSSなどの改行が全部なくなって、ずらーってコードが宇宙語みたいに並んでいる状態のことを言うっぽい...でもこの方の記事の中では、それは「親切」ってなっていたので、minifyは良いことなのか？スペルが一瞬うさぎのミッフィーに見えるので可愛い感じがしちゃう。
一応、調べたら...minifyは英語の「ミニファイ」で縮小化するってことでした〜
ちなみにMinifyってる場合は↓↓
↓↓（後日）
minifyしている人の気持ちが少しわかりました（笑）
minifyしたい場合はこちらから！
使い方が難しそうなので、私は使わなかったけど便利そう↓↓
自分の場合は、MacのテキストエディットのCSSをただ単に書き換えて、chromeで表示しているhtmlをリロードして→見た目を確認。の作業を繰り返しただけ。
boilerplate.cssをいじって見た目を少しずつ変更するだけなら、自分のやり方でもそれ程不便さは感じなかったです。
２つの文章の違いがわかるツール
（CSSコードのバージョン確認に便利）
CSSを変更して行った時に、オリジナルのものからどこを変更したのか分からなくなったり、どっちが新しいバージョンか分からなくなった時に、web上で違いを教えてくれます。いちいちダウンロードとかしないで、CSSのテキストをコピペするだけで比較してくれる。
基本のCSS
HTMLクイックリファレンス
-webkit-ってなに？
テキストの縦方向の中央揃え
CSS class と id 違い！！
テーマも殆ど完成して、見直しとか検証とかをやっている段階です。
で、いきなり壁にぶちあたる...↓↓（最初に分かっていたら良かったかも）笑
layout—ウェブサイトのレイアウトについて
ウェブサイトのサイズ、レスポンシブデザインのサイズ
iPhone Xのスクリーン対応
Designing Websites for iPhone X | WebKit
この記事を元に↓↓を書きました！
iPhone X で固定フッターやボトムメニューが被る時の対処法
別のやり方
parts —各パーツごと
グローバルヘッダー
はてなブログに標準に付いている一番上のヘッダーのこと。（記事を書く。。など）
いらないかとも思ったけど自分が記事を編集する時などに使うのでそのまま残すことにして色などをサイトに合うように変更した。
※ちなみに「はてなブログPRO」じゃない方は、ココを消すと規約違反になるそうですので消しちゃダメです♡私はPROだけど、はてなLOVEなので消さない！
参考したサイト↓↓
日付の表示変更・テーマ作り始めた時の筆者のレベル（笑）
↓↓=================================
この時点で、すでにテーマを作り始めている人（私）のレベルです。
今から考えると、このレベルでテーマ作ろうと思ってた自分が無謀すぎなんだけど、とりあえず「自作テーマなんて誰にでも出来ることだ」と言う意味で、恥ずかしいけどココに残しておきます！
===================================
・「.date{〜」 の部分は枠的なところか（？）
・日付の下にボーダーがあったので、noneで消してみた。
・グローバルメニューのすぐ下に日付がくっ付いているので日付の上（margin-top: 50px）入れてみた。
・文字に関することは「.date a{〜」（？）
・font-sizeだけは「.date」でもできたけど、colorは「.date a」じゃないとできなかった。（意味がわかんない...）
↓↓↓↓ 追記：その後、テーマを作っていくうちに意味がわかったので、解説♡
===================================
date a{ ←の「 a 」はリンク文字。もともと日付にはリンクが設定されているから、dateの部分でcolorを設定しても、リンク文字になっているので色が変わらなかった。
===================================
表、テーブル
.entry-content table
テーブル、表
角丸の表を作る★
https://www.nxworld.net/css-border-radius-table.html
↑わかりやすい
tableタグが角丸にならない問題に対処～意外なcssが原因でした～ | ホームページ制作 オフィスオバタ
ヘッダー画像
はてなブログ ヘッダー画像の余白をなくす
ヘッダー 全面に表示する
タイトル画像 余白 なくす 全面表示
tukinasikotonoha.hatenablog.com
ヘッダー画像 幅を広げる
スマホヘッダー
はてなブログ ヘッダーのアイコン 非表示
スマホ ヘッダーカスタマイズ
パンくずリストの位置
パンくずリストのタイトル部分を非表示にする
パンくずリストのデザイン
カード型レイアウト
カード型レイアウト カスタマイズ
はてなブログ トップページ カスタマイズ
ホーム 一覧表示 カラム
今回作成したテーマでは、今のところカード型レイアウトにしていないんだけど、いろいろ参考になるので載せておきま〜す！
はてなブログで使えるアイコン 一覧
Font Awesomeを読み込まなくて良い！
macでの「\（バックスラッシュ）」の出し方は→「option + ¥」
最新のアイコンの更新と表示されない時の対処法も合わせて記事を書きました♪
2021/11/15 - 追記
【はてなブログ】ブログアイコン、Webフォント一覧（124種類）使い方、表示されない時の対処法
はてなブログで使えるアイコンの使い方
最新のアイコンの更新と表示されない時の対処法も合わせて記事を書きました♪
2021/11/15 - 追記
【はてなブログ】ブログアイコン、Webフォント一覧（124種類）使い方、表示されない時の対処法
最新♡↓↓
UTF-8 Icons アイコン
» 簡単！便利なフォントアイコン「UTF-8 Icons」。使い方とアイコン集まとめ。｜今プラスブログ
CSSで枠の角に丸みを付ける
枠の丸み CSS radium
角丸 角の丸み
幅を指定して文字数が超えたら「...」を表示する
はみ出した部分は...を表示
文字数 指定
上に関連して
white-space: nomal;
white-space: nowrap;
の違い
＆はみ出した場合→（overflow: hidden / scroll）
↑↑これでやって、{}CSSにコピペして表示する環境では上手くいったのだけど、テーマストアにアップロードして、自分のサイトにインストールしたら上手く行かず...
解決方法はこちら。
その他にも、こんなのがあるみたいです。
引用の部分
はてなブログ★引用デザインをかっこ良くカスタマイズ！コピペでOK！
<PRE>の装飾
マニアック★contentをhtmlからattr()で取得
難し過ぎて意味わからない（笑）
勉強のためにリンクしてます。今のところ、これ無しでやりたい。
side bar —サイドバー
サイドバー固定★「jQuery」を使わないやり方
サイドバーの固定（CSSのみ）＠はてなブログテーマ「Palette（パレット）」
CSSだけでサイドバーを固定/追従/解除する方法が超簡単！しかも軽くて滑らか！ - オークニズム
↑↑により、jQuery（ってなんぞや！？）を使うと重くてカクカクしてSEO的にもあんまりよくないらしい。なのでCSSだけでやりたいと思い始める。
だけど、↑のコードのサイドバーは私のサイトではできず...原因も分からないし、とりあえず、まずやりたいのはサイドバー＆グローバルメニュー固定なので、いろいろと調べた結果、オリジナルのものを作成することにしました。
追記★★実は、ド素人の自分が、自作のテーマを作ろうと考えたのも、オークニズム（id:a24o92）さんのこの記事を読んで「このサイドバー固定やりたい！」って思ったのがきっかけなのです。
わたしが最初に設定し、ずっと使い続けていた、はてなの公式テーマ「Report」で、こちらのサイドバー固定を試してみたけど、出来ず...他のテーマをインストールしたり、カスタマイズしているうちに、ぐちゃぐちゃになり「もーこれだったら、自分でテーマ作った方が早いかも！」となり、今に至る訳です。
サイドバー関連
サイドバー はてなモジュール
注目記事 最新記事 アイコンなど
navi - グローバルナビゲーション
ナビゲーションメニュー
スマホ ボトム メニューバー 固定
スマホ グローバルナビゲーション 固定
ナビゲーションバー フッター
↓↓スマホで見るとデザインわかる。
グローバルメニューの作り方
グローバルメニュー グローバルナビ
参考にしたサイト↓↓
上記２つを参考にオリジナルのグローバルメニュー作成。
・画面の上にぴっちりつけたいのでtop: 0; left: 0;にした
・全体をカバーしたいのでwidth: 100%を加えた
難しかったところ。
display: inlineになっていると上下の位置を指定できない。
display: inline-blockにすることで解消。（←親要素で上下の位置指定するらしい）
↓参考にしたサイト
これで何とか固定されて表示されるようになったんだけど、今度はスクロールすると、幾つかのパーツがメニューバーの上に重なってしまう。
参考にしたサイト↓↓
グローバルメニューのリンク先・トップに戻る
トップに戻る
はてなブックマークのリンク先
シェアボタン
グローバルメニュー固定によるページ内リンクのズレ解消
ドロップダウンメニュー、コード作成ページ
CSSだけでドロップダウン＆アコーディオンメニュー
↓↓解説が1つ1つ書いてあるので、とても分かりやすいです♡
ooigawa-bitter-sweet.hatenablog.com
スマホでボトムメニューを作る時の覚書き（マニアック）
スマホでボトムメニューを作ろうとした時。
はじめは、１階層のボトムにベタッと張り付いている項目１個ずつにつき１個のリンクの普通のメニューを考えた。
ホーム、はてなブックマーク、はてな読者登録、ツイッター登録、サイトマップ、トップに戻る、のボタンのみ。
１階層なので、
ul と li を使って、横並びにリストで表示させる。これは簡単でした。
こだわったことは、ボタンは、はてなブログのデフォルトで読み込んでいる「blogicon」を使う。
クリックではてなのブックマークページを別っこに表示させること。
注意点！※※
ボトムに張り付いているので、フッターなどを底上げしないと、フッタ表示がメニューにより隠れてしまうので気をつける。
自分はツイッターしかやっていないので、ツイッターリンクのみを入れようと思っていたけど、他のメニューバーなどを見ているとフェイスブックやその他？？のシェアボタンが付いていることも多いので、２階層のメニューを作りたくなった。
これが、すごく大変！！！
いろいろ試してみた結果、結局使ったのはトップに付けたグローバルメニューのボトム版。CSSも殆ど一緒。
２階層目を上に表示しないといけないので、
「bottom:100%;」を入れる
↑なんで出来たのか分からないけど、右側に表示したい場合は「left:100%;」だったので、bottomでやってみたら出来た♡
それなのに、１階層目にリンク先があると、スマホだとhoverが上手くできなくて、クリック（タップ）してしまい２階層目が表示されていても、すぐにリンクに飛んでしまうので、２階層目がタップしにくい。
リンクを無効にする方法↓↓でやっとできた。
（追記：めちゃ一生懸命調べたけど、「a href=""」←"空欄"でも出来るっぽい）
スマホでリンクを無効にする方法
リンクを無効にする方法↓↓でやっとできた。
（追記：めちゃ一生懸命調べたけど、「a href=""」←"空欄"でも出来るっぽい）
その他、はてなブログのCSS色々カスタマイズ
design—ウェブサイトのデザイン
色を考える★
色を考える時、同系色や似合う色などの参考になるサイト↓↓
人気のサイトで使われている色の一覧や自分の好きなサイトを入力して、使われている色を見ることができるので、とても参考になる↓↓
他サイトのURLを入れる＆画像をアップロードすると色を教えてくれるサイト
↓↓↓
フォント
テーマ★着せ替え編
なるべく一括で「着せ替え」できるようにしたくて色々と考えた結果、一つの濃い色（メインカラー）を決めてからの透明度を変えていくやり方↓↓
テーマ公開にあたって
サンプルエントリー ダミーテキスト
テーマを公開する時にサンプルエントリーを表示する。元々はてなブログで用意されている「サンプルエントリー」があるのですが、日本語でダサいし、このサイトだといー感じの外国語のかっこいいサンプルテキストを自動規制してくれます。
それらしいかっこいい名前を勝手に考えてくれる
テーマの名前などを決めるのに参考になりそうなページ
イメージの単語を入れると適当に他の英単語と組み合わせて名前を作ってくれる。
記事にコードを書き込む方法
タブでもう一つ「記事を書く」で別の編集画面を出しておいて、そちらは編集方法を「はてな記法」でコードを書く→プレビュー
プレビューをコピーして、書き込みたい記事の方の編集画面にペーストする。
