アメブロでCSS編集できない場合に確認すべき２事項

この記事ではアメブロでCSS編集できない場合に確認すべき２事項についてご紹介していきます。

アメブロではテーマや記事部分のCSSの編集が可能になっていますが、CSS編集できない時があります。その時に確認するべき２つの重要なことをお伝えしますので、ぜひ参考にしてみてください。

1 アメブロの２つのCSS編集とは？
2 テーマのCSS編集
- 2.1 アメブロのテーマでCSS編集ができないものがある
- 2.2 CSS編集ができるテーマ
3 記事部分のCSS編集
- 3.1 CSSを直接HTMLへ書き込む
4 手順１：文章をブロック要素とする
- 4.1 ブロック要素のやり方
5 手順２：ブロック要素に直接スタイルを指定する
- 5.1 ブロック要素に直接スタイルを入れるやり方
6 まとめ

アメブロの２つのCSS編集とは？

アメブロのCSS編集というのは大まかに分けて２つあり、

テーマのCSS編集
記事部分のCSS編集

これらに部類されます。

アメブロのCSS編集といってもどちらの編集なのかを理解し、実施していくことをおすすめします。なお、テーマ編集の場合にはCSS編集ができないものがありますが、これはすでにデザイン済みとなっているものです。

また、記事中のCSS編集は反映しないということはありませんので、下記で解説している手順を踏めばデザインを反映させることが可能です。

テーマのCSS編集

アメブロの利用者の中には、様々な美しいデザインを利用して非常に効果的なブログを構築している方が増えてきています。このような形にすると見る側の興味を引きつけ、閲覧数を向上させることができるでしょう。

アメブロではこのようなデザインを簡単に行うためにCSSと言う機能を用いており、これを自分の利用したい形に編集する機能を持っていることで自分なりの効果を実現することができます。

アメブロのテーマでCSS編集ができないものがある

アメブロにはCSSを用いて編集ができないものも存在しており、この場合には自分で好きな形に変更をして利用することができません。

ですが、このテーマは元々アメブロ側がデザインを実施しており、すでにデザイン済みというわけです。

CSS編集ができるテーマというのは真っさらな状態でゼロから自分でデザインを施していく必要があります。例えば、ヘッダーの作成や色の変更、２カラムや３カラムの幅など様々な部分でカスタマイズが可能です。

ゼロからデザインを構築していくのが手間になる場合にはすでに出来上がっているデザインをセンタすることをおすすめします。

関連記事アメブロのテーマ編集を簡単に行う方法を解説

2021.06.17

CSS編集ができるテーマ

【CSS編集できるテーマにする方法】

アメブロへログイン
ブログ管理をクリック
デザインの設定をクリック
「他のカテゴリからブログデザインを探す」からカスタム可能をクリック
希望するテーマを選択し適応をクリック
CSS編集が可能なテーマへの変更が完了

記事部分のCSS編集

記事部分のCSS編集とは記事のところへデザインを入れるということになります。

例えば、見出しや枠線、申し込みフォームボタン等、CSSでデザインを加えることによって記事全体が見やすくなります。色やデザイン、幅など様々な部分で設定が可能になっています。

ただし、一般的なブログとやり方が異なりますので、下記で解説している手順を踏むことをおすすめします。

通常の場合、HTMLとCSSは分けて記載されますが、アメブロの場合にはCSSを呼び出す機能を備えていませんので、HTMLへ直接CSSを記載する必要があります。

CSSを直接HTMLへ書き込む

アメブロの記事部分でデザインを構築する場合にはCSSを直接HTMLへ書き込むと言う方法を選択する必要があります。

アメブロを作成する際には通常編集画面でオリジナルの編集ツールを利用し、その表示を設定していく形になりますが、直接HTMLを書き込むと言う編集画面も存在しています。

これを利用すると複雑な画面の構成を直接設定することができるようになるため、自分なりのオリジナルのデザインを実現することができるのが特徴です。

これを利用するとアメブロにあらかじめ用意されているCSSではなく、自分で独自に作成したCSSを使うことができます。

関連記事【2024年版】アメブロ集客を加速させる5つのライティング戦略を解説

2024.07.17

手順１：文章をブロック要素とする

アメブロのデザインは、様々な文章を罫線等で囲んで作成すると言うケースが少なくありません。CSSは実際には文章の上に様々な装飾を上からかぶせるようなイメージとなっていますが、この場合にはそのデザイン自体をあらかじめ全体像として決めておく必要があります。

CSSが上手に利用することができない場合には文章をブロック要素とし、これに様々な図柄を追加すると言う構成にすることによって独自のデザインを実現することができます。

CSSのようにワークを上からかぶせると言う仕組みではなく、文字と同じように装飾を記入すると言う構造となるため、非常に簡単に利用できるのが特徴です。

またこの仕組みでは、CSSでは実現できない複雑な装飾も実現できるのがメリットです。

ブロック要素のやり方

ブロック要素にする方法としては「DIVタグ」を活用することです。

<div></div>で囲み枠で表示したい部分を挟む

<div>
<p>このテキストをタグで挟みます</p>
<p>このテキストをタグで挟みます</p>
</div>

<div>という文字を半角英数字で入力すると、自動的に閉じタグ（</div>）が入力されます。

手順２：ブロック要素に直接スタイルを指定する

最もシンプルな方法はブロック要素に直接スタイルを指定する方法です。これを行うことで様々な文字の装飾やその他の技法を直接利用することができるようになり、CSSの制限を受けずに自由なデザインを実現することができます。

CSSはアメブロの作成ツールにおいて比較的簡単にデザインを実現するための基本的なフレームであることから、複雑なデザインなどは実現しにくい構造となっています。

しかし、HTMLを直接入力することでこれらの制限を無視して様々な装飾を実現することができるようになるため、非常に便利です。

またこの方法を利用することで個性的なものを作り出すことができるため、他の利用者との差別化を図ることもできるのがメリットです。

ブロック要素に直接スタイルを入れるやり方

ブロック要素に直接スタイルを入力する方法は上記で解説したdivタグの後に下記のようなタグを入れることです。

「style=””」入れる

<div style="ここにCSSを入力します">
<p>このテキストをタグで挟みます</p>
<p>このテキストをタグで挟みます</p>
</div>

例題
例えば、以下のようなデザインを指定したい場合には、下記に記載のコードを貼り付けてください。

このテキストをタグで挟みます

<div style="padding: 0.5em 1em; 
margin: 2em 0; 
font-weight: bold; color: #6091d3;
background: #FFF; 
border: solid 3px #6091d3;
border-radius: 10px;">
<p>このテキストをタグで挟みます</p>
<p>このテキストをタグで挟みます</p>
</div>

【上記のコードの補足説明】