IMUZA.com

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

ホーム / はてなテーマ / 新テーマ「imz-listing」完成だが、公開の道は険し

新テーマ「imz-listing」完成だが、公開の道は険し

2019/10/25 はてなテーマ, はてなブログ

別サイトの映画レビューサイト「そんなには褒めないよ。映画評」のテーマを変更しました。

  • スクリーンショット
  • 記事ページ
    • Noto Sans JP
    • アイキャッチ画像をページトップに
  • トップページはシングルページをイメージしたけれど…
    • 見た目がもうひとつ?
    • 問題点
  • テーマストアでの公開

スクリーンショット

www.movieimpressions.com

記事ページ

Noto Sans JP

結局、ブログなんですから記事を読んでもらわなくては意味はなく、であれば、記事ページのデザインはどう読みやすくするかが重要で、文字サイズや行間やコンテンツ幅の細かいところを調整することくらいしかなくなります。

このテーマでは Google Fonts の Noto Sans JP を使ってみました。

www.imuza.com

アイキャッチ画像をページトップに

はてなブログでは各記事のアイキャッチ画像が head 要素にメタデータとして格納されていますので、そこから画像の url を取得して top-editarea に img タグを使って表示させています。

<meta itemprop="name" content="「ジョーカー」ネタバレ・レビュー ホアキン・フェニックスの代表作となるか? 多分なる。 - そんなには褒めないよ。映画評"/>
<meta itemprop="image" content="/wp-content/uploads/2019/10/20191004145759.jpg"/>

<div id="top-editarea">
  <div id="top-editarea-inner">
    <p class="featured-image"><img src="/wp-content/uploads/2019/10/20191004145759.jpg"></p>
  </div>
</div>

トップページはシングルページをイメージしたけれど…

トップページはサイト内の概要をシングルページ風にスクロールでわかりやすく示そうとしたんですが(笑)、もうひとつでした。

具体的には、メインコンテンツの「新着記事」、サイドボックスの「おすすめ記事」、サイドボックスの「注目記事」、そして bottom-editarea の「About us」のそれぞれ最初の記事の画像を取得して、top-editarea にリンク付きで表示しています。

見た目がもうひとつ?

拾ってくる画像は各映画の公式サイトの画像ですので雰囲気や色がまちまちで統一感がありません。当たり前ですね。それに記事はどんどん書きますし、注目記事ははてなブログの access-ranking ですのでこれもどんどん変わります。

ですので、スクリーンショットでもそうですが、もうひとつ美しさにかけています。これは再考ですね。

Youtube の動画を背景にできないかな?

問題点

各ブロックへのリンクは、そのブロックのタイトル「新着記事」「おすすめ記事」などとなっており、当初はうまくいっていたのですが、Adsense のインフィード広告を入れましたらなぜか位置がずれるようになってしまいました。

読み込みタイミングを変えたりいろいろ試したのですがどうしてもうまくいきません。これも再考です。

テーマストアでの公開

トップページに汎用性を確保するのがかなり難しそうです。

現在は、トップページ内の各ブロックの id または class 名を次のように引数として渡すようにしています。

[{attr:'id',prop:'content', text:'最新記事', image:'bg'},{attr:'class',prop:'hatena-module category-recommend', text:'おすすめ記事', image:'src'},{attr:'class',prop:'hatena-module-entries-access-ranking',text:'注目記事', image:'src'},{attr:'id',prop:'bottom-editarea',text:'Contact us', image:'src'}]

これを外に出して関数を呼び出すようにすればいいのですが、他にもちょっと問題がありかなり道は険しそうです。

Googleにインデックスされているのに検索に表示されない
YouTubeで動画の指定範囲を繰り返す方法
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

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

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com