after work Lab

好きな事だけをお勉強させていただきまーす

WebDesign

あなたのブログのYouTube動画はスマホで崩れてませんか?

この記事はブログでユーザーフレンドリーにYouTube動画を表示再生する方法の説明です。 後で説明しますが、普通にYouTube動画を埋め込むとスマホでは表示が崩れてしまうのでレスポンシブ対応が必要です。 また、YouTube動画をたくさん埋め込んだ場合はデータ…

【解決方法】このページはモバイル フレンドリーではありません

久しぶりにサチコ(Search Console)を見たらモバイル ユーザビリティでエラーが出てました。 エラーの型は 「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」「コンテンツの幅が画面の幅を超えています」 となってました。

恋に落ちてしまう魔性のエディタ「SublineText」

はじめに この記事は初心者におススメしたいエディタ「SublineText」の紹介です。 SublineTextはプログラミング・コーディング作業で多く使用されているテキストエディタです。 恋に落ちるエディタ(The text editor you'll fall in love with)と言われている…

Bloggerを始める方におすすめしたいテンプレートはどれ?

はじめに この記事はBlogger初心者の管理人がBloggerでブログを運用する際に、どのテンプレートを選んだかを備忘録としてまとめてみました。 これからBloggerを始める方でテンプレートの選択に迷っている方は、参考に読んでみて下さい。 //

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

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

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

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

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

皆さんはTwitterをブログで活用してますか? 管理人はTwitterでブログ更新を告知してますが、ブログに埋め込んだTwitterは自分好みにカスタマズできることが分かったので、その方法を備忘録としてまとめて見ました。 Twitterのカスタマイズに興味がある方は…

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

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

【色付きで分かりやすい!】ソースコードをハイライト表示させる方法

この記事はプログラムのソースコードを色付きで表示するシンタックスハイライト(Syntax Highlighting)の使用方法の説明です。 はてなブログのシンタックスハイライトは少し残念な仕様で使い勝手が悪かったことと、Bloggerは、そもそもシンタックスハイライ…

【便利】Canvaでブログをおしゃれにデザインしてみよう!

皆さん、無料デザインツール「Canva(キャンバ)」を知ってますか。 私は名前だけは知ってましたが、今まで使ったことがありませんでした。 Canvaを使用しなかった理由は、Canvaが提供するデザインがおしゃれ過ぎるので、当サイトには合わないと勝手に思い込…

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

この記事はブログに埋め込んだYouTubeの動画をCSSでかわいく飾ってみたものです。 YouTubeの装飾にUruさんの動画を埋め込んだきっかけを少し説明します。

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

はじめに なぜヒーローヘッダーで派手な演出をするのか 初心者でもカッコ良くできる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つです。そして、これを効果的に増幅…