さくらのブログ (Seesaaブログ) でTwitterカードのサムネイル画像が表示されない場合の対処方法

さくらのブログ (Seesaaブログ) はTwitterカードに対応しているはずであるが、なぜか記事のサムネイル画像が表示されない。Twitterカードの検証 (Card Validator | Twitter Developers) 、及び、ブログ側の設定も確認済であるが・・・。

そこで、HTMLソースを確認してみると、OGPの記述が不足していることが分かった。 (3行目)

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" lang="ja" xml:lang="ja">
<head>

↑ 編集は・・・ デザイン> PC> HTML

この対応により、過去の”ツイート”に関してもサムネイル画像が表示されるようになった。

範囲を選択_002.png

サムネイル画像は、投稿後すぐには反映されないことも。少しばかりの時間を要する場合があるようだ。

今回の作業は同時に、Twitterカードの検証 (Card Validator | Twitter Developers) も行っているので、どちらが効いているのかは定かではない。いずれにしても、両方やっておけば無難である。

2016-1-9 追記:
新しく記事を書いて自動投稿しても、Twitterカードのサムネイル画像は、デフォルトの画像になってしまう。”Twitterカードの検証”を実行すれば、その記事の画像が表示されるようになる。これはいったいどう云うことであろうか?

気になる点がひとつある。”Twitterカードの検証”では、1回目では画像の検出に失敗している。 ↓

2016-01-09_14h02_07.png

2回目で画像の検出に成功している。 ↓

2016-01-09_14h02_31.png

つまり、一発で画像の検出ができないことが、影響しているのであろう。実際のHTMLソースを確認してみたが、問題はないように思える・・・。

もしかして、「<meta name="twitter:image" ・・・」がないのが影響しているのか? ↓

2016-01-09_14h47_46.png

いや、それはない。 スタートガイド | Twitter Developers には、「既にオープングラフプロトコルのマークアップが使われている場合、これを変更する必要はありません。」とある。

放置しておけば、そのうち解決する問題なのか?何らかの対応が必要なのか?さて、どうしたものか・・・。投稿する度に、”Twitterカードの検証”を行うのは面倒極まりない。

2016-1-16 追記:【解決】
従来は、さくらのブログの設定にあるTwitterとの連携を利用して自動投稿していたが、記事投稿と同時にTwitterに自動投稿するこに問題があると判断して、さくらのブログでの自動投稿を取りやめた。そして、タイミングをズラして自動投稿するために、IFTTT - Make Your Work Flow を利用することにした。そして・・・この対応が功を奏したようで問題は完全に解決した。よくよく考えると、元々このことが原因だったようである。

admin
カテゴリ:ブログサービス
2016/01/07 09:18 | コメント (0)

さくらのブログ (Seesaaブログ) に「忍者おまとめボタン」を設置する

さくらのブログ (Seesaaブログ) に 「忍者おまとめボタン」 を設置した。

さくらのブログでは、SNS共有ボタンを標準でサポートしているが、ちょっとイマイチと感じるユーザーも多いだろう。

そこで、「忍者おまとめボタン」の登場である。最近利用していなかったが、お洒落なデザインのボタンも用意されており気に入った。カウントを表示しないボタンを利用することで、各SNSとの通信が不要となり、表示が速くなるのも嬉しい。 (さくらのブログではカウント付き)

表示例
範囲を選択_004.png

設置コードは、”Seesaaブログ”のコードを使用すればよい。さくらのブログは、Seesaaブログと同じシステムなので、Seesaaブログの設置コードがそのまま利用できる。

↓ 当ブログの設置コード。具体的な設置方法は、さくらのブログにアドセンスを設置する方法: Jkun Blog を参考にしてほしい。

<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %>


<!-- アドセンス記事下 -->
<div style="clear: both;padding-bottom:20px;"></div>

<div style='margin:0;padding:20px 0 20px 0;border-top:dotted 1px #333;border-bottom:dotted 1px #333;'>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レクタングル中05 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-4276491656474968"
     data-ad-slot="1279016184"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>


<!-- 共有ボタン -->
<div style='margin:20px 0 10px 0;' class="ninja_onebutton">
<script type="text/javascript">
//<![CDATA[
(function(d){
if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_3839b90a15eefffb1de232dd509f81ac)=='undefined'){
    document.write("<sc"+"ript type='text\/javascript' src='//omt.shinobi.jp\/b\/3839b90a15eefffb1de232dd509f81ac'><\/sc"+"ript>");
}else{
    window.NINJA_CO_JP_ONETAG_BUTTON_3839b90a15eefffb1de232dd509f81ac.ONETAGButton_Load();}
})(document);
//]]>
</script><span class="ninja_onebutton_hidden" style="display:none;"><% article.page_url %></span><span style="display:none;" class="ninja_onebutton_hidden"><% article.subject | html %></span>
</div>

レスポンシブ対応のボタンなので、当ブログにはもってこいである。

admin
カテゴリ:ブログサービス
2015/12/19 14:22 | コメント (0)

特定の文字列を含むURLのときに隠す方法

特定の文字列を含むURLのときに一部のコンテンツを隠す方法について。

↓ URLに文字列 [xxxxxxurl] が含まれるときに [隠したいコンテンツ] を隠す。URLに文字列 [xxxxxxurl] が含まれるとき [<div id='container'>] が [<div id='container' class='hide-mode'>] になる。

<html>

<style type="text/css">
.hide-mode .hide-cont {
        display: none !important;
        margin: 0 !important;
}
</style>


<body>
<div id='container'>


<div class='hide-cont'>
[隠したいコンテンツ]
</div>


<script type="text/javascript">
hideClass = location.href.indexOf("xxxxxxurl"); 
if ( hideClass !== -1 ) {
    document.getElementById("container").className = "hide-mode";
}
</script>


</div>

</body>
</html>

JavaScriptは後方に置くこと。

さくらのブログ スマホでのコメント欄のアドセンスを非表示にする: Jkun Blog
さくらのブログ タグページのアドセンスを非表示にする: Jkun Blog

admin
カテゴリ:ブログサービス
タグ:JavaScript
2015/12/11 13:54 | コメント (0)

さくらのブログ (Seesaaブログ) タグページのアドセンスを非表示にする

アドセンスに関して、コンテンツが存在しないところに表示してはならないと云う制限がある。さくらのブログ (Seesaaブログ) では、タグページがこれに該当するので注意が必要である。前に、 さくらのブログでアドセンスの注意事項: Jkun Blog で書いたとおりである。対処方法も書いたが・・・スマートではない。トップページでアドセンスが表示されないからである。

そこで今回は、この問題を回避 (タグページだけアドセンスを非表示にする) するために、JavaScriptとcssを使用する。

↓ デザイン> PC> コンテンツ

2015-12-10_14h27_30.png

@A アドセンス

アドセンスコードを「<div class='pc-ads'> ・・・ </div>」で括る。

B JavaScript

<script type="text/javascript">
tagClass = location.href.indexOf("/tag/"); 
if ( tagClass !== -1 ) {
    document.getElementById("container").className = "tag-ads";
}
</script>

タグページの表示か?URLで判定して、タグページであれば・・・全体を括る 「<div id="container">」 を 「<div id="container" class="tag-ads">」 に変更する。

css追加

.tag-ads .pc-ads {
        display: none !important;
        margin: 0 !important;
}

これでタグページのアドセンスは非表示になる。

特定の文字列を含むURLのときに隠す方法: Jkun Blog

admin
カテゴリ:ブログサービス
2015/12/10 14:46 | コメント (0)

さくらのブログ (Seesaaブログ) スマホでのコメント欄のアドセンスを非表示にする

さくらのブログ (Seesaaブログ) では、スマホでもアドセンスを表示設定することが可能である。しかしながら、ここで問題がある。アドセンスはコンテンツが存在しないところに表示してはならないと云う制限である。

↓ デザイン> スマートフォン> コンテンツ → エキスパートモード
[記事] のときだけアドセンスを表示する。としても・・・

2015-12-09_21h16_11.png

↓ [コメントを書く] をタップすると、コンテンツなしでコメント欄が表示されることになるが、そこにアドセンスが表示されてしまう。

Screenshot_2015-12-09-21-25-09[1].png

今回は、この問題を回避 (コメント関連のページではアドセンスを非表示にする) するために、JavaScriptとcssを使用する。

↓ デザイン> スマートフォン> コンテンツ

2015-12-09_21h14_45.png

@A アドセンス

アドセンスコードを「<div class='mb-ads'> ・・・ </div>」で括る。

B JavaScript

<script type="text/javascript">
commClass = location.href.indexOf("comment"); 
if ( commClass !== -1 ) {
    document.getElementById("iphone-container").className = "comm-ads";
}
</script>

コメント関連のページ (コメント書き込み画面・コメント書き込み完了画面・コメント一覧表示画面) か?URLで判定して、コメント関連であれば・・・全体を括る 「<div id="iphone-container">」 を 「<div id="iphone-container" class="comm-ads">」 に変更する。

css追加

.comm-ads .mb-ads {
        display: none !important;
        margin: 0 !important;
}

これでコメント欄のアドセンスは非表示になる。

特定の文字列を含むURLのときに隠す方法: Jkun Blog

admin
カテゴリ:ブログサービス
2015/12/09 22:33 | コメント (0)

さくらのブログの画像取り扱いあれこれ

これまで、さくらのブログに掲載する画像はすべてフリッカーにアップロードしていた。ブログを移転しても画像はそのまま利用できるからである。しかしながら、今後さくらのブログから引っ越すことはないだろうと云うことで、さくらのブログの機能を使用することにした。

以下、さくらのブログの運営上で気になった、サムネイル画像に関することを覚書として・・・。

↓ サムネイル画像のサイズは、 [設定] → [ブログ設定] → [サムネイルサイズ] で設定する。

2015-11-30_10h41_40.png

↓ サムネイル画像のサイズを一時的に変更するには、画像一覧の [編集] をクリックして [サムネイル長辺のpx数] を変更すればよい。

2015-11-30_10h29_56.png

フリッカーにアップロードした画像を”指定するスクリプト”で貼り付けると、表示後にデバイスを回転させてもサイズが自動で変更されないと云う問題がある。指定スクリプトを改変すればよいが面倒である。また、記事をFacebookに投稿した際に、OGP画像として連携されないことが多々ある。これらの問題点を回避することも、今回の”さくらのブログの機能”を使用する理由のひとつになった。

admin
カテゴリ:ブログサービス
2015/11/30 10:58 | コメント (0)

「%,em」から「rem」に変更して文字の相対サイズを分かりやすくする

当ブログでは、フォントサイズの指定に、相対指定”%” (”em”も同様) を使用していたが、サイズの指定が入れ子になると、実際のサイズがよくわからなくなってしまい困惑していた。そこで、CSS3からサポートされた”rem”と云う単位を使用することにした。

”%”や”em”の相対指定の場合、親要素のサイズ指定の影響を受ける。一方、”rem”の相対指定の場合は、root要素のサイズだけを継承して計算されるので、階層が深くなっても途中の要素の影響は受けない。 (root em = rem)

以下の例で説明すると・・・
↓ ”rem”を使用しない場合。

<body>
    <div class="aaa">
        <p>文字サイズ</p>
    </div>
</body>
body { font-size: 100%; }
.aaa { font-size: 150%; }
p { font-size: 1.5em; }

ベースフォントサイズが16pxとすれば、”文字サイズ”は、「16x1.5x1.5=36px」となる。

↓ ”rem”を使用した場合。

<body>
    <div class="aaa">
        <p>文字サイズ</p>
    </div>
</body>
body { font-size: 100%; }
.aaa { font-size: 150%; }
p { font-size: 1.5rem; } /* rem で指定 */

ベースフォントサイズが16pxとすれば、”文字サイズ”は、「16x1.5=24px」となる。

つまり、相対サイズを感覚的に指定できることを意味するワケであり、多くの場合”rem”指定のほうが分かりやすいと云うことになる。当ブログ (パソコンレイアウトのみ) でも、すべて”rem”指定に変更した。

admin
カテゴリ:ブログサービス
タグ:CSS フォント
2015/10/13 07:28 | コメント (0)

Seesaaブログがベースのブログシステム

当ブログは、「さくらのブログ」で運営しているが、実はエンジンは「Seesaaブログ」がベースとなっている。
さくらインターネットとシーサーが提携、「さくらのブログ」を提供開始 | さくらインターネット

他にも、Seesaaブログをベースとしているブログシステムはいくつかあるようだ。

筆者が採用している さくらのブログは、さくらのレンタルサーバーを契約しないと利用できないが、 低価格・格安のライトプラン - レンタルサーバーはさくらインターネット であれば、月額換算で130円程度と安価である。サーバーがあると何かと便利であり、実質有料と云うことで”身に覚えのないアカウント剥奪”と云ったこともなく安心感がある。

そもそも、さくらのブログに移転したのは、Tumblrで解約騒動があったからである。 (Tumblr「あなたのアカウントは解約されました。」: Jkun Blog)

さくらのレンタルサーバー+WordPress → Blogger → Tumblr → さくらのブログ と移転してきた経緯があるが、さくらのブログに定着するつもりである。

admin
カテゴリ:ブログサービス
2015/07/19 07:53 | コメント (0)

さくらのブログ (Seesaaブログ) の一括編集を快適に

さくらのブログ (Seesaaブログも基本的に同じ) には一括編集と云う機能があるが、これが使いにくい。タイトルとタグは一部しか見えないので、表示部分をグリグリとしないといけない。パッと見て確認・修正できないのである。

これを ↓ のように表示するために、ユーザースタイルシートを適用させた。はみ出して見た目は悪いが、使い勝手は格段によくなる。

19776071481_46345cda83_o.png

CSS

.entrytable input {
    width: 300px;
}

input.hasDatepicker {
    width: 140px;
}

tr td textarea {
    height: 60px;
}

適用URL
blog.sakura.ne.jp/cms/article/edit/list

ブラウザの拡張機能を利用すれば簡単に実現できる。筆者は、Chrome拡張機能 Stylebot - Chrome ウェブストア でCSSを適用している。

使い勝手はブログシステムとって重要である。姑息なことをせずとも、快適に使えるようになればと。

admin
カテゴリ:ブログサービス
2015/07/17 21:18 | コメント (0)

フリッカー画像をレスポンシブ対応にするCSS

フリッカー画像をレスポンシブ対応にするCSSの書き方について。

サイトレイアウトがレスポンシブの場合、画像もレスポンシブ対応にする必要がある。当ブログでも横幅可変になっており、表示幅に合わせて画像を縮小している。ブラウザの横幅を縮めると画像も連動して縮小されるのが確認できる。

当ブログでは、フリッカーから横幅最大640ピクセル (これより小さい場合もある) でコードを取得している。

フリッカーから取得したコード

<a href="https://www.flickr.com/photos/jkun2011/19507862032/" title="IMG_20150708_134418 by Joji Hiraoka, on Flickr" target="_blank"><img src="https://farm1.staticflickr.com/523/19507862032_3d1a76beda_z.jpg" width="640" height="480" alt="IMG_20150708_134418"></a>

CSS

a[title*="Flickr"] img {
 border                : solid 1px #CCC;
 height                : auto;
 max-width             : 96%;
 max-width             : calc(100% - 12px);
 padding               : 5px;
}
a[title*="Flickr"] img:hover {
 background            : #f0e68c;
}

簡単な説明

  • 画像の最大幅の計算では、5pxのパディングと1pxのボーダーを加味 (計12px) している。
  • 画像幅は、Flickrコードで指定された数値となるが、ブラウザ幅に収まらない場合は、縮小されることになる。
  • 対象となるコードは、[ttitle]に[Flickr]と云う記述があるコードを対象にしている。

是非、お試しあれ。

※2016-1-15: 画像はすべてSAKURAサーバーへアップロードしなおした。

admin
カテゴリ:ブログサービス
2015/07/17 19:53 | コメント (0)
このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ