AmaDemoAmaDemoWEBマーケティングWordPressTOOLGADGETホームWEB【コピペOK】アプリーチのデザインをカスタマイズする【CSSを追記するだけ】2019/09/07SHAREツイートシェアはてブGoogle+PocketLINE「アプリーチって便利だけど、デザインが少しスッキリしすぎてる気がする。オシャレにカスタマイズする方法が知りたい。」こういった人向けの内容です。実際に僕もアプリーチにはお世話になっていますが、記事内のスペースに載っているだけのような印象でした。この部分をカスタマイズして変えてみたので、方法を実際に行った流れで共有していきます。線を太くしたい点線→実線にしたい枠線を左右にも入れたいカスタマイズ手順2:CSSの追記まとめアプリーチのデザインをカスタマイズする方法アプリーチのデザインはCSSを追記するだけです。行うべき手順は以下2つとなります。CSSの作成←ここはコピペでもOKCSSの追記←貼り付けるだけでOK言ってしまえばコピペのみで完結する内容なので、初心者の方でもわりと簡単です。いうわけで、順に流れをお伝えしていきます。カスタマイズ手順1:CSSを作成する結果として、僕の場合は以下のようなCSSにしました。15px;}}※実際に使用したのは「旧コード」ですが、「新コード」の方はそちらを使って進めていってください。実際に変更後のデザインは以下のような感じです。これをそのままコピーして使ってもいいですが、運営しているサイトによっては、「もう少しデザインを変えたい」と思う方もいると思います。ここからは、このコードをちょっとイジるだけで、サイトに合ったデザインに変える方法を解説しておきます。線の色は「#」の部分を変更すればOKです。参考としては以下のような感じですね。#ff6a05;こうすることで、以下のように変更されます。ちなみにラインは「上・下」で指定されているので、2つとも変更するようにしておきましょう。線を太くしたい線を太くしたい場合は「1px」の値を増やせばOKです。参考としては以下のような感じですね。#ff6a05;こうすることで、以下のように変更されます。点線→実線にしたい点線を実線にしたい場合は「dashed」を「solid」に変更すればOKです。参考としては以下のような感じですね。#ff6a05;こうすることで、以下のように変更されます。枠線を左右にも入れたい枠線を左右にも入れたい場合は「top・bottom」で分けずに、「border」のみにしてあげればOKです。参考としては以下のような感じですね。#ff6a05;こうすることで、以下のように変更されます。カスタマイズ例はざっくりですが、以上となります。気に入ったデザインができたら、作成したCSSを反映させていきましょう。カスタマイズ手順2:CSSの追記できあがったCSSを実際に追記していきます。可能であれば「子テーマ」に追記することをオススメしますが、分からなければメインテーマのCSSの最下部でもOKです。一応、子テーマの作成方法も過去に解説していますので、興味のある方は参考にしてみてください。Base】子テーマを作成してアップロードする方法それではCSSを以下の手順で追記していきましょう。STEP.1テーマのcssへ移動ワードプレス管理画面から「外観」→「テーマ編集」をクリックし、使用テーマのスタイルシート(style.css)を選択します。STEP.2cssに追記style.cssの最下部に、作成したCSSを追記しましょう。追記したら「変更して保存」をクリックします。これでアプリーチの表示デザインの変更は完了です。デザインが反映されない場合は、「コードのチェック」と「ブラウザ履歴の削除」を行ってみてください。まとめ今回はアプリーチの表示デザインのカスタマイズを行いましたが、ベースとなるCSSさえあれば、そこまで難しいモノではないと言うのが正直な感想ですね。ベースとなるCSSのデザインを参考に、自分のサイトに合ったカスタマイズをしてみて下さい。ちなみにアプリーチの「使い方や収益化方法」がイマイチ分からないという方は、過去の記事でも紹介していますので、1度目を通しておくといいかもしれません。»参考:【簡単すぎる】アプリ紹介する場合にキレイにリンクを貼る方法【アプリーチが便利です】というわけで今回の内容は以上です。ファイルが含まれていないサイトがあります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。