「このブログの画像一覧を見る」と「注目ブログ」を非表示にする方法

 

  このブログは、JUGEMブログの有料版JUGEM PLUS を利用しています。

 

 

 

★「このブログの画像一覧を見る」を非表示にする

 

JUGEMブログのスマホ版には「このブログの画像一覧を見る」という項目があります。

 

私の場合、記事用に画像を投稿したものの結局、記事には使用しなかったという画像が大量にあります。

それを一覧で表示されてしまうのはあまり気分がよくないので、この項目を非表示にすることにしました。

 

JUGEMブログのスマホ版はHTMLやCSSはいじれないのですが、YouTube動画のスマホ最適化の方法を調べていて、フリースペースにタグなどを追加することによって、ある程度はカスタマイズすることが可能なことを知りました。

 

この方のブログの記事にあるソースを利用させていただきました。このソースをコピーしてスマホ版フリースペース1に追加した所、「このブログの画像一覧を見る」という項目が非表示になりました。(ソースはそちらのサイトを参考にして下さい)

 

 

★「注目ブログ」を非表示にする

 

同様に、スマホ版では一番下の目立つ所に「注目ブログ」という項目があります。誰のブログかよくわからないブログが並んでいます。その上、私のブログの記事の中で一番目立っています(笑)

 

これも不要なので非表示にすることにしました。

 

同様に先ほどの方のブログに「注目ブログ」を非表示にするためのソースも記事になっていますので、それを利用させていただきます。ありがとうございます。このソースをコピーしてスマホ版フリースペース1に追加した所、「注目ブログ」という項目も非表示になりました。(こちらもソースはそちらのサイトを参考にして下さい)

 

これでごちゃごちゃしていたスマホ版のコンテンツが減って、すっきりしました。

 


スポンサーリンク


 

 

ニコニコ動画のスマホ最適化

 

  このブログは、JUGEMブログの有料版JUGEM PLUS を利用しています。

 

 

 

JUGEMブログのスマホ最適化で、一番苦労したのがニコニコ動画の埋め込みです。

 

YouTube動画をスマホに最適化して埋め込む方法はわかりましたが、いくら調べてもニコニコ動画のスマホ最適化がわかりません。

 

思い切って、JUGEMお問い合わせフォームから質問してみました。その回答は、

 

埋め込みコードにつきましても、ニコニコ動画側にて
発行されているコードはスクリプトコードのようで、YouTube
とは異なる種類のコードでございますため、同じやり方での
最適化については、難しいのではないかと存じます。

※YouTubeの埋め込みコードは<iframe>タグと呼ばれるもの
になり記事作成画面のYouTubeボタンについても、このタグ
を認識するつくりとなっております。

つきましては、お手数ではありますが、埋め込みの都度、縦横
の数値をご自身にて、スマートフォン表示ではみ出さないサイ
ズに調整いただく必要があります。

※スクリプトコードの「w=490&h=307」が縦横の数値となります。
※「w」が横幅、「h」が縦幅です。

 

というものでした。

 

要するに、現状ではJUGEMブログはニコニコ動画のスマホ対応はしていないということのようです。

 

 

仕方がありませんので、最初に埋め込む動画の大きさをスマホではみ出さない大きさにすることにしました。

 

 

ニコニコ動画の共有ボタンから取得できる埋め込みコードは次のようなものです。

 

<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm29860279?w=490&h=307"></script><noscript><a href="http://www.nicovideo.jp/watch/sm29860279">【ニコニコ動画】【替え歌】 違法人 【蓮舫二重国籍問題】</a></noscript>

 

この部分を

 

w=300&h=188

 

に書き換えます。

 

<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm29860279?w=300&h=188"></script><noscript><a href="http://www.nicovideo.jp/watch/sm29860279">【ニコニコ動画】【替え歌】 違法人 【蓮舫二重国籍問題】</a></noscript>

 

 

これをブログに埋め込んでみました。

 

 

 

 

パソコンで見える動画が小さくなってしまいましたが再生はできます。これでスマホからは、はみ出さなくなりました。

 

ただ、スマホではYouTubeと異なり、そのままではニコニコ動画が再生できないようです。アプリなどでの再生になってしまいます。

 


スポンサーリンク


 

 

グーグル・マップとストリートビューもスマホに最適化

 

  このブログは、JUGEMブログの有料版JUGEM PLUS を利用しています。

 

 

YouTube動画と同じように、記事に埋め込んだグーグル・マップとストリートビューも、スマホで見ると画面からはみ出していることに気が付きました。

 

これも修正します。

 

グーグル・マップとストリートビューも、YouTube動画と同じように、スマホ画面に合うようにJUGEMブログ運営さんが推奨しているタグを追加してみました。

 

 

これがグーグル・マップを埋め込んだコードです。

 

これをユーチューブ動画のスマホ最適化と同じ場所で改行してみました。

 

 

 

この位置に次のタグを追加します。

 

class="movieif_smartphone_resize"

 

 

 

これで更新してみましたら、スマホでも、グーグル・マップが、はみ出さずにぴったりとスマホの幅に収まっていました。

 

 

 

グーグルストリートビューも埋め込みコードが同じ体裁ですので、同様の位置にタグを追加してみました。

 

 

ストリートビューでも、スマホの最適化に成功しました。

 

なんとか行けそうですので、つづけて同じ作業を、すべてのグーグル・マップとストリートビューの埋め込みに対して行いました。


スポンサーリンク


JUGEMテーマ:HTML,XHTML、CSS

 

 

スマホで見ると、動画が画面からはみ出している状態を修正する

 

 

  このブログは、JUGEMブログの有料版JUGEM PLUS を利用しています。

 

 

 

★YouTubeの動画をJUGEMブログに埋め込む方法

 

YouTubeの動画をJUGEMブログに埋め込むには、動画の下の「共有」→「埋め込みコード」をクリックして、

 

 

 

 

このコードをコピーして、JUGEMブログに貼ればいいのですが、ほいほいと動画をブログに貼り付けていたら、ブログ開始数ヶ月目にして、自分のブログは、スマホで見ると、動画が画面からはみ出していることに気が付きました。

 

今まで、パソコンでだけ確認していて、スマホで確認していなかったのです。

 

 

★YouTube動画をスマホに最適化して埋め込む方法

 

以下は、その最適化に成功した方法です。私がやってみた方法なので、これが一番最良なのかはよくわかりませんが、ご紹介します。

 

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/1jFkpnmap8k" frameborder="0" allowfullscreen></iframe>

 

これがYouTubeからコピーした私の動画のコードです。

 

これをメモ帳などに貼り、赤文字の位置で改行します。

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/1jFkpnmap8k" frameborder="0" allowfullscreen

></iframe>

 

ここに

 

class="movieif_smartphone_resize"

 

というタグを改行した位置に追加します。

 

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/1jFkpnmap8k" frameborder="0" allowfullscreen
class="movieif_smartphone_resize"></iframe>

 

 

この書き直したコードをコピーして、ブログに埋め込みます。

 

 

 

これで、スマホでも動画の表示が最適化されました。

 

 

 

※補足

class="movieif_smartphone_resize"

このタグですが、JUGEMブログの独自タグかもしれません。

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/1jFkpnmap8k" frameborder="0" allowfullscreen
class="movieif_smartphone_resize"></iframe>

を貼り付けたのですが、

 

実際には

  <iframe allowfullscreen="" class="movieif_smartphone_resize" frameborder="0" height="315" src="https://www.youtube.com/embed/1jFkpnmap8k" width="560">
  </iframe>

と表示されています。

 

 


スポンサーリンク


1

時計


【お願い】記事等を転載される場合は必ず当ブログのURLを直リンクでご紹介下さい。ページの丸ごとキャプチャー、コピペ転載はお断りします。

かわいいネコのおにぎり


Calendar

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>

当ブログ内の記事検索

1日から使える 通話し放題

Archive

Mobile

qrcode

Selected Entry

Comment

  • 有権者をTwitterブロックする勘違い議員に批判の声高まる。国会議員にブロックする権利はない
  • 神奈川新聞の記者の田崎 基さんのツイート「安保法整備しても環境は悪化している」に( ゚Д゚)_σ異議あり!!
    メタキャット
  • 【森友学園国有地売却問題】衝撃の新事実、森友学園への売却価格は近隣地より5.8倍の高値だった、豊中市の価格は2300万円
    アルマジロ
  • 買って損した100均グッズ
    村雨
  • 加計学園の銚子の千葉科学大学についてフェイクニュースが目に余るのでとりあえず事実を詳しく整理してみました
    山路 敬介(宮古)
  • 【謎の民進ブーメラン?】玉木雄一郎さんが提案した革新的な獣医学部ができるのに、なぜか玉木さんが問題視
  • 沖縄タイムスが八重山日報の配達をするなと小売店に圧力、これって独占禁止法違反? 調べてみました
    のらくろ准佐
  • 【森友学園国有地売却問題】衝撃の新事実、森友学園への売却価格は近隣地より5.8倍の高値だった、豊中市の価格は2300万円
    東郷ビール
  • 沖縄タイムスが八重山日報の配達をするなと小売店に圧力、これって独占禁止法違反? 調べてみました
    ボギー大佐
  • 青山繁晴氏、関西テレビ『胸いっぱい』で現職民進党議員(有田芳生氏?)のネットデマ工作を批判

Profile

モノを売らないフリーマーケット

Other

Powered

無料ブログ作成サービス JUGEM

スポンサーリンク