Corredor

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

はてなブログ

はてなブログの Amazon と楽天の商品リンクにアイコンを付けた 第2弾

はてなブログの Amazon 商品リンク枠と、楽天商品リンク枠に、それぞれのサービスのロゴを表示させるカスタマイズ、第2弾。 経緯 発展版を作成した 動作サンプル CSS コードを公開 実装詳細 Amazon アイコンの作り方 IE11 は background-clip: text が効かな…

はてなブログに Markdown プレビュー機能があった…

はてなブログPerfect GuideBook[本/雑誌] / JOEAOTO/著ジャンル: 本・雑誌・コミック > PC・システム開発 > 入門書 > インターネット入門書ショップ: CD&DVD NEOWING価格: 1,706円 今更知った…。 参考:記事を書きながら表示を確認! 編集画面にリアルタイ…

ブログのデザインを変更:はてなブログのカスタマイズに関する知見まとめ

昨日紹介したメインサイト Neo's World のリニューアル記に続いて、本ブログ Corredor のデザインを変更した話。 見た目的には、リキッドレイアウトになったことと、コンテンツ部分のフォントサイズがウィンドウ幅に応じて拡大・縮小される点ぐらいか。 今回…

はてなブログで任意の要素にスムーズスクロールできる HTML・jQuery コード

SEOに強くアフィリエイトに有利なはてなブログ 『 20分で手っ取り早く見栄えのいい「はてなブログ」を制作する方法 』 - 全手順20 -作者: かどやたつひこ出版社/メーカー: CRAFTec Art - design effect -発売日: 2017/05/07メディア: Kindle版この商品を含む…

はてなブログに「目次記法」があることにいまさら気付いた

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ作者: 相澤裕介出版社/メーカー: カットシステム発売日: 2016/10/01メディア: 単行本この商品を含むブログを見る WordPress で作られたブログには、よく「目次」のリンクがあり、コ…

はてなブログの Amazon と楽天の商品リンクにアイコンを付けた

はてなブログ Perfect GuideBook作者: JOE AOTO出版社/メーカー: ソーテック社発売日: 2016/07/22メディア: 単行本この商品を含むブログ (1件) を見る はてなブログの Amazon と楽天の商品リンクは、一見するとどちらが Amazon なのか楽天なのか、見分けが付…

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

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

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

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ作者: 相澤裕介出版社/メーカー: カットシステム発売日: 2016/10/01メディア: 単行本この商品を含むブログを見る このブログ「Corredor」で使用している CSS と JavaScript を、Git…

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

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

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

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

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

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ作者: 相澤裕介出版社/メーカー: カットシステム発売日: 2016/10/01メディア: 単行本この商品を含むブログを見る 前回の記事で、はてなブログ公式プラグインではなく、独自のシェア…

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

自分が運営する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 記法とか知るまでは「どこのブログも似たようなシンタックスハイ…