Bambi's BLOG @ hatena

ブログ運営 カスタマイズ テーマ制作 アフィリエイト いろいろ (ずぼらでも頑張るブログ)

素人がテーマ作成するにあたって色々と参考にしたページ一覧!SPECIAL THANKS TO ALL❤︎

全くの素人がテーマを作成して公開するまでに色々とお世話になったサイトたちです❤︎

f:id:zuboraca:20180524204707j:plain

テーマを作りながら、その都度、参考にしたページを追加しているので、基本的なこと〜マニアックなことまで、きちんと整理ができていなくて、キーワードの羅列など少し読みにくいかも知れませんが、これからテーマを作る方やカスタマイズをされる方には、めちゃためになるサイトばかりです! 

テーマ制作に関して

はてなブログのテーマは、CSSで組み立てて行くのですが、私のような素人がゼロからCSSを勉強して組み立てて行くのは、ちょっと難しそうです...^^;
そこで、はてなブログでは、とても親切なことに自作テーマの元になる基本のテーマ「boilerplate.css」と言うのを用意していてくれているんです。

実はこのテーマをただ単にCSSの部分にコピペするだけでも、とてもシンプルなテーマとして使用することもできるくらい普通にブログの形になっているんです。

なので、私はまずはこの「boilerplate.css」をダウンロードして、これを変更して行くことからコツコツ始めました。

↓↓記事は少し古いみたいですが、詳しく書かれています。
ダウンロードする最新の「boilerplate.css」はきちんとHTTPSにも対応しています。

 

基本的には全てネットで調べて、本は殆ど読みませんでしたが、いちいち、ちょっとしたCSSをネットで調べるのは面倒臭かったので辞書的な感じでこちらの本を使っていました。 

適当にカテゴリー分けしてみました★

 

 

boilerplate.cssについて

そもそものboilerplate.cssの中身について、詳しく書かれているページが見つけられなかったので、結局ひとつひとつパーツ毎に調べていくしかなかったのですが、少しずつ自分でも書いていこうと思っています。

ただ、調べることによってCSSの知識も深まって行ったし(?)ちょっとした記述も本を見なくても書けるようになったと思います。

  

CSS編集 エディタ

Mac と Chrome で html CSS 編集する
CSS HTML 編集 エディター エディット テキストエディター

かなり昔の記事だし、今回はプログラミングもしないけど、やり方書いてある。

d.hatena.ne.jp

 

qiita.com

 

↑↑デベロッパーツール?が良くわからなかったけど、自分のサンプルページをテキストエディット(フォーマットを「標準」にする)にコピペして、ファイル名を「◯◯.html」で保存。

(その後、デベロッパーツールが使えるようになって、とても便利ということがわかりました!)

「boilerplate.css」もテキストエディット(標準フォーマット!)にコピペ、「boilerplate.css」のファイル名で保存。

どちらも同じフォルダ内に保存。

「◯◯.html」を開いて、CSSのリンクの部分を下記に変更する。

↓↓

<link rel="stylesheet" href="boilerplate.css" >

 

テキストエディットは、デフォルトのままだと「""」←ダブルクォーテーションを勝手に「“ ”」こんな風に向かい合わせの処理をしてくれちゃうので、それを解除しないと「""」で囲った部分を読み込んでくれない。

Mac のダブルクォーテーションが勝手に変換される問題の対処法 - 強火で進め


「文字列:stylesheetを探す方法→(検索「command+F」)」

参考にしたサイト↓↓

この方のサイトでは、boilerplate.cssとtheme.css2つ作ってtheme.cssの方を自分で変えていくとなっていたのですが、私は最初からboilerplate.cssだけにして、それを変更していった。
実際、何を変えて良いか分からないので、元を少しずつ変更しながら、どこと連動しているのかとか確認した。

途中まで作ったら、バージョンを変えて保存して、boilerplate01~05.cssとか何個もできる感じ。boilerplate.cssじゃなくて最初からオリジナルの名前にしても大丈夫です。
もし、ぐちゃぐちゃになっても、boilerplate.cssはいくらでもダウンロードできるので、またダウンロードすればOK!

nasust.hatenablog.com

 

 

 はてなテーマ自作に関するページ

 

参考にしたページいっぱい

www.task-notes.com

 

 

work.lifemake.design

他の人のテーマを知る方法や、素敵なテーマの良いところのコードなどを見て、それを真似する方法などが丁寧に書かれています。
非エンジニアさんと言うことで、私にとってはとてもわかりやすい記事です。

コードがMinifyしてる(なんのこっちゃ?)場合の対処方などが書いてある。
MinifyはCSSなどの改行が全部なくなって、ずらーってコードが宇宙語みたいに並んでいる状態のことを言うっぽい...でもこの方の記事の中では、それは「親切」ってなっていたので、minifyは良いことなのか?スペルが一瞬うさぎのミッフィーに見えるので可愛い感じがしちゃう。

一応、調べたら...minifyは英語の「ミニファイ」で縮小化するってことでした〜

ちなみにMinifyってる場合は↓↓

lab.syncer.jp

 

↓↓(後日)
minifyしている人の気持ちが少しわかりました(笑)
minifyしたい場合はこちらから!

http://minifycode.com/

 

  

使い方が難しそうなので、私は使わなかったけど便利そう↓↓

brackets.io

 

これもすごく便利そうだけど、やはり自分には難しすぎた。

atn.hateblo.jp

自分の場合は、MacのテキストエディットのCSSをただ単に書き換えて、chromeで表示しているhtmlをリロードして→見た目を確認。の作業を繰り返しただけ。
boilerplate.cssをいじって見た目を少しずつ変更するだけなら、自分のやり方でもそれ程不便さは感じなかったです。

 

2つの文章の違いがわかるツール

(CSSコードのバージョン確認に便利)
CSSを変更して行った時に、オリジナルのものからどこを変更したのか分からなくなったり、どっちが新しいバージョンか分からなくなった時に、web上で違いを教えてくれます。いちいちダウンロードとかしないで、CSSのテキストをコピペするだけで比較してくれる。

www.diffchecker.com

 

基本のCSS

 

HTMLクイックリファレンス

www.htmq.com

 

-webkit-ってなに?

code-schools.com

  

テキストの縦方向の中央揃え

qiita.com

 

CSS class と id 違い!!

テーマも殆ど完成して、見直しとか検証とかをやっている段階です。
で、いきなり壁にぶちあたる...↓↓(最初に分かっていたら良かったかも)笑

allabout.co.jp

 

 

 

layout—ウェブサイトのレイアウトについて

 ウェブサイトのサイズ、レスポンシブデザインのサイズ

webdesign-abc.com

 

www.i-style.vc

fastcoding.jp

www.seojuku.com

 

www.webdlab.com

iPhone Xのスクリーン対応 

Designing Websites for iPhone X | WebKit

この記事を元に↓↓を書きました!

iPhone X で固定フッターやボトムメニューが被る時の対処法 - Bambi's BLOG @ hatena

 

別のやり方

blog.kozakana.net

parts —各パーツごと

 

 グローバルヘッダー

はてなブログに標準に付いている一番上のヘッダーのこと。(記事を書く。。など)
いらないかとも思ったけど自分が記事を編集する時などに使うのでそのまま残すことにして色などをサイトに合うように変更した。

※ちなみに「はてなブログPRO」じゃない方は、ココを消すと規約違反になるそうですので消しちゃダメです♡私はPROだけど、はてなLOVEなので消さない!

参考したサイト↓↓

mshitech.hatenablog.com

/*--------------------------------------
  グローバルヘッダー
--------------------------------------*/
/* グローバルヘッダー */
#globalheader-container {
    color: #5d5d5d; /* 文字の色 */
    background: #fff4f7; /* 背景色 */
    border-bottom: 1px solid #ff6694; /* 下部ボーダーの太さ・種類・色 */
}

 

 日付の表示変更・テーマ作り始めた時の筆者のレベル(笑)

↓↓=================================

この時点で、すでにテーマを作り始めている人(私)のレベルです。
今から考えると、このレベルでテーマ作ろうと思ってた自分が無謀すぎなんだけど、とりあえず「自作テーマなんて誰にでも出来ることだ」と言う意味で、恥ずかしいけどココに残しておきます!

===================================

・「.date{〜」 の部分は枠的なところか(?)
・日付の下にボーダーがあったので、noneで消してみた。
・グローバルメニューのすぐ下に日付がくっ付いているので日付の上(margin-top: 50px)入れてみた。

・文字に関することは「.date a{〜」(?)
・font-sizeだけは「.date」でもできたけど、colorは「.date a」じゃないとできなかった。(意味がわかんない...)

 

↓↓↓↓ 追記:その後、テーマを作っていくうちに意味がわかったので、解説♡

===================================

date a{ ←の「 a 」はリンク文字。もともと日付にはリンクが設定されているから、dateの部分でcolorを設定しても、リンク文字になっているので色が変わらなかった。

===================================

/*--------------------------------------
  日付
--------------------------------------*/
.date{
margin-top: 50px;
border-bottom: none;
}
.date a{
font-size: 15px;
color: #999;
}

 

 

表、テーブル 

.entry-content table

テーブル、表

www.snow0303.com

saruwakakun.com

pega.littlestar.jp

 

角丸の表を作る★

html-css-javascript.com

 

ヘッダー画像

はてなブログ ヘッダー画像の余白をなくす
ヘッダー 全面に表示する
タイトル画像 余白 なくす 全面表示


mulife.hatenablog.com

tukinasikotonoha.hatenablog.com

 

tawashino.hateblo.jp

 

ヘッダー画像 幅を広げる

zeno-teal.hatenablog.com

 

 

スマホヘッダー

 

 はてなブログ ヘッダーのアイコン 非表示 

www.visionseichou.com

 

スマホ  ヘッダーカスタマイズ

www.webproduct-lab.com

 

パンくずリストの位置

blog.minimal-green.com

 

パンくずリストのタイトル部分を非表示にする

www.simonsnote.com

 

パンくずリストのデザイン

www.yuuu-nii.com

 

カード型レイアウト

カード型レイアウト カスタマイズ
はてなブログ トップページ カスタマイズ
ホーム 一覧表示 カラム

 

今回作成したテーマでは、今のところカード型レイアウトにしていないんだけど、いろいろ参考になるので載せておきま〜す!

www.notti-blog.com

 

www.virtual-surfer.com

はてなブログで使えるアイコン 一覧


Font Awesomeを読み込まなくて良い!
macでの「\(バックスラッシュ)」の出し方は→「option + ¥」

shirokai.hatenablog.com

 

はてなブログで使えるアイコンの使い方 

www.foxism.jp

最新♡↓↓

www.foxism.jp

 

UTF-8 Icons アイコン

www.utf8icons.com

webtan.impress.co.jp

» 簡単!便利なフォントアイコン「UTF-8 Icons」。使い方とアイコン集まとめ。|今プラスブログ

 

CSSで枠の角に丸みを付ける

枠の丸み CSS     radium 

角丸 角の丸み

developer.mozilla.org

 

 

 

 

幅を指定して文字数が超えたら「...」を表示する

はみ出した部分は...を表示

文字数 指定

monopocket.jp

上に関連して

white-space: nomal;
white-space: nowrap;

の違い

&はみ出した場合→(overflow: hidden / scroll)

saruwakakun.com

 

↑↑これでやって、{}CSSにコピペして表示する環境では上手くいったのだけど、テーマストアにアップロードして、自分のサイトにインストールしたら上手く行かず...

解決方法はこちら。

m.designbits.jp

その他にも、こんなのがあるみたいです。

www.02320.net

www.hiroseyonaka.com

 

引用の部分 

<PRE>の装飾

takachan.hatenablog.com

cookie-box.hatenablog.com

www.foxism.jp

マニアック★contentをhtmlからattr()で取得

難し過ぎて意味わからない(笑)
勉強のためにリンクしてます。今のところ、これ無しでやりたい。

qiita.com

 

 

 

 サイドバー固定★「jQuery」を使わないやり方

www.okuni.me

 ↑↑により、jQuery(ってなんぞや!?)を使うと重くてカクカクしてSEO的にもあんまりよくないらしい。なのでCSSだけでやりたいと思い始める。

だけど、↑のコードのサイドバーは私のサイトではできず...原因も分からないし、とりあえず、まずやりたいのはサイドバー&グローバルメニュー固定なので、いろいろと調べた結果、オリジナルのものを作成することにしました。

追記★★実は、ド素人の自分が、自作のテーマを作ろうと考えたのも、オークニズム(id:a24o92)さんのこの記事を読んで「このサイドバー固定やりたい!」って思ったのがきっかけなのです。

わたしが最初に設定し、ずっと使い続けていた、はてなの公式テーマ「Report」で、こちらのサイドバー固定を試してみたけど、出来ず...他のテーマをインストールしたり、カスタマイズしているうちに、ぐちゃぐちゃになり「もーこれだったら、自分でテーマ作った方が早いかも!」となり、今に至る訳です。

 

 

サイドバー関連

サイドバー はてなモジュール 
注目記事 最新記事 アイコンなど

 

www.foxism.jp

 

 

ナビゲーションメニュー

スマホ ボトム メニューバー 固定
スマホ グローバルナビゲーション 固定
ナビゲーションバー フッター 

www.yukihy.com

blog.minimal-green.com

 

↓↓スマホで見るとデザインわかる。

blog.syofuso.com

 

 

グローバルメニューの作り方

グローバルメニュー グローバルナビ

参考にしたサイト↓↓

saruwakakun.com

css.uka-p.com

 

上記2つを参考にオリジナルのグローバルメニュー作成。

 

・画面の上にぴっちりつけたいのでtop: 0; left: 0;にした
・全体をカバーしたいのでwidth: 100%を加えた

難しかったところ。

display: inlineになっていると上下の位置を指定できない。
display: inline-blockにすることで解消。(←親要素で上下の位置指定するらしい)
↓参考にしたサイト

saruwakakun.com

 

 これで何とか固定されて表示されるようになったんだけど、今度はスクロールすると、幾つかのパーツがメニューバーの上に重なってしまう。
参考にしたサイト↓↓

saruwakakun.com

 

 

グローバルメニューのリンク先・トップに戻る

トップに戻る

iwb.jp

 

はてなブックマークのリンク先

hitoriblog.com

 

chalow.net

 

シェアボタン

jiyumemo.hatenablog.com

 

 

グローバルメニュー固定によるページ内リンクのズレ解消

www.tomotanuki.com

techmemo.biz

 

ドロップダウンメニュー、コード作成ページ

spmenucss.imagecontrol.jp

 

CSSだけでドロップダウン&アコーディオンメニュー 

↓↓解説が1つ1つ書いてあるので、とても分かりやすいです♡

allabout.co.jp

ooigawa-bitter-sweet.hatenablog.com

www.webdlab.com

www.webdlab.com

 

スマホでボトムメニューを作る時の覚書き(マニアック)

スマホでボトムメニューを作ろうとした時。
はじめは、1階層のボトムにベタッと張り付いている項目1個ずつにつき1個のリンクの普通のメニューを考えた。

ホーム、はてなブックマーク、はてな読者登録、ツイッター登録、サイトマップ、トップに戻る、のボタンのみ。

1階層なので、

ul と li を使って、横並びにリストで表示させる。これは簡単でした。
こだわったことは、ボタンは、はてなブログのデフォルトで読み込んでいる「blogicon」を使う。
クリックではてなのブックマークページを別っこに表示させること。

注意点!※※
ボトムに張り付いているので、フッターなどを底上げしないと、フッタ表示がメニューにより隠れてしまうので気をつける。

 

自分はツイッターしかやっていないので、ツイッターリンクのみを入れようと思っていたけど、他のメニューバーなどを見ているとフェイスブックやその他??のシェアボタンが付いていることも多いので、2階層のメニューを作りたくなった。
これが、すごく大変!!!

いろいろ試してみた結果、結局使ったのはトップに付けたグローバルメニューのボトム版。CSSも殆ど一緒。
2階層目を上に表示しないといけないので、
「bottom:100%;」を入れる
↑なんで出来たのか分からないけど、右側に表示したい場合は「left:100%;」だったので、bottomでやってみたら出来た♡

それなのに、1階層目にリンク先があると、スマホだとhoverが上手くできなくて、クリック(タップ)してしまい2階層目が表示されていても、すぐにリンクに飛んでしまうので、2階層目がタップしにくい。

リンクを無効にする方法↓↓でやっとできた。
(追記:めちゃ一生懸命調べたけど、「a href=""」←"空欄"でも出来るっぽい)

スマホでリンクを無効にする方法

handywebdesign.net

 

techblog.yahoo.co.jp

 

その他、はてなブログのCSS色々カスタマイズ

www.notitle-weblog.com

 

design—ウェブサイトのデザイン

 

色を考える★

 

色を考える時、同系色や似合う色などの参考になるサイト↓↓

Color Hex Color Codes

WEB色見本 原色大辞典 - HTMLカラーコード

 

人気のサイトで使われている色の一覧や自分の好きなサイトを入力して、使われている色を見ることができるので、とても参考になる↓↓

Colours

 

www.color-sample.com

 

colorhunt.co

 

他サイトのURLを入れる&画像をアップロードすると色を教えてくれるサイト
↓↓↓

https://imagecolorpicker.com/

 

フォント

www.kimagure-weblog.net

saruwakakun.com

 

テーマ★着せ替え編

www.dreamark.tokyo

 

なるべく一括で「着せ替え」できるようにしたくて色々と考えた結果、一つの濃い色(メインカラー)を決めてからの透明度を変えていくやり方↓↓

www.htmq.com

 

テーマ公開にあたって

サンプルエントリー ダミーテキスト

テーマを公開する時にサンプルエントリーを表示する。元々はてなブログで用意されている「サンプルエントリー」があるのですが、日本語でダサいし、このサイトだといー感じの外国語のかっこいいサンプルテキストを自動規制してくれます。

www.blindtextgenerator.com

 

それらしいかっこいい名前を勝手に考えてくれる

テーマの名前などを決めるのに参考になりそうなページ
イメージの単語を入れると適当に他の英単語と組み合わせて名前を作ってくれる。

anadea.info

 

  記事にコードを書き込む方法

help.hatenablog.com

タブでもう一つ「記事を書く」で別の編集画面を出しておいて、そちらは編集方法を「はてな記法」でコードを書く→プレビュー

プレビューをコピーして、書き込みたい記事の方の編集画面にペーストする。