UDONCHAN https://blog.hatena.ne.jp/UDONCHAN/ 鈴木うどんの横須賀おもしろ生活 https://blog.hateblo.jp/ 技術ネタ Blog Hack はてなブログのタイトル部の文字列は、標準機能で画像をアップロードしてそっくり差し替えてしまったり、もとの文字列と一緒に表示したりすることができる。 けれども、僕にとっては、アップロードした画像に対して特定の解像度でのトリミングが強制されたりでイマイチ使い勝手が良いものではなかった。 そこで今回は標準機能をではなく別の方法でタイトル部の文字列を画像に差し替えようと思う。 まず、タイトル部分のHTMLソースを見てみると以下のような感じだった。 <header id="blog-title" data-brand="hatenablog"> <div id="blog-title-inner" > … 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.hateblo.jp%2Fentry%2F2014%2F01%2F13%2F231446" title="はてなブログのタイトルの文字列をCSSだけで画像に差し替える／更にアスペクト比を保持して可変幅にする - 鈴木うどんの横須賀おもしろ生活" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> http://cdn-ak.f.st-hatena.com/images/fotolife/U/UDONCHAN/20140113/20140113231335.png Hatena Blog https://hatena.blog 2014-01-13 23:14:46 rich https://blog.hateblo.jp/entry/2014/01/13/231446 1.0 100%