【Blogger】ステップ8：Blogger・JetThemeを自分好みに！初心者向けHTML/CSSの設定
【Blogger】ステップ8：Blogger・JetThemeを自分好みに！初心者向けHTML/CSSの設定
下線とかタイトルとかいろいろ変えてみたい
こんなお悩みにお答えします。
ブログを見やすくしたい！
こんにちは！ プロの方のブログのようにいろいろ飾りつけしたくなりますよね。
でも、「なんだか難しそう」
と思うかもしれませんが、大丈夫です。
「コピペ」で、できちゃいます。
難しい理屈は一切抜きです。
「うわー」と懐かしく思えるような、デザインの一歩を踏み出してみましょう。
［Google広告]
ステップ1： CSSとHTMLとは
CSSで、色や大きさなどのデコレーションの型枠を作り、HTMLにてその型枠を使って入力することで、デコレーションが完成します。CSSではいろんなデザインが作ることができます。
下線を引いたり、デザイン枠を入れたり、カラフルな表を入れたり。
自分好みに、いろいろと変更できるので、こだわりたくなってきますよ。
ステップ2： どこに貼り付ける？
「ここだけ見ればOK」という場所を伝えます。＊CSSを貼り付ける場所
CSSの貼り付け先： Blogger管理画面 ＞ テーマ ＞ カスタマイズ ▼ ＞ HTMLを編集
どこでもいいので、テキストがあるところをクリック ＞ 検索「Crtl＋F」 ＞ 画面左上にある検索窓に「CSS」と入力してください。
「/*Your custom CSS is here*/」 を探してください。
/*Your custom CSS is here*/の下をクリック ＞ 2～3回ほどEnterキーを押して、改行します。
改行したところに、CSSを「貼り付け」します。
＊HTMLを貼り付ける場所
HTMLの貼り付け先： 記事編集画面
CSSのデザインに合わせて、テキストを入力します
ステップ3： バックアップを必ず
＊この作業、むちゃくちゃ大事です。ポイント：
エラーになったとき、バックアップがあることで、変更前に戻すことができるので、絶対にバックアップをとってください。
Blogger管理画面 ＞ テーマ ＞ カスタマイズ ▼ ＞ 「 バックアップ」
「ダウンロード」をクリックします。
PC ＞ 「ダウンロードフォルダ」 をダブルクリックします。
ダウンロードファイルが表示されます。
ステップ4： バックアップを使うとき
Blogger管理画面 ＞ テーマ ＞ カスタマイズ ▼ ＞ 「元に戻す」をクリックしてください。
バックアップでダウンロードしておいたファイルを選びます。
【コピペ用】デザインパーツ3選
「コピペ」で使えます。① 見出し
シンプルなタイトルです。ここに見出しの文字を入力
以下のコードをコピーして、CSS設定画面に貼り付けてください。
/* --- 見出しh2のカスタマイズ --- */
.post-body h2 {
padding: 0.5em 0.5em; /* ①中の余白 */
color: #333333; /* ②文字の色 */
background: #f4f4f4; /* ③背景の色 */
border-left: 5px solid #007bff; /* ④左側の線の太さと色 */
border-bottom: 3px solid #d7d7d7;/* ⑤下側の線の太さと色 */
line-height: 1.4; /* ⑥行の高さ */
}
こんな感じで貼り付けします。
ポイント：
「#333333」など#のところは、色です。
ポイント：
px のところの数字を変えると文字の大きさの変更ができます。
以下のコードをコピーして、HTML入力画面に貼り付けてください。
<div class="custom-h2">ここに好きな見出しを入力</div>
こんな感じで貼り付けします。
プレビューボタンをクリックします
② 記事が読みやすくなる「蛍光ペン風ライン」
ここに大事な文章を書く重要なところにサッと引けるマーカーです。
以下のコードをコピーして、CSS設定画面に貼り付けてください。
/* 蛍光ペン（黄色）のデザイン設定 */
.marker-yellow {
background: linear-gradient(transparent 60%, #fff33f 60%);
font-weight: bold; /* 文字を太くして目立たせる */
}
以下のコードをコピーして、HTML入力画面に貼り付けてください。
<span class="marker-yellow">ここに大事な文章を書く</span>
③ 読者を誘導する「ぷるるんボタン」
ボタンに表示する文字マウスをボタンに持っていくと、ぷるるんと浮かび上がるボタンです。
以下のコードをコピーして、CSS設定画面に貼り付けてください。
/* 共通ボタンデザイン */
.my-button {
display: inline-block;
padding: 10px 20px;
background-color: #a77777; /* ボタンの色 */
color: #fff !important;
text-decoration: none;
border-radius: 5px;
transition: 0.3s;
font-weight: bold; /* 文字を太くして目立たせる */
}
/* マウスをのせた時の動き */
.my-button:hover {
opacity: 0.8; /* 少し透明にする */
text-decoration: none; /* 下線を消す（再確認） */
}
以下のコードをコピーして、HTML入力画面に貼り付けてください。
<!-- ボタンの作成 --> <a href="リンク先のURL" class="my-button"> ボタンに表示する文字 </a>ポイント：
a href=""はリンクの設定です。""のところに、クリックしてほしいURLを入れます。
ポイント：
<a href="https://www.yahoo.co.jp/">のように入れます。
コピペができるCSSとHTMLサイト
こちらのサイトのおかげで、コピペで簡単に、おしゃれなサイトができます。なぜか、ちゃんとコピペしているのに、このBloggerだと、うまく反映しないときもあります。
いろいろ試してみて、色を変えたり、自分好みのサイトにしていきましょう。
色も変更してからコピペできる CSS Stockさま
250個以上のデザイン サルワカさま
" コピペ CSS おしゃれ " のキーワードで、Google検索すると、コピペができるサイトがたくさんでてくるので、参考してみてください。
困ったときは、Gemini
この方法、むちゃくちゃ便利です。理屈を分かっていない私でも、スクショと文章を打つだけで、教えてくれるので、困ったときはいつも助けてもらっています。
気になるサイトの画面のスクショを撮ります。
「Shift＋Windowsキー＋S」を同時に押します。
画面が「グレー」に変わります。
マウスの形が、「＋」プラスマークになります。
ドラッグで気になるデザインを囲みます。
Gemini 3 に相談 のところをクリックし、カーソルを点滅させて、「Ctrl＋V」貼り付けします。
Gemini 3 に相談 のところに、指示文を入力します。
改行するには、「Shift＋Enterキー」を押します。
あなたは、ブログの作るプロです。
CSSを作成してください。
と入力します。
紙飛行機ボタンをクリックします。
すると、CSSやHTMLがずらーっと出てきます。
コピペして、使います。
うまく表示されないときは、質問を変えたりすると、解決するはずです。
まとめ
自分好みの見出しなどできました。お疲れ様でした！
次は、カスタマイズです。
私が実際に迷ったポイントを、「ここをクリックして、これをコピーして、ここに貼るだけ！」というステップで、どこよりも丁寧に備忘録として残しておきます。
もしよかったら、Bloggerカスタマイズ備忘録 を参考してもらえたら嬉しいです。
最後まで読んでいただきありがとうございました。
はつごかんでした。
関連記事はこちら
［Google広告]
Menu
