koblog

高校生のWEBデザインブログ

【HTML】難しい漢字にふりがなを振ろう

活版印刷用語で”ルビ”とも言われるふりがな。 難しい感じが使われると見る側としても嫌になるので、なるべく読みやすい漢字を使いたいところですが、必ずしもそれが叶うわけではありません。 そこで今回はHTMLでふりがなを振る方法を紹介します。 ブログのカ…

CSSで実装する文字の「あぶり出し」

探偵漫画などでよく見かける文字のあぶり出し。 一定条件を満たした時だけ文字が見えるようになるので、メッセージを隠したい時などに便利です。 そこで今回は、CSSで実装する文字の「あぶり出し」を紹介します。 (上の部分をマウスでなぞると文字が見える…

CSSだけ!YouTube風の高評価ボタンのサンプル

CSS

YouTubeなど動画配信サービスには高評価ボタンがあるのに、文章を配信するブログではほとんど高評価ボタンは見ません。 とはいえシェアボタンが多く使われるので、必ずしも必要ではありませんがあれば面白いと思います。 そこで今回はYouTube風の高評価ボタ…

【CSS】コードをオシャレに飾るボックスデザイン

CSS

技術系のブログなどではHTMLやCSS、Javascriptなどのコードを書くことが多いと思います。しかしただ<pre>や<code>で囲っただけでは見づらく、syntaxhighlighterなどはJavascriptを使うため動作が重くなってしまいます。また無料ブログでは導入が少し面倒です。 以前、Go</code></pre>…

ブログの更新は5時から8時にするべき理由

ブログなどのメディアは時間帯によってアクセス数が大きく異なります。 だからこそ新聞では朝刊・夕刊があり、ニュースは1日中放送されています。 では一体、ブログの場合何時にアクセス数が一番多くなるのでしょうか。 今回はアクセス数が増える時間帯とブ…

ブログ記事本文のコピーを禁止する方法

WEBサイトやブログなどでは有益な情報がたくさん載っています。 しかし世の中には、そのような情報を無断転載する人も(たくさん)います。 そこで今回は無断転載を防ぐためにブログの本文のコピーを防ぐ方法を紹介したいと思います。今回紹介する内容では完…

【CSS】1文字目だけを大きくする方法

CSS

海外の新聞や、ブログではよく1文字目だけが大きく書かれていることがあります。 特に英語の場合は見栄えもよくオシャレですよね。 そこで今回は1文字目だけを大きくする方法を紹介します。 日本語の場合、色を変えたり行間を変えないと微妙かもしれません…

外部リンクをオシャレにしよう

CSS

HTMLでリンクを貼るといえば<a>タグが定番です。 しかし、普通に書いてもこのように表示されるだけであまり面白くありません。 そこで今回は<a>タグを少しオシャレに変えるカスタマイズを紹介します。 普通の<a>タグと使いこなすことで、見やすくもなると思います。 </a></a></a>…

QRのススメを使いこなそう

WEB

前回の記事のおまけです。 まだ見ていない人はぜひ見てください。 時代はモバイルファースト。URLをQRで共有しよう - koblog QRのススメはこちらから スマホ版:QRのススメ:無料で作成! 簡単QRコード パソコン版:QRコード作成 【無料】:QRのススメ 何文字…

時代はモバイルファースト。URLをQRで共有しよう

WEB

URLの共有といえば「コピー&ペースト」からの「メッセージアプリで送信」が定番です。しかし、時間が無いときにアプリ・ソフトをいくつも起動するのは面倒ですよね。 そこで今回はURLなどの情報をQRで共有できる「QRのススメ」を紹介します。 QRはパソコン…

【CSS】テキストが横に流れるようにする方法

CSS

おしゃれなブログでは静的なブログパーツだけでなく、動的なブログパーツも設置されています。その中でも最もシンプルなのはテキストを動かすことではないでしょうか。 そこで今回はCSSだけで導入できる「流れるテキスト」を紹介したいと思います。 今回の内…

【はてなブロブ】トップページのみ1カラムにする方法

先日、このような記事を書きました。 上の記事では、はてなブログを1カラムから2カラム、2カラムから1カラムにする方法を紹介しています。 しかしおしゃれなブログではブログ内で1カラム・2カラムを使い分けていることもあります。そういうブログを見ると…

【はてなブログ】1カラムから2カラム、2カラムから1カラムにする方法

はてなブログの多くのテーマは2カラムで構成されています。利便性を考えれば当然ですが、たまには1カラムデザイン(レイアウト)のテーマも使ってみたいですよね。しかし現状では1カラムでデザインのよいテーマはほとんどありません。 そこで今回は自分で2カ…

画像を比較できる『比較用スライドショー』の設置方法【はてなブログでも可】

レビューブログなどでよく見かける画像比較用スライダー。 初心者には憧れのブログパーツですが、導入はとても難しそうですよね。しかし実際試してみると簡単に導入することができます。 そこで今回はJavascriptを使って簡単に導入できる比較用スライドショ…

自動でリンクカードを作ってくれる「Embed Code Generator」

先日、このような記事を書きました。 今思い返してみると自作では限りがあります。いくらカスタマイズし放題といってもなかなか難しので、メリットはJavascriptを使っていないことぐらいになってしまします。 そこで今回は、自動でリンクカードを作ってくれ…

【はてなブログ】トップページの記事を非表示にする方法

はてなブログの無料版では固定ページをつくることも、トップページの記事を一覧形式にすることもできません。基本的に記事の全文が表示されてしまいます。 それでも、どうしても固定ページを作りたいという人はたくさんいると思います。そんな人に向けて今回…

【裏技あり】はてなブログのCSSを編集する方法

文字の装飾や背景色などブログのカスタマイズで必須のCSSですが、はてなブログは他のブログサービス(特にWordpress)と比べてCSSの編集が分かりづらい・やりづらいと言われています。そこで今回は初心者向けと上級者向けに2通りのCSSの編集方法を紹介しま…

はてなキーワードのリンクを消す方法

はてなブログを使っていると、どうしても特定のキーワード(はてなキーワード)にリンクとアンダーラインが付いてしまいます。このリンクはブロガーだけでなく、見る人にとっても面倒なのです。そこで今回は「はてなキーワードのリンクを無効にする方法」を…

シンプルかつカスタマイズし放題のリンクカードを作ってみた。

はてなブログのリンクパーツといえば、カードみたいなものを思い浮かべると思います。ブックマークが表示できたり、表示が簡単なのでとても便利です。 ただカスタマイズが難しかったり動作が重くなったりと、良いことばかりではありません。そこで今回はシン…

【はてなブロガー必見】今まで使ってきた中で一番おすすめのテーマは〇〇だけ

今回ははてなブログのオススメテーマを紹介したいと思います。 ブログテーマなどブログのデザイン次第でブログのPVは桁違いに変わることがあるので、良かったらこれを機にテーマを変えてみてください。 はてなブログのテーマストアは下のリンクから飛べます…

クリックでクリップボードにコピーする方法【HTML&JavaScript】

記事を移行しました。 約3秒後に自動的にリダイレクトします。 自動でリダイレクトしない場合はこちらからどうぞ。 //

お問い合わせ

プライバシポリシーに同意したものとします。 読み込んでいます...

【Win/Mac】オススメのURL短縮サービス2選

WEB

記事を移行しました。 約3秒後に自動的にリダイレクトします。 自動でリダイレクトしない場合はこちらからどうぞ。 //

【簡単な】Font Awesomeの導入方法

記事を移行しました。 約3秒後に自動的にリダイレクトします。 自動でリダイレクトしない場合はこちらからどうぞ。 //

【初心者必見】はてなブログでヘッダー・フッターメニューを消す方法

記事を移行しました。 約3秒後に自動的にリダイレクトします。 自動でリダイレクトしない場合はこちらからどうぞ。 //

はてなブログでコメントに返信をする方法【注意点あり】

記事を移行しました。 約3秒後に自動的にリダイレクトします。 自動でリダイレクトしない場合はこちらからどうぞ。 //

エスケープ文字(エスケープシーケンス)とは【分かりやすく解説】

WEB

記事を移行しました。 約3秒後に自動的にリダイレクトします。 自動でリダイレクトしない場合はこちらからどうぞ。 //

Twitterの「埋め込みタイムライン」を使う方法【カスタマイズ】

WEB

記事を移行しました。 約3秒後に自動的にリダイレクトします。 自動でリダイレクトしない場合はこちらからどうぞ。 //

CDNを読み込む方法【使い方解説】

WEB

記事を移行しました。 約3秒後に自動的にリダイレクトします。 自動でリダイレクトしない場合はこちらからどうぞ。 //

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

記事を移行しました。 約3秒後に自動的にリダイレクトします。 自動でリダイレクトしない場合はこちらからどうぞ。 //

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる