【コピペOK】アプリーチのデザインをカスタマイズする【CSSを追記するだけ】

「アプリーチって便利だけど、デザインが少しスッキリしすぎてる気がする。。。もっとオシャレにカスタマイズする方法が知りたい。」

こういった人向けの内容です。

実際に僕もアプリーチにはお世話になっていますが、記事内のスペースに載っているだけのような印象でした。

この部分をカスタマイズして変えてみたので、方法を実際に行った流れで共有していきます。



アプリーチのデザインをカスタマイズする方法

アプリーチのデザインはCSSを追記するだけです。

なので行うべき手順は以下2つとなります。

  • CSSの作成←ここはコピペでもOK
  • CSSの追記←貼り付けるだけでOK

言ってしまえばコピペのみで完結する内容なので、初心者の方でもわりと簡単です。

というわけで、順に流れをお伝えしていきます。

カスタマイズ手順①:CSSを作成する

結果として、僕の場合は以下のようなCSSにしました。

#appreach-box{
 border-top:1px dashed #516ab6; /*上線の色*/
 border-bottom:1px dashed #516ab6; /*下線の色*/
}
#appreach-box{
padding:10px 20px;
margin:20px;
}
#appreach-appname{
font-weight:bold;
font-size:16px;
color:#555;
padding-bottom:5px;
}
#appreach-box img,
#appreach-box p{
margin:0;
padding:0;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
color:#aaa;
font-size:12px;
margin-bottom:10px;
}
.appreach-powered a{
color:#aaa;
}
.appreach-links{
margin-top:8px;
}
@media only screen and (max-width: 786px){
#appreach-box{
margin:20px 0;
padding:10px 5px;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
font-size:11px !important;
}
.appreach-powered,
#appreach-price,
#appreach-developer{
margin-bottom:10px;
}
#appreach-appname{
font-size:15px;}
}
.appreach{
border-top:1px dashed #516ab6; /*上線の色*/
border-bottom:1px dashed #516ab6; /*下線の色*/
}
.appreach {
text-align: left;
padding: 25px;
margin:20px;
overflow: hidden;
}
.appreach:after {
content: “”;
display: block;
clear: both;
}
.appreach img,
.appreach p {
margin: 0;
padding:0;
}
.appreach a:after {
display: none;
}
.appreach__icon {
float: left;
border-radius: 10%;
overflow: hidden;
margin: 0 3% 0 0 !important;
width: 25% !important;
height: auto !important;
max-width: 120px !important;
}
.appreach__detail {
display: inline-block;
font-size: 20px;
line-height: 1.5;
width: 72%;
max-width: 72%;
}
.appreach__detail:after {
content: “”;
display: block;
clear: both;
}
p.appreach__name {
font-size: 16px;
color:#555;
padding-bottom:10px;
font-weight:bold;
line-height: 1.5em !important;
max-height: 3em;
overflow: hidden;
}
.appreach__info {
font-size: 12px !important;
color:#888;
}
.appreach__info a{
color:#aaa;
}
.appreach__developper, .appreach__price {
margin-right: 0.5em;
}
.appreach__posted a {
margin-left: 0.5em;
}
.appreach__links {
float: left;
height: 40px;
margin-top: 15px;
white-space: nowrap;
}
.appreach__aslink img {
margin-right: 10px;
height: 40px;
width: 135px;
}
.appreach__gplink img {
height: 40px;
width: 134.5px;
}
@media only screen and (max-width: 786px){
.appreach{
margin:20px 0;}
.appreach__info {
font-size: 11px !important;}
p.appreach__name {
font-size: 15px;}}

※実際に使用したのは「旧コード」ですが、「新コード」の方はそちらを使って進めていってください。

実際に変更後のデザインは以下のような感じです。

これをそのままコピーして使ってもいいですが、運営しているサイトによっては、「もう少しデザインを変えたい」と思う方もいると思います。

なのでここからは、このコードをちょっとイジるだけで、サイトに合ったデザインに変える方法を解説しておきます。

線の色を変えたい場合

線の色は「#」の部分を変更すればOKです。

参考としては以下のような感じですね。

  • border-top:1px dashed #516ab6;
    border-bottom:1px dashed #516ab6;
  • border-top:1px dashed #ff6a05;
    border-bottom:1px dashed #ff6a05;

こうすることで、以下のように変更されます。

ちなみにラインは「上・下」で指定されているので、2つとも変更するようにしておきましょう。

線を太くしたい

線を太くしたい場合は「1px」の値を増やせばOKです。

参考としては以下のような感じですね。

  • border-top:1px dashed #ff6a05;
    border-bottom:1px dashed #ff6a05;
  • border-top:2px dashed #ff6a05;
    border-bottom:2px dashed #ff6a05;

こうすることで、以下のように変更されます。

点線→実線にしたい

点線を実線にしたい場合は「dashed」を「solid」に変更すればOKです。

参考としては以下のような感じですね。

  • border-top:2px dashed #ff6a05;
    border-bottom:2px dashed #ff6a05;
  • border-top:2px solid #ff6a05;
    border-bottom:2px solid #ff6a05;

こうすることで、以下のように変更されます。

枠線を左右にも入れたい

枠線を左右にも入れたい場合は「top・bottom」で分けずに、「border」のみにしてあげればOKです。

参考としては以下のような感じですね。

  • border-top:2px solid #ff6a05;
    border-bottom:2px solid #ff6a05;
  • border:2px solid #ff6a05;

こうすることで、以下のように変更されます。

カスタマイズ例はざっくりですが、以上となります。

気に入ったデザインができたら、作成したCSSを反映させていきましょう。

カスタマイズ手順②:CSSの追記

できあがったCSSを実際に追記していきます。

可能であれば「子テーマ」に追記することをオススメしますが、分からなければメインテーマのCSSの最下部でもOKです。

一応、子テーマの作成方法も過去に解説していますので、興味のある方は参考にしてみてください。

»参考:【Xeory Base】子テーマを作成してアップロードする方法

それではCSSを以下の手順で追記していきましょう。

  • STEP.1
    テーマのcssへ移動

    ワードプレス管理画面から「外観」→「テーマ編集」をクリックし、使用テーマのスタイルシート(style.css)を選択します。

  • STEP.2
    cssに追記

    style.cssの最下部に、作成したCSSを追記しましょう。
    追記したら「変更して保存」をクリックします。

これでアプリーチの表示デザインの変更は完了です。

デザインが反映されない場合は、「コードのチェック」と「ブラウザ履歴の削除」を行ってみてください。

まとめ

今回はアプリーチの表示デザインのカスタマイズを行いましたが、ベースとなるCSSさえあれば、そこまで難しいモノではないと言うのが正直な感想ですね。

なので、ベースとなるCSSのデザインを参考に、自分のサイトに合ったカスタマイズをしてみて下さい。

ちなみにアプリーチの「使い方や収益化方法」がイマイチ分からないという方は、過去の記事でも紹介していますので、1度目を通しておくといいかもしれません。

»参考:【簡単すぎる】アプリ紹介する場合にキレイにリンクを貼る方法【アプリーチが便利です】

というわけで今回の内容は以上です。

オススメ【初心者向け】ゲームブログを収益化する方法+運営のコツを解説

オススメ【超初心者向け】ワードプレスでのブログの書き方、公開までの流れを解説する



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA