【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。

ブログサービス形式のWordPress.comの方(みなさんが使っている.orgの方ではない)を使っていて
これ系の知識ゼロでブログをやっている私ですが、
この度また困ったけど解決したということがあったのでメモしておきます。
 
 



(飛べない)もくじ
・序論
・やったことその① AMPのプラグインを無効化しました 
・その② リダイレクトなる設定をしました
・その③ Googleにキャッシュの削除を申請しました
・その④ AMPのページがなくなったことをGoogleに教えました


 
 
困ったこととは、勝手に※AMP化というものがされていて
(※実際には、「AMP は、ほぼ即座に読み込まれるサイトや広告の作成を可能にすることで、訪問者にスムーズなさらに魅力ある体験を提供します。」って設定のところに書かれていて、ブログ作成初期の頃にわけがわからないまま自分で有効化した…という話なので自業自得なんですけど……)、
 
 
(雷マークみたいなのがAMPのマークです)
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
検索から飛んで来てもらうと、
こんなキモイ素っ気ないページを今までみなさんに見せていたんです(ノД`)・゜・。(ノД`)・゜・。(ノД`)・゜・。
本文のフォントは明・朝・体!!!でした…!!!!!涙

【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
ショックでした……
ブログを公開して約1年間この状態でした………
自分ではこんなページ↓のつもりでいたのに……(ノД`)・゜・。
『かわいい』こそが全てだというのに!!!!!!!!
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
ちなみにAMP化というのはページの表示が高速になるらしく、
意識高いサイトには本来は有効なものみたいです。
…そう、意識が高いサイトには。
でも私は意識が低くてもかわいい方がいいんです!!!!!
表示が何秒遅くなると見る人が何%いなくなるとか、そんなの関係ないです!!!!
そんなんで帰っちゃう人とかこっちから願い下げですわ!!!
 
 
……というわけで、ブログを意識低い系に戻すためにやったことのメモです。
 
 
 

やったことその① AMPのプラグインを無効化しました


 
 
まずはとりあえずあのキモイ表示を早くなくさなければと思ってプラグインを無効化しました。
ちなみにWordPress.comの場合は、
このプラグインはデフォルトで入っている上に消すこともできませんでした。
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
すると検索から入った場合のブログの表示はこんな感じになりました。
この泣いてるスマホくん(かわいい)が表示されたあと、
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
「見つかりませんでした」になります。
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
とりあえずあの変なページではなくなったので安心ですが、
このままだとせっかく記事に飛んで来てくれた人が見たい記事に飛べません。
なので次の対策をしました。
 
 
 

その② リダイレクトなる設定をしました


 
 
実はこのAMPというものをやめたいという人は私以外にもかなりいらっしゃり、
探すとたくさんやり方がヒットしました。
 
 
その中で私が参考にさせてもらったのはこちらのサイトです。
→ WordPressで、Google AMP無効後301リダイレクト設定方法
(ちなみにおもしろいのがこちらのサイト、海外のサイトなのに自動(?)翻訳がされていて検索でも引っかかって見ることができたんですよね!
こういうプラグインがあることも初めて知れてラッキーでした!)
 
 
やり方は上記のサイトにある通りなのですが、
ひとつわからなかったのが〇で囲んだ部分を『正規表現』とするところでした。
それ以外のソースURLとかは全部コピペさせてもらって成功しました。
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
その作業をしたあとは、例えばこのページは
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
飛ぶと一瞬この表示が出るんだけど、
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
すぐにこの本来飛んでほしいページにジャンプしてもらえることになりました!
大成功です!
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
ちなみにログ的なものにもすぐに反映されていておもしろかったです!
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
というわけで、404エラー?のページが表示されちゃう問題はこれで解決です。
しかし………
これだけでは終われなかったので次の作業に進みます。
 
 
 

その③ Googleにキャッシュの削除を申請しました


 
 
その②までの作業で一見全て解決したように見えていたのですが、
一番最初に載せたこのページだけは直らなかったのです。
原因は、Googleのキャッシュのページが表示されているから…!
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
そもそもキャッシュのページを表示させるから早く表示できるというものなのかな?AMPは。
調べると上のページのリンクはこんな風になっていました。
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
そこでGoogleのサーチコンソールからキャッシュの削除を申請することにしました。
サーチコンソール全般で参考にさせてもらったのはこちらのページです。
→ 【入門版】Google Search Consoleの登録・設定方法&使い方【スタートアップガイド】
 
 
キャッシュの削除について参考にさせてもらったのはこちらのページです。
→ Google(グーグル)キャッシュ削除と逆SEO – 逆SEOとは
 
 
やり方は勘でやったのですが、笑
申請した次の日に確認したところこのような結果になっていました。
キャッシュのリンクそのものではなくて、元のURLと「amp」が付いたものの2つは成功していました。
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
先ほどのキャッシュのリンクにメールから飛ぼうとするとこのような表示が出るようになっていました。
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
 

その④ AMPのページがなくなったことをGoogleに教えました


 
 
このままだとせっかく検索結果に表示してもらっていた記事がなくなってしまうと思い、
「All in One SEO」というプラグインを使って得たサイトマップのリンクを
サーチコンソールからGoogleに送ってみました。
次の日に見るとこんな表示に!成功した気がします。
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
そしてもう一度この検索結果から入ってみると……、
(すでにここの表示も変わっていますね!)
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
直接このページに飛ぶようになっていました!!
やったー!大成功です!!
【悪戦苦闘】ブログがAMP化なるものが(勝手に)されていて困ったけれど、なんとか直しました!の記録。
 
 
というわけで、長い戦いでしたが
無事に検索からも普通の見た目のページに飛んで来てもらえるようになりました。
Googleのキャッシュが表示されているページは他にもあるかもしれないけれど、
そのうち更新されるでしょう!というめんどくさがりな気持ちでこれで終わりにしようと思います。笑
 
 
いやあでも、今回も知識ゼロのままなんとか乗り切りました…!
よかったです!
情報を載せてくれるみなさま、ありがとう!!!
 
 
以上、AMPと戦った話でした。
それでは~
 
 

ブログのお引越し『FC2ブログからWordPress.comの方』の場合

ブログのお引越し『FC2ブログからWordPress.comの方』の場合
 
 
こちらの記事(『ブログの引っ越し作業中です』)
ブログの引っ越し作業を始めたきっかけを書いたのですが、
この記事では
「技術部」のカテゴリー用に具体的な作業の内容について書こうと思います。
 
 
まず私のブログは、

WordPress.comの方のビジネスプランを利用して書いています
 
 
多くの人が使っている「.org」の方ではないのでご注意ください。
…といいつつも、ほとんど「.org」の方と同じやり方でOKでした!
 
 
100%参考にさせてもらったのはこちらの記事です。

→FC2ブログからWordPressへ移行する方法【手順や注意点を解説】(takalogさまの記事)


こちらに書かれている手順でほぼ問題なくできました。
 
 
これは手順⑤で記事データをWordPressへインポートしたときの様子。
「おお!」ってなりました。
ブログのお引越し『FC2ブログからWordPress.comの方』の場合
 
 
でも実はその前の、
『手順④インポートツールのカスタマイズ』がWordPress.comの方ではできなかったんですよね。
理由は、
この記事を書いたときに知ったのですが、
「WordPress.comの方ではHTMLの編集ができないから」です。
でも結論としては、手順④を飛ばしたけど無事に引っ越しできました。
 
 
手順④を行う理由は「改行を修正するため」だそうですが、
できなかった私の場合は力技でこんな風にメモ帳の置換機能を使って修正しています。
ブログのお引越し『FC2ブログからWordPress.comの方』の場合
 
 
上の置換を行う前の様子。
ブログのお引越し『FC2ブログからWordPress.comの方』の場合
 
 
行なったあとの様子。
ブログのお引越し『FC2ブログからWordPress.comの方』の場合
 
 
もちろん1改行ずつ手動で直すことも可能ですが、一発で整うとやっぱり楽です。
 
 
私の場合記事は「Open Live Writer」で書いているので、
 
 
Open Live Writerに記事を取り込む

Sourceから全部切り取る

メモ帳に貼り付けて置換する

置換したものをOpen Live Writerに戻す

 
 
という手順で行っています。
 
 
でも私の場合はド素人だから元の書き方が悪いのかもしれなくて、
毎回変えなきゃいけない文字列が違うんですよね…。
例えば上の画像は「</p><p>」を変えたら上手くいったけど、
その部分が普通に「<br><br>」のときもあるし、もっと変なときもあります…。
 
 
なのでむしろ④の手順ができなくてよかったのかもしれません…!
地道に1記事ずつ直してアップしていきます!笑
 
 
 
あともうひとつできなかったのが、⑥~⑦の手順ですね。
 
 
こちらはプラグインのインストールまではできたのですが、
置き換える文字列を入力しても見つかりませんでした。
ブログのお引越し『FC2ブログからWordPress.comの方』の場合
 
 
なのでここも無視して進んでしまいましたが、今のところ困っていることはありません。
 

 
最後は、問題ではないのですが大変だったこと。
画像が1万枚以上ありました。笑
ブログのお引越し『FC2ブログからWordPress.comの方』の場合
 
 
でも無事に移し終わって今に至ります。
 
 
そんなわけでまとめると、FC2ブログからWordPress.comの方に記事を引っ越しさせる場合
 
 
・改行の調整のためのインポートツールのカスタマイズができない
→力技でなんとかなる

・「インポート時に挿入されるタグを削除」の手順ができない
→やらなくても今のところ問題なし(私の環境の場合)

 
 
という感じですね!

無事に引っ越しが完了した記事はこんな感じです。(改行職人の汗と涙の結晶です。笑)
→「引っ越しさせてきた記事」一覧
 
 
以上、FC2ブログからWordPress.comの方への記事のお引越しについてでした~!
 

 

総合の人気記事ランキングは表示できなかったけれど、関連記事(関連があるとは言ってない。笑)が表示されるようになりました!

実は数日前から、こんな感じの『関連記事』が記事の下に表示されるように設定してみました!
総合の人気記事ランキングは表示できなかったけれど、関連記事(関連があるとは言ってない。笑)が表示されるようになりました!
 
 
設定はこんな感じで、WordPress【.comの方】だと設定を変更するだけで入れられるようになりました。
(「JetPack」の「トラフィック」の中にありました。)
総合の人気記事ランキングは表示できなかったけれど、関連記事(関連があるとは言ってない。笑)が表示されるようになりました!
 
 
でもご覧の通りこれ以上は自分で設定できることはないんですけど、
見てみると「関連…???」と思うような記事もピックアップされてしまっています。笑
 
 
でもまあ、完全にランダムでもないし、
他の記事を見てもらえるきっかけにもなるからこのまま使うことにしました!
 
 
私のサイトの関連記事は『関連記事(関連があるとは言ってない)』ということで
よろしくお願いしまーーーーす!!!!笑
 
 
 

ここからはちょっと技術部の話


  
ちなみになんで突然表示させることになったかというと、
最初は全部の期間の人気記事ランキングを表示させたかったんですよね。
よく他の方のブログにはあるやつです。
 
 
でも色々やり方を調べて、
みなさんが使っているプラグインをインストールするところまではできたのですが、
こんな感じで「有効化」できないんでよね…。
入れてみたのは『WordPress Popular Posts』と「Top 10」というプラグインです。
20092501
 
 
それで原因を調べていると、こちらのすごくわかりやすい記事にたどり着きました!

→ WordPress Popular Postsがウィジェット保存できない原因(tatsuya☆ラボラトリ さま)
 
 
こちらの記事によると、
「WAF設定」というセキュリティ関係の設定で弾かれているようだ…ということでした。
手動で使えるようにされた手順も書かれているのですが、
残念ながら【.comの方】なせいなのか、
設定に上記のプラグインの名前がそもそも出てこないんですよね…
他のプラグインは表示されているので、やっぱりこのプラグインだけに言えることなのかなと思いました。
 
 
WordPress【.comの方】は
→こちらのサポート記事 にもあるように、
セキュリティがすごく厳しく設定されているので使えないコードというものがたくさん存在するようです。
例えばよく耳にする「JavaScript」というものが使えないと書いてあります。
(すみません、知識ゼロで書いているので何もわかっていません…!)
 
 
なので人気記事系のプラグインもここに書かれている何かが使われているから
【.comの方】では使えないのかな~と思いました。
 

 
他にもこちらの記事にあるように、

→ プラグインを有効化できない?WordPressのバージョンとサーバのPHPのバージョンを確認する方法(WPアソシエイトポスト さま)

詳しいことは全然わからないけれど、
とりあえず「PHP」というもののバージョンが重要ということだったので
一応確認してみたのですがきちんと最新バージョンでした。
 
 
 
…というわけで、今の私にはお手上げです!
 
 
そもそも、WordPress【.comの方】には『Jetpack by WordPress.com』という
標準で導入されているプラグインがあるのです。
【.comの方】を運営しているAutomattic社が作ったプラグインです。
 
 
そちらに実は『人気記事』を表示できる機能があって、少し前からこのブログにも導入していたのですが、
説明をよく見ると「24~48時間の集計」しか表示できないのです…。
 
 
でも私はもうちょっと長い期間分とか、自分で選んで表示させたいなあと思って
今回他のプラグインを探したけれど夢破れた……というわけでした。
 
 
代わりに『関係記事』を表示させることにしたのは、設定をいじっているときにたまたま目に入ったから
という理由と、あとは「他の記事も読んでもらいたい」という目的だったら関連記事でもいいなと思ったからです。
とりあえずはこの体制でいってみます!
 
 
それにしても、【.comの方】ではできないことの存在に気付くことが最近多くなってきました。
でも今回の件でもわかったように、セキュリティの部分に関しては安心なので
「知識はないけど見た目的にワードプレスを使いたい!」という私はこれからも【.comの方】を使っていこうと思います。
 
 
今日わかったことは以上でした!
 
 

スマホから見てくださっている読者のみなさまへおすすめなこと。(図らずもブログがPWA化されていて困った!という話)

(この記事は『WordPress.comの方』でブログを書いている人が
 図らずも自分のブログが「PWA化」されていて困った!ということが書かれている記事です) 

 
 
いきなりですが、今スマホからこの記事を見てくださっているみなさんは
右と左のどちらの見え方で見てもらっているのでしょうか?
2020-09-24 1 04 22
 
 
私の場合は左のこのような見え方で見ています。
2020-09-23 21 10 34
 
 
これは実は『ホーム画面に登録してもらっている場合』の見え方なんです。
(もしいらっしゃったら、登録してくださりありがとうございます!)
 
 
…と偉そうに言ってみましたが、私も知ったのがつい2日前くらいなのです。
ちなみに右は普通にブラウザから見てもらっている状態です。
私もこっちの方が見やすいと思っています。
 
 
今まで「なんで自分のブログだけブラウザで見れなくて
アプリっぽい見え方になってしまうんだろう…?」
と悩んでいました。
でも今回やっとこちらのブログにたどり着けて、何故なっているのかがわかりました。
 
 
→ WordPressサイトをPWA化する方法+戻るボタンの実装【おすすめ】(macologさまの記事)
 
 
結論から言うと、何故なっているかはわかったんですけど今の自分ではどうすることもできない、
という流れの話になっていきますのでご了承くださいm(__)m
 
 

ブログがアプリっぽく見えてしまっているのは『PWA化』というものが原因だった!


 
『PWA』というのは「Progressive Web Apps」の略で、
「しまっている」と悪いことっぽく書いてしまいましたが、そもそもは悪いことではなく
『PWA化』というものはページの読み込み時間が短縮できたり
オフラインでも閲覧できたりと良いことが多いそうです。
なのでみなさんわざわざひと手間かけて自分のブログを『PWA化』するわけなんですね。
自分のブログがアプリっぽくなってかっこいい!というのもあると思います。
 
 
なのですが、

戻るボタンがない!!!!

んですね。
実は左右のスワイプで(「ジェスチャーナビゲーション」と言うらしい)で
戻ったり進んだりできる
のですが
やっぱり気づかない人も多いと思うし、私は普通のブラウザ表示がいいと思うのです。
だから『PWA化』をやめよう!と思ったのです。
 
 
でも、色々調べた結果、
私のブログの場合は自分からプラグインを入れたわけではないので、
使っているテーマ(テンプレート)自体がそういう仕様に初めからなっているのだろう
というところまでは突き止めました。
しかし…ここで
『WordPress.comの方』を使っている弊害が出てしまいました……。
 
 

『WordPress.comの方』はHTMLの編集ができない!!!


 
 
参考にさせてもらったページはこちらです。

→ 【 WordPressの使い方 】WordPressのHTMLが編集できない場合の原因と解決策を徹底解説しました。( WordPress大百科 さまの記事)

→ 【初心者】外観に「テーマ編集」が表示されない(WordPress.com Forumsのトピック)

知らなかった~!
できたところで難しくてできなかったかもしれないけど…、
でもせめて「前に戻るボタン」を自分で設置したかった……
 
 
というわけで、今の私にできることとしたら
『使うテーマ(テンプレート)を勝手にPWA化しないものに変える』なんですけど、
またド素人の私が、まずそういうテーマを探して、好みの見た目に整えて…という作業をするには
途方もない時間がかかってしまい現実的ではありません……
 
 
なので、ここはみなさまに甘えて、

・スワイプで戻るようにしてもらうか、

・本当に申し訳ないのですが普通にブラウザで見たい場合はホームからアイコンを削除していただくしかないのかな…
(追記):と、思ったのですが、普通にホームにアイコンがある状態でも
ブラウザから見られることを確認しました…!

ブラウザから見たいよ~という方はお手数ですが、『チュベテレ』と検索してもらうか、
このアドレス「 https://tubetele6e6.com/ 」をブラウザのアドレスバーに入れて飛んでもらえればと
思いますm(__)m
よろしくお願いします!

と思っています。
力及ばず本当に申し訳ありません……
 

苦し紛れの『ページトップへ戻るボタン』

  
せめて少しでも見やすくなるようにと、『ページトップへ戻るボタン』は設置させてもらいました。
2020-09-23 21 21 44
 
 
何か劇的な解決方法が見つかるまでは、この状態で見ていただきたいと思います…!
 
 
ちなみに導入にあたって参考にさせてもらった記事はこちらです。

→ 【WordPress】ページトップへ戻るボタンを実装できるプラグイン10選(FREE SWORDERさまの記事)
 
 
たくさん紹介されていましたが、
私は6番目に紹介されていた「Smooth Scroll Up」というプラグインにしてみました。
 
 
下の方に行ったときだけ表示させたいんだけど…と思ったら、
「マイナスの値を入れると下からの距離になる」とのこと。やるね!と思いました。
20092301
 
 
あと私のブログだけなのかはわからないのですが、PWAのアプリ(?)から見ると
「新しいタブで開く」のリンクが1回しか有効ではない気がするんです。
具体的には新しく開いたページからまた新しいタブで開こうとするとリンクが動作しないような気がしています…
 
 
もうダメじゃん!(ノД`)・゜・。
て感じですよね…
普通に見れないとか最悪の極みです……
 
 
なので、悲しいけどブラウザから見てもらうのがおすすめかもしれません。
チューベくんのアイコンをホーム画面に置いてもらえないのはすごく残念ですが……(ノД`)・゜・。
(追記)チューベくんのアイコンがホーム画面にあるままでも
ブラウザから見れることが判明しました…!

ホーム画面に登録してもらうとこんなアイコンが登場するので
よかったらやってみてください!(ちゃっかり宣伝。笑)
スマホから見てくださっている読者のみなさまへおすすめなこと。(図らずもブログがPWA化されていて困った!という話)
 
 
 
今のところわかっているのはここまでです…!
とりとめがなく本当に申し訳ありません(ノД`)・゜・。
見づらいのにいつも見てくださっている方がいらっしゃったら、ありがとうございます!!
 
 
今日は以上ですm(__)m
 
 
 

【生きてる感を出したい。笑】トップページにツイッターを置いたりしてみました。

 
 
こんな感じで、ブログのトップページに私のツイッターのタイムラインを表示することにしました!
【生きてる感を出す。笑】トップページにツイッターを置いたりしてみました。
 
 
この前
この記事( やっと私のツイッターアカウントの紹介記事を書きました! )に書いた通り
メニューに私のツイッターを紹介する記事のリンクを表示させることには成功したのですが
家族に「直接飛べるボタンはないの?」と聞かれ、
たしかに毎回あの記事に飛んでもらうのは面倒だよなあと思い、トップページに直に貼ってみることにしました!
 
 
でも『サイドバー』と呼ばれているところに表示しているのですが
スマホからだとサイドバーは下に配置されてしまうので、引き続きスマホからの場合は
メニューから飛んでもらうことになります。ご了承くださいm(__)m
 
 
表示のさせ方は元から備わっている機能でいけました。
WordPress.comの場合ですが、(.orgの場合も同じ表示なのかはわかりません)
ダッシュボード→外観→ウィジェットから『Twitter タイムライン』を選びます。
「表示状態」を押すと、どこに表示する・しないが選べて、
私の場合は個別の記事には表示させずにトップページだけに表示させるようにしてみました。
【生きてる感を出す。笑】トップページにツイッターを置いたりしてみました。
 
 
2013年の記事で心配でしたが見た目は少し変わっていたけれどやり方は同じだったので、
詳しく知りたい方はこちらの記事を見てみてください。

→ ウィジェット表示状態のコントロール(WordPress.com 日本語ブログ)
 
 
 
そしてついでに、逆に個別記事にだけ最新記事のリンクをサムネイル付きで表示してみることにしました。
 
 
参考にさせてもらったのはこちらの記事です。
→『WordPress』最近の投稿にサムネイル画像をつけるプラグイン(web iconさまのサイト)
 
 
その中で2番目に紹介されていた【Recent Posts Widget With Thumbnails】というプラグインを入れてみました。
 
 
色々設定は自分で決められるのですが、私はこんな感じで表示してみました。
【生きてる感を出す。笑】トップページにツイッターを置いたりしてみました。
 
 
この2つを設置するときに考えたことは『ブログが生きてる感を出す』です。笑
中の人もこのブログも生きているぞ、頻度は低いけど一応更新もしているぞ!ということを示すために置いてみました。
 
 
今まで生きているのかいないのかわからず去られてしまうことも多かったと思いますが、
これで少しでも楽しんでくれる人が増えればいいなと思います。
 
 
以上、また少しブログが完成形に近づいた~という話でした!
 
 
 

『 Smart Slider 3 』で作ったスライドショーが上手く表示されずに困ったけど一応解決したときの備忘録

 
  
WordPress.com の方(みなさんがよく使っているのはインストール型の『WordPress.org』の方です)の
 ビジネスプランでブログを書いている。

・記事は『Open Live Writer』で書いている。

・たぶんマイナーなテーマ(Beacon)を使っている。
 
 
という割と特殊な環境下ではあるのですが、
プラグイン『
Smart Slider 3 』で作ったスライドショーが上手く表示されずに困った ので、
そのときの状況と解決法をメモしておきます。
 
 
ちなみに書いている人は難しいことは何もわからない完全ド素人な人間です。
 
 
 

状況

 
 
この記事(【あつ森】6月になったら夏になっていた~! + 写真大放出)を書くときに
巷で評判の良いプラグイン『
Smart Slider 3 』でスライドショーを2つ入れようと思ったら、
 
 
❶ 下書きからのプレビューではきちんと表示される。

❷ 実際に記事を公開すると読み込み中のマークのままいつまで経っても表示されない。

❸ 対処をしたら1つ目だけは表示されるようになる。

❹ ❸で表示されなかった2つ目も新しく作った別の記事に貼れば表示される。

❺ ❹の新しく貼った方だけがスマホから見たときにPCでは表示されているサムネイルや矢印が表示されない。
 
 
というトラブルに見舞われました。
   
 

行なった対処

 
 
① こちらの記事(
→【WP】Smart Slider3のスライドが表示されない時の解決方法 )を参考に、
 Smart Sliderの「SETTING」からひとつの項目を変更する。

② 発行されたShortcodeを貼るときにOpen Live WriterのSourceタブの方で<p></p>(実際は半角文字)で囲む。

③ 2つ目のスライドショー(❹で別の記事に貼れば表示された方)を新しく作り直す。

④ ②と同じ作業を③にもする。
 
 
これで無事に同じ記事の中で2つのスライドショーが表示されるようになって、
スマホでもPCと同じ見た目で表示されるようになりました!
 
 
 

詳細

 
 
①を実行したときはまだ②をやっていなかったので変化はありませんでしたが
私の場合Open Live Writerから記事を書いているという特殊な状況なので、
もしかしたら①だけで解決する方が多いのかもしれません。情報に感謝です。

②については、公開済みの記事をOpen Live Writerに逆輸入するといつも<p></p>が付いて戻ってくるので
それをヒントに付けてみたら上手くいきました。(何もわかっていない人の発言…笑)

③で新しく作り直した理由は、Smart Sliderでスライドショーを作るときに
1つ目はテンプレートから作って、2つ目はテンプレートを使わなかったという違いがあったので
条件をそろえるために2つ目も1つ目と同じテンプレートを使って作り直してみました。
理由はわからないけれど、これで上手くいきました。

一応、作り直す前のものも、見た目上は全ての項目を同じにしてみたりもしたのですがそれだと上手くいきませんでした。
 
  
「Smart Sliderで作ったスライドショーが表示されない」という方は意外に多いみたいで
調べると色々出てきたのですが、どれも私にはチンプンカンプンなことが多く、
もうあきらめた方がいいかなと思って最後に試したことが上手くいってよかったです。
 
 
私と全て同じ環境でブログを書いているという方はなかなかいないとは思いますが、
私の場合はこれで上手くいったということを書いてみました。
 
 
 

まとめ


 
 
WordPress.comでOpen Live Writerを使って書いている人の場合、
  
 
・Smart Sliderの「SETTING」からひとつの項目を変更する。(
→参考サイト

・Shortcodeを貼るときにOpen Live WriterのSourceタブの方で<p></p>(実際は半角文字)で囲む。

・1つの記事に複数のスライドショーを載せる場合は同じテンプレートを使うなど作り方をそろえる。
 
 
で上手くいきそうです。
 
 
最後に、上手く表示されるようになったスライドショーを貼っておきます。
(これで表示されていなかったらギャグですよね……されているといいなあ………)
 
 
スライドショー1

[smartslider3 slider=”2″]

  
  
スライドショー2

[smartslider3 slider=”5″]

  
  
 
以上です!

  
 

 

ブログにiTunesのプレイヤーを貼り付けたときの備忘録(アフィリエイトなしの場合)※2020.8.1追記あり

※追記(2020.8.1)
一時的なことなのかわかりませんが、このページで紹介しているやり方ではプレイヤーが表示されなくなってしまいました…!
仕方なくiTunes標準のプレイヤーを各記事に貼り直しました。この記事のプレイヤーはそのままにしておきます。
よろしくお願いしますm(__)m

 
  


 
 
この記事 →私の作業用BGM~Spotifyに登録してみた!~ を書いたときにSpotifyに登録してから
記事に曲を貼り付けるときはSpotifyを使っていたのですが、
今回初めてiTunesのプレイヤーを記事に使ったのでそのときのメモです。
 
 
書いた記事はこれです。
→ 【ショバフェス】『Yokazenohorizon』にどハマりしている!!……です。
 
 

iTunesのソフトのアルバムの右上にある三点マーク→アルバムを共有→『埋め込みコードをコピー』
入手できるコードを貼り付けたプレイヤーがこちらです。

 
 
表示に問題がなかったらこれだけでOKですごく簡単だったのですが、
たまたまこの紹介したかった曲がApple MusicにはないけれどiTunesにはある曲だったのか
『このアルバムはまだリリースされていません』という表示が出てしまう結果に…。
 
 
でも実は私の環境だと『このアルバムはまだリリースされていません』の部分をクリックすると
なぜか再生できてしまうのですが、みなさんの環境でも聴けるかわからないし、
「聴けない」って言って帰ってしまう人が多くなりそうだと思いました。
 
 
なのでそういう怪しい表示なしにちゃんと再生できるプレイヤーを貼りたくて色々調べました。
 
 
たぶん一番確実で簡単なのがiTunesのアフィリエイトに登録して、
そのサイトからコードを作るというやり方みたいでその方法はたくさん出てきました。
 
 
しかし私の場合はまだ登録をしていなかったので申請をするところからのスタートになりましたが、
土曜日に申請したこともありすぐに結果が返ってくる気配はありません。
でもせっかく今日は時間があるし、今日中に記事を書きたいんだけどなあ~!!と思って他に方法を探すことに。
 
 
そこで見つけたのがこちらの
ひま缶さまのサイトでした。
使わせていただいたのはこちらのツールです。
 
 
→ [ブログで音楽を紹介したい!]iTunesの試聴プレイヤーを超簡単に貼り付け・埋め込みできるツールを作った[改良版]
 
  
 
これで作らせてもらったコードを貼るとこのようなプレイヤーが出現しました。

  
  
他に候補だったのが、ワードプレスの「WP Applink」というプラグインを使うことだったのですが、
こちらも初めにアフィリエイトトークンを入れなければいけないので使えず、
ひま缶さまのツールだとそこの入力が任意だったので助かりました!とても感謝です!!
(自分で作れる人って本当にすごいですよね!)
 
 

というわけでまとめると、
iTunesの曲をブログで紹介したいときに

・『このアルバムはまだリリースされていません』と出てしまう曲を貼りたくて困っている
・アフィリエイト収入が入らなくても良い


という方には、ひま缶さまのこちらのツールがおすすめです!
 
 
→ [ブログで音楽を紹介したい!]iTunesの試聴プレイヤーを超簡単に貼り付け・埋め込みできるツールを作った[改良版]
 
 
 
アフィリエイトありの場合は他に書いてくださっている方がたくさんいらっしゃるのでそちらをご覧ください。
 
 
 
というわけで、ブログにiTunesのプレイヤーを張り付けたときの備忘録(アフィリエイトなしの場合)でした!