フリッカー画像をレスポンシブ対応にする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)

さくらのブログ (Seesaaブログ) でアドセンスの注意事項

アドセンスでは過去に3回ほど停止を通告されたことがある。ここ数年は慎重に対応しているので、何事もなく経過している。ただ、さくらのブログ (Seesaaブログ) で記事を公開するようになって、タグをクリックすると関連する記事のタイトル一覧のみが表示されることに気づいた。通常はコンテンツか抜粋記事が表示されるが、さくらのブログではそうではない。このことは、放置しておけば遠からず、配信停止を通告される可能性があると云うことだ。

では対処方法。極めて簡単である。

デザイン> PC> コンテンツ → 左下の「エキスパートモードへ切替」
19513487838_78a5612efc_o.png

アドセンスを表示しているボックスの「□TOP」のチェックを外せばよい。当然のことながら、トップページもアドセンスは非表示となるが、基本的に個別ページ以外にアドセンスを貼る意味はないので問題はないだろう。

なお、さくらのブログはSeesaaブログと同じなので、Seesaaブログでも同じことが云える。

2015-12-10 (もっとスマートな方法)
さくらのブログ タグページのアドセンスを非表示にする: Jkun Blog
さくらのブログ スマホでのコメント欄のアドセンスを非表示にする: Jkun Blog

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

Google検索エンジンから速攻で削除する方法

Tumblrに割り当てていたドメインを新たに契約したSAKURAサーバーに変更し、Tumblrのアカウントは削除した。この影響で、Tumblrのときに書いた記事がGoogle検索エンジンに残っているために、所謂「404 not found」が多発する事態となった。Google検索エンジンでは「404 not found」の記事のインデックスは即削除するワケではなく、本当に削除されたのかを確認するために何度も長期間に渡ってクロールする。よって、Google検索エンジンからインデクスを速攻で削除するためには、Search Console (ウェブマスターツール) を利用する必要がある。

今回は、
http://s.jkunblog.com/post .....
http://s.jkunblog.com/tags .....
この2つのパターンのURLを削除する。

クローラにアクセスされたくないコンテンツを指定する

robots.txt を以下のように設定する。

User-Agent:*

Disallow: /post/
Disallow: /tags/

詳細については、robots.txt ファイルについて - Search Console ヘルプ を参照のこと。以下は、Search Console (クロール → robots.txt テスター) で設定が反映されているか確認した画面である。テスターに反映されるまでには少しタイムラグがある。

19049991413_095e32ff12_o.png

URL の削除

Google検索エンジンに対して、インデックスの削除を依頼する。Search Console (Google インデックス → URL の削除) から、”post”と”tags”を削除する。以下は、削除が完了した画面である。削除は長くても半日程度で完了する。

219048345674_f9531e8d61_o.png

以上の方法でほとんどのインデックスは削除されるが、それでもすべてが確実に削除されるワケではない。

admin
カテゴリ:SEO
タグ:Search_Console
2015/07/14 07:34 | コメント (0)

ブログエディタ拡張機能「ScribeFire」

現在、ブログ記事の執筆は「Windows Live Writer」を利用している。但し、当然ではあるが”Windows”環境でしか動作しない。筆者は、”Windows 7”と”Linux Mint - Cinnamon”のマルチブート環境なので、OSに依存しないブログエディタを利用することにした。

そこで、昔少し利用していた ScribeFire Classic :: Add-ons for Firefox を試すが動作しなかった。しかしながら、 ScribeFire Next :: Add-ons for Firefox は問題なく動作した。と云うことで、以下「Windows Live Writer」と機能面について比較してみることに。

なお、この拡張機能は、Windows / Mac / Linux の、Firefox / Chrome / Opera / Safari (Linux ☓) で利用可能。

筆者の対象となるブログサービスは、さくらのブログ (Seesaaブログ) である。

19040017534_9b1f386a91_o.png

  • ブログの設定や対応ブログシステムは、「Windows Live Writer」と変わりない。
  • ブログの設定が終わると、かなり前の記事から遡って同期される。但し、「Windows Live Writer」のように、全記事を同期することはできないようである。つまり同期記事の数に制限がある模様。
  • 記事編集画面は、境界線を上下にドラッグすることで、編集画面の高さが変化する。編集画面のフルスクリーンもどきにも対応している。しかしながら、専用のタブで編集する形態ではないので、ノートパソコンなどではエリア確保が難しく、扱いが少し苦しいかもしれない。 (Chromeはタブとして開く。)
  • 編集画面は、所謂”WYSIWYG”とHTMLの切り替えが可能となっている。但し、ブログ側のCSSを読み込む機能やCSSの設定機能がないので、本来のWYSIWYGではない。「Windows Live Writer」はブログ側のデザインを読み込むので、比較すると見劣りする。
  • 新規投稿や、編集&再投稿は可能である。カテゴリーにも対応しているが、タグには対応していない。これらは、「Windows Live Writer」と同じである。
  • 設定情報のインポート/エクスポートに対応している。

なお、この記事は、「ScribeFire」で執筆・投稿・編集/再投稿した。

admin
2015/07/13 23:34 | コメント (0)

Search Console 正常に機能しない場合の対処方法

Search Console (ウエブマスターツール) が正常に機能しなくなった。こんな経験はないだろうか?例えば、インデックスの登録が増加せず停滞したまま・・・とか。

筆者の場合は、サイトの所有者の再確認でエラーが発生していたのが原因だった。放置しておくと、いずれメッセージで知らせてくれるようだが、かなり長期間だんまりの状態が続く。

よって、何か動作が変だぞと思ったら、サイトの所有者が正常に認識できているか?確認したほうがよい。

119465848168_382700ed4f_o.png

該当するプロパティをクリックして、歯車の「ユーザーとプロパティ所有者」をクリックする。

219658334721_8ea0d4330d_o.png

次に、「プロパティ所有者の管理」をクリックする。

319032932593_f657e77ecf_o.png

すると、所有者の確認状況がわかる。赤枠の中では、毎日「再確認できませんでした。」と云う文言が並んでいる。これでは正常に機能するはずもなく、一番簡単なmetaタグで即再確認するようにHTML編集で追加した。その直後が青枠の中で、「確認が完了しました。」となる。

確認方法は、metaタグ以外にも様々ある。また、「複数の方法で確認を行うと、サイト所有権をより復元しやすくなります。」とあるので、念を入れて再確認をしてもよい。

今回の騒動・・・そう云えば、ドメインに割り当てるサイトを変更した際に、所有者の再確認を行うのを忘れていた。

admin
カテゴリ:SEO
タグ:Search_Console
2015/07/13 15:10 | コメント (0)

Tumblrの記事をさくらのブログ (Seesaaブログ) にインポート

Tumblrの記事をさくらのブログ (Seesaaブログ) にインポートした。直接エクスポート&インポートと云うワケにはいかないので、以下の手順で実現。さくらのブログとSeesaaブログは同じ仕様なので、Seesaaブログでも同様の手順でOKだと思われる。

云うのは簡単であるが、実際はカテゴリー付け・タグ付け・改行の挙動変更・パーマリンク変更に伴うブログ内参照リンク書き換え・Flickrサムネイルサイズ変更など、約250件の記事を取り込むのに丸1日かかってしまった。

それでも、突然アカウントを剥奪されたりする恐怖からは開放される。 (Tumblrで経験)

あと、Bloggerで書いた記事が1,000件以上あるが、これをさくらのブログに取り込むか?悩ましいところである。

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

SAKURAサーバーのindex.htmlなしリダイレクトと404ページ設定

SAKURAサーバーで、/index.html を なし (/) へリダイレクトさせる。また、404ページ (Not Found) のURLを設定する。

利用するのは、”.htaccess”である。テキストエディタで、以下の内容のテキストファイルを作成して、”.htaccess”と名前をつけて保存する。そして、サーバー側の”WWW”ディレクトリ (通常、index.html が置かれている) へ転送する。

”.htaccess” の内容

RewriteEngine On
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://jkunblog.com/$1 [R=301,L]
ErrorDocument 404 /404.html

上記の例では・・・
http://jkunblog.com/index.htmlhttp://jkunblog.com へリダイレクト
404 Not Found ページを http://jkunblog.com/404.html へリダイレクト
する。

admin
カテゴリ:SEO
2015/07/08 08:16 | コメント (0)

「Windows 10」その7 通知領域から削除

7月29日の正式リリースを前に「Windows 10 Insider Preview」を試してきたが、筆者には必要なしと判断した。やりたいことはほとんどウェブブラウザ上で実現できるため、あえてアップグレードで不要な機能を盛り込む必要はないのである。

119482781802_de68af226d_o.png

よって、Windows 7 の通知領域にある、Windows 10 アップグレードの予約案内のアイコンは意味がないので削除することにした。

219493524661_e11e7dcdd5_o.png

このアイコンは、Windows Update の「KB3035583」によるものなので、これをアンインストールすればよい。

まず、コントロールパネルの”プログラムのアンインストール”をクリックする。

319303044419_2628599eb9_o.png

次に、”インストールされた更新プログラムを表示”をクリックする。

419489160565_696c261a7b_o.png

そして、「KB3035583」を探し出し、右クリックでアンインストールを実行すればよい。アンインストール後再起動で通知アイコンは消える。

519304614749_58f4699929_o.png

但し、Windows Update を実行すると、「KB3035583」のインストールが催促される。よって、これを回避するために「KB3035583」を右クリックして”更新プログラムの非表示”を選択しておく。

Windows 10 導入までの連載記事 ↓ / 導入後は個別に記事を投稿
「Windows 10」その1 無料でアップグレードできるけど!?: Jkun Blog
「Windows 10」その2 アップグレードの予約をしてみた: Jkun Blog
「Windows 10」その3 期待してよいのか?: Jkun Blog
「Windows 10」その4 導入前にメーカードライバをすべて削除: Jkun Blog
「Windows 10」その5 新ブラウザ「Edge」はChromeとFirefoxの拡張機能を食う: Jkun Blog
「Windows 10」その6 がっかり!?: Jkun Blog
「Windows 10」その7 通知領域から削除: Jkun Blog
「Windows 10」その8 31日以内であれば前の環境に戻せる: Jkun Blog
「Windows 10」その9 アップグレード失敗 [80240020] 時の対処方法: Jkun Blog
「Windows 10」その10 クリアインストールする方法: Jkun Blog

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