トップページの「一覧形式」の画像をオリジナルのものに変える サイトのデザインって、あれこれ手を加えてこれで良し！と思ったものでも、飽きてくるのか、しばらくすると変更したくなってきます。 このサイトはもう少し持ちそうなんですが（笑）、映画のレビューを書いている「そんなには褒めないよ。映画評」は、はてなブログを始めた頃に作った「Simple Responsive with Menubar」というテーマをベースにした随分前のものですのでさすがに飽きてきました。 で、全体のデザインはまだ構想中なんですが、ちょっとしたテクニックを紹介していこうと思います。 トップページの「一覧形式」 画像が 500px 四方にトリミングされている オリジナル画像に変更する Javascript トップページの「一覧形式」 はてなブログProのトップページ表示は、全文形式と一覧形式を選べるようになっています。 これで

ページトップへ戻るスムーズスクロール（jQueryなし） ページトップへ戻るスムーズスクロール（jQueryなし） HTMLJavascriptCSSはてなブログ用お問い合わせ等 当サイトの右下に表示している「 」は、クリックしますとスクロールしてページトップに戻ります。こうした「ページトップに戻る」リンクは最近では必須になってきています。これまで公開しているスクリプトにも含まれていますが、リクエストもありましたので単独で切り出してみました。「 」は、ホームページへのリンクだけです。 01HTML <ul class="toTop-nav"> <li><a href="javascript:void(0);" onclick="smoothScroll(0);return false;">アイコンまたはイメージなど</a></li> <li><a href="あなたのブログURL">アイコ

当サイトはトップページに記事を表示していませんので問題ないのですが、別グログの「そんなにも褒めないよ。映画評」では、トップページに最新の１記事とその下に最新記事一覧を表示しています。 その際、記事の途中に「続きを読む」を挿入しています。 で、この「続きを読む」は、記事タイトルと同様に記事ページへのリンクになっていますので、当然、ページのトップへ飛んでしまいます。それを「続きを読む」の位置へ飛ばそうと思います。 (2017/10/30)記事中の Javascript に変数宣言がもれている箇所がありました はてなブログ「続きを読む」の仕様 「続きを読む」クリックで記事ページ「続き」位置に飛ばす仕様 「続き」位置までスクロールする Javascript 「続き」の読み始めをわかりやすく装飾する はてなブログ「続きを読む」の仕様 はてなブログの「続きを読む」がどうなっているかを見てみますと、 ツ