ガジェニュー

~iPhone・格安スマホとか~

【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

      2014/11/07    後で読む

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPress用のプラグインである「App Store Insert」の導入と設定、STINGER5でのカスタマイズをしましたのでこちらの手順をメモしておきます。こちらのプラグインでは投稿画面から簡単に下記のようなアプリの紹介を、アフィリエイトトークン付きで挿入できる便利ツールです。

▼サンプル

Twitter
カテゴリ: ソーシャルネットワーキング
現在の価格: 無料

挿入に関しては、対象のアプリを検索して「投稿に挿入」するだけです。また、CSSでデザインの調整もできてしまします。ということで早速見て行きましょう。

SPONSORED LINKS

App Store Insertの導入と設定

導入自体は簡単です。プラグインの新規追加より「App Store Insert」を検索して有効化しましょう。プラグインを有効化させた後は設定の変更をしていきます。
cap1WordPressの管理画面の設定→「App Store Insert」を選択し、自分に割り当てられているアフィリエイト・トークンを入力し、保存します。設定はこれだけです。

投稿への挿入に関しては、投稿画面の下記に下のようなものが追加されていますのでそこから行います。
cap2挿入したいアプリを検索して、挿入ボタンを押すだけ。簡単ですね。

挿入を押すと下記のようなコードが挿入をされます。

<div class="application_box clearfix">
     <a href="https://itunes.apple.com/jp/app/twitter/id333903271?mt=8&uo=4&at=10lrZw" target="itunes_store"><img src="http://a1390.phobos.apple.com/us/r30/Purple3/v4/a6/f5/91/a6f591bd-1b86-7a6d-0942-a203cc499747/mzl.ktacdzpf.100x100-75.png"></a>
     <a href="https://itunes.apple.com/jp/app/twitter/id333903271?mt=8&uo=4&at=ここがトークン" target="itunes_store"><strong>Twitter</strong></a><br>
     カテゴリ: ソーシャルネットワーキング<br />
     現在の価格: 無料<br clear="both" />
</div>

この状態だと少しシンプルなのでちょっとだけ自分のサイトに合うように調整しました。

App Store Insertの見栄えカスタマイズ

上のコードを見ていただくとわかるようにデフォルトで”application_box”というClassが設定されていますのでこちらの内容を書きかえていきます。ちなみにデフォルトの見た目はこんなイメージです。cap3うん、シンプルで綺麗です。

そして、デフォルトのCSSは下記のようになっています。

/* application_box */
.application_box {
	width: 100%;
	margin: 0 0 12px 0;
	display: block;
	float: left;
	font-size: 14px;
	color: #333;
}
.application_box img {
	width: 75px;
	height: 75px;
	margin: 0 6px 0 0;
	float: left;
}
.application_box a {
  color: #1e7eb8;
}
.application_box a:hover {
  color: #e84888;

こちらの記載に関してはプラグインの編集から確認することもできます。

こちらを直接弄っても良いのですが、今後の更新などを考えるとstyle.cssに別で記載したほうが良さそうでしたので子テーマのstyle.css一番下に下記のように記載しました。

/*Appleインサートのカスタマイズ用 
  application_box  */
.application_box {
	width: 90%;
	margin: 1em 5%;
	padding: 2% 2%;
	background-color: #fff4f8;
	border-radius:10px;
	overflow: hidden;
	margin: 0 auto;
	display: block;
	font-size: 14px;
	color: #333;
}

.application_box img {
	width: 80px;
	height: 80px;
	margin: 0 6px 0 0;
	float: left;
}
.application_box a {
  color: #1e7eb8;
}
.application_box a:hover {
  color: #e84888;
}

今回は背景をつけたのと内部余白の調整をしたのみです。個人的に本文とは別のコンテンツですのでしっかりと背景を指定してブロック感を出したかったのでこちらにしています。

で、カスタマイズ後の見た目がこちら

iMovie
カテゴリ: 写真/ビデオ
現在の価格: 500

これで、別のコンテンツだよーというのがはっきりしました。良かったよかった。

以上です。

今回はSTINGER5関係ないんじゃないのってお話もちょいとありますが、自分がSTINGER5にしてからやったカスタマイズなので、ちょっとは関係有るよね。というこで許してね(・∀・)

てな感じで。

 - STINGER5, WordPress, プラグイン , , , ,

  関連記事

wpop
WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

こちらのブログなのですがWordPressを使用して運用しています。今回は上の画 …

access201503
【アクセス数報告】2015年3月のPVとアフィリエイトの収益とか

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

simages_122214_110736_PM
【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指し …

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

simages_011615_064354_PM
【STINGER5カスタマイズ】AdSenseをiPhone6/6s Plus対応のレスポンシブにカスタマイズ。

久々のSTINGER5のカスタマイズ記事です。まぁ、厳密に言うとGoogle A …

icon_1r_192
【アクセス数報告】2015年7月のPVとアフィリエイトの収益とか

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

images
WordPressのセキュリティ強化!2段階認証を設定しよう!

つい最近の出来事ですが、年金基金から色々と情報の流出が問題となりましたね。担当者 …

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

Loading Facebook Comments ...

Message

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