鉄色の旅

あいう

Tue, 07 Jan 2025 15:39:32 +0900

アメンバー限定公開記事です。

セピア色小樽運河

Mon, 25 Jul 2022 08:06:09 +0900

BS放送の歌番組を見ていてセピア色が気になった。小樽の風景

テキスト

[プラタ] マスク不織布不織布マスク 150枚 (50枚入り ×3箱) 立体3層プリーツ型使い捨て不織布マスク白ふつうサイズ大人用

Amazon（アマゾン）

♬ 小樽運河　都はるみ

https://www.youtube.com/watch?v=Gc4h5iSMAUU

精進おとしの酒をのみ
別の生き方あったねと…
四十路半ばの秋が逝き
セピア色した雨が降る
イエスタデイを聴きながら
ふたり歩いたあァ小樽運河

アメブロデザイン　色変えセット

Fri, 08 Jul 2022 17:17:40 +0900

アメブロデザインの色変えを容易に行えるCSSをまとめてみました。

まづは、こちらの記事 ↓ を参考にブルーのデザインにします。

スタンダード型、リスト型、カード型いづれでも。

『アメブロ　カスタマイズ　シンプルブルー』CSS編集用デザインを使用してのカスタマイズ。「CSS編集用デザイン」適用、カスタマイズの仕方ブログデザインをCSSでカスタマイズしよう｜AmebaヘルプC…ameblo.jp

下記CSSを末尾に追記で色変えできます。カラーコード好きな色に変えて使用下さい。

/* ブログタイトルブログ説明文*/
.skin-blogMainTitle, .skin-blogSubTitle {
color: #F56D91;
}
/*ブログナビ上部*/
.skin-blogHeaderNav {
border-color: #8D8DAA;
background-color: #8D8DAA;
}

/* 前後ページ送りボタン*/
.skin-btnPaging, .skin-btnPaging:hover, .skin-btnPaging:visited, .skin-btnPagingIcon {
color: #8D8DAA;
}

/* メインエリア背景 */
.skin-bgMain {
background-color:#DFDFDE;
}

/* サイドタイトル飾り*/
#profile .skin-widgetTitle, .skin-widgetTitle{
padding: 0.4em 1em;
color: #F56D91;
border-left: solid 5px #8D8DAA;
border-bottom: solid 1px #d7d7d7;
}

/* サイド強調ボタン（フォローボタン）背景色変更 */
.skin-btnSidePrimary, .skin-btnPrimary{
border-color: #8D8DAA;
background-color: #8D8DAA;
color: #fff;
}

/* カード型トップページ　カード枠*/
[data-uranus-component="tileItem"]{
color: #5d627b;
background-color:#DFDFDE;
border-top: solid 2px #8D8DAA ;
box-shadow: 0 3px 5px #8D8DAA;
}

/*リスト型トップページ記事リスト背景色変更*/
.skin-borderQuiet{
background-color:#DFDFDE;
}

緑色の例

/* ブログタイトルブログ説明文
鉄色てついろ#005243*/
.skin-blogMainTitle, .skin-blogSubTitle {
color: #005243;
}
/*ブログナビ上部*/
.skin-blogHeaderNav {
border-color: #005243;
background-color: #005243;
}
/* 前後ページ送りボタン*/
.skin-btnPaging, .skin-btnPaging:hover, .skin-btnPaging:visited, .skin-btnPagingIcon {
color: #005243;
}
/* メインエリア背景 */
.skin-bgMain {
background-color:rgba(0,82,67,0.1);
}
/* サイドタイトル飾り*/
#profile .skin-widgetTitle, .skin-widgetTitle{
padding: 0.4em 1em;
color: #E67A7A;
border-left: solid 5px #005243;
border-bottom: solid 1px #d7d7d7;
}
/* サイド強調ボタン（フォローボタン）背景色変更 */
.skin-btnSidePrimary, .skin-btnPrimary{
border-color: #7EC2C2;
background-color: #005243;
color: #fff;
}
/* カード型トップページ　カード枠*/
[data-uranus-component="tileItem"]{
color: #5d627b;
background-color:rgba(0,82,67,0.1);
border-top: solid 2px rgba(0,82,67,0.4) ;
box-shadow: 0 3px 5px rgba(0,82,67,0.4);
}
/*リスト型トップページ記事リスト背景色変更*/
.skin-borderQuiet{
background-color:rgba(0,82,67,0.1);
}

rgba変換ジェネレーター（「色」の所にカラーコードを入力で下に表示されます）

rgba変換ジェネレーターrgba変換ジェネレーターです。WEB色コード(カラーコード)を16進に計算して変換してくれます。完成後の色を確認しながら、透過デザインを簡単調整♪HTML、CSSを出力します。generator.web-alpha.info

Webフォントを導入

Tue, 28 Jun 2022 17:28:54 +0900

アメブロの日本語は各プラウザ・端末の標準（デフォルト）のフォントで表示されている。

詳しくは ↓ こちらの記事を。

『アメブロのフォント』アメブロの文書は、どんなフォント（font-family）で表示されているか調べてみた。アメブロは下記CSSにてフォントを指定body{font-famil…ameblo.jp

Webフォントを導入すれば、OS、プラウザ、端末、バージョンの違いにかかわらず、同じフォントで文字を表示できるようになります。

Webフォントサービスは色々ありますが、無料のGoogle Fontsで明朝体「Noto Serif JP」を導入。

導入に際し「CSS編集用デザイン」適用が必用です。

「Noto Serif JP」詳細は ↓ こちら。

Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com

リンクコード

CSS rules to specify families

font-family: 'Noto Serif JP', serif;

文字の太さ200から900があり、リンクコードのwght@200を300に変更しアメブロのフリースペースに記途。

サイドバーの配置設定でフリースペースを「使用する機能」に設定。

CSSは下記と記途。

body{ font-family: 'Noto Serif JP', serif; }

＊CSS編集用デザイン　CSS編集画面に記途。

尚、ブログタイトルとブログ説明文は「Hachi Maru Pop」を使用。

詳細は ↓ こちら。

Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com

.skin-blogMainTitle {
font-family: 'Hachi Maru Pop', cursive;
}
.skin-blogSubTitle {
font-family: 'Hachi Maru Pop', cursive;
}

キハ４０とアジサイ

Tue, 21 Jun 2022 20:58:38 +0900

小湊鉄道

紫陽花

Wed, 15 Jun 2022 09:35:52 +0900

昼下がりの国吉駅　乗客が1名

いすみ鉄道

アメブロ　カスタマイズ　シンプルブルー

Thu, 09 Jun 2022 07:20:47 +0900

CSS編集用デザインを使用してのカスタマイズ。

「CSS編集用デザイン」適用、カスタマイズの仕方

ブログデザインをCSSでカスタマイズしよう｜AmebaヘルプCSSカスタマイズをおこなうことで、簡単カスタマイズよりも高度で詳細なカスタマイズが可能となります。CSSについてはこちらのヘルプページをご確認ください。※広告の非表示などに関してカスタマイズされた場合には利用規約に違反する場合がございます...helps.ameba.jp

まづはトップページ全文表示のスタンダード型

下記CSSを初期CSS末尾に追記でカスタマイズ完了。

(コピペの際は下の広告を消してから行うと容易です。）

/*ヘッダー背景色変更 */
.skin-bgHeader {
background-color: #fff;
width: 1120px;
margin: auto;
height:150px;
}

/* ブログタイトル */
.skin-blogMainTitle {
color: #7EC2C2;
margin-bottom: 10px;
font-size: 27px;
font-family: 'Hachi Maru Pop', cursive;
}

/* ブログ説明文 */
.skin-blogSubTitle {
color: #7EC2C2;
font-size: 16px;
font-family: 'Hachi Maru Pop', cursive;
}

/* ヘッダータイトル左側表示に変更*/
.skin-headerTitle {
padding: 50px 0 80px 80px;
text-align: left;
}

/* (3-3-a) ブログナビ上部
--------------------------------------------*/
/* 背景、境界線 */
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color: #9DDCDC;
width: 1120px;
margin: auto;
}

/* テキスト */
.skin-topNavText, .skin-topNavText:hover, .skin-topNavText:visited {
color: #eee;
}
/* アイコン */
.skin-topNavIcon {
color: #eee;
}

/*ブログナビ上部　表示高さ小さく*/
[data-uranus-component="blogNav"] {
line-height: 50px;
}
/*検索窓高さを30pxに */
[data-uranus-component="search"]>input {
line-height: 30px;
height: 30px;
}
/*検索窓表示位置調整*/
[data-uranus-component="search"] {
line-height: 50px;
}

/* コンテンツ背景、ヘッダー以下の背景色
グローバルナビ下の余白調整 */
.skin-blogBody, .skin-blogBodyInner {
margin-top: 20px;
}

/* 前後ページ送りボタン#D6E0F0 */
.skin-btnPaging {
border-color: #cccccc;
background-color: #fff ;
color: #0073a8;
border-radius:10px;
}
/* 前後ページ送りボタン（マウスオーバー、訪問済み） */
.skin-btnPaging:hover, .skin-btnPaging:visited {
color: #0073a8;
}
/* ページ送りの矢印アイコン*/
.skin-btnPagingIcon {
color: #0073a8;
}

/* メインエリア背景*/
.skin-bgMain {
background-color:rgba(157,220,220,0.15);
/* border-radius:10px;*/
}

/* サイドタイトル飾り*/
.skin-widgetTitle {
padding: 0.4em 1em;
color: #E67A7A;
border-left: solid 5px #7EC2C2;
border-bottom: solid 1px #d7d7d7;
}
#profile .skin-widgetTitle {
padding: 0.4em 1em;
color: #E67A7A;
border-left: solid 5px #7EC2C2;
border-bottom: solid 1px #d7d7d7;
}

/* サイド強調ボタン（フォローボタン）背景色変更 */
.skin-btnSidePrimary {
border-color: #7EC2C2;
background-color: #274B7C;
color: #fff;
}

/* 強調ボタン */
.skin-btnPrimary {
border-color: #7EC2C2;
background-color: #274B7C;
color: #fff;
}

a:visited {
color: #3970B5;
}

a {
color: #3970B5;
}

/*記事内枠線 */

.code {
margin-bottom: 1.5em;
padding: 0.5em 1em;
font-family: monospace;
font-size: 95%;
word-break: break-all;
border: 1px solid #ccc;
}

/* プロフィールの「プロフィール｜ピグの部屋」自己紹介を消す */
.skin-profileNav, .skin-profileStatus, .skin-profileMore{
display: none;
}
/* プロフィールの「続きを見る＞」を消す
.skin-profileMore {
display: none;
}*/
/* プロフィールの「全体ブログランキング」を消す */
#profile .skin-profile+div {
display: none;
}

次にトップページ記事リスト表示のリスト型

下記CSSを上記スタンダード型追記の後に記途でカスタマイズ完了。

/* リスト型トップページのタイムライン日付列を消す*/
.skin-timelineItem {
padding: 0;
}
.skin-timelineDate {
display: none;
}
.skin-timeline {
margin: 0 30px;
background: none transparent;
}
/*リスト型トップページ記事リスト背景色変更、角丸*/
.skin-borderQuiet{
background-color:rgba(157,220,220,0.15);
border-radius:10px;
padding: 30px;
}
/*リスト型トップページ記事リスト間の下線*/
[data-uranus-component="timelineSubItems"]>li{
border-bottom-width:10px;border-bottom-style:solid;padding-top:30px;padding-bottom:30px;
}
/*リスト型メッセージ表示幅余白調整 */
[data-uranus-component="message"] {
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding-left: 30px;
padding-right: 30px;
line-height: 1.75;
font-size: 14px;
width: 600px;
}

最後にトップページカード型

下記CSSを上記スタンダード型追記の後に記途でカスタマイズ完了。

/* カード型トップページ　カード枠(0, 0, 0, 0.22)*/
[data-uranus-component="tileItem"]{
color: #5d627b;
　 background-color:rgba(157,220,220,0.15);
border-top: solid 2px rgba(126,194,194,1) ;
box-shadow: 0 3px 5px rgba(126,194,194,0.6);
}

ブログナビ上部を非表示とし、グローバルナビを設置する。

グローバルナビは、下記サイトのを使用。

【アメブロカスタマイズ】グローバルナビを設置する方法新CSS編集用デザイン適用済みのアメブロで、フリースペースとCSSを使ってパソコン・iPad向け画面にグローバルナビ（グローバルメニュー）をmatsmoto.jp

下記CSSを上記各型追記の後に記途。

(3-3-a) ブログナビ上部　非表示
.skin-blogHeaderNav {
display:none;
}

/*********************************************************
(1)グローバルナビを設置する
https://matsmoto.jp/ameblo/global-nav.html
*********************************************************/
/* 各種設定*/
.skin-page, .skinBody {
--gnav-height: 30px; /* メニューバーの高さ */
}
.gnav {
--w: 1120px; /* メニューバーの横幅 */
--bg: #fff; /* メニューバーの背景設定 */
--bd: #fff; /* 枠線の色 */
--btn-n:10; /* ボタンの数 */
--btn-fg: #555; /* ボタンの文字色 */
--btn-bg: #9DDCDC; /* ボタンの背景設定 */
--btn-fg-h: ;#888; /* ボタンの文字色(ホバー時) */
--btn-bg-h: rgba(255,255,255,0.2); /* ボタンの背景設定(ホバー時) */
font-size: 11px;
}

/* サイドバーの原点をページの左上に設定 */
.skin-page, .skinBody {
position: relative;
}
.skin-columnA .skin-blogSubA,
.skin-columnB .skin-blogSubA,
.skin-columnC .skin-blogSubA,
.skin-columnC .skin-blogSubB,
.skin-columnD .skin-blogSubA,
.skin-columnD .skin-blogSubB,
.skin-columnE .skin-blogSubA,
.skin-columnE .skin-blogSubB {
position: static;
}
/* グローバルナビを設置 */
.skin-page, .skinBody {
padding-top: var(--gnav-height);
}
.gnav {
position: absolute;
top: 0;
left: 0px;
width: 100%;
background: var(--bg);
}
.gnav, .gnav * {
box-sizing: border-box !important;
}
.gnav >br,
.gnav >br~br,
.gnav ul >br,
.gnav li >br,
.gnav ul >br~br,
.gnav li >br~br {
display: none;
}
.gnav .menu {
display: flex;
margin: auto;
width: var(--w);
border-right: 1px solid var(--bd);
}
.gnav .menu >li {
width: calc(100% / var(--btn-n));
height: var(--gnav-height);
line-height: 1.25;
text-align: center;
overflow: hidden;
}
.gnav .menu li >a,
.gnav .menu li >span {
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
height: var(--gnav-height);
text-decoration: none;
color: var(--btn-fg);
background: var(--btn-bg);
border-left: 1px solid var(--bd);
}
.gnav .menu li >a:hover,
.gnav .menu li >span:hover {
opacity: 1.0;
cursor: pointer;
color: var(--btn-fg-h);
background: var(--btn-bg-h);
}
/*********************************************************
(2)グローバルナビをブログタイトル下に変更／(1)に追加
*********************************************************/
/* 各種設定*/
:root {
--gnav-header-h: 160px; /* ヘッダーの高さ */
}
/* グローバルナビをブログタイトルの下に移動する */
.skin-page {
padding-top: 0;
}
.skin-bgHeader {
margin-bottom: var(--gnav-h);
height: var(--gnav-header-h);
}
#gnav-main {
top: var(--gnav-header-h);
}
/* グローバルナビを標準ナビの下に移動する */
.skin-bgHeader {
margin-bottom: 0;
}
.skin-blogHeaderNav {
margin-bottom: var(--gnav-h);
}
#gnav-main {
top: calc(var(--gnav-header-h) + 110px);
}

■以下はHTMLの例で、フリースペースに記途。

アメブロ　スタンダード型カスタマイズ

Mon, 23 May 2022 20:15:18 +0900

CSS編集用デザインのスタンダード型（2カラム、右サイド）カスタマイズ例の紹介。

タイル型は↓こちら。

『アメブロCSS編集デザイン・カスタマイズ（新デザイン・タイル型）』当ブログカスタマイズ備忘録 /*■ ヘッダー背景色変更 */.skin-bgHeader {background-color: #E57F75;width: …ameblo.jp

リスト型は↓こちら。

『アメブロ　リストタイプ　カスタマイズ』CSS編集用デザイン（トップページ）リスト型のカスタマイズ例の紹介。スタンダード型は↓こちら。https://ameblo.jp/otog/entry-127…ameblo.jp

カスタマイズのやり方は↓こちら。

下記CSSを末尾に追記でカスタマイズ完了。

(コピペの際は下の広告を消してから行うと容易です。）

/* ヘッダー外側の背景色*/

body{
background-color: #393B44;
}

/* コンテンツ背景、ヘッダー以下の背景色*/
.skin-blogBody, .skin-blogBodyInner {
background-color: #393B44;
}

/* ヘッダー背景 */
.skin-bgHeader {
width: 1120px;
margin: auto;
height:200px;
background: #393B44;
}

/* ブログタイトル */
.skin-blogMainTitle {
color: #fff;
margin-bottom: 10px;
font-size: 27px;
}

/* ブログ説明文 */
.skin-blogSubTitle {
color: #fff;
font-size: 16px;
}

/* ヘッダータイトル左から表示 */
.skin-headerTitle {
padding: 50px 0 80px 80px;
text-align: left;
}

/* (3-3-a) ブログナビ上部
--------------------------------------------*/
/* 背景、境界線*/
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color:#8D93AB ;
width: 1120px;
margin: auto;
}
/* テキスト */
.skin-topNavText, .skin-topNavText:hover, .skin-topNavText:visited {
color: #eee;
}
/* アイコン */
.skin-topNavIcon {
color: #eee;
}

/* 前後ページ送りボタン */
.skin-btnPaging {
border-color: #cccccc;
background-color: #D6E0F0;
color: #333;
border-radius:10px;
}

/* 前後ページ送りボタン（マウスオーバー、訪問済み） */
.skin-btnPaging:hover, .skin-btnPaging:visited {
color: #333;
}

/* ページ送りの矢印アイコン*/
.skin-btnPagingIcon {
color: #333;
}

/* メインエリア（記事エリヤ）背景 */
.skin-bgMain {
background-color: #F1F3F8;
border-radius:10px;
}

/*画像に枠*/
.skin-bgMain img {
border: 3px solid #fff;
box-shadow: 0px 3px 8px rgba(51, 51, 51, 0.2);
height: auto;
max-width: 98%;
}

/*記事画像下1行空ける*/
.skin-entryInner img{
margin-bottom: 1em;
}

/* サイド背景*/
.skin-blogSubAInner{
background-color: #F1F3F8;
padding: 20px 0 0 20px;
border-radius:10px;
}

/* サイド表示幅を少し広げ、サイド右側に少し移動*/
[data-uranus-layout="columnB"] [data-uranus-layout="subAInner"]{margin-left:50px;margin-right:auto;width:320px;
}

/* サイドタイトル飾り*/
.skin-widgetTitle {
padding: 0.4em 0.5em;
color: #C5796D;
border-left: solid 5px #FFC0D3;
border-bottom: solid 1px #d7d7d7;
}

■つづいて背景1色とする場合

下記CSSを末尾に追記（左サイド、3カラムも使用可能です。）

.skin-titleLink, .skin-titleLink:hover, .skin-titleLink:visited {
color: #fafafa;
}
.skin-archiveNavTabs a.is-active, .skin-archiveNavTabs a.is-active:hover, .skin-archiveNavTabs a.is-active:visited {
color: #fafafa;
}

/* 記事タイトル */
.skin-entryTitle {
color: #fafafa;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 20px;
padding-bottom: 15px;
}

/* 「画像付き記事」「同じテーマの記事」などの見出し */
.skin-mainWidgetTitle {
color: #fafafa;
}

/* ヘッダー外側の背景色*/
body{
background-color: #393B44;
}

/* コンテンツ背景、ヘッダー以下の背景色*/
.skin-blogBody, .skin-blogBodyInner {
background-color: #393B44;
}

/* ヘッダー背景 */
.skin-bgHeader {
width: 1120px;
margin: auto;
height:200px;
background: #393B44;
}

/* ブログタイトル */
.skin-blogMainTitle {
color: #fff;
margin-bottom: 10px;
font-size: 27px;
}

/* ブログ説明文 */
.skin-blogSubTitle {
color: #fff;
font-size: 16px;
}

/* ヘッダータイトル */
.skin-headerTitle {
padding: 50px 0 80px 80px;
text-align: left;
}

/* (3-3-a) ブログナビ上部
--------------------------------------------*/
/* 背景、境界線*/
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color:#8D93AB ;
width: 1120px;
margin: auto;
}
/* テキスト */
.skin-topNavText, .skin-topNavText:hover, .skin-topNavText:visited {
color: #eee;
}
/* アイコン */
.skin-topNavIcon {
color: #eee;
}

/* メインエリア背景 */
.skin-bgMain {
background-color: #393B44;
}

/*記事画像に枠*/
.skin-entryInner img {
border: 3px solid #fff;
border: 3px double #746B56;
height: auto;
max-width: 98%;
}

/*記事画像下1行空ける*/
.skin-entryInner img{
margin-bottom: 1em;
}

/* サイド背景*/
.skin-blogSubAInner{
background-color: #393B44;
padding: 20px 0 0 20px;
}

/* サイドタイトル飾り*/
.skin-widgetTitle {
padding: 0.4em 1em;
color: #C5796D;
border-left: solid 5px #ffffa3;
border-bottom: solid 1px #d7d7d7;
}
#profile .skin-widgetTitle {
padding: 0.4em 1em;
color: #C5796D;
border-left: solid 5px #ffffa3;
border-bottom: solid 1px #d7d7d7;
}

/* サイド通常ボタン */
.skin-btnSide {
border-color: #e5e5e5;
background-color: #393B44;
color: #999999;
}
/* 通常ボタン */
.skin-btn {
border-color: #e5e5e5;
background-color: #393B44;
color: #999999;
}

/* フォローボタン*/
.skin-btnSidePrimary {
border-color: #404040;
background-color: #8D93AB;
color: #ffffff;
}
.skin-btnPrimary {
border-color: #404040;
background-color: #8D93AB;
color: #ffffff;
}

アメブロ　リストタイプ　カスタマイズ

Thu, 19 May 2022 07:54:31 +0900

CSS編集用デザイン（トップページ）リスト型のカスタマイズ例の紹介。

スタンダード型は↓こちら。

『アメブロ　スタンダード型カスタマイズ』CSS編集用デザインのスタンダード型（2カラム、右サイド）カスタマイズ例の紹介。タイル型は↓こちら。『アメブロCSS編集デザイン・カスタマイズ（新デザイン…ameblo.jp

タイル型は↓こちら。

カスタマイズのやり方は↓こちら。

トップページ

■ブログタイトル、ブログ説明文を中央表示から左側表示に変更。

■ブログナビ上部の表示幅をブログ表示幅に変更。

■記事一覧左側のトップタイムライン日付など非表示に変更。

■各所の背景色、文字色変更。

個別記事ぺージ

■画像に枠を付ける

下記CSSを初期CSS末尾に追記でカスタマイズ完了。

(コピペの際は下の広告を消してから行うと容易です。）

/* ヘッダー背景 */
.skin-bgHeader {
width: 1120px;
margin: auto;
height:200px;
background: #E28F83;
}

/* ブログタイトル */
.skin-blogMainTitle {
color: #fff;
margin-bottom: 10px;
font-size: 27px;
font-family: "HOKKORI",'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* ブログ説明文 */
.skin-blogSubTitle {
color: #fff;
font-size: 16px;
font-family: "HOKKORI",'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* ヘッダータイトル */
.skin-headerTitle {
padding: 50px 0 80px 80px;
text-align: left;
}

/* (3-3-a) ブログナビ上部
--------------------------------------------*/
/* 背景、境界線 */
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color: #4A503D;
width: 1120px;
margin: auto;
}
/* テキスト */
.skin-topNavText, .skin-topNavText:hover, .skin-topNavText:visited {
color: #eee;
}
/* アイコン */
.skin-topNavIcon {
color: #eee;
}

/* 記事一覧ページ背景レイアウト */
.skin-blogArchiveBody {
padding: 30px 30px 0 30px;
background-color:#FAF2DA;
border-radius:10px;
}

/* 前後ページ送りボタン */
.skin-btnPaging {
border-color: #cccccc;
background-color: #8E9775;
color: #eee;
}

/* 前後ページ送りボタン（マウスオーバー、訪問済み） */
.skin-btnPaging:hover, .skin-btnPaging:visited {
color: #eee;
}

/* ページ送りの矢印アイコン*/
.skin-btnPagingIcon {
color: #eee;
}

/* メインエリア背景 */
.skin-bgMain {
background-color: #FAF2DA;
border-radius:10px;
}

/*追加　画像に枠*/
.skin-bgMain img {
border: 3px solid #fff;
box-shadow: 0px 3px 8px rgba(51, 51, 51, 0.2);
height: auto;
max-width: 98%;
}

/*追加記事画像下1行空ける*/
.skin-entryInner img{
margin-bottom: 1em;
}

/* フォローボタン*/
.skin-btnSidePrimary {
background-color: #4A503D;
}
/*記事下フォローボタン*/
.skin-btnPrimary {
background-color: #4A503D;
}

/* サイドタイトル飾り*/
.skin-widgetTitle {
padding: 0.4em 1em;
color: #C5796D;
border-left: solid 5px #F08F00;
border-bottom: solid 1px #d7d7d7;
}
#profile .skin-widgetTitle {
padding: 0.4em 1em;
color: #C5796D;
border-left: solid 5px #F08F00;
border-bottom: solid 1px #d7d7d7;
}

/*サイドバー背景色変更、余白調整、角丸*/
.skin-blogSubAInner{
background-color: #FAF2DA;
padding: 20px 0 0 20px;
border-radius:10px;
}
/* サイド表示幅を少し広げ、サイド右側に少し移動*/
[data-uranus-layout="columnB"] [data-uranus-layout="subAInner"]{margin-left:50px;margin-right:auto;width:320px;
}

/* リスト型トップページのタイムライン日付列を消す */
.skin-timelineItem {
padding: 0;
}
.skin-timelineDate {
display: none;
}
.skin-timeline {
margin: 0 30px;
background: none transparent;
}

/*追加　トップページ記事リスト背景色変更、角丸*/
.skin-borderQuiet{
background-color: #FAF2DA;
border-radius:10px;
padding: 30px;
}

/*追加　トップページ記事リスト間の下線*/
[data-uranus-component="timelineSubItems"]>li{
border-bottom-width:10px;border-bottom-style:solid;padding-top:30px;padding-bottom:30px;
}

/* 追加　プロフィールの「全体ブログランキング」を消す */
#profile .skin-profile+div {
display: none;
}

/* メッセージ背景色は記事リストなどと同じとなる。それを変えたい時は下記 */
.skin-message {
padding: 30px;
background-color: #;
border-radius:10px;
}

●つづいて背景1色とする場合

下記CSSを初期CSS末尾に追記。それだけで完成。

/* (1-1) 基本テキスト全体
--------------------------------------------*/
/* 地色テキスト */
html {
color: #fafafa;
}

/* リンク */
a {
color: #fafafa;
}

/* 訪問済みリンク */
a:visited {
color: #fafafa;
}

/* 淡色テキスト */
.skin-textQuiet {
color: #999999;
}

/* 強調色テキスト */
.skin-textLoud {
color: #fff;
}
.skin-titleLink, .skin-titleLink:hover, .skin-titleLink:visited {
color: #fafafa;
}

.skin-archiveNavTabs a.is-active, .skin-archiveNavTabs a.is-active:hover, .skin-archiveNavTabs a.is-active:visited {
color: #fafafa;
}

/* 記事タイトル */
.skin-entryTitle {
color: #fafafa;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 20px;
padding-bottom: 15px;
}

/* 「画像付き記事」「同じテーマの記事」などの見出し */
.skin-mainWidgetTitle {
color: #fafafa;
}

/* ヘッダー外側の背景色*/
body{
background-color: #393B44;
}

/* コンテンツ背景、ヘッダー以下の背景色*/
.skin-blogBody, .skin-blogBodyInner {
background-color: #393B44;
}

/* ヘッダー背景 */
.skin-bgHeader {
width: 1120px;
margin: auto;
height:200px;
background: #393B44;
}

/* ブログタイトル */
.skin-blogMainTitle {
color: #fff;
margin-bottom: 10px;
font-size: 27px;
}

/* ブログ説明文 */
.skin-blogSubTitle {
color: #fff;
font-size: 16px;
}

/* ヘッダータイトル */
.skin-headerTitle {
padding: 50px 0 80px 80px;
text-align: left;
}

/* (3-3-a) ブログナビ上部
--------------------------------------------*/
/* 背景、境界線*/
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color:#8D93AB ;
width: 1120px;
margin: auto;
}
/* テキスト */
.skin-topNavText, .skin-topNavText:hover, .skin-topNavText:visited {
color: #eee;
}
/* アイコン */
.skin-topNavIcon {
color: #eee;
}

/* メインエリア背景 */
.skin-bgMain {
background-color: #393B44;
}

/*記事画像に枠
.skin-bgMain img
.entryBody img*/
.skin-entryInner img {
border: 3px solid #fff;
border: 3px double #746B56;
height: auto;
max-width: 98%;
}

/*記事画像下1行空ける*/
.skin-entryInner img{
margin-bottom: 1em;
}

/* サイド背景*/
.skin-blogSubAInner{
background-color: #393B44;
padding: 20px 0 0 20px;
}

/* サイドタイトル飾り*/
.skin-widgetTitle {
padding: 0.4em 1em;
color: #C5796D;
border-left: solid 5px #ffffa3;
border-bottom: solid 1px #d7d7d7;
}
#profile .skin-widgetTitle {
padding: 0.4em 1em;
color: #C5796D;
border-left: solid 5px #ffffa3;
border-bottom: solid 1px #d7d7d7;
}
/* サイド通常ボタン */
.skin-btnSide {
border-color: #e5e5e5;
background-color: #393B44;
color: #999999;
}
/* フォローボタン*/
.skin-btnSidePrimary {
border-color: #404040;
background-color: #8D93AB;
color: #ffffff;
}
.skin-btnPrimary {
border-color: #404040;
background-color: #8D93AB;
color: #ffffff;
}
.code {
margin-bottom: 1.5em;
padding: 0.5em 1em;
font-family: monospace;
font-size: 95%;
word-break: break-all;
border: 1px solid #ccc;
}
.skin-btn {
border-color: #e5e5e5;
background-color: #393B44;
color: #999999;
}
/* カード型トップページ　カード枠*/
[data-uranus-component="tileItem"]{ border-color: #8D93AB;border-width:2px;border-style:solid }

/* リスト型トップページのタイムライン日付列を消す */
.skin-timelineItem {
padding: 0;
}
.skin-timelineDate {
display: none;
}
.skin-timeline {
margin: 0 30px;
background: none transparent;
}

春バラ

Tue, 10 May 2022 20:41:09 +0900

都電荒川線沿線で春バラ見学

鉄色の旅

あいう

セピア色 小樽運河

BS放送の歌番組を見ていてセピア色が気になった。小樽の風景

アメブロデザイン 色変えセット

Webフォントを導入

キハ４０とアジサイ

紫陽花

アメブロ カスタマイズ シンプルブルー

アメブロ スタンダード型カスタマイズ

アメブロ リストタイプ カスタマイズ

春バラ

セピア色小樽運河

アメブロデザイン　色変えセット

アメブロ　カスタマイズ　シンプルブルー

アメブロ　スタンダード型カスタマイズ

アメブロ　リストタイプ　カスタマイズ