after work Lab

少しHでニッチな「Webデザイン、家電・IT」のカスタマイズBlogです

Webデザイン

他のWebサイトとは一味違う、目立つデザインをお勉強させて頂いてます

新型コロナウイルスのアイコンを使って感染拡大を防止しよう!

はじめに COVID-19のアイコン一覧 アイコンの使用方法 CSSの読込み HTMLでの読み込みコード CSSでの読み込みコード アイコンの表示方法 HTMLで表示する方法 はてなブログでの使用上の注意 CSSの疑似要素で表示する方法 アイコンのサイズ・角度・動きを変更す…

ブログカードをカスタマイズしてページスピードを速くする方法

はじめに 「はてなブログカード」と「Hatena風ブログカード」の違い 「Hatena風ブログカード」のメリット アクセス元が分かる ページスピードを改善できるかも 自由にカスタマイズできる! 「Hatena風ブログカード」の製作と使用方法 ブックマークレットとは…

Twitterを自分好みのデザインにカスタマイズして埋め込む方法

はじめに なぜTwitterの埋め込みをカスタマイズするのか タイムラインとツイートで使える属性 埋め込みコードの属性一覧表 タイムラインとツイートの埋め込み ツイートの埋め込み方法 ツイートを埋め込むを選択 https://publish.twitter.comへ移動 CopyCode…

人気デザインテーマの目次をサイドバーに固定表示する方法

はじめに 便利な目次 ブログへ目次を設置する方法 現在位置を表示して追尾する目次の設置方法 現在位置を追尾しない目次の設置方法 記事内への目次設定 サイドバーに目次を設定 目次のモジュールを設定 クローンコードの追加 CSSの追加 目次のカスタマイズ …

ブログに雪を降らせて雰囲気を変える方法

はじめに 雪の降らせ方 CSSで雪を降らせる方法 実装方法 Canvasで雪を降らせる方法 実装方法 まとめ ♡いいねはこちら はじめに まだ寒い日が続いてますが、今年は暖冬なのか、あまり雪を見かけません。 クリスマスはとっくに終わっていますが、せめてブログ…

簡単だった!ソースコードに色を付けハイライト表示させる方法

はじめに シンタックスハイライトとは なぜシンタックスハイライトを導入するのか はてなブログのシンタックスハイライトはどこが残念なのか 残念な所その1 残念な所その2 どのシンタックスハイライターが良いのか prism.jsの使用方法 prism.jsで使用するモ…

これは超便利。CanvaでWeb素材をおしゃれにデザインしてみよう。

はじめに Canvaからのお問い合わせ Canvaで出来ること Canvaの登録方法 Canvaで作るWeb素材 ブログのヘッダー画像 記事のアイキャッチ画像作成 最適なアイキャッチ画像のサイズはいくつ? アイキャッチ画像の作成 Twitterのバナー画像作成 404エラー画像作成…

YouTubeをかわいく飾ってみよう!

はじめに Uruさんを何処で知ったのか YouTubeをかわいく飾る ひこうき雲 荒井由実 糸 中島みゆき 流星群 鬼束ちひろ「トリック2」主題歌 Dragon Night / SEKAINO OWARI 奏(かなで) / スキマスイッチ 注意 まとめ ♡いいねはこちら はじめに 先日子供に「お父…

トップの画像をランダムに変える方法

はじめに なぜヒーローヘッダーで派手な演出をするのか 初心者でもカッコ良くできるWebサイト なぜトップビューの画像をランダムに変えるのか トップの画像をランダムに変える方法 ランダムに画像を選択する jQuery CSS HTML アクセス時刻で表示を変える jQu…

Webで出来る!Banksy Artwork Shredder

はじめに 覆面アーティストBanksy Banksy Shredder 「Banksy Shredder」の使用方法 使用方法 プロフィール画像をクリック 画像を右クリック→「名前を付けて画像を保存」 適当なフォルダに保存 「CLICK TO ADD ART」をクリック→画像を選択 シュレッダースター…

ブログのトップを目立たせる方法とは

はじめに WordPress風とは なぜWordPress風にするのか どういう風に変えるのか? 仕掛け1 仕掛け2 どのようにカスタマイズしたのか? ブログに組み込む背景スライドショー jQueryでスライドショー java scriptでスライドショー CSSのみでスライドショー スク…

アダルトなカード型のWebデザインにカスタマイズした方法

はじめに なぜブログのデザインを変えるのか? はてなブログのデザインテーマ テーマの安全な利用 ここまでのまとめ はてなブログテーマのライセンスの種類と内容 はてなブログのデザインテーマのライセンス形態 カスタマイズする前の準備 デザインのコンセ…

ブログのカスタマイズが超快適になる方法

はじめに 注意1 おススメの読者 なぜカスタマイズするのか その1 その2 その3 どんなデザインに変えたいのか? 理想に近い投稿テーマの探索 テーマ ストア - はてなブログ 「Boilerplate」の調査 v1:Hatena-Blog-Theme-Boilerplate-Less v2:Hatena-Blog…

SEO強化につながる、表示スピードが速いブログデザインとは

SEOに強いサイトは、内容の充実が第一条件ですが、訪問者が「面白かった≒美味しかった」と思い、また覗きに来ようと思うかどうかだと思います。 内容の面白さを支えるものが「読みやすさ」「見やすさ」「使いやすさ」の3つです。そして、これを効果的に増幅…