この記事を読むのに必要な時間は約 2 分です。
パソコンで記事を書く時にいろんなツール使うと思いますが・・・
CSS(カスケードスタイルシート)は、構造化文書などにおける表示形式を制御するしくみ。 見栄えと構造を分離するという目的で提唱された。
参考： WiKiペディアWiKiペディア
アメブロの中では管理画面のデザイン設定の中でおおまかなCSS(カスケードスタイルシート)を設定するようになっています。
赤枠の部分からですね
基本、CSS(カスケードスタイルシート)を編集するにはCSS編集用デザインを選んでおきます。
こちらで記事の中でよく使うCSS(カスケードスタイルシート)を書いておくという方法が１つあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 見出しスタイル */ h2.balloon { clear:both; display:block; position:relative; margin:50px 0 22px; padding:.5em 18px .5em; width:auto; min-width:115px; color:#fff; text-align:left; font-size:20px; font-weight:400; background:#191970; z-index:0; border-bottom:0; } h2.balloon:after { content:""; position:absolute; bottom:-10px; left:30px; margin-left:-10px; display:block; width:0px; height:0px; border-style:solid; border-width:10px 10px 0 10px; border-color:#191970 transparent transparent transparent; } h2.konnuki {clear:both; display:block; position:relative; margin:50px 0 22px; padding:.5em 18px .5em; width:auto; min-width:115px; color:#fff; text-align:left; font-size:20px; font-weight:400; background:#191970; z-index:0; border-bottom:0;} h2.bluenuki {clear:both; display:block; position:relative; margin:50px 0 22px; padding:.5em 18px .5em; width:auto; min-width:115px; color:#fff; text-align:left; font-size:20px; font-weight:400; background:#0000ff; z-index:0; border-bottom:0;} /* 囲み枠 */ .kokuban {word-break:break-all;color:#fff;background-color:#140;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #020 inset;text-shadow:0px 0px 2px #000;} .wakubluet {margin-left:8px; padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold;border-radius:5px;} .wakublue {border:2px solid #000066; padding:25px 12px 10px; font-size:1em;border-radius:5px;} .kakubluet {background:#0000ff; border:1px solid #0000ff; padding-left:10px; font-size:1.16em;} .kakublue {border:1px solid #0000ff; padding:10px; font-size:1em;} |
具体的な使い方は、下記のようにします。
|
1 2 3 4 |
<h2 class="balloon">記事紹介</h2> <div class="wakublue"> 記事の紹介を入れる </div> |
もう１つは、記事の中で直接記入する方法があります。
具体的な使い方は、下記のようにします。
|
1 2 3 4 |
<h2 style="padding: 25px 12px 15px; margin-top: 0px; border-radius: 5px; border: 2px solid #0000ff;">記事紹介</h2> <div style="border:1px solid #0000ff; padding:10px; font-size:1em;"> 記事紹介の内容 </div> |
アメブロでは上記の書き方が多いと思いますが、何度も記事投稿するときに文字数制限に引っかかるようであれば上のやり方を使われる方がいいと思います。
アメブロのことならくまはちＬＡＢにお任せください。
 |
 |
 |
The following two tabs change content below.
神戸市にて事務所を構えSNSを活用したアメブロやWordPressの活用法をメインにリスト化を初心者の方でもできるパッケージの開発等を手がける。
オーナーくまはちは、パソコン歴30年ホームページ制作歴20年。
自身もアメブロやFC2・WordPressなどいろいろなブログサービスを活用しながら仕事に結びつく方法としてメルマガ・LINE@などの登録などで潜在見込み客を見込み客に見込み客をお客様にする方法を開発。
ブログからだけでなくFacebookやTwitterからの集客も継続して行っております。
お問い合わせは、FacebookメッセージからでもOKですよ。
やってきた中で痛切に感じるのは、我々制作会社は、提案できるのは当然のこととして個人事業主や企業のためになるWEBコンサルティングができなければダメだなっていうのがこれまでの結果です。
制作などの良し悪しを決めるのは、事前のヒアリングとどれだけクライアントならではの良さを引き出せるのかということなのです。
最新記事 by くまはちLAB (全て見る)
- アメブロに文字制限あるのご存知ですか？ - 2019年4月27日
- CSSとは？？？ - 2019年4月27日
- アメブロで記事を書く - 2019年1月17日
- 記事作成時に気をつけたいこと - 2019年1月13日
- アメブロでPing送信を設定する - 2019年1月10日
