クリアメモリ

プログラミングやモーショングラフィックス、便利なアプリケーションなど雑多に記録するブログ

WEB

Vivaldiっていう多機能ブラウザが便利すぎてChromeには戻れない!

こんにちはクリアメモリです! 先日、Vivaldiというブラウザに乗り換えました。 というのも、実際に使って見ると「軽量」かつ「多機能」でChromeよりも使いやすく、デザインも自由にカスタマイズできて便利すぎたので紹介します。

【css】ボックス全体がリンクのボタンを使えばページ移動しやすくなって回遊率がアップするかも!

こんにちはクリアメモリです! cssでデザインをカスタマイズしていて、aタグで設置したリンクのクリックできる範囲に困ったことはありませんか?ちょっとしたコードを使えば、ボタン全体をリンクにすることができるので紹介します。

【css】emとかpxとか%ってどんな違いがあるの?使い分けできるようにしよう

こんにちはクリアメモリです! 今回は、cssで使われる単位の「px」「em」「%」はどのような違いがあるのかについて紹介します。これらはそれぞれ、使われるタイミングが変わってくるので参考にして見てください。

noindexを正しく使えばサイトの評価もPVもアップして幸せになれるって話

こんにちはクリアメモリです! 今回は、ブログを運営していく上で重要になってくる「noindex」のお話です。コンテンツ量の少ない記事をnoindexにすることで、サイト全体の評価をあげられる可能性がありSEO的にもプラスに影響するので紹介します。

【css】アニメーションの再生を終了時で固定する方法!

こんにちはクリアメモリです! cssでアニメーションを実装すると、アニメーションが完了した時に最初へ戻ってしまいますよね。もしそのような場合に、アニメーションを終了地点で止めておくことができるので紹介します。

デベロッパーツールの背景を黒にして親しみやすいデザインに変更しよう

こんにちはクリアメモリです! 私は普段、SublimeTextという無料のエディタを使ってプログラミングをしています。そのエディタは、背景を黒に変更しているため、デベロッパーツールの背景が白くて違和感がありました。 そこで今回は、デベロッパーツールの背…

デベロッパーツールで0.1とか100ずつ値を変更するコマンドが超便利だった!

こんにちはクリアメモリです! はてなブログやWordPressなんかでサイトのカスタマイズを行っていると、デベロッパーツールで値を確認したり調整したりしますよね。そのような場合に値を0.1ずつや100ずつ、10ずつ調整する方法があるので紹介します。

display:noneとvisibility:hiddenの違いって何?実際に比べてみた

cssでカスタマイズをしていて要素を隠したいなんて時がありますよね。 そのような時に、よく「display:none;」や「visibility:hidden;」を使うことになると思うのですが、これらはどちらも要素を隠すためのcssなんです。

【はてなブログ】cssの見出しカスタマイズ例55種+α!上級デザイン編

前回、はてなブログの見出しカスタマイズ例を紹介しました。そこで紹介したのはシンプルなデザインだったのですが、今回はちょっと手の込んだカスタマイズをする「ちょっと上級編」です。 基本的にコピペでも使えるので試してみてください。

【はてなブログ】cssの見出しカスタマイズ例55種+α!シンプルデザイン編

前回、はてなブログのcssを使って見出しのデザインをカスタマイズする準備が整いました。そこで今回は実際に見出しのデザインcssをカスタマイズしていきましょう。 今回紹介するのは「シンプル」な見出しデザインです。

【はてなブログ】cssの見出しカスタマイズ例55種+α!準備編

こんにちは! 今回から数回に分けて「はてなブログの見出しデザインのカスタマイズ」について紹介していきます。色や細かい調整はあるものの、基本的にコピペで実装できるので試してみてください。 まずは、見出しデザインのカスタマイズをする前に幾つかの…

HTMLのリンクを新しいタブで開くようにするtargetの使い方!

こんにちは! HTMLでサイト内にリンクを貼り付けた時、同じタブで開くのか新しいタブで開くのか設定したい事がありますよね。そういった時は、HTMLでリンクを貼る時に使う「aタグ」にちょっとしたテキストを追加するだけで実装できるので紹介します。

Googleアナリティクスの拡張機能が便利すぎる!アクセス数やクリック数をページごとに確認するPage Analyticsの使い方

サイトやブログでアクセス解析をするために、ほぼ必ずと言って良いほど使っているのが「Googleアナリティクス」だと思います。このGoogleアナリティクスには、「Page Analytics」という無料のChrome拡張機能があって、とても便利なんです。 そこで今回は、Pa…

【はてなブログ】あのサイトのテーマかっこいい!って時に調べる方法

はてなブログで書かれたサイトを見ていて、この人のカスタマイズいいなー テーマ何使ってるんだろう?ってなることがあるかと思います。 実ははてなブログは、アクセスしたサイトのテーマを簡単に確認することができるんです。そこで今回は、自分以外のサイ…

【SublimeText】インデントのスペース幅を調整するカスタマイズ法!!

前回、SublimeTextでフォントサイズを変更する方法を紹介しました。 似たようなカスタマイズを行うことで、インデントのスペース幅(Tabキーを押した時にできる空白の大きさ)を調整することができるので紹介します。

【SublimeText】テキストのフォントサイズ(文字サイズ)を自由にカスタマイズする!

今回は、無料テキストエディタのSublimeTextのカスタマイズを紹介します。 ディスプレイからの距離が遠かったり、前に使っていたエディタとフォントサイズを同じくらいにしたいと言った時に、SublimeTextでカスタマイズするにはちょっとややこしかったりする…

【SublimeText】スニペットを登録して作業効率大幅アップ!

SublimeTextなどのテキストエディタを使って処理を記述する時、同じようなコードを繰り返し記述することが多いですよね。HTMLでは、<head>や<body>などです。 SublimeTextであれば、「スニペット」という機能を使うことで、自由に定型文を登録しておくことができるので紹</body></head>…

【はてなブログ】トップページにアドセンス広告を設置するカスタマイズ

今回は、はてなブログのトップページにアドセンス広告を設置する方法を紹介します。 トップページの下(ページャーの上)にアドセンスを設置することで、トップページを訪れてくれた方の目に止まりやすくなると思いますので参考にしてみてください。

【はてなブログ】目次を開閉式にカスタマイズしてみた

先日、はてなブログの記事中に目次を設置する方法を紹介しました。 もし、目次に表示する見出しの数が10以上あったりして、目次だけでページが埋まってしまうような場合、開閉式にすることでスペースを削減できます。 そこではてなブログの目次を開閉式にカ…

【はてなブログ】スマホ版のデザインCSSをカスタマイズする方法

はてなブログでサイトのデザインをカスタマイズする場合、【デザインCSS】という欄にcssを記述していくと思いますが、スマホ版だとこの項目が存在しませんでした。 そこで、今回はスマホ版のデザインCSSをカスタマイズする方法を紹介します。

【はてなブログ】自作シェアボタンのカスタマイズ例まとめ|コピペOK!!

先日、はてなブログにSNSシェアボタンを設置する方法を紹介したのですが、その中で紹介した【はてな】や【Twitter】のデザインはシンプルなものを例にあげました。 そこで今回は、シェアボタンのカスタマイズ例をいくつか作成してみたので紹介します。

【はてなブログ】SNSシェアボタンを記事下に設置するカスタマイズ方法

はてなブログで記事を公開してユーザーの方に読んでもらった時、TwitterやFacebookなどのSNSでシェアしてもらいたいですよね。 読んでくれた方がシェアしようと思っても、そもそもシェアボタンが設置されていなかったらせっかくの機会を失います。 そこで今…

【SublimeText】インデント・アンインデントを複数行で実行するコマンド

今回は、SublimeTextを使って「インデント」や「アンインデント」を複数行まとめて実行するコマンドを紹介します。 先日は、自動的に整形する方法を紹介しましたが、部分的にインデントを調整したい時がありますよね。そういった時はインデント・アンインデ…

【SublimeText】複数行を自動で整形し直す方法

プログラムをエディタで記述していると、いつの間にかインデントがおかしくなってしまい、コードが読みづらいといったことがあるかと思います。そういった時に、ひとつひとつインデントし直すのは大変ですよね。 SublimeTextであれば、複数行をまとめて「整…

【SublimeText】一行をまとめて複製するコマンド

SublimeTextは無料で使えるエディタなのですが、このアプリケーションにはいくつもコマンドが用意されており、プログラムを書きやすくなっています。 そこで今回は、コマンドの中でもよく使用される「一行まとめて複製」する方法を紹介します。

CODEPREPがリニューアルして再始動【無料プログラミング学習サイト】

WEB

先日、CODEPREPにアクセスしたところ、運営からCODEPREPがリニューアルするという旨の通知が来ていました。 CODEPREPは無料のプログラミング学習サイトで、初心者の方にかなりオススメなので紹介します。 また、リニューアルに伴うメンテナンスが実施される…

プログラミングが無料で学べるサイトCODEPREP使ってみた

WEB

今回は無料のプログラミング学習サイト「CODEPREP (コードプレップ) 」について紹介します。 このサイトはJava や HTMLなどのプログラミング言語を基本から学ぶことができ、最終的にはより実践的なプログラムを書いてアプリケーションを作ることができます。…

広告掲載率がアドセンスに追加されたので試してみた

WEB

先日、Googleアドセンスのページを確認していたところ「広告掲載率」という項目が新たに追加されていました。 いつから追加されていたのかわかりませんが、収益と利便性のバランスをとるためのもののようです。 そこで、この広告掲載率にはいったいどのよう…

jQuery 自動スクロールで任意の位置まで移動させるボタンの作り方

WEB

WEBでサイトを見ていると、記事を読み終わったタイミングや読み始めのタイミングで、ページ上部や目的の項目が書かれた箇所までスクロールしたい時がありますよね。 そのような動作もjQueryを使えば、簡単に実装できるので紹介します。

お絵描きツールをCanvasとjQueryでブラウザ上に作ってみた

WEB

HTMLのCanvasというコードを使うことによって、WEB上にお絵かきできるサイトを作成することができます。 Canvasの使い方が分かれば、直線や図形を描けるようになるので紹介します。

【jQuery】ストップウォッチを作ってみた!

WEB

javascriptやjQueryを使うことによって、様々なプログラムを組むことができます。 そこで今回は、jQueryを使って時間を計ることができるストップウォッチを作ってみようと思います。

【YouTube】カスタムサムネイルの推奨アスペクト比はどのサイズ?

WEB

YouTubeに動画をアップする時に、サムネイルを設定すると思います。 動画アップ画面で表示されるサムネイルを使っても良いのですが、どうせなら自分で作ったサムネイルを使いたいですよね。 そこで、カスタムサムネイルに使用する画像の大きさはどのくらい…

htmlやcssを自動リロードさせるBrowsersyncの使い方

WEB

cssやhtmlをカスタマイズして、保存してから変更を確認する時に毎回ブラウザを更新しますよね。その作業が自動化できたら便利だと思いませんか。 今回紹介する「Browsersync」を使うことで、ファイルに変更を加えたタイミングで自動でリロードしてもらうこ…

WEB開発 メモ帳

この記事は Web開発 について覚えておきたいことを、メモ書き程度にまとめておく記事になります。理解が足りていなかったり、浅いこともあるかと思いますので注意してください。 また、こちらの内容は改めて記事に興すかもしれません。 備忘録記事なので、参…

【jQuery】クリックされたら回転し続ける要素の作り方

jQueryでは、cssをいじることによって要素の値を変更することができます。 そこで今回は、jQueryを使って「要素がクリックされたら、その要素を回転させ続ける」方法を紹介します。

【JavaScript】Canvasで文字や図形に影をつけてみよう

これまで、幾つかの記事に分けてCanvasの使い方を紹介してきましたが、今回は図形や文字に影をつける方法を紹介します。 文字や図形に影をつけることで、立体的に描画することができますので試してみてください。

【javascript】Canvasで文字を描画するfillTextの使い方

WEB

先日、Canvasを使ってWeb上に星や直線、円などを描画する方法を紹介しました。 実はCanvasには「fillText」と言うメソッドを用いることで「文字」を書くこともできるので紹介します。

【JavaScript】canvasで描いた線がぼやけてしまう時の対処法

WEB

前回、canvasを使って図形や円を描画する方法を紹介しました。 その中で直線を描画した時に線がぼやけて表示されてしまったかと思います。 今回はそのような時の対処法について紹介します。

【JavaScript】Canvasを使ってWeb上に星や丸を描いてみよう

htmlのcanvas要素を javascript を使って値を指定することによって、web上に直線や星などの図形を描くことができるようになります。 今回はcanvasで図形を描くために必要なコードを紹介していきます。

新着記事