マークアップ

ITツール Webディレクターの仕事

2021/1/31

簡単!アプリ不要!画像をSVG変換するウェブツール「vectorizer」の使い方

ウェブサイトの制作にあたっては、SVG形式の画像ファイルが必要になるケースも増えてきた。しかしぼくはPhotoshopやIllustratorを持っていないため、アプリを使って自作することができない。 そこで活用しているのが、PNGやJPEG形式の画像をSVG形式に変換してくれるウェブサービス「vectorizer」だ。 Online Image Vectorizer Online raster to vector converter. Convert your images (jpeg, jpg or ...

Mac Webディレクターの仕事 Windows

2021/1/31

Excelで作った表をウェブで使えるHTMLに書き出す方法

Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Excelを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそんな便利な小技をご紹介。 ちなみにNumbersを使った方法もご紹介していますので、こちらも合わせてご参考にどうぞ。 Numbersで作った表をウェブで使えるHTMLに書き出す方法 | あなたのスイッチを押すブログ Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Ma ...

Mac Webディレクターの仕事

2021/1/31

Numbersで作った表をウェブで使えるHTMLに書き出す方法

Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Mac用のExcelソフト「Numbers」。これを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそんな便利な小技をご紹介。 ちなみにExcelを使った方法もご紹介していますので、合わせて参考にしてみてください。 Excelで作った表をウェブで使えるHTMLに書き出す方法 | あなたのスイッチを押すブログ Webページで表のデザインを組むのは意外と面倒。そんなときに便利 ...

メディア運営

2021/1/31

後戻りはできる!WordPressの過去記事すべてを一括で置換する方法

ブログを始めた当初と今とでは、知識レベルも技術レベルも大きく違います。そうすると気になりだすのは、過去の記事。 無知だったからこそ変なHTMLを書き続けた時期があり、気になり出したら止まらないんです。 例えば私の場合、<h3>タグの直後には必ず「■」を入れていました。 これは前の見出しデザインの関係で、■を入れておいた方が見やすかったためです。しかしCSSを調整したことで、この■が不要になりました。 さて困ったのは、過去の記事。今までずっと「<h3>■」という形で書いてきて、それを今更「<h3>」に変える ...

Webディレクターの仕事 メディア運営

2021/1/31

HTMLで表組み作るならマークダウンが直感的で超簡単だからオススメ

ブログを書いている方なら分かって頂けるでしょう。HTMLで作る表組みが、非常に面倒であることを。 もしその面倒さ加減をまだ知らない方は、以下のリンクを見てみてください。あなたがHTMLでのウェブ制作を生業にしていないなら、20秒もせずに離脱したくなるはずです。 HTML表組みの方法 しかし、ブログで分かりやすい記事を書くなら、表組みを作らなければならない場面もあるのです。そんなときに非常に便利な方法が、マークダウンを使った表組み作成です。 マークダウン記法を使えば、HTMLでの記述とは比べ物にならないほど ...

メディア運営

2015/5/19

[レスポンシブ対応] Adsense広告を画面幅によって出し分ける方法

私のテーマテンプレートはレスポンシブウェブデザイン。つまり、ウインドウ幅に応じてサイト内部の要素が最適化されるようにできています。 しかし、GoogleAdsenseの画像はそのように対応していません。つまり、横長のバナーをスマホで見ると広告が途中で切れてしまいます。 そこで、画面幅に応じて表示されるAdsenseが変更されるように設定しました。以下、備忘録的な記事になりますが、参考になりましたら幸いです。 ブレイクポイントでAdsenseを変更する まず最初に、参考にしたサイトをご紹介します。もし当記事 ...

ITツール

2015/4/30

Evernoteの無限カスタマイズ。HTMLやマークダウンの内容をノートに反映させる方法。

Evernoteのテキスト入力には限界があります。テキストのフォントをあれこれ弄ることができますが、あまり手の込んだレイアウトを作ることはできません。 これに不便を感じていたので、なんとか「見栄えの良いノートを作る方法はないか」と模索していました。 そこで辿り着いた方法が、Macのテキストエディタ「Mou」を使う方法です。 「Mou」はMacで使える無料のテキストエディタ。HTMLにもマークダウン記法にも対応しており、ライブプレビューが使えるのが特徴です。 そして、この「Mou」で書かれたHTMLやマーク ...

© 2021 あなたのスイッチを押すブログ