【アメブロカスタマイズ】記事タイトルの色やデザインを変更する方法

この記事ではアメブロカスタマイズにおいて記事タイトルの色やデザインを変更する方法をご紹介していきます。

アメブロ記事のタイトル色やデザインを変更することによってユーザーからのクリック率を上げることが可能です。また、他のブログとの差別化を図っていくことができますので、アクセス数が伸び悩んでいる方はぜひ実践してみることをおすすめします。

CSS編集可能デザインにする

アメブロをカスタマイズして記事タイトルの色やデザインを変更する場合、CSS編集可能デザインにすることから始める必要があります。

パソコン版でログインした後に管理画面の設定から「デザイン変更」を選んでください。下のほうに「カスタム可能」があるので、こちらをクリックします。

そうすれば、CSS編集用デザインを選べるようになります。カラム数を選んで適用する必要がありますが、一般的なものは2カラムとなっていますので特に指定がなければこちらを選択しましょう。

なお、サイドバナーを目立たせたい場合は3カラムでも良いでしょう。適用した後には完了画面に遷移するので、最後に「CSSの編集をする」をクリックして完了となります。

CSS編集可能デザインが設定できたのであれば、コードを貼り付ける作業を行うことになります。具体的な手順については以下の通りとなります。

【コードの貼り付け方法】

/* サイドバータイトル */
.skin-entryTitle {
color:#19d42c;
border-bottom: 1px solid#239939;
}

上記のコードは「#19d42c」や「#239939」の色を変更することによって、様々な色にすることが可能です。

また、「border-bottom」の欄を編集することで棒線を二重線や点線、立体線などに変えることができますので、上記を元に編集してみることをおすすめします。

上記のCSSコードを活用することができますが、他の色に変えたい場合には特定のコードを変更することで実現可能です。

デザインなどをそのままに色だけ変えたいと思っている場合、カラーコードを変更していきます。「color」の文字の後に「#」から始まる英数字がありますが、この#と英数字がカラーコードと呼ばれています。

これを任意で変更すれば色のみ変えることが可能です。カラーコード一覧は見本と一緒にインターネット上でも公開されています。見本を確認しながら自分のサイトに合うものを選び、変更してみましょう。

コードを変えた後に保存を行えば、該当する場所の文字の色が自分で設定したものになっているはずです。

下線の種類や太さを変えたい場合には色を変更するときと同じ要領で行うことができます。

「border-bottom」という記述の後には「1px」などと書かれていますが、ここの数値を大きくすれば、下線を太くすることができます。多くの場合は、その後ろにカラーコードが書かれていますが、これを変更すれば線の色だけ変更することが可能です。

種類を変えたいときには文字の大きさを示す「px」の後ろにある「solid」を変えます。solidは1本線を示すものであり、「double」は2本線、「dashed」は破線、「dotted」は点線です。

種類や太さなどを変更すれば、効果的な見た目にすることができるので、レビューを確認しながらサイトに合う適切なものを選んでみると良いでしょう。

アメブロカスタマイズにおいて記事タイトルの色やデザインを変更する方法をご紹介してきましたが、いかがでしたか？

記事タイトルのカスタマイズは簡単に行えますので、他のブログとの差別化のためにも実践してみることがおすすめです。また、記事タイトル以外にもカスタマイズできる箇所は多々ありますので、その辺りも含め取り組んでみることが賢明です。