はてなブログでパソコンとスマホ(iPhone,Android)で別の記事(アプリ)を表示する方法

はてなブログでオススメ記事を紹介する時に

スマホで見ている人にもPC向けの記事を紹介したりしていませんか?

またはAndroidで見てる人にもiPhone用のアプリリンクを表示していませんか?

今回はスマホで閲覧している人とPCで閲覧している人で

別々のオススメ記事を紹介する方法

そしてAndroidとiPhoneで別々のアプリを紹介する方法を解説します。

 

この記事のコードはモーリーさんの

はてなブログでPCとスマホで内容を変更する! – モーリーのメモ

を参考にしています。

 PCとスマホだけで分ける場合

まずは編集画面で

PCに紹介したい記事とスマホで紹介したい記事を両方貼り付けます。

f:id:mikunimaru:20171004101927j:plain

次に、HTML編集に移行します。

 下記のコードの

「スマホ向け」「PC向け」の部分にそれぞれのHTML部分を貼り付けます。

<p>
<script>// <![CDATA[
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf(‘iPhone’) > -1 || _UA.indexOf(‘iPad’) > -1 || _UA.indexOf(‘iPod’) > -1 || _UA.indexOf(‘Android’) > -1) {
document.write(‘「スマホ向け」’);
}else{
document.write(‘「PC向け」’);
}
})();
// ]]></script>
</p>

 

f:id:mikunimaru:20171004102013j:plain

完成例↓(PCではVivaldiの紹介記事、モバイルではFirefoxの紹介記事になっています)

AndroidとiPhone(iOS)とPCで別々のリンクを紹介したい場合

 上記と同じ要領で今度は↓のコードを使います。

<p>
<script>// <![CDATA[
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf(‘iPhone’) > -1 || _UA.indexOf(‘iPad’) > -1 || _UA.indexOf(‘iPod’) > -1 ) {
document.write(‘iPhone向け」’);
}else if (_UA.indexOf(‘Android’) > -1) {
document.write(‘「Android向け」’);
}else{
document.write(‘「PC向け」’);
}
})();
// ]]></script>
</p>

これでiPhone(iOS)とAndroidとPCで別々の記事を表示する事が可能です。

表示例(スマホではAbemaTVのそれぞれのアプリ、PCではAbemaTVの公式サイトを表示)

この時の注意点は「実践的使い方」の項目で解説します

おまけ

更に応用編として

PCでもブラウザがVivaldiの時に別の表示をする。といった事も可能です。

<p>
<script>// <![CDATA[
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf(‘iPhone’) > -1 || _UA.indexOf(‘iPad’) > -1 || _UA.indexOf(‘iPod’) > -1 ) {
document.write(‘iPhone向け」’);
}else if (_UA.indexOf(‘Android’) > -1) {
document.write(‘「Android向け」’);
}else if (_UA.indexOf(‘Vivaldi’) > -1){
document.write(‘「Vivaldiブラウザ向け」’);
}else{
document.write(‘「Vivaldiブラウザ以外のPC向け)」’);
}
})();
// ]]></script>
</p>

 

表示例です。

iPhone、Android、VivaldiブラウザのPC、それ以外のPCで違う記事が表示されます。

 

ブラウザ判別の際に参考にした記事です。

実践的な使い方(Androidにはgoogleアプリ、iOSにはAppストアアプリを紹介)

早速本題に入ります。

これを応用するとAndroidで使っている人にはAndroidアプリだけ

iOSで見ている方はにiOS用のアプリだけを紹介する事が出来ます。

 

今回も一度編集でそれぞれのアプリURLを貼り付けてから

HTML編集でコードを抽出します。

この場合はHTML編集から複数行をコピーするとなりますが

改行部分は削除してからスクリプト内に貼り付けて下さい。

f:id:mikunimaru:20171004102157j:plain

表示例↓(PCでは両方表示されます)

 

これによって読み手に使い道のあるリンクだけを表示する事が可能になります。

ブログの記事作成にお役立て下さい。

 

参考にした記事

JavaScript:UserAgentによってリンク先を変更する | ハックノート

JavaScriptでUA判別してスマホとタブレットを振り分ける方法

JavaScriptで簡単にブラウザのUA判定する方法まとめ!バージョンや一覧表示におまけを紹介! | 自作PCテクニカルセンター

使用してるブラウザを判定したい – Qiita

はてなブログでPCとスマホで内容を変更する! – モーリーのメモ (骨子となるコードはこちらの記事を参考にしました)