Corredor

ウェブ、プログラミングの勉強メモ。

はてなブログ

はてなブログでページの1つ目の記事末尾にだけ AdSense 広告を挿入する JavaScript を作った

はてなブログは各記事の下部に任意の HTML コードを仕込めるが、これはトップページやカテゴリページなどにも有効なエリアなので、ココに Google AdSense 広告のコードを埋め込んでしまうと、記事ごとに AdSense 広告が掲載されるようになってしまう。 2016…

はてなブログの CSS と JavaScript を GitHub Pages でホスティングするようにした

このブログ「Corredor」で使用している CSS と JavaScript を、GitHub Pages でホスティングしているファイルから読み込むようにしたので、やり方を書いておく。 前提 これまでは、はてなブログで使用する CSS と JavaScript は、全て「デザイン」設定画面か…

はてなブログのトップページやアーカイブページで記事ごとにシェアリンクを追加する

はてなブログ標準のシェアリンク (ソーシャルパーツとも) は、通常だと各記事のページにしか表示されない。これを、トップページや、月別・カテゴリ別・検索結果などのアーカイブページにおいて、各記事の下にシェアリンクを追加する方法を紹介する。 完成形…

Npm-Run-All で複数の npm-scripts を実行・OS 環境に関わらず rm -rf する

前回の記事で、npm-scripts を使った CSS の圧縮処理を紹介した。 neos21.hatenablog.com 今回は、この npm-scripts をさらに便利なものにするパッケージを2つ紹介する。 複数のタスクを一括実行したい そもそもぼくが今回 npm-scripts で CSS を圧縮したい…

はてなブログで独自のシェアリンク・フォローボタンを作る HTML・CSS

前回の記事で、はてなブログ公式プラグインではなく、独自のシェアリンク・フォローボタンを作って差し替えたら、ページの表示速度が高速化したという話をした。 neos21.hatenablog.com この独自リンクの作り方を紹介する。 シェアリンク このブログに置いて…

シェアリンクやフォローボタンをカスタマイズしてはてなブログの表示速度を高速化した

自分が運営する3つのはてなブログをまたカスタマイズした。今度は記事をシェアするリンクやブログをフォローするボタンを独自のモノにカスタマイズすることで、表示速度を高速化させた。 何を変えたか まず、ページ右側に表示されているプロフィール欄にあっ…

はてなブログ Pro に移行しても過去記事の「はてなキーワード」へのリンクは消えないので記事を更新しよう

先日はてなブログ Pro に移行したので、設定画面から「記事にキーワードリンクを付与しない」を選択し、記事中の単語がはてなキーワードへリンクされないようにした。 しかし、過去記事をよくよく見ると、文字色などは本文と同じになっているので分かりづら…

はてなブログ Pro に登録しました

はてなブログ Pro に登録した。2年プランなので14400円。はてなポイントとして14400円を支払い、14400ポイントで2年プランを購入。 独自ドメインを用意する予定はないのだけど、継続的にアウトプットするための習慣を付けるため、ブログにお金をかけてみよう…

ブログのテーマを大幅にカスタマイズしてみた

このブログのテーマを大幅にカスタマイズしてみた。 といっても、基本的なカラーリングやレイアウトはそのままなので、「若干フォント指定が変わったかな?」くらいにしか思われないと思う。 はてブロは色々と動作が重たいので、高速化を目的に CSS を軽量化…

はてなブログのトップページの表示が重たいのを軽減する

あけましておめでとうございます。2017年も宜しくお願い致します。 それはさておき!! はてブロのトップページが重たい!! 既に色々なはてブロサイトで記事になっているのでいまさらだが、はてブロの表示が重たい。 しかし既存のテンプレを利用しているだけで…

はてなブログの Markdown で「この言語はどうやってシンタックスハイライトさせたらいい?」を考える

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)作者: 清水美樹出版社/メーカー: 工学社発売日: 2014/05メディア: 単行本この商品を含むブログ (1件) を見る はてなブログの Markdown を使っていて、「この言語はどうやってシンタック…

はてブロの Markdown 記法でコードを綺麗に書く (シンタックスハイライトさせる)

さきほど書いた記事でスタイルシートをこんな風に見せたけど、 .editor, atom-text-editor::shadow { .comment { font-style: normal; } } これをやる方法。 neos21.hatenablog.com Markdown 記法とか知るまでは「どこのブログも似たようなシンタックスハイ…