アメーバオウンドCSS機能(PC用記事)

今日はアメブロの更新をお休みして

アメーバオウンド側のCSS機能を編集していたのですが..

背景の変更が出来ない！笑

恐らくMAGGIEというテーマを使用してるのですが

これの編集機能がほとんどブロック(変更不可)

されているのでそのせいかな？と‥

まぁ、まだイマイチわからないので

近日中に運営側へと問い合わせる事になりそうです。

運営さん、お世話になります┏Ｏ))　ﾍﾟｺｯ

で、色々と調べていて活用したのですが、また調べる

ってのも嫌なので個人的に使用したコードだけですが

ここに書き残しておこうと思います。笑

因みにコードはアメーバオウンドのログイン後のページから

サイト管理画面一覧のカスタマイズその中のCSSカスタマイズ

から編集可能でコピーして貼り付けるだけで済みます。

・ボタンの形変更

.btn__item { border-radius: 24px; }

ノーマルな状態だと四角くて角がありますよね？

その角を無くして丸くするコードです。

・ボタンに色を加える方法

.u-btn-bdr-clr { border-color: #0000000; color: #fff; border-radius:5px; background: #0000000; /* Old browsers */ background: -moz-linear-gradient(top, #ffa035 0%, #0000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffa035 0%,#0000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffa035 0%,#0000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }

↑今現在は黒いボタンです。

これは少しだけ厄介です。

まず自分の使用してるテーマを覚えておいてください。

テーマによってコードが違うみたい？

なのでコチラのサイト見て調べてください。

調べたら張り付けて色見本から御自分のお好きな色

を選び少しいじらないといけません。

いじるのは#0000000の部分

まず、０を減らしたり増やしたりしてみてください。

そうすると色が変わるので分かりやすくなると思います。

※あとは色見本からコピーしてきて

貼り付けて同じように値をいじるだけです。

・日記の記事の日付を消せる

.blog-article__header{ display:none; } 

.page__main--blog-detail .blog-article__content{ padding-left:0; }

これ意外と必要かも？

で、ここに書いた内容はほとんどヘルプからの書き写‥

え？じゃあ、なんで書いたのかってですか？

このヘルプページ行くとわかるのですが..

コピー出来ないんですよね^^;

なので、コピー出来る様にしておいた方が

後々便利ではないかな?と思い書いてます。

法則性が見えたと思いますが

.英語～で始まり｛｝で終わるのでその法則だけ

覚えておけば万が一記入漏れがあった場合にも

すぐ対処できるんじゃないかな？と思います。

なんか、このコードの張り付けとかやってると

ゲームのチートやってる感覚に‥笑

やったことある人だとこの感覚分かってくれそう。。

これもカスタマイズ＝裏技みたいなもんですけどね^^

また何か使えそうなCSS機能見つけたら

そのうち新しく記事を書くか

この記事に追記していきたいと思います。