IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / はてなブログ「一覧形式」の画像をオリジナルのものに変える

はてなブログ「一覧形式」の画像をオリジナルのものに変える

2018/03/5 javascript, はてなブログ

トップページの「一覧形式」の画像をオリジナルのものに変える


サイトのデザインって、あれこれ手を加えてこれで良し!と思ったものでも、飽きてくるのか、しばらくすると変更したくなってきます。

このサイトはもう少し持ちそうなんですが(笑)、映画のレビューを書いている「そんなには褒めないよ。映画評」は、はてなブログを始めた頃に作った「Simple Responsive with Menubar」というテーマをベースにした随分前のものですのでさすがに飽きてきました。

で、全体のデザインはまだ構想中なんですが、ちょっとしたテクニックを紹介していこうと思います。

  • トップページの「一覧形式」
  • 画像が 500px 四方にトリミングされている
  • オリジナル画像に変更する Javascript

トップページの「一覧形式」

はてなブログProのトップページ表示は、全文形式と一覧形式を選べるようになっています。

これですね。どういう風に表示されるかといいますと、下の画像のようになり「一覧表示」と同じです。

テーマは公式の Evergreen です。

画像が 500px 四方にトリミングされている

問題は画像なんですが、オリジナル画像ではなく、縦横 500px にトリミングされたサムネイルが使われます。デフォルトでは width: 120px; height: 120px; が指定され小さくなっています。

一覧表示ではいいにしてもトップページがトリミングされたサムネイルでは不都合だという場合にオリジナルを表示する方法をやってみました。

html と css は次のようになっています。

<div class="entry-thumb" style="background-image: url('https://cdn.image.st-hatena.com/image/square/8943960c664553d9f1fd0ab1bcef8f75d0aa8891/backend=imagemagick;height=500;quality=80;version=1;width=500/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Fausnichts%2F20180303%2F20180303161557.jpg');">
    </div>
.page-archive .entry-thumb {
    width: 120px;
    height: 120px;
    background-size: cover;
    float: left;
    margin-right: 10px;
}

これを見ますと、オリジナル画像を imagemagick に渡してサムネイルを作っているようです。幸いにして、エンコーディングされてはいますが、オリジナル画像のURIがありますので、それを取り出せばオリジナルを表示できそうです。

オリジナル画像に変更する Javascript

(2018.6.21)jpg, png, gif 対応版が下記記事にあります。

(bug fix)はてなブログ「一覧形式」の画像をオリジナルのものに変える

(2019.2.25)Archiveページ対応版が下記記事にあります。

はてなブログ「Archiveページ」の画像もオリジナルのものに変える

このコードは画像ファイルが jpg 以外の場合にエラーとなります。上のバグフィックス版をご覧ください。

※バグフィクスや改変に対応できなくなりますのでスクリプトは転載しないでください。

<script>
(function(){
    if(document.body.classList.contains('page-index')){
        var elements = document.getElementsByClassName('entry-thumb');
        var re = /https%3A%2F%2F.+\.jpg/;
        Array.prototype.forEach.call(elements, function(element) {
            var imageUri = re.exec(element.getAttribute('style'));
            element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')';
        });
    }
}());
</script>

この Javascript を カスタマイズ > フッタ に入れればトップページのサムネイル画像がオリジナルのものに変わります。ただし、画像の容量によっては重くなる場合がありますので注意してください。また、画像は background に貼り付けてありますので、下の例のように css でサイズを指定する必要があります。

.page-archive .entry-thumb {
    width: 100%;
    height: 436px;
}

こんな感じになります。後はサイズや配置を css で変更するだけです。

Ubuntu に プリンター(EP-802A)インストール
はてなブログのトップページに「前のページ」を実装する
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com