iiie

物づくりと生活、"経験"を記事へ

Web開発

関連記事を”あわせて読みたい”っぽくシンプルに表示する【はてなブログ カスタマイズ】

僕のブログカスタマイズには、ベースにはてなブログ公式のカスタマイズベーステーマ『Boilerplate』を使用しています。 Boilerplateの記事下の関連記事は、注目記事なんかと同じデザインで構成されているので、僕みたいなシングルカラムデザインで使用すると…

ふわっと表示する例のアレをカード型デザインに搭載してみた【はてなブログ カスタマイズ】

内容 カード型デザインの記事一覧表示の際に、端末の指定領域が表示された際に”ふわっと”要素が浮き上がるカスタマイズ。 『.page-archive .archive-entry』を変更すると要素を変更できるはずです。 良く掲載される”ふわっと”表示されるコードは、スクロール…

2カラムのフッターを実装する【はてなブログ カスタマイズ】

フッターのカスタマイズをしました。 今回はカスタマイズの内容と、参考にした記事、あとは構成について記載します。 カスタマイズの内容 (2019/06/07 現在) レスポンシブデザインを採用 PC・タブレットの表示サイズを768px以上として想定し、該当する表示…

ブログデザインを一新しました

タイトルの通りですが、ブログデザインを一新しました。 細かい部分の調整はできていませんが、今までのデザインよりも文が読みやすいようになってると思います。 今後とも、iiieをよろしくお願いします。

作りかけのブログデザイン

作りかけだった新しいブログデザインを暇を見つけては作っています。 移転前の跡地でテスト中。 https://gorislog.hatenablog.com/ noteみたいなシンプルなつくりにしたい。 note.mu

amazonから謎メール。開いてみると、アソシエイト報酬だった

amazonからメールがきた。 身に覚えがなかったけれど、アソシエイトプログラムの報酬なのだそう。 報酬の選択を『ギフト券』に指定していたので、メールで届いたみたい。 (黒で消しまくってますが....) ギフト券番号が記載されていて、ギフトコードをAmazo…

サイドバーのカテゴリー背景色を変更する【gram】

はてなブログテーマ『gram』のカスタマイズ記事です。 gramsample.hatenablog.jp サイドバーのカテゴリー背景色を変更する やり方 関連する記事 サイドバーのカテゴリー背景色を変更する 背景を変更する場合、色によってはサイドバー(フッター)のカテゴリ…

記事一覧ページのアイキャッチ画像サイズを変更する【gram】

はてなブログテーマ『gram』のカスタマイズ記事です。 gramsample.hatenablog.jp 画像サイズを変更する やり方 画像サイズを変更する デフォルトでは、記事一覧ページの画像サイズは影付き白ボックスの横幅100%表示、縦幅は200pxで指定しています。 横幅に…

背景色が徐々に変化するモーションを追加する【gram】

はてなブログテーマ『gram』のカスタマイズ記事です。 gramsample.hatenablog.jp 背景色が徐々に変更するモーションを追加する やり方 背景色が徐々に変更するモーションを追加する グラデーションの様に背景が変わるCSSです。 スマホでは正常に動作しない可…

カード型レイアウトの『記事カード』にモーションを追加する【gram】

はてなブログテーマ『gram』のカスタマイズ記事です。 gramsample.hatenablog.jp カードにモーションを付ける gramでは、デフォルトでブログタイトルにモーションを付けています。 このカスタマイズでは、モーションを記事一覧表示時のカード部に付けるもの…

ページ背景(画像・色)を簡単に設定する【gram】

はてなブログテーマ『gram』のカスタマイズ記事です。 gramsample.hatenablog.jp 背景色を指定する(簡単) 背景色を指定する(CSS) 背景画像を指定する 背景色を指定する(簡単) はてなブログのデザイン内にある『背景色』を選択することで、背景色が変わ…

”シームレス画像”を使って背景にこだわる【gram】

はてなブログテーマ『gram』のカスタマイズ記事です。 gramsample.hatenablog.jp シームレスパターンとは ダウンロードの仕方 設定 画像+色でアレンジ シームレスパターンとは シームレスパターンは「つなぎ目のない」と訳せるように、画像と画像を真横に配…

影付き白ボックスをヘッダーorサイドバーで使う方法【gram】

はてなブログテーマ『gram』のカスタマイズ記事です。 gramsample.hatenablog.jp 影付き白ボックスを設置 使い方 ヘッダー(タイトル下)に影付き白ボックスを追加する場合 フッター(サイドバー)に表示する方法 影付き白ボックスを設置 gramの記事一覧や記…

スマホ・タブレットをレスポンシブデザインに設定する【gram】

はてなブログテーマ『gram』のカスタマイズ記事です。 gramsample.hatenablog.jp レスポンシブデザインについて 設定方法 レスポンシブデザインについて gramはレスポンシブデザインに対応しています。 レスポンシブデザインとは、画面サイズに依存しないデ…

ヘッダーの『ブログタイトル』をカスタマイズする【gram】

はてなブログテーマ『gram』のカスタマイズ記事です。 gramsample.hatenablog.jp 『ヘッダー:ブログタイトル』のカスタマイズについて フォントを変更する フォントを読み込む 読み込んだフォントをCSSで指定する タイトルサイズ・字間の調整 『ヘッダー:…

フルスクリーンメニューを設置する【gram】

はてなブログテーマ『gram』のカスタマイズ記事です。 gramsample.hatenablog.jp フルスクリーンメニューについて コード 2019/04/30:【追記】閉じるボタンの追加方法 2019/05/04:【追記】三本線ボタンを"MENU"又はアイコン表記にする フルスクリーンメニュ…

はてなブログテーマ『gram』を投稿しました

当ブログで使用しているテーマを『gram』と名付け、テーマストアに投稿しました。 今までゆきひー氏のNakedをカスタマイズしていましたが、今回ははてな公式が配布している土台テーマの”Boilerplate”をカスタマイズし、制作しました。 デモページ gramsample…

CSS:記事を読みやすいよう、目次をカスタマイズしたよ【はてなブログ向け】

目次をカスタマイズしました。 階層になっていますが、アイコンマークは同じ。 別途指定できると思いますが、僕はこれで満足なので追記予定はありません。 CSS .entry-content .table-of-contents { margin: 1em 0; padding: 0 0 16px 0; border: 1px solid …

CSS:サイドバーで使うおしゃれな画像ボックスの作り方

画像背景のリンクボックスをフッター(実際にはサイドバー扱いですが)に設置しました。 www.iiie.nagoya ”はじめに読んでほしいオススメ記事”のリンクボックスです。 背景ははてなブログのデザイン内にある選択できる背景より使用、左側に斜め掛けリボンを…

CSS:右上に固定されたプルダウン(トグル)メニューの取り付け方

ブログデザインを変更しました。 今回のカスタマイズに際して、フッターに設置していたメニューをプルダウン式に変更し、fixedで右上に固定、ページ位置がどこにあっても、メニューにアクセスできるようになりました。 今回は、僕が設置したプルダウン式のコ…

CSS:一覧記事表示の『カード型レイアウト』カスタマイズについて

トップページである記事一覧ページのカスタマイズをちまちましていました。 今回はカスタマイズした一部分のコードを備忘録として掲載します。(そのままの使用を推奨する記事ではありません、仕様は自己責任で) 使用しているコード 部分解説 ページ表示時…

記事下のフォロー&シェアボタンを変更

記事下のフォローボタンとシェアボタンの変更・追加をしました。 PCサイズでは”記事タイトル”とアイコンに題が記載されます。 スマホサイズでは、アイコンのみが表示されます。 使用したコードはこちら。 blog.minimal-green.com www.foxism.jp 余白指定と、…

フッターデザインとブログタイトルを一部変更しました

新年が明けて、すでに半ばです。早い。 最近、旧年中に行いたかった、ブログ軽量化に向けて作業をしています。 www.iiie.nagoya 僕のブログの読み込み速度が遅いのは大方、“画像サイズ”の問題なので、画像処理や圧縮、スクリプトを使用した読み込み遅延など…

【はてなブログ向け】カード型記事一覧化した際に起きる画像拡大表示の対処法

当ブログでは、カード型の記事一覧化を採用しています。 はてなブログProに申し込むと、トップページの『記事一覧』を使用できるので選択、あとはCSSコードを書き換え、アイキャッチ画像を拡大し、記事タイトルや内容を調整して表示させます。 コードを紹介…

Amazonアソシエイトプログラムの審査通過しました【考察】

タイトルの通りなんですが、Amazonアソシエイトプログラムの審査を通過しました。 以前に一度、登録作業をしたのですが、落選。 www.iiie.nagoya www.iiie.nagoya 昨日朝、登録申請をしたところ、昼過ぎに返答があり、無事審査が通りましたので、考察を書い…

GoogleAdsenseの『自動広告』がやっとONになった件

GoogleAdsenseが無事登録できたのが11月13日で、その日のうちに”自動広告”なるサービスを利用し始めました。 www.iiie.nagoya ”自動広告”は、GoogleAdsenseで取得できる自動広告のコードをheadに入力すると、自動的に広告が配置される優れもの。いちいち記事…

"Google PageSpeed Insights"のスコアが悪化した対策

※現状、満足のいく改善は行えていません。備忘録としてお読みください。 定期的にブログの表示速度をGoogleの”PageSpeed Insights”で計測していたんですが、スコアが急落しました。 PageSpeed Insights いつのまにか、PageSpeed Insightsのページが変わって…

CSS:動きのあるアイコンボタンの付け方

当ブログで使用している、マウスオーバー時に動きのあるボタンの取付方法を紹介します。 当ブログではページ下部のメニューボタンに使用しており、マウスオーバー時に”背景が変色しながら上下に別れる”モーションをします。 ※こちらは画像ですので、動きませ…

ブログデザインとカスタマイズについて

こんにちは 今回は ”このブログ” のデザインとカスタマイズについて書いていきます。 僕の備忘録兼、カスタマイズに悩んでいる方の手助けになれば幸いです。 テーマ カスタマイズ構成 当ブログのカスタマイズ内容 全体 2カラムを1カラム化 ページ表示時にふ…