２０２４年１月１７日（水）、アメブロのデザインをCSS (Cascading Style Sheets)で構築し新しくしました。
個人的には、２０１９年にハローワークから紹介されたナレッジベース柏校で開催されたCSS (Cascading Style Sheets)の講習会に参加して以来、ずっとアメブロのデザインは自らCSS (Cascading Style Sheets)で構築していました。２０２４年１月１６日（火）までのデザインを画面ショットで保存してありませんが、今回の新しいデザインはマジパンで作られた「Sparschwein (ｼｭﾊﾟｰｼｭｳﾞｧｲﾝ)」にしました。そして、豚と言えば「三匹の子豚」ですので、背景画像はレンガ柄にしました。
これは、たったの１時間ほどで完成しますのでCSSを学んだことがない方でも是非トライしてみて下さい！
もう最近では、事務職に限らずどの仕事でもエクセルとワードを使いこなせて当たり前の時代になりましたので、エクセルができればどなたでもCSSで編集できると思います。アメブロの場合は自社端末の操作方法を学ぶようにCSS (Cascading Style Sheets)も一回習得すれば簡単にアメブロのデザインを構築できますので、他にはないデザインを自ら作成してみたいとお思いの方がいらっしゃいましたらチャレンジしてみて下さい！（※スマホやタブレットでアメブロを使用されている方はできるか分からないです。）
まず、アメブロのデザインで選ぶ際に「CSS編集用デザイン」をチョイスします。
そうしたら、「CSS編集用デザイン [◎CSSの編集]」をクリックして開きます。
そして、次にタイトル用の画像と背景画として使用する２種類の画像をアップロードします。それで、その画像はどこから入手するのかというとネットで検索してフリー素材を「名前を付けて画像を保存...」を押してデスクトップに保存します。その画像をデスクトップから引っ張ってきてアップロードします。
例えば、適当に「豚」と検索すると「画像」として豚の写真が出てきます。その好きな画像にマウスの矢印を当てて右クリックすると「名前を付けて画像を保存...」が出てきますので、ファイル名「画像１（私の場合、床に豚）」、「画像２（私の場合、レンガ柄）」としてデスクトップに保存します。
ファイル名「画像１」・・・タイトル用の画像として使用するので可能であれば横長の長方形の画像を選びます。
ファイル名「画像２」・・・背景画として使用するのでタイル形式で繰り返し自動的に貼っていくことになるので色が薄い柄が良いと思います。
ファイル名「画像２」として色が薄くて脇役として役に立ちそうな画像を選びデスクトップに保存します。
因みに、この画像を３個くらい「ペイント」で繋ぎ合わせてタイトル用の画像にすることもできます。
その次に、タイトル用の画像のパス（「この画像のパス」）の部分をコピーします。
そして、その直ぐ下にあるCSS編集のところにある「ヘッダー画像を設定する」までカーソルを下げて、「background-image: url ();」の中に先ほどコピーした画像のバスを貼り付けてから保存します。ヘッダーというのはタイトル画像のことです。
※タイトル画像が実際にどんな感じになったのか確認して下さい。何となくヘンだったら画像の大きさを「ペイント」などで修正します。
次に、私の背景画（レンガ柄）の部分を編集しますので、「画像２」の「この画像のパス」をコピーします。
そして、「コンテンツ背景、ヘッダー以下の背景色」のところにある「background-image: url();」に「画像２」のパスを入れて保存します。
当たり前の話ですが、毎回「表示を確認する」で実際にどうのようなデザインになったのかを確認して「保存」して下さい。
次に帯の部分（赤枠の部分）の色を変えます。
「（4-2）サイド境界線」のところにある「background-color: 」にカラーチャートから選んだカラーコードを入れます。
それで、「カラーチャートって何なのよ？」と思われる方は、「カラーチャート」、又は、「カラーコード」で検索して頂くとサイト制作用の色の見本表が出てきます。
因みに、私が使用しているカラーチャートはこちらになります。
好きな色番号を選んで（＃マークも必要）から、貼り付けて保存します。
こんな感じで貼り付けします。
/* (4-2) サイド境界線
--------------------------------------------*/
/* 境界線 */
.skin-sideBorder {
border-color: #DDDD66;
}
※お試しにというか、練習に「color」とある他の箇所に色番号をコピーして貼り付けてみて下さい。
そして、私のブログにはボックス（赤枠で囲った箇所）も９つ付けてあります。ここをクリックすると他のサイトに飛ぶことができるようになっています。
そして、それを編集するところは「CSS編集用デザイン [◎CSSの編集]」ではないのです。「設定」から入って「フリースペース設定」で行います。
早い話が、もしトライしてみたいとおっしゃる方がいらっしゃいましたら以下のものをそのままコピーして貼り付けてみて下さい。
<div class="nav-menubar"><nav><ul class="nav-menu"><li><a href="http://pc-ssc.com/umezawa/"><span>ユダヤ教歳時記</span></a></li><li><a href="https://tomobruhel.exblog.jp/i3/"><span>旧ドイツ日記１</span></a></li><li><a href="https://www.facebook.com/tomoko.chavele"><span>FACEBOOK</span></a></li><li><a href="https://dreamcat.or.jp/"><span>Dream Cat</span></a></li><li><a href="https://www.sanktmichaeltokyo.com/"><span>聖ミカエル教会</span></a></li><li><a href="https://kreuzkirche-tokyo.jp/"><span>東京クロイツ教会</span></a></li><li><a href="https://www.chabad.jp/templates/articlecco_cdo/aid/411226/jewish/Access.htm"><span>Chabad Tokyo</span></a></li><li><a href="https://karneval.exblog.jp/i2/"><span>旧ドイツ日記２</span></a></li><li><a href="https://johanne.exblog.jp/"><span>ヨハネパウロ２世</span></a></li></ul></nav></div>
（１）日本語の部分は、ご自分で入れたいリンク名を入力して下さい。
（２）<a href="">の「""」のチョンチョンの間にご自分が入れたいリンクのURLを入れて下さい。
※最後の必ず</a>で閉じて下さいといいたいことろなのですが、（２）以外はノータッチで変えないで下さい。「間違えたな？」と思ったら、もう１回全てを貼り付け直せば大丈夫と思います。
メッセージボードの編集になりますが、文字をベタ打ちしても反映されます。でも、「写真とかも入れたいな～！」と思われる場合は、別のブログで画像をアップロードして<img src=>を作成して貼り付けます。
因みに、「よく分かんない！」とおっしゃる方は、以下のものをコピーして貼り付けてみて下さい。（フリースペース編集で）
<img src="https://blogimg.goo.ne.jp/user_image/12/ae/8552b0f9302b344108d9e920fd69de58.jpg">
文字をクリックすると別のサイトに飛べるようにするには、
<a href=""></a＞の間に文字を入れます。<a href="ｈttps://casamia.hp.peraichi.coｍ">カーサミーア</a＞とすると文字でリンクを貼ることになります。
こちらが、私が使用していたテキストになりますが、もう少しちゃんと学んでみたい方には「Webクリエイター能力認定試験（HTML５対応）」をおススメしたいと思います。
これを学んでいたのが２０１９年ですので、HTML5でも大丈夫と思います。
因みに、HTML6が出たのかネット上でチェックしたところ、HTML6はないようです。
（画像提供：【基本】HTML6は実在する？知っておきたいWeb技術の基準）
CSSについて基礎知識から説明されていますので、初心者の方でも分かり易いと思います。
因みに、私の場合、初心者ではないというか・・・、２００４年にイディッシュ語の学習を始めた時に「Totally Yiddish!」というサイトをHTMLを使って構築したことがありました。その当時、インターネットが登場したばかりの頃でしたのでHTMLも全て手打ちでCSSなんて便利な方法はありませんでした。しかし、今回というかナレッジベース柏校で開催されたCSS (Cascading Style Sheets)の講習会に参加してHTML5を習って良かったと思いました。
（画像提供：以前の私のサイト「Totally Yiddish!」）
現在でも私のサイト「Totally Yiddish!」は、日本語WIKI「イディッシュ語」の「外部リンク」に掲載されています。もう「Totally Yiddish!」は、２０１９年３月３１日にサービスが終了し使用できなくなっていますが。
そして、これは一般的には必要ないかも知れませんが、お伝えしておくと、各々のサイトがどう構築されているのかをチェックする方法があります。どのサイトでも良いですが、サイトの真ん中辺りで右クリックすると「ページのソースを表示」と出ます。
その「ページのソースを表示」をクリックすると以下のような画面に変わります。これが、そのサイトを制作した人が構築したHTMLとCSS、JAVAです。別にこれをそっくり真似したからといって自分のサイトが出来上がる訳ではないですけど。
（画像提供：以前の私のサイト「Totally Yiddish!」）