広汎性発達障害の女がたまに毒を吐くブログ

広汎性発達障害(診断済)のヘッポコな女が、好きな映画(主にホラー、B級、カルト映画)や漫画、ブログカスタマイズ、日々思うこと等を綴る雑多なブログです。

新ブログ「うらなか書房のあやしいグッズあり〼」
うらなか書房のあやしいグッズあり〼

上記に移転しました。今後は上記の新ブログで、ホラーなもの奇妙なものB級っぽいものについての紹介などをしていきます。よかったらご覧ください!

うらなか書房のTwitter  「うらなか書房のあやしいグッズあり〼」をfeedlyで購読する  うらなか書房のFacebookページ  うらなか書房のGoogle+ページ  うらなか書房のtumblr うらなか書房のLINE

たまに毒吐くちゃんグッズ販売中!

たまに毒吐くちゃん黒Tシャツ

TSHIRTS TRINITY

SUZURI

で販売して
います!
価格・送料比較表

たまに毒吐くちゃんラグランTシャツ

ブログを書く時に役立つかもしれないオンラインジェネレーター5つ【見出し、メニュー等…使い方のGIF動画あり】

こんにちは! たまに毒を吐くです。

本日は、ブログを書く時に役立つかもしれないオンラインジェネレーターを5つご紹介します。

オンラインジェネレーターとは、Web上でHTML・CSSコードやGIFアニメを作成してくれるツールのことです。
フリーソフトのようにPCにダウンロードをする必要がないのが特長です。

見出しを作成出来るジェネレーター

このような吹きだし型の見出しなどが作成出来ます

使い方の動画

見出しの作り方の動画

注意点

角丸の調整がオンライン上で効かないようなので、CSSコードを貼り付ける際に、「border-radius:3px;」の3を別の数字に変えて調整してみてください(数字が大きい方が角が丸くなります。このブログの見出しの場合は10pxです)。


背景色などの色は、ボックスをクリックすると現れるカラーチャートから選んでもいいですし、好きな色をあらかじめ決めておいてそれを指定することも可能です(#から始まるカラーコードを入力します)。

色は下記のサイトなどが参考になります。

その他

はてなブログの場合、CSSのコードを「管理画面⇒デザイン⇒スパナみたいなマーク⇒デザインCSS」に貼り付けます。


CSSの「.sample2」を全て「h3」などに置き換えれば、htmlは

<h3 class="sample2">見出しの文章</h3>

でなく、

<h3>見出しの文章</h3>

と書くだけでよくなります。

はてなブログでは、記事作成画面の大見出し=h3中見出し=h4小見出し=h5になるようなので、この方が楽かも…)。

メニューバーを作成出来るジェネレーター

以下のような水平のメニューバーを作成することが出来ます。

メニューバー

CSS Menu Generator - CSS Portal

使い方の動画

メニューの作り方の動画

注意点

大きく表示されている始めのいくつかが純粋なCSSのメニューで、その他は背景に画像を使っているようです。
その場合CSSをコピペする際に、画像のアドレスを変更する作業が加わる可能性があります。

よく分からない場合は、始めの方のちょっと大きく表示されているものの中から選んだ方がよろしいかと思います。

その他

はてなブログの場合、CSSのコードを「管理画面⇒デザイン⇒スパナみたいなマーク⇒デザインCSS」に貼り付け、htmlは「管理画面⇒デザイン⇒スパナみたいなマーク⇒記事⇒記事上」などに貼り付けます。


ちなみに、はてなブログの記事一覧のURLは、サイドバーの「月別アーカイブ」を右クリックして「リンクのアドレスをコピー」などで取得出来ます。
それか、トップページURLに「archive」を付け足します。
このブログの場合は「http://dokuwohaku.hateblo.jp/archive」が記事一覧ページです。

それぞれのカテゴリー一覧のURLも、サイドバーのカテゴリーから同じように取得出来ます。


下記は似たようなジェネレーターです。

CSS MenuMaker | HTML, CSS, & jQuery Menus

テーブルを作成出来るジェネレーター

以下のようなテーブルを、目で見て確認しながら作成することが出来ます。

作品名 公開年
怪談昇り竜 1970年
女番長ゲリラ 1972年

使い方の動画

テーブルの作り方の画像

HTMLのtableの作り方の動画になっています(Markdownも同じような感じです)。

画像が重くなってしまうので入れられませんでしたが、Edit⇒Undoで操作を元に戻したり、ColumnRowで列や行を足したり消したりということも可能です。

注意点

はてなブログで、「見たままモード」で編集している場合、HTML編集に切り替えてコードを貼り付けてください。

Markdownで記事を書いている方は、HTMLコードをそのまま貼っても大丈夫ですし、Markdownのコードを吐き出してくれるページもあるので、それを貼り付けてもOKです(ただMarkdownでは表に色をつけることは出来ないようです)。

パタパタGIFアニメを作成出来るジェネレーター

以下のようなGIFアニメを作成出来ます。

パタパタアニメGIF

mothereffinganimatedgif(閉鎖してしまったようなので、代替サイトへのリンクを動画の下に貼りました)

下準備

大きさが同じGIF画像複数用意します。

使い方の動画

パタパタアニメの作り方の動画

注意点

上の動画だと分かりづらいですが、バーを左端に移動した場合、速度はかなり速くなります。

追記

上記が使えなくなってしまったようなので、代わりを探しました。

上記より少し設定が複雑かもしれませんが、GIFだけでなくJPGやPNG画像も使えますし、「Optimizer」でファイルサイズを軽くする圧縮もできます。

注意点

  • 画像ファイルは同じフォルダにいれておいた方がよさそう
  • 各画像のサイズが違うと、強制的に最初の画像のサイズになるっぽい? なるべくなら全ての画像のサイズを合わせておいた方がよさそうです
  • 順番はドラッグ&ドロップで変更可能

ぽよぽよGIFアニメを作成出来るジェネレーター

以下のようなGIFアニメを作成出来ます。

ぽよんぽよん くるり
ぽよんぽよんGIF くるりんGIF

下準備

JPG画像PNG画像1枚用意します。

使い方の動画

ぽよぽよGIFの作り方の動画

注意点

アニメを選んでいる時に動作がものすごく遅くなります。
下手するとブラウザがクラッシュします。

おまけ:忍者おまとめボタン(SNSボタン)

忍者おまとめボタン

ブログの記事下などに設置出来るソーシャルボタンです。
オンラインジェネレーターとはまたちょっと別物だと思うのですが、これはかなりおすすめです。

忍者おまとめボタンの「共有」ボタン

TwitterFacebookなどのボタンはもちろんのこと、「共有」というボタンに、mixiブラウザのお気に入りEvernoteメールで送るなどといった項目までもが収納されているのです。

また、この項目をいじることも出来ますし、「共有」ボタン自体を外すことも出来ます(他のボタンについても、どれを設置するかを自分で自由に選べます)。
その変更は管理画面からすることができ、コードを貼り直す必要はないようです。

Twitterのつぶやき数が表示されなくなった際に、はてなブログ公式のボタンの表示がアンマリだったもので導入したのですが、見た目もキレイだし設置してみてよかったです。

ブログをなさっている方は、よかったらお使いになってみてはいかがでしょうか。

PC画面の録画方法は下記の記事をご覧ください

PC画面を録画出来る動画キャプチャソフトなら「Screen To Gif」がおすすめ【フリーソフト】 - 広汎性発達障害の女がたまに毒を吐くブログ

広告を非表示にする
新ブログ「うらなか書房のあやしいグッズあり〼」
うらなか書房のあやしいグッズあり〼

上記に移転しました。今後は上記の新ブログで、ホラーなもの奇妙なものB級っぽいものについての紹介などをしていきます。よかったらご覧ください!

うらなか書房のTwitter  「うらなか書房のあやしいグッズあり〼」をfeedlyで購読する  うらなか書房のFacebookページ  うらなか書房のGoogle+ページ  うらなか書房のtumblr うらなか書房のLINE