【ノガ】Amazonマスタークラシックカードの引き落し口座に楽天銀行は使える 2018/12/26

Amazonマスタークラシックの支払い口座に楽天銀行を設定することが可能だった件。

提携金融機関も見ても「楽天銀行」の項目なし。

Google検索

yahoo知恵袋ではできないという噂。

↓

電話で確認してみた。

「楽天銀行」はご利用可能です。(2018/12/26 時点)

口座振替変更書類にて変更が可能。

 

これでAmazon購入でのポイント還元率が上がる。

 

聞かぬは一生の恥ですね。

 

ではでは。

 

 

 

職業訓練の申し込みは1日で済ませた。

今日(12/10(月))は 職業訓練 の申し込みを1日で済ませました。

前提（私の例）：

1. 職業訓練 の仕組みや申し込み手順がおおよそ頭に入っている。


2. 施設見学に何度も行って、決めている。


3. 動機やビジョンを文章に控えている。

要するに準備（心構え）できている人です。

スムーズに話を運ぶための持ち物

• 顔写真


• 印鑑（サインも可）


• 筆記用具


• 職業訓練 資料やパンフレット

午前

申し込みを伝える。

本人の力量を確かめるため、説明を受ける。（1, 2）

↓

受講申込書や給付に関する書類を受け取る。

記入する。(3)

午後

清書する。

↓

提出する。

受講申込書に受領印が押され、応募可能となる。

合格後の手続きについて説明を受ける。

受付終了。

↓

職業訓練 校に電話する、面接日時や場所、申込書の提出方法。

職業訓練 校に行き、受講申込書を持参して提出する。

応募終了。

準備ができていたからこそスムーズに話を運べたと思います。実際やってみると、結構色々説明あります。これくらいしないと給付金はもらえないということだと思います。動機やビジョンがそこそこでも書けていれば、早々に申し込めると思います。

今回二度手間なくてよかった。時間がもったいないですよね。在職中の上、平日に休みを作らないといけないですしね。有給のおかげで助かりました。さらに凝縮すれば、午前で終わり、午後には提出用意ができるんじゃないかと思います。この後は面接になります。

では！

はてな記法 テスト

編集モード

編集見たまま、はてな記法 、Markdown モード

はてな記法 モード

リスト1

リスト2

リスト3

上手くいった！

• ぶどう
  
  
  
  • 巨峰
  
  
  • マスカット
  
  

図1： 「はてな記法 」編集画面

画像を読み込んでみた。

これも画像読み込みのはてな記法 。

一度はてな記法 で更新するとその編集画面で変更できない。

はてなブログ Perfect GuideBook

はてな ブックをマスターするために本に沿ってアウトプットノート。 はてなブログ Perfect GuideBook

• Part1 はてなブログを始めよう
　
• Step1-1 はてなブログとは：
• 魅力：
• Step1-2 登録、開設：
　
• Step1-3 ログイン/ログアウト：
• Step1-4 複数のブログ：
• tep1-5 記事のインポート/エクスポート：
• エクスポート
　
• ブログの記事とコメントを、MT（MovableType）形式のテキストファイルで書き出します。
• MovableType形式とは
• MovableTypeとは
• インポート
• Step1-6 ブログを削除する/ヘルプを見る

• Part2 記事を投稿する
　
• Step2-1 ブログ記事を投稿
　
• ああああ
　
• ブロックとしての改行ああああ
　
• Step2-2 カテゴリーを指定して投稿する 
• Step2-3 写真の投稿とアイキャッチ画像の指定
　
• 画像を削除/編集, 明るさ調整, 絵を描く
　
• アイキャッチ画像
• Step2-4 記事を装飾する
　
• これは大見出しです。
　
• これは中見出しです。
　
• これは小見出しです。
• 続きを読む
　
• 引用
　
• 目次
• 脚注
• 太字
• 斜体
• 打消
• アンダーライン
• 文字の大きさ
• 文字の色
• Step2-5 記事の概要/投稿日時/URLを指定して投稿する
• 記事の概要
• カスタムURL
• Step2-6 YouTube/過去記事などを挿入する
• YouTube
• 過去記事貼り付け
• サイドバーメニューをカスタマイズする
• Step2-8 記事を編集する
• Step2-9 スマートフォンから編集する
• メール投稿でスマートフォンから記事を投稿する。

• Part 3 ダッシュボードでの設定
• Step3-1 ダッシュボードの解説
• Step3-2 「記事の管理」画面から記事を編集する
• Step3-3  カテゴリーの管理
• Step3-4  コメントの管理と設定
• Step3-5  ブログの基本設定画面を見る
• ブログのアイコン
• ブログの説明文/ブログ名
• 編集モード
• Step3-7 ブログの公開範囲の設定をする
• Step3-8 アカウント設定の変更

• Part 4 デザイン&カスタマイズ
• Step4-1 はてなブログのデザイン
• Step4-2 テーマを変更する
• Step4-3 カスタマイズ画面
• Step4-4 背景画像/背景色を変更する
• 背景画像の変更
• 背景色の変更
• Step4-5 ヘッダの変更
• Step4-6 ヘッダとフッタに情報を表示する
• Step4-7 記事の上下に情報を表示させる
• Step4-8 ソーシャルパーツを追加する
• Step4-9 サイドバーのカスタマイズ
• Step4-10 スマートフォン用画面デザイン設定
• アクセントカラー
• 記事上下の表示、カテゴリー表示

• Part 5 CSSを使ったブログカスタマイズ
• HTML
• 花見をしました。<h1>大見出し</h1>
• 綺麗に咲いた桜。<h2>中見出し</h2>
• CSS
• CSSの書き方の基本
• セレクタ部分に名前を付ける
• セレクタにCSSを指定する
• クラス名とid名の使い分け
• Step5-2 自分のブログのHTMLとCSSを見る
• Step5-3 はてなブログのCSSカスタマイズの基本手順
• Step5-3-1 デザインの元にしたいテーマに変更する
• Step5-3-2 検証で変更したい場所のCSSを検証
• Step5-3-3 はてなブログの「デザインCSS」に追記する
• カスタマイズの注意点と便利な使い方
• △と×マーク
• デザイン CSSの機能
• 本書のカスタマイズで使用しているテーマスマートフォンブログのカスタマイズの場合Pro
• Step5-4 ブログタイトルの色と大きさのカスタマイズ
• ヘッダ画像を利用している場合の色変更
• Step5-5 ブログタイトルの背景と位置のカスタマイズ
• ブログタイトルの位置を変更する
• Step5-6 ブログの説明文の位置を変える
• Step5-7 記事タイトル周りのカスタマイズ
• 記事タイトルをCSSでデザイン
• 記事タイトルの下に罫線（けいせん）を付ける
• カテゴリーの表示に枠を付ける
• Step5-8 記事中の見出しのカスタマイズ
• 記事中の見出しをデザイン
• 大見出しを2トーンカラー（異なる系統の2色）のボーダーにする
• サイドバーモジュールの見出しにも同じスタイルを適用する。

Part1 はてなブログを始めよう

Step1-1 はてなブログとは：

株式会社はてなが2013年より開始したサービス。ブログ初心者でも使い勝手が良く、シンプルでモダンなデザインでカスタマイズもしやすいなどの面から人気。 （参考: https://hatenablog.com/guide, はてなブログ-Wikipedia）

魅力

使いやすい、検索しやすい、コミュニティ、書きやすい、カスタマイズしやすい、スマホ アプリで投稿できる、SNS機能、Pro版。

Step1-2 登録、開設：

Step1-3 ログイン/ログアウト：

Step1-4 複数のブログ：

済み。

Step1-5 記事のインポート/エクスポート：

エクスポート

はてなブログの記事をエクスポート（出力）できる。 ブログのバックアップや他のブログサービスに引っ越す場合に役立つ。

ブログの記事とコメントを、MT（MovableType）形式のテキストファイルで書き出します。

MovableType形式とは

ブログシステム「Movable Type」で採用している、読み込み と 書き込み のデータフォーマット形式。(Hatena keyWord)

シックス・アパートのCMSプラットフォーム。 Perlで作られたCGIで、ウェブログの種々の設定、ユーザ管理からエントリーのポスト・編集、カテゴリ・サブカテゴリの編集、タグの管理、キーワード機能、その他もろもろまで、ほとんどの操作をブラウザ上で行うことが出来る。 RDF Site Summaryに対応し、TrackBack機能、ブラックリストを使ってコメントスパム、トラックバックスパム防止/管理機能を持っている。テンプレート管理機能によりサイトのデザインやタグのレイアウトを容易に変更できる。 Movable Typeを拡張できる様々なプラグインが用意されている。(Hatena keyWord)

画像や外部サイトからのリンクは出力されない。 ダッシュボード→設定→詳細設定→エクスポート→ダウンロード 　　　　　　　　　　　図1: エクスポート画面 図2 出力結果 notegatari.hatenablog.com.export.txt 記事数は少ないので、時間はかからなかった。

インポート 

他のブログサービスでエクスポートした記事をインポート。 MovableType形式とWordPress形式のブログデータ（バックアップ）に対応。 今回はしない。 ダッシュ ボード→インポート→ファイル選択→文字コード指定 「utf-8」→インポート                            図3: インポート画面1 インポートが開始される、ログが表記されるのが確認できる。取り消しを押すとインポートした全ての記事が削除される。

Step1-6 ブログを削除する/ヘルプを見る

問題なし。

Part2 記事を投稿する

Step2-1 ブログ記事を投稿

通常の改行 「Shift+Enter」 ブロックとしての改行「Enter」 通常の改行

ああ ああ

ブロックとしての改行 ああ ああ

ビジュアル編集だと見出しが区切られるので注意。 サイドバー 写真を投稿する、カテゴリーを指定する、編集オプション（投稿日時、カスタムURL、アイキャッチ画像、記事の概要、高度なタイトル設定） ➕編集サイドバー 写真を投稿ON、カテゴリーON、編集オプションON 過去記事の貼り付け、引用貼り付け、Amazon商品紹介、楽天商品紹介、YouTube貼り付け、Twitter貼り付け、instagram貼り付け、はてなブックマーク貼り付け、 Google フォト貼り付け、 ニコニコ動画 貼り付け、pixiv貼り付け、iTunes 商品紹介、Evernote 貼り付け、レストラン紹介、Gist貼り付け、Flicker 貼り付け、絵を描く、ミイル貼り付け 過去記事貼り付け、引用貼り付け、pixiv貼り付け、Twitter 貼り付け、絵を描くONにした。 様々な投稿機能ONになった。Twitter 連携すると記事投稿がツイートされる。

プレビュー

少し読み込みに時間がかかる。PC、スマホをプレビューできる。                図4：PCサイトプレビュー 　　　　　　　　  図5：PCサイトプレビュー2  図6：PCサイトプレビュー2 図5は、レスポンシブデザインに対応。

Step2-2 カテゴリーを指定して投稿する 

記事をカテゴリーで分類できる。 記入欄にEnterで追加。➕新しいカテゴリーで追加。 間違って「はてな」を追加してしまったが、選択しなければ消えた。また、ダッシュ ボード→カテゴリーで削除できる。

Step2-3 写真の投稿とアイキャッチ 画像の指定 

アップロードした画像は全て「フォトライフ 」に保存されている。 フォトライブラリではなくフォトライフ。 ブログに投稿した写真は全てHatena Blogというプライベートのフォルダに自動的に保存される。自分のみが閲覧できる。トップフォルダに置くと公開されるので注意。 編集サイドバー→写真を投稿→リンクで移れる。 　　　　　　　　　　　　図６: フォトライフ

 画像を削除/編集, 明るさ調整, 絵を描く

　　　　　　　　　　　　　　 図７: 画像を編集 　　　　　　　　　　　　　図７: 画像を編集　画面 タイトル→名前 フォルダ→移動 画像サイズ→ ピクセル （長辺） / 40KB 地図→位置情報

アイキャッチ 画像

アイキャッチ 画像とは

記事の一覧や、ブログのサイドバーの新着や人気の記事 などに表示される画像のことです。また、アイキャッチ 画像は、他のユーザーの記事紹介やSNS で共有された時にも表示されます。「画像によって目を引く」ことから。アイキャッチ と呼ばれています。(はてなブログ Perfect GuideBookより引用、31ページ)

編集オプション→アイキャッチ 画像  記事紹介やSNS で共有された際に表示される大事な画像。

Step2-4 記事を装飾する

これは大見出しです。

これは中見出しです。

これは小見出し です。

これは標準です。 箇条書き

• あ
• あ

改行で自動的に・が付く。 番号付きリスト

1. あ
2. あ

改行で自動的に連番になる。 リンク 埋め込み、タイトル、URLと選択できる。 twitter.com     図8 埋め込み ノガ (@notegatari) | Twitter  図9 タイトル https://twitter.com/notegatari                     図10 URL

続きを読む

　　　　　　　図11 「続きを読む」編集画面 ハイフンが一行書かれただけのように見えるが、 　　　　　　　　　　　図12 「続きを読む」記事上 「続きを読む」ボタンが追加される。

引用

ロボット工学三原則

第一条 　ロボット は人間に危害 を加えてはならない。また、その危険を看過することによって、人間に危害 を及ぼしてはならない。

第二条 　ロボット は人間にあたえられた命令に服 従しなければならない。ただし、あたえられた命令が、第一条 に反する場合は、この限りでない。

第三条 　ロボット は、前掲第一条 および第二条 に反するおそれのないかぎり、自己をまも らなければならない。

出典： ロボット 』 アイザック・アシモフ 著、小尾 芙 佐訳  1983年） 

目次

図13 「目次」編集画面上 　図14 「目次」記事上 見出しの大きさによって目次のリストも反映される。

脚注

                 図15 「脚注」編集画面上  図16 「脚注」ブログ上 なるほど。

太字

あああ

斜体

あああ

打消

あああ

アンダーライン

あああ

文字の大きさ

あ(大 200%) あ(中 150%) あ(標準 100%) あ(小 80%)

文字の色

あ あ あ あ あ あ

Step2-5 記事の概要/投稿日時/URLを指定して投稿する

記事の概要

設定すると記述した内容が表示される。 設定しないと冒頭 が表示される。

カスタムURL

https://notegatari.hatenablog.com/entry/hatenablog-start デフォルトでは日付。 URLを変更すると広告が表れる。ブログに関係ないので削除する必要がある。     図17 カスタムURL変更した結果、編集画面上

Step2-6 YouTube /過去記事などを挿入する

YouTube

メンタリストDaigo - 東大生の脳トレ を公開〜松丸亮吾の発想力の秘密公開 

過去記事貼り付け 

notegatari.hatenablog.com

Step2-7 サイドバーメニューをカスタマイズする

済み

Step2-8 記事を編集する

済み

Step2-9 スマートフォン から編集する

ブラウザからでも可能。

メール投稿でスマートフォン から記事を投稿する。

投稿か下書き投稿かを選べる。 ダッシュ ボード→設定→詳細設定                                             図18 メール投稿1 押すと                                            図19 メール投稿2 件名がブログの記事タイトル。 内容は文章。画像も反映される。自動的にアイキャッチ 画像も適用される。 個人的にあまり利用する機会はなさそう。

Part 3 ボードでの設定

Step3-1 ボードの解説

サイドバー 記事の管理、カテゴリー、コメント、アクセス解析、設定、デザイン、インポート、ブログメンバー、グループ、お題、アカウント設定

Step3-2 「記事の管理」画面から記事を編集する

済み

Step3-3  カテゴリーの管理

 消したカテゴリーは復活できない。

Step3-4  コメントの管理と設定

ダッシュ<ボード→コメント コメントの認証/削除、特定のユーザーからのコメント拒否。  ダッシュボード→設定→基本設定-コメント設定 コメントの許可範囲、認証。

Step3-5  ブログの基本設定画面を見る

ダッシュボード→設定→基本設定 ブログURL、ブログ名、ブログのアイコン、ブログの説明、aboutページ、言語、編集モード、コメント設定。

ブログのアイコン

ブラウザのタブやお気に入り、スマホ ページのトップにアイコンが表示される。                              図20 ブログのアイコン（タブ）                              図20 ブログのアイコン（スマホ ）

 ブログの説明文/ブログ名

                              図20 ブログの説明文/ブログ名

編集モード

編集見たまま、はてな記法、Markdownモード はてな記法モード はてなのマークアップ言語。 *リスト1 **リスト2 ***リスト3 上手くいかない -ぶどう --巨峰 --マスカット 上手くいかない ggった。  https://www.thinking-samurai.net/entry/2018/07/15/172944  助かった。 その記事を公開すると編集モードを切り替えできない。 別記事でテストする。 

Step3-7 ブログの公開範囲の設定をする

機会があれば

Step3-8 アカウント設定の変更

ニックネーム、プロフィール画像 、はてなブログ Pro、AmazonアソシエイトID、iTunesアフィリエイトトークン、購読中のブログ。プロフィール画像      図21 プロフィール画像

Part 4 デザイン&カスタマイズ

Step4-1 はてなブログ のデザイン

Step4-2 テーマを変更する

テーマストアで変更する。トップにあった「Minimalism」 。                                                     図22: Minimalism by codomisu                                                      図23: Minimalism Theme

Step4-3 カスタマイズ画面

背景画像の変更、背景色の変更、ヘッダの変更、記事デザインの変更、サイドバーの変更、フッタの変更、デザインCSS の変更

Step4-4 背景画像/背景色を変更する

背景画像の変更

　　　　　　　　　　　　　　 図24 背景画像                                                          図25 「背景画像」表示設定  位置　左○　中央　右 繰り返し　繰り返す○　水平方向のみ繰り返す　垂直方向のみ繰り返す　繰り返さない スクロール　スクロールする　固定する 「固定する」はスクロールすると、背景画像が固定され、記事のみ動く。

 背景色の変更

　　　　　　　　　　　　　　図25 背景色

 Step4-5 ヘッダの変更

ヘッダ画像はブログの一番上に表示される画像。ブログ名などを入れた画像を設定すると、ブログを覚えてもらいやすくなる。レスポンシブデザイン対応のテーマを選択されている場合、自動的にPCとスマホ の画像に変換されて表示される。                                          図26 ヘッダ画像　表示設定　 画像とテキストを表示                                          図27 ヘッダ画像　表示設定   画像だけ表示

 Step4-6 ヘッダとフッタに情報を表示する

                                          図28 ヘッダ　タイトル下　                                                  図29 フッタ ブログの最下部に文章が表示される。

 Step4-7 記事の上下に情報を表示させる

ブログのお知らせや更新情報などを書いておくのがおすすめ  個別記事のみ反映される。 　　　　　　　　　　　　　　　図30 記事上

 Step4-8 ソーシャルパーツを追加する

ソーシャルパーツとは「はてなブックマーク」「Facebook 」「Twitter 」などSNS ボタンのこと。例えば、 Twitter ボタンをクリックすると記事タイトルやブログ名などを表示してくれる。                                         図31 Twiiter 記事共有　 　　　　　　　　　　　　図32　 Twitter ツイート画面  　　　　　　　　　　　　図33 記事の上下に表示 この場合、「記事上」文章の下にソーシャルパーツが表示される。 スマホ では表示枠が狭くなるので2段表示になることもある。 表示させた方が良いとあるが、多分煩わしいのでOFFしておいた。

Step4-9 サイドバーのカスタマイズ

プロフィール、検索、リンク、最新記事、関連記事、注目記事、月別アーカイブ 、カテゴリー、HTML、参加グループ、執筆者リスト 　　　　　　　　　　　　　      図34 サイドバー 表示形式、表示数など設定できる。 　　　　　　　　　　　　　　　図35 サムネイル表示 余白が多くなった。 HTML 自由に表記できる、広告や外部のブログパーツ の追加はここへ。 最近のコメント IDと記事名、書かれた日時が表示される。

Step4-10 スマートフォン 用画面デザイン設定

テーマストアで「レスポンシブデザイン」表記があれば スマホ 対応。 画面を縮めると、レイアウトも縮小。                                      図36 レスポンシブデザインOFF                                      図36 レスポンシブデザインON

アクセントカラー

                                             図37 アクセントカラー Hatena Blogロゴや記事タイトルの色が変わる。

記事上下の表示、カテゴリー表示

          図38 記事上下の表示、カテゴリー表示

Part 5 CSS を使ったブログカスタマイズ

テーマに対して、 CSS やHTML、jQuery を指定することによってブログのデザインをカスタマイズすることができる。つまり、ブログの見た目が変わる。

HTML

HTMLとは、Hyper Text Markup Languageの略。基本的なマークアップ 言語で、Webページ上にリンクや画像、改行、リスト等をHTMLタグを使うことで表示することができる。 基本は、タグを利用して「その部分がどんな要素であるのか」を指定し、ブラウザに表示させる。開始タグ<>と終了タグ</>で囲むのが基本。

花見をしました。<h1>大見出し</h1>

綺麗に咲いた桜。<h2>中見出し</h2>

　図38 タグ用 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPaM7h20L7agi7f44UcXzgSqRN8L7zlDyxWQcTLjlWOMPnDadubGbpi-VT9snmGgcYEugm9ar83GPL2n6JhGND1IjWQ-Ofb30R2ri_dicLl3Tw3KCUpPtOumegtfwqWBhbgudX4ATtbZRU/s0/20181209215217.png" alt="20181209215217" title="20181209215217.png" border="0" width="453" height="600" /> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPaM7h20L7agi7f44UcXzgSqRN8L7zlDyxWQcTLjlWOMPnDadubGbpi-VT9snmGgcYEugm9ar83GPL2n6JhGND1IjWQ-Ofb30R2ri_dicLl3Tw3KCUpPtOumegtfwqWBhbgudX4ATtbZRU/s0/20181209215217.png " width="320"> <p>段落 今年は近所でして見ました。あまり有名ではないですが、あるアーティストのPVで撮影に使われた場所です。<br>改行 桜が綺麗に咲いていたので写真に収めました。</p>段落終わり <p>段落 続きを読む 　　 　　　<a href="hanami.html">続きを読む</a> </p>段落終わり </span> コメント <!--○○-->

  CSS

CSS とは、Cascading Style Sheets の略。HTMLに対して装飾やデザインを指定する。 HTMLを装飾する<p>HTMLを装飾する</p>

HTMLを装飾する<p style="color: blue;">HTMLを装飾する</p> HTML（骨組み）+ CSS （装飾）=デザイン。

CSS の書き方の基本

<要素名 style="プロパティ: 値 ; "> <p style="color: blue;"> 要素とは, HTML内に記述された<>タグの中に記述されている文字列。<p>が要素。 他に<html><body><span><div>など。 HTMLに直接 CSS を書き足す表記方法を「インラインスタイル」と言う。 インラインスタイルは、初心者に分かりやすい表記方法だが、HTMLが増えるたびに、全てのHTMLにCSSを書かなければならない。この問題を解決するのが、外部スタイルシート（リンキングスタイルシート）を使った表記方法。 一度指定したらその全ての要素名に対してCSSを指定できる。インラインスタイルは特定の要素に毎回指定、外部 CSS は特定の要素全体にCSSの指定ができる。 Texスタイルシート (.tex)ってニュアンス。外部読み込み。 外部スタイルシート の書き方の基本 要素名{ 　 プロパティ: 値; } 例 <p>HTMLを装飾</p> <div>ここはp要素ではありません</div> 　　<p> HTMLを装飾</p> p { color:blue; } <p></p>で囲まれた文字が青になる。 特定の要素全てに、プロパティと値を指定できるのが、外部スタイルシート 。 インラインスタイルのHTML+CSS記述 <p style="color:blue;">あいうえお</p> <p style="color:blue;">かきくけこ</p> HTML記述 <p>あいうえお</p> <p>かきくけこ</p> CSS 記述 p{   color:blue; } 外部スタイルシート はインライン要素とは違い、外部から読み込む必要がある。 はてなブログ の場合、 ダッシュ ボード→デザイン→カスタマイズ→デザイン CSS という場所に外部 スタイルシート を指定する。後述。

セレクタ 部分に名前を付ける

  特定の要素全体に CSS の指定ができるのが外部 スタイルシート 。しかし、<p>のようなよく使うタグの場合は、全ての<p>に指定するので困る。 すべての<p>タグだけでなく、この<p>タグだけに CSS を指定したいという場合、HTML セレクタ 部分( CSS の指定の対象になる部分)に名前を付け、他と区別付けられる。 これを「クラス名を付ける」、「ID名を付ける」という。 class="クラス名（半角大小英数字_-）" id="" 例 <p>HTMLを装飾</p> ↓ <p class="txtblu">HTMLを装飾</p> ↓ <div id="nav">

セレクタ に CSS を指定する

クラス名、id名を付けたセレクタ（クラス セレクタ 、ID セレクタ ）に CSS 記述する。 クラスセレクタを指定するCSSは「.class名」。ID セレクタ を指定する CSS は「#id名」。＃（ナンバー、シャープ）。 [HTML記述] <p class="txtblu">HTMLを装飾</p> [CSS 記述] .txtblu{   color:blue; } ブラウザで表示すると文字色が青になる。

クラス名とid名の使い分け

クラス名は何度も使え、id名は1つのHTML内に1つしか同じものを使えない。 都道府県名が「id名」市区町村が「クラス名」と覚える。

Step5-2 自分のブログのHTMLとCSSを見る

Chromeで検証。

Step5-3 はてなブログの CSS カスタマイズの基本手順

カスタマイズ手順 Step5-3-1 デザインの元にしたいテーマに変更する ↓ Step5-3-2 変更したい場所の CSS を検証 ↓ Step5-3-3 はてなブログ の「デザイン CSS 」に追記する

Step5-3-1 デザインの元にしたいテーマに変更する

テーマを選ぶ、例「Report」             図39  テーマ「Report」

 Step5-3-2 検証で変更したい場所のCSSを検証

カスタマイズする場所「ブログタイトル」をクリック                                   図40  ブログタイトル 文字の大きさ　フォントサイズ を変更したりして、変更されているか検証。

Step5-3-3 はてなブログ の「デザイン CSS 」に追記する

修正するのではなく、追記する形。 CSS には後に書かれた記述が優先される。既存の CSS にプロパティや値を追加していくことで、デザインを変更することができる。 デザイン CSS 　テーマ「Report」の /* <system section="theme" selected="report"> */ @import "/ css /theme/report/report. css "; /* </system> */ /* <system section="background" selected="383838"> */ body{background:#383838;} /* </system> */ ここから追記。 .entry-content h3{ position: relative; /* 親の位置を決める*/ border-bottom: 6px solid #eee2cf; /*ボックスに下線を付ける*/ padding-bottom: 3px; /*下の余白を指定*/ } .entry-content h3:after { content: ''; position: absolute; /*絶対位置を指定*/ background-color: #26979f; /*背景色*/ left: 0; /*左右の位置を指定*/ bottom: -6px; /*縦の位置*/ width: 25%; /*重なるボーダーの幅*/ height 6px; /*高さ*/ } 変化なし。（宿題）

カスタマイズの注意点と便利な使い方

最初から書いてある CSS は消去してはいけない。テーマを反映していたり、システムで背景などを読み込むときに表示されるものなので、消してしまうとテーマの設定が消えてしまうので注意。消えた場合、ストアで再インストールする。

△と×マーク

△・・・表示されるが記述として正しくない。 ×・・・間違いであり、表示されない。

デザイン CSS の機能

追記が増えると見辛くなる。 数字の横をクリックすると青い表示になる。 変化なし（宿題）。 量が少ないためだろう。

本書のカスタマイズで使用しているテーマ スマートフォン ブログのカスタマイズの場合Pro

特になし。Pro版なのでスルー。

Step5-4 ブログタイトルの色と大きさのカスタマイズ

ブログタイトルの文字を大きくする。 f ont size 20px　→  35px Chrome 検証で「タイトル」をクリック。本書と違う。さっきの画像。                       図40  ブログタイトル 文字の大きさ .entry-title a { font-size: 20px; color: #222; text-decoration: none; } ↓ デザイン CSS .entry-title a { font-size: 35px; color: #222; text-decoration: none; } 図41  ブログタイトル 文字の大きさ 35px 文字の大きさ変更できた。 続けて文字の色を緑に変更 .entry-title a { font-size: 35px; color: #00FF00;　 text-decoration: none; }                           図42  ブログタイトル 文字の色 緑#00FF00

ヘッダ画像を利用している場合の色変更

ヘッダ画像を利用している場合は、テーマのソース変更が行われるため、上記の内容だけでは色が変更されない文字の大きさは変更できる。ヘッダ画像（Custom Header-Image）を使用している場合の CSS を変更する必要がある。 ヘッダ画像のタイトルの色変更 /* Custom Header-Image */ .header-image-enable #blog-title #title a {   color: #ff0000; /*赤*/  }

Step5-5 ブログタイトルの背景と位置のカスタマイズ

                    図42  ブログタイトル 背景色　検証

#blog-title {

　padding: 70px;

}

↓

#blog-title {

　padding: 70px;

background: color #ff0000; /*背景色　赤*/

}

できない。

 

.header-image-enable #blog-title, .header-image-only #blog-title {

  padding:30px 0;   background-color: #aeef; /*ブログタイトル背景水色*/ }

↓

.header-image-enable #blog-title, .header-image-only #blog-title {   padding:30px 0;   background-color: #aeef; /*ブログタイトル背景水色*/ }

できた。              図43  ブログタイトル背景色  検証確認しながら行うのがベター。

ブログタイトルの位置を変更する

#title a {

1. text-decoration: none;

}

↓

#title a {

1. text-decoration: none;
2. padding-left: 50px; /*左余白*/

}

                         図44  ブログタイトル 左余白  左に余白ができた。

 Step5-6 ブログの説明文の位置を変える

ブログの説明文（ディスクリプション、サイトの説明）をブログタイトルの下に表示させる。

#blog-description {

1. display: inline-block;
2. *display: inline;
3. *zoom: 1;
4. font-size: 12px;
5. margin-left: 1em;

}

↓

#blog-description{

1. display:  inline-block;
2. *display: inline;
3. *zoom: 1;
4. font-size: 10px;
5. margin-left: 0;
6. padding: 10px 0;

}

横にずらすことはできるが、下に指定できない（宿題）

　　　　　　　　　図45 ブログの説明文の位置

Step5-7 記事タイトル周りのカスタマイズ

投稿日時やカテゴリーを目立つように周りに色を付ける。 .date { font-size: 13px; font-weight: bold; padding-bottom: 5px; border-bottom: 0 solid #ccc; /* ボーダーを削除 */ margin: 15px 0;　　　 } .date a{ color: #fff; /*文字色 背景色に合わせる 白 */ text-decoration: none;  padding: 5px;                 /* 余白 */ background: #E84d5b; /* 背景 赤 */ }                                   図46 投稿日時に色を付ける

記事タイトルを CSS でデザイン

先ほどやった。検証→確認、fontsizeを変更。 　　　　                    図47　記事タイトル　文字色

記事タイトルの下に罫線（けいせん）を付ける

罫線・・・一定間隔で引かれた線。

.entry-title  {

1. margin-bottom: 15px;
2. line-height: 1.3;

}

↓

.entry-title {

1. margin-bottom: 15px;
2. line-height: 1.3;
3. border-top: 2px dashed #3b3b3b;　/*タイトルの上にボーダーを引く*/
4. border-bottom: 2px dashed #3b3b3b;　/*タイトルの下にボーダーを引く*/
5. padding: 15px 0;

}

            図48　記事タイトルの上下に罫線

 

カテゴリーの表示に枠を付ける

検証→確認。変化がないときは追記して確認。

.categories{  font-size: 12px; } .categories a { margin-right:  .5em; } ↓ categories { font-size: 12px; display:inline;      /* ボックスを指定 */ line-height: 3em; /* 行の高さを指定*/ } .categories a { padding: 5px;               /* 余白 */ text-description: none; /* アンカーテキストの下線を消す */  background: #8ab292; /* 背景色 緑 */ color: #fff;                    /* 背景色に合わせて文字色を指定 */ } アンカーテキスト（anchor text）とは

アンカーテキスト(anchor text)とは、簡単に言えばリンクされている部分のテキストのことでSEO対策 ←こういったもののことを指します。（https://www.seohacks.net/basic/terms/anchor_text/ ）

                                   図49　カテゴリのデザイン

Step5-8 記事中の見出しのカスタマイズ

記事中の見出しをデザイン

記事内やサイドバーの見出しに大見出し<h3>中見出し<h4>が使われていた場合、これらをCSSで指定すると、全ての場所の見出しデザインが変更されてしまう。そこで、.entry-content（記事内）半角スペース h3 と指定することで、記事内にある<h3><h4>だけにCSSを指定できる。 google chromeで記事内の見出しのCSSを探す entry-content h3は記事(entry-content)内の大見出しを指定しているクラス名。 entry-content h4は記事内の中見出し。

.entry-content h3 {

1. font-size: 140%;

}

.entry-content h4 {

1. font-size: 120%;

}

↓

.entry-content h4 {   font-size: 120%;   background: #eee; /* 背景色 灰色 */   border-left: 7px solid #26979f; /*ボックスの右に線を引く*/    padding-left: 10px; /*左に余白 */ } .entry-content h4{ では認識しない

                          図50 大見出し、中見出しの色 それらしくなった。

大見出しを2トーンカラー（異なる系統の2色）のボーダーにする

擬似要素を使用して大見出しをデザインする。 擬似要素とは

before after を使用することで、指定したセレクタの前（before）と後（after）の内容を挿入できるようになります。（引用：はてなブログPerfect GuideBook）

before セレクタ   after 今回は緑の異なるボーダーを擬似要素で表示させる。 既に設定していた。 .entry-content h3 {   font-size: 140%;    position: relative; /* 親の位置を決める*/   border-bottom: 6px solid #eee2cf; /*ボックスに下線を付ける*/    padding-bottom: 3px; /*下の余白を指定*/ } これがbefore .entry-content h3:after { content: ''; position: absolute; /*絶対位置を指定*/ background-color: #26979f; /*背景色*/ left: 0; /*左右の位置を指定*/ bottom: -6px; /*縦の位置*/ width: 25%; /*重なるボーダーの幅*/ height 6px; /*高さ*/ } after h3:afterに絶対位置を指定する。 .entry-content h3 border-bottom: 6px .entry-content h3:after  bottom 6px .entry-content h3:after  height 6px は同じ値を指定する。ここが違うと位置がずれる。（らしい） 絶対位置とは 親ボックスを基準に位置を決めるという意味。詳しくは本書。

サイドバーモジュールの見出しにも同じスタイルを適用する。

統一感を出すため、サイドバーモジュールの見出しにも同じCSSを適用。