こんにちは、yujiです！WordPressで立ち上げたブログを自分なりにデザインしています。
「ブログ初心者なりに、ブログのアピールエリアをおしゃれにデザインしてみたい。」
WordPressのテーマの多くは、隅々まで洗練されたデザインが行き届いていて本当に使いやすいものばかりです。
しかし多くの人が同じテーマを使っているので、どうしてもブログの雰囲気が似てきてしまいます。
そんな時、WordPressの醍醐味として、ちょっとした色味や幅の変更など、自分の好みに合わせてデザインすることができます！
ということで、この記事ではブログ初心者でもできる『アピールエリア』のカスタマイズを紹介します。
①【記事からお金を発生させよう】ブログ収益化のために絶対に必要な方法をすべて解説します。
②【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！
③【凍結しました】『Twitter自動化ツール』をおすすめできない本当の理由【1000フォロワーまでの正しい攻略法をすべて解説します】
『アピールエリア』完成形はこちらです。
アピールエリアとは、ページトップに表示されている「詳しいプロフィールはこちら」と書かれている部分です。目立つ場所に表示されるので、名前の通り”強めのアピール”ができます。
このページにも使われているとおり、完成形は以下の通り。
✔PC表示
✔モバイル表示
以上のような『プロフィール』について、コピペでできるカスタマイズを紹介します。デザインは、モバイル表示にも対応しています。
※このブログはWordPress/Cocoonをベースにカスタマイズしています。
アピールエリアの設定方法
WordPressメニュー「Cocoon設定」の「アピールエリア」を開き、アピールエリアを表示するページなどを選択します。
また、エリア背景色・ボタン色のみ色を統一して選択してください。デザインなどの各項目については、style.cssでカスタマイズするのでデフォルトでOKです。
以上で設定は完了です。
コードはこちらです。
「外観」の「テーマエディター」から「style.css」を開き、以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。
✔style.cssにコピペするコード
/************************************
** アピールエリア
************************************/
.appeal{
padding:.1em 0 .2em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:0px;
max-height:30px;
}
div.appeal-content{
padding:0;
}
.appeal-content{
background-color:#8b968d; /*背景の色をここで変更します*/
margin:auto;
max-width:100%;
}
a.appeal-button {
color: #fff!important;
font-size:.85em;
font-weight:normal;
box-shadow: none;
padding:0 23em 0;
margin:0;
max-width:100%;
font-weight:bold;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
color: #fff!important;
transform:none;
box-shadow: none;
}
コピペができたら「ファイルを更新」をクリックします。
これで『アピールエリア』のカスタマイズは完了です！
この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました！
・【その画像の著作権、大丈夫ですか？】僕がおすすめする『安心のフリー素材サイト』9選！
・【記事からお金を発生させよう】ブログ収益化のために絶対に必要な方法をすべて解説します。
・【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！
・【凍結しました】『Twitter自動化ツール』をおすすめできない本当の理由【1000フォロワーまでの正しい攻略法をすべて解説します】
コメント