こんにちは、山根です。
今回は、アフィンガー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 凡人」の私が
「自由」を手に入れ、人生をがらりと変えた方法を
今だけ無料公開中！
人生はほんの少しのきっかけで
驚くほど変化します。
そのきっかけをあなたにも･･････
このブログは、脱サラして、嫌な上司とは無縁の自由な暮らしを手にしたい！お金に不自由せず家族とのんびり暮らしたい！子供に誇れるかっこいい親になりたい！
と、”本気で”考えている方のブログです。
本気であればあるほど、覚悟があればあるほど、圧倒的に早く成功出来ます！
気になることがあれば、なんでもご相談下さい。私の知識の範囲で誠心誠意お答えいたします。
山根のお問い合わせはこちらから 一人で悩んでも何も解決はしませんからね♪
