ホームページ制作会社エスエムティのスタッフブログ

Staff blog

エスエムティの愉快な仲間たち

記事担当
ばさっち

テキストを簡単に円弧にできるjs

こんばんはーばさっちです。

今回は簡単にテキストを円弧できちゃうjsを見つけたのでご紹介したいと思います。
Arctext.js

上記サイトからjquery.arctext.jsをダウンロードして、
使いたいページに読み込ませます。

あとは下記の通り記述すればOKです。

———–
    $(function () {
        $(‘.ここに使いたい円弧したいテキストのIDまたclassを記述’).arctext({
            radius: 100 ←ここの数字で角度調整
        });
    });
———–



ちょっと見せ方を変えたい時のタイトルなどに使用する時に便利だと思います。
この程度であれば画像で作っても良いかと思いますが、微調整も簡単なので、
今度から色々試してみたいと思います!!


記事担当
ばさっち

イラレで簡単手書き風テキスト

こんばんはばさっちです。
今日はIllustratorでできる手書き風テキストを作り方をご紹介します。

まずは「効果」→「スタイライズ」→「落書き」を選ぶ

次にオプションを選びます。
—————————–
角度:30°
アウトラインとの重なり:1px
変位:1px
線幅:1px
角の丸み:0%
変位:30%
間隔:2px
変位:0px
—————————–
だいたいこんな感じでOKです。

後はプレビューを見ながら微調整してもOK!!


最後に線を入れたら完成です!


色変えたり色々アレンジもできます!!

優しい感じのテキストに出来上がりました!!
覚えておくとこういったテキストが似合うサイト作成なんかに役に立つんじゃないでしょうか?
記事担当
ばさっち

deSVGが便利すぎる…

こんばんはーばさっちです。
皆さんはSVGを記述する時ってインラインSVGですか?imgタグでしょうか?

できればインラインで書いてCSSで色の変更ができるのが一番いいんですが、
インラインSVGってコードが長くてなんか分かりづらいですよね…

どうせならimgタグみたいに簡単に記述して色の変更してみたいですよね?
そんなことを可能にしたのが、「deSVG」です。

この「deSVG」を使うのimgタグで記述したSVGがインラインSVGに変換することができちゃいます。

1、まずは本体をダウンロードしたら「desvg.js」というファイルを読み込みましょう!!
2、次に下記のように記述し準備はOK!!

<script>
window.addEventListener(‘load’, function(){
deSVG(‘.svg’, true);
});
</script>

3、後はsvgファイルを読み込むこの時に指定したclass(今回はsvg)を記述します!!

<img src=”images/test.svg” alt=”” class=”svg”>

これで完了です!!

色の変更は下記のようにクラス+pathでOK

.svg path{
fill: #000;
}

imgタグで書ければ記述も簡単だしコードもシンプルでいいですよね!!
記事担当
ばさっち

View in Browserでプレビューできなくなったら

こんばんはばさっちです。
先日Sublimetextでコーディング中にブラウザプレビュー(FireFox)しようと思ったらできていたはずのプレビューができない…

再起動しても治らず…Chromeではプレビューできたので(見れないけど)FireFoxの問題かな~と思って色々調べたらSublimetextの「View in Browser」設定が変わってました…

解決法がわかったのでご紹介します。

まず基本設定→PackageSettings→Setteings-Userを開く


下記画像の部分を変更


私の場合は「C:\\Program Files」を「C:\\Program Files (x86)」に変更したら無事に治りました!

アプデ等で変更になったのかな?
原因は分かりませんが無事プレビューすることができました!!
記事担当
ばさっち

Chromeで画像がぼやける

こんばんはばさっちです。
コーディングしたサイトをChromeで見るとぼやけてる時ってありませんか?(FireFox派)
レスポンシブデザインだったりすると、多少画像を大きく書き出すと思うんですが、PCサイズに縮小表示するとこんな感じで多少ぼやけてることありますよね?



きちんと整数で割り切れすサイズにリサイズできればよいのですが、そうは行かないこともしばしば…そんな時に便利な対処法をご案内したいと思います。

画像のcssに1行追加するだけで簡単に解消できます!!
-webkit-backface-visibility:hidden;を追加するだけ



今回見やすいようにフォントサイズの大きい画像でお見せしているので若干ジャキって見えますが、イラストや通常のテキストであれば目立つことはありません。

どうしてもリサイズできない場合に試してみてはいかがでしょうか?

クリックしていただけると幸いです

http://www.smt-net.co.jp/


ページの先頭へ戻る

ページの先頭へ戻る

お問合せ・ご相談

キャンペーン実施中

pay-per-click