iiie.nagoya

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

【'19/07/13】
当ブログで使用しているカスタマイズテーマ『riseup』をテーマストアで公開しました。はてなブログを使用している方なら無料でインストールすることが可能です。(はてなProでの利用を推奨しています)

詳細は以下のページに記載しています。
https://www.iiie.nagoya/entry/2019/07/13/210356

ブログテーマページはこちら
http://blog.hatena.ne.jp/-/store/theme/17680117127217464048

Web開発

【アクセス数】はてなブログで毎日更新を辞めるとどうなるか

6月22日に毎日更新を辞めました。 www.iiie.nagoya 今日までで11件の更新。 約2か月で11件なので、毎日更新していた時に比べるとだいぶ減りましたね。 毎日更新をやめるとどうなるのか 結論から言えば、アクセス数は減りました。 毎日更新していた時と比べる…

【riseup】タイトル下におすすめ記事を表示するボタンを設置する方法

デモページで設置しているアコーディオン式のボタンです。 デモページでは、おすすめ記事として表示していますが、表示する内容はhtmlで構成しているので、お知らせ等でも使用できます。 使い方 ダッシュボードより、「デザイン」画面を開き、「カスタマイズ…

【riseup】記事一覧時のカード表示モーションをカスタマイズする

riseupのテーマカスタマイズ記事です。 riseupでは、記事一覧表示(アーカイブやカテゴリー一覧も含まれますが)で、表示する際にカード型デザインを採用していて、俗にいう「ふわっと」した表示になるよう動作指定がされています。 その「ふわっと」表示す…

はてなブログの新テーマ「riseup」をリリースしました

※このページでは、はてなブログテーマの「riseup」の紹介をしています。記事などで紹介する際は、テーマ配布先ではなく、こちらのページを掲載してください。 はじめまして、ブログテーマ「riseup」の制作者のsyttgです。 riseupで二作目のテーマとなります…

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

僕のブログカスタマイズには、ベースにはてなブログ公式のカスタマイズベーステーマ『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に入力すると、自動的に広告が配置される優れもの。いちいち記事…