今回は、「メディア2021」の背景の色やリンクの色などを変更しました。
作業自体は色の入れ替えだけなので簡単なのですが英語がわからないし難しい。
もっとネオン風にしたかったのですが、なじまない部分も多かったので濃いめにしました。
手順的には、
ブログ設定→デザイン設定PC→カスタマイズ→CSSで行います。
CSSはなんぞやというと、あまりわかってない私が全くわかっていない方にいうならば
ブログの大まかな設定 部分で、
CSSに色設定などを入力すれば
他のページも同じように表示される といった中枢的な部分。
なので、
CSSを設定すると
その後にトップページの配置を変更とか
個別ページの配置を変更とかをした場合、
1からリンクや背景の色設定までをしなくとも済む 。
ただ、いわゆるプログラム用語なので、
ちょっと何かが違うとずれたり反応しなかったりするので、
こまめに保存をしながら行った方が良いです。
ライブドアブログ上(ブログ設定→デザイン設定PC→保存)と、
Windowsのメモ帳で自分のPCに保存しながら作業をします。
↑ワードとかは使用しない方が良いと思います。
「メディア2021」のざっくりCSSは
↓こんな感じでわかりやすく区切られています。
/* スライドショー ----------------------------------------------- */
/* スライドショーのユーサー記述箇所用--------------------- */
/* 全体のレイアウト----------------------------------------------- */
/* かんたん背景画像 */
/* 全体の文字色リンク色----------------------------------------------- */
/* ブログのヘッダー、タイトル、説明、メニューリスト-------------------- */
/* メインカラム----------------------------------------------- */
/* 記事全体 */
/* 記事ヘッダー、記事タイトル */
/* 日付 */
/* 記事フッター、タグ、コメント、ソーシャルボタン */
/* 関連記事 */
/* 続きを読む */
/* 記事本文---------------------------------------------- */
/* トップページ */
/* 記事ページ、月別アーカイブページ */
/* ブログのフッター----------------------------------------------- */
* フッターのブログパーツ----------------------------------------------- */
/* 特殊機能・カスタマイズ----------------------------------------------- */
/* スライドショーのユーサー記述箇所用--------------------- */
/* 全体のレイアウト----------------------------------------------- */
/* かんたん背景画像 */
/* 全体の文字色リンク色----------------------------------------------- */
/* ブログのヘッダー、タイトル、説明、メニューリスト-------------------- */
/* メインカラム----------------------------------------------- */
/* 記事全体 */
/* 記事ヘッダー、記事タイトル */
/* 日付 */
/* 記事フッター、タグ、コメント、ソーシャルボタン */
/* 関連記事 */
/* 続きを読む */
/* 記事本文---------------------------------------------- */
/* トップページ */
/* 記事ページ、月別アーカイブページ */
/* ブログのフッター----------------------------------------------- */
* フッターのブログパーツ----------------------------------------------- */
/* 特殊機能・カスタマイズ----------------------------------------------- */
背景の色は
上のヘッダーの背景色
スライドの背景色
メニューの背景色
本文?の背景色
ヘッダーの背景色 と、ざっくり5カ所あります。実際はもっとあるのかもしれない。
スライドショーの背景色は
「/* スライドショー ------------- */」内の
.swiper-containerの下の
background: #f5d7fa;
薄紫に変更 ↑この赤い部分が新しい色です。(もとの色は忘れましたが白系だと思います。)
色番号を入力します。
Googleで「カラー選択ツール」を検索すると、色番号が出てきます。
#をつけて6文字分。#を含め数字も英字も半角なので気をつけて。
##としたり、;のつけ忘れても表示されない可能性あり。
なかなか見つからないときは CSS(メモ帳)をファンクションキーのF3で検索をして
# や color や backgroundを検索すると、たいてい色にたどり着きます。
本文などの背景色は
/* 全体のレイアウト
---------------------------- */ 内の
---------------------------- */ 内の
body {
width: 100%;
min-width: 1080px;
background-color: #d7faf1;
width: 100%;
min-width: 1080px;
background-color: #d7faf1;
↑赤部分。これは変更後の色
水色系です。(#d7faf1)
ヘッダーの背景色は
/* ブログのヘッダー、タイトル、説明、メニューリスト
----------------------------------------------- */ 内の
#blog-header {
height: 193px;
background: #c24cf6 url("https://parts.blog.livedoor.jp/img/usr/local_media/img_bg01.png") center bottom repeat-x;
position: relative;
----------------------------------------------- */ 内の
#blog-header {
height: 193px;
background: #c24cf6 url("https://parts.blog.livedoor.jp/img/usr/local_media/img_bg01.png") center bottom repeat-x;
position: relative;
↑この赤い部分 色は紫に(#c24cf6)変更済み
この部分には画像が貼られていて↓こんな感じの画像なのですが
背景色の上から透かせる画像です。
pngという拡張子で透ける絵です。
私は古い人間なのでpingピングと読んでいるのですが、今調べたら
pingは死語で、今はそのような表現をしないらしい。
何でなじみがあると思えば、
私はただの主婦なのにAdobeのHPを作るGo Liveとか、
Photoshopelementsもバージョン1から使用していたため
gifジフとか、なんか頭の片隅に残っているようだ。
透明うんちゃらで、当時はgifアニメを作るのが楽しかった。
pingはできたてで当時gifがよいのかpingが良いのか論議されていて、
私の中ではjpegが一番でgifやpingを使うことはめったにありません。
使用している画像はすべて拡張子をjpegで保存しています。そういうのも今改めて勉強したら考えが変わるのかも。
息子は一時プログラマーを目指していたが、学校で拡張子もろくに教えておらず、
学生のくせに全然ダメじゃんって思った。
プログラミングを目指しているならば
40~50代のひろゆきさんやホリエモンウィンドウズ98世代のブログを読んだ方がいいと思う。
息子は無事にプログラマー以外の仕事に就いていたので
私はかなり安心したが。
現代人の言い方なら どの口が~~ ってとこ。
中身が理解できていないのに表だけでわかったつもりでいる。
話戻して、ピングの画像が背景色の上に乗っかっていて、
それが↑の
url("https://parts.blog.livedoor.jp/img/usr/local_media/img_bg01.png") center bottom repeat-x;
↑部分である。
ま、頑張れるのであればここを改造すれば
オリジナルの画像もできちゃうんじゃないかい?と思う。
次に、
メニューの部分。
ここは、あらかじめメニューを1つでも作っていないと表示されないかも知れない。
メニューは
ブログ設定→デザイン設定PC→メニューバー で作成できる。
取り急ぎテキトウに作ったのですが、
トップページ。カテゴリページ、URL、ソーシャルとリンクを貼れて、
ブログパーツよりも目立つ場所なので何かしらリンクを貼って置いた方が良いのではと思う。
メニューの背景色は
↓
/* ブログのヘッダー、タイトル、説明、メニューリスト
----------------------------------------------- */ 内の
----------------------------------------------- */ 内の
.ldb_menu {
background: #f4f711;
}
background: #f4f711;
}
↑ここなのですが、
ここは、マウスを乗せるとからくりがあるので、
これ以上踏み込むことはやめています。
もし○○すると○○になる 様な感じだと思います。
暇なら解体するのも面白いと思う。
最後に
足下部分のフッターは
/* ブログのフッター
----------------------------------------------- */ 内の
#blog-footer {
color: #333;
background: #C24CF6 url("https://parts.blog.livedoor.jp/img/usr/local_media/img_bg01.png") center bottom repeat-x;
padding-top: 37px;
text-align: left;
----------------------------------------------- */ 内の
#blog-footer {
color: #333;
background: #C24CF6 url("https://parts.blog.livedoor.jp/img/usr/local_media/img_bg01.png") center bottom repeat-x;
padding-top: 37px;
text-align: left;
紫に変更。
この部分は、下のブログパーツ部分も含んでいるので、ヘッダーと違いすぎでよくわからん。。。
bottom repeat-xは、繰り返すの指示?
取り急ぎ、↑の部分で背景色は変更が可能です。
以上が
背景を変える。でした。
次に
文字の色ですが、
/* 全体の文字色、リンク色
----------------------------------------------- */ 内の
body {
color: #858F8C; ←本文の色・グレーに変更
font: 14px/1.2 Helvetica, Verdana, sans-serif;
}
a, body.page-article .article-title a:visited {
color: #fc0fd1;←リンクの色・濃いピンクに変更
text-decoration: none;
----------------------------------------------- */ 内の
body {
color: #858F8C; ←本文の色・グレーに変更
font: 14px/1.2 Helvetica, Verdana, sans-serif;
}
a, body.page-article .article-title a:visited {
color: #fc0fd1;←リンクの色・濃いピンクに変更
text-decoration: none;
↓

↑
記事のカテゴリ先へのリンクの色は
/* 記事ヘッダー、記事タイトル */ 内の
.article-categories a {
color: #02b826; ←緑系 02b826
}
color: #02b826; ←緑系 02b826
}
スライドショーの中のカテゴリリンク
/* スライドショー ----------- */ 内の
.main_visual_categories a {
color: #FE53BB; ←薄いピンク系
}
color: #FE53BB; ←薄いピンク系
}

といった感じで変更しました。
文字の色はまだ他にも変更できる箇所があると思います。
くれぐれも、変更する前の保存をお忘れ無くデス。
色がちょっと変わるだけでも、オリジナルっぽくてうれしいかな。
変更のヘルプページ。何をするかわかっている人向け
時々出てくる謎の <$○○○○$> ←コレ
覚え尽くす必要は無いのですが、存在は知っておくと便利です。
↓軽くいじる程度で、頭の片隅ほどの知識で良ければ
どちらかというと古い書籍のほうがわかりやすいかも知れません。

↓イラストを描いたり、PC上でも活躍する書籍。よく使います。