IMUZA.com

Xserver<<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で送る

最初のサイドバー

最新記事

2023/03/27

WordPress:Fetch(Ajax)でお問い合わせフォーム(プラグインなし)

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress66
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com