koblog

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

CSS

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

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

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

はてなブログではスマホでCSSを反映させるには、設定を少し変える必要があります。またCSSを自作する際にもコードを書き足す必要があります。そこで今回ははてなブログのCSSがスマホで反映されない場合の対処法を紹介します。 テーマのCSSが反映されない 自…

画像をCSSで表示させてブログを高速化しよう【Sprite画像】

ブログを書いている以上、記事内の画像が増えてしまうのは仕方がないことだと思います。そのため多くのブロガーは少しでも動作を軽くするためにも画像を軽量化させて使っているのではないでしょうか。しかし軽量化した画像でも、使う枚数が数十枚にも及ぶと…

【保存版】Minify化したCSSをはてなブログで読み込む方法

先日から表示速度改善のため、このブログでもCSSの軽量化を試しています。 使ったのはMinifierですが、はじめは軽量化したCSSの読み込み方法が分かりませんでした。そこで今回はMinify化(軽量化)したCSSをはてなブログで読み込む方法をまとめておきたいと…

WEBデザイン初心者にオススメの本・サイト3選

プログラミングを独学でというのはなかなか難しいです。 しかし決して不可能ではありません。良い本やサイトに巡り会えればブログのカスタマイズをするくらいはできるようになります。 そこで今回は「WEBデザイン初心者にオススメの本・サイト」を3つ紹介し…

CSSでスクロールに合わせて追従させる方法

CSS

オシャレなブログではシェアボタンやナビゲーション、ブログタイトルなどを追従させている場合があります。一見難しそうなコンテンツの追従ですが実は「CSS」だけで、できてしまいます。 そこで今回はCSSだけでスクロールに合わせて追従させる方法を紹介しま…

【Milliard】紹介文の前にアイコンをつける方法

WordPressやはてなブログで多く使われるMilliard。 簡単にオシャレにできたり、ブログの種類に縛られないことからも関連記事ツールとして定番になりつつあります。 このようにとても便利なMilliardですが、カスタマイズが少し難しいというデメリットがありま…

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

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

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

CSS

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

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

CSS

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

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

CSS

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

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

CSS

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

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

CSS

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

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

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

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

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

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

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

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

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

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

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

HTMLカラーコードの使い方。サイトを見やすく配色する

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

CSSが効かない時の対処法

CSS

記事を移行しました。 約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で「前のページに戻る」リンクを作ってみる