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

Staff blog

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

記事担当
ばさっち

photoshopで知らなかったこと

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

photoshopを使っていて今まで知らなかった事が恥ずかしい出来事があったので書いてみたいと思います。

画像など加工した後、画像にクリッピングマスクを適用するのに、いちいち右クリックから「クリッピングマスクを作成」を押していたのですが、これって何個もやってると本当にめんどくさい…



よくみんな文句出ないなって思ったり、アプデで簡単にならないかなって思ったり…
でもみんなきっとこのやり方でやっているのだろうと思い、自分を納得させて今日もまた画像の加工をしようと思った時、いつもは気づかないけどなんか変なボタンあるな…



なんだこれ??
でも下に矢印出てるし…
もしかして…

まさかこれって「クリッピングマスクを作成」のボタンだよね…
いままで知りませんでした…



しかもめっちゃ楽…

もう加工も苦じゃない!!
記事担当
ばさっち

webpをphotoshopで書き出しする方法

こんばんはばさっちです。
ちょっと遅いのですが、今更ながらphotoshopでwebpを扱えるようにプラグイン追加しました。
今までは通常のフォーマットで書き出した後に画像をWebPに変換このようなサイトで一括変換してたのですが、photoshopで書き出しできないかなっと思って探していたらとても使いやすいプラグインを見つけました。

AdobeWebM

まずはここからダウンロードします。


無事ダウンロードができたら「WebP_v0.5b9_win」をを解凍して自分の環境にあったbit数のフォルダをクリックします。

中に入っている「WebPFormat64.8bi」をphotoshopのPlug-insフォルダに追加すれば完了です。

私の環境の場合は Program Files\Adobe\Adobe Photoshop 2021\Plug-ins でした。

追加した後にphotoshopを開いてみると…


きちんと追加できてますね!!

6月からLCPなどがSEOに関係してくるので画像は軽いに越したことはありません。

近いうちに画像はwebp一本で問題なくなると思いますので、今から準備しておくと後々便利にかもしれませんね。

ちなみに画像アセットには対応してなかった…してたらもう完璧でしたね!!
記事担当
ばさっち

CDNを使う時にはSRIはセットで使おう

こんばんはーばさっちです。
CDN(Content Delivery Network)使ってますか?
ファイルダウンロードしなくていいしすごく便利ですよね!!

私も何も考えずにCDNがあれば迷わず使用していました。

ただこのCDNのファイルが何者かによって改ざんや悪意あるファイルに変更されてしまったら…大変ですよね…

そこでSRI(SubResource Integrity)を使ってて改ざんや悪意あるファイルに変更されていないか検証を行いましょう!!

■SRI Hash Generator



たったひと手間加えるだけでセキュリティ面も万全になります!
どこに落とし穴があるか分からないので、目に見える落とし穴は予め埋めておきましょう!
記事担当
ばさっち

テキストやborderを2色に

こんばんわばさっちです!!
テキストやボーダーを2色にする場合は画像を使わないとできないと思っていたのですが、調べてみたら簡単に実装できそうなのでご紹介したいと思います。

■テキスト編
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
を使えば簡単に実装することができます。



.text {
background: rgb(34,193,195);
background: -moz-linear-gradient(0deg, rgba(34,193,195,1) 50%, rgba(253,187,45,1) 50%);
background: -webkit-linear-gradient(0deg, rgba(34,193,195,1) 50%, rgba(253,187,45,1) 50%);
background: linear-gradient(0deg, rgba(34,193,195,1) 50%, rgba(253,187,45,1) 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 30px 0;
}

■ボーダー編
こっちはもっと簡単です。
:beforeを使うこと実装することができちゃいます。



.border {
padding: 20px 0;
border-left: 5px solid rgba(0,212,255,1);
padding-left: 20px;
position: relative;
}

.border:before {
position: absolute;
content: ” “;
display: block;
border-left : solid 5px rgba(2,0,36,1);
left: -5px;
width: 5px;
height: 50%;
top:0;
}

どちらも手間がかからず簡単に実装することが可能です!!
ちょっとしたアクセントにこういったスタイルもいいですよね!!!
記事担当
ばさっち

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

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

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

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

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

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



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


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

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


ページの先頭へ戻る

ページの先頭へ戻る

お問合せ

キャンペーン

pay-per-click