山根の無料メール講座始めました!

自由でのんびりとした人生を目指したい方は是非購読してみて下さい♪

カスタマイズ

【コピペで簡単】AFFINGER5の記事タイトルをオシャレにカスタマイズ!

投稿日:

こんにちは、山根です。

 

今回は、アフィンガー5の基本カスタマイズ機能以外で、

追加CSSを使ったカスタマイズ方法を紹介していきたいと思います。

 

 

今回紹介するのはコレ!

「トップページに表示される、各記事のタイトルをオシャレに魅せる方法!」

 

それでは詳しく解説していきましょう。

 

 

アフィンガー5カスタマイズ:記事タイトルをオシャレに魅せるってどういう意味?

 

この記事のタイトルだけ見ても、何のことか分かりにくかと思いますので、

簡単に説明すると、ココです↓↓↓ココを綺麗に魅せる方法を紹介します。

 

 

デフォルトの状態だと少しシンプル過ぎるので、

追加CSSを使って他サイトよりもオシャレにカスタマイズしてみましょう!

 

 

アフィンガー5カスタマイズ:記事タイトルをオシャレにする簡単な方法!

 

それでは手順を紹介していきます。

 

コピペだけで出来ますし、

追加CSS機能を使えば、

失敗してもサイトが壊れる心配もありませんので、

初心者でも安心してカスタマイズ出来ます。

 

 

「外観」⇒「カスタマイズ」をクリックし、下記の画面まで進みます。そして、

カスタマイズ画面の一番下にある「追加CSS」をクリック。

 

 

 

 

追加CSSを開くと、下記の画像のような、左に数字が書いてる空白のページ(今はコードが入力されています)が表示されますので、

その空白の部分にコードを書き加えていきます。そのコードが正しければリアルタイムでサイトに反映されるのです。

 

 

 

では、どんなコードをコピペすれば良いのかと言うと、

CSSのコードを無料で公開しているサイトがありますので、

そこからありがたくコピペさせて頂きます。

 

・業界では有名なサルワカさんのサイト⇒「おしゃれな見出しデザイン例まとめ」

 

 

ここから自由に好きなデザインのCSSコードをコピーして

自サイトの追加CSSに貼り付ければ、

あら簡単!

 

コピペだけで、素敵な記事タイトルに生まれ変わります♪

 

↓↓↓こんな感じ

 

 

 

 

ココが重要!CSSにコピペする際の注意点①

実は、アフィンガーの場合は

もうひと手間加えなければ、

記事タイトルに反映されません。

 

 

というのも、

アフィンガー5の場合は、

トップページの記事タイトルは

「h3」タグの扱いになりますので
(見出し3と同じ意味)、

 

 

コピーしたコード「h1」から「h3」に手打ちで変更する必要があります。

 

分かりやすく言うと、これを↓↓↓

h1 {
  color: #364e96;/*文字色*/
  border: solid 3px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

 

こう変えます↓↓↓(h1⇒h3)

h3 {
  color: #364e96;/*文字色*/
  border: solid 3px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

 

 

 

ただ、これだけなので誰でもできる作業ですね♪

 

 

CSSにコピペする際の注意点②

 

もう1つ注意点があります。

 

それは、h3タグを変更しているので、

記事タイトルだけではなく、

記事の本文で使用している「見出し3」のデザインも一緒に変更されてしまうのです。

 

 

それはそれでオシャレになると思うので、

特に問題はありませんが、

たまに、既存のカスタマイズ機能と複合してしまい、

変なデザインになる時がありますので、

そこだけ注意してください!

 

※プログラミングに詳しい方であれば、双方に反映させないやり方もわかるかも知れません。

 

 

アフィンガー5の記事タイトルをオシャレにカスタマイズする方法まとめ

 

アフィンガーは色々カスタマイズ出来るので、

本当に楽しいWPテーマです。

 

 

ただ、そのカスタマイズ性の高さによって

初心者の人はどれをどう設定すればいいのか迷いがち。

 

 

しかし、この記事を見ればわかるように、

「コピペだけで簡単に」

誰でもオシャレなカスタマイズが可能です。

 

 

自分は出来ないかも・・・

とか勝手に苦手意識を持たないで、

楽しくサイト運営していきませんか?

 

 

見に来てくれたお客さんに

少しでもインパクトを与えられたら

また見に来てくれるはず!

そういう意味でも、

お洒落なサイト作りに励んでみてはいかがでしょうか。

 


人気ブログランキング

↑クリックしてこのブログを応援。
正直に言います!ご迷惑でなければ押して欲しいです。山根の活力剤になります(笑)

 

当サイト限定!山根のAFFINGER5豪華特典のご案内

 

【当サイトだけの限定特典!】

当サイト経由でAFFINGER5を購入された方限定で豪華な特典をプレゼント!

ロールプレイングゲームのように、中ボス、ラスボスを倒して楽しくアフィリエイトで稼いでいく考え方!

一個一個の手順や課題を提案!ステップアップ式にクリアしていく為のチェックシート配布!

・3ヵ月で30万円稼いだノウハウ

・ヘッダー画像作成サービスなどなど!

詳しくは記事の最後をご確認下さい。目次で飛ぶ事も可能です♪

 

 

 

「本気」で「今の人生を変えたい人」に読んで欲しいメルマガ!

 

特別なスキルや才能もなく、

頭も良くない。

 

何かスポーツが得意なわけでもなく、

むしろ引っ込み思案で

地味な性格。

 

そんな「THR 凡人」の私が

「自由」を手に入れ、人生をがらりと変えた方法を

今だけ無料公開中!

人生はほんの少しのきっかけで

驚くほど変化します。

そのきっかけをあなたにも・・・・・・

 

 

このブログは、脱サラして、嫌な上司とは無縁の自由な暮らしを手にしたい!お金に不自由せず家族とのんびり暮らしたい!子供に誇れるかっこいい親になりたい!

と、”本気で”考えている方のブログです。

本気であればあるほど、覚悟があればあるほど、圧倒的に早く成功出来ます!

気になることがあれば、なんでもご相談下さい。私の知識の範囲で誠心誠意お答えいたします。

 

 

山根のお問い合わせはこちらから 一人で悩んでも何も解決はしませんからね♪

 

 

 

 

 

 

 

-カスタマイズ

Copyright© 山根のスローライフブログ , 2019 All Rights Reserved.