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

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

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

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

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

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

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

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

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

を参考にしています。

PCとスマホだけで分ける場合
AndroidとiPhone(iOS)とPCで別々のリンクを紹介したい場合
おまけ
実践的な使い方(Androidにはgoogleアプリ、iOSにはAppストアアプリを紹介)
参考にした記事

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>