頸部の筋肉アイキャッチ

美術解剖学

2021/5/29

【美術解剖学】頸部(首)の筋肉をイラストで解説

  人間の体の中でも特に重要なのが頭部ですが、その頭部の動きを司っているのが「頸部(首)」です。   頸部(けいぶ)には重い頭部を支えるしっかりした筋肉がいくつかついています。 体と頭を繋ぐ橋渡しのような部位でもありますし、デコルテ部分は顔の次に目立つ部分でもあります。   今回は頭部に続いて重要なポイントととなる「頸部(首)」の筋肉について、自作のイラストを使って解説します。   こんな方におすすめ 美術解剖学に興味がある方 人体の知識をイラスト制作やモデリングな ...

ReadMore

美術解剖学頭部の筋肉アイキャッチ

美術解剖学

2021/5/28

【美術解剖学】頭部の筋肉をイラストで解説

  人間の筋肉の中でも一番目立つ位置にあるのが頭部の筋肉です。   特に頭部の前面にある顔の筋肉はキャラクターイラストなどを描く際やキャラクターのモデリングをする際に重要となる部分でもあります。   顔の筋肉の構造を知る事によってより説得力のあるイラストを描く事ができるようになったり、リアリティーのある人物モデルを作ったりすることができるので、知っておくと沢山のメリットがあります。   今回は美術解剖学の中でも特に作品制作に関して役に立つ「頭部の筋肉」に関して、実際 ...

ReadMore

美術解剖学筋肉の起こる所と着く所アイキャッチ

美術解剖学

2021/5/27

【美術解剖学】筋肉の「起こる所」と「着く所」【イラスト】

  美術解剖学で筋肉について学ぶ際に知っておきたい前提知識として 「筋肉に起こるところ」と「筋肉の着くところ」というものがあります。     筋肉は骨に付着している組織ですが、骨に対しての筋肉の付き方がそれぞれ決まっています。   筋肉自体の形状を覚える前に筋肉がどの部位からどの部位に対して付着しているかについて知っておくことで、より筋肉と骨の形状と位置が覚えやすくなります。   今回は美術解剖学における筋肉の「起こるところ」と「着くところ」について、僕 ...

ReadMore

美術解剖学動きに関する用語アイキャッチ

美術解剖学

2021/5/23

【美術解剖学】体の動きに関して覚えるべき解剖学用語について解説

  美術解剖学を勉強すると人体の動きに関してより深い理解ができるようになります。 その理由は骨格や筋肉の動きを勉強することになるため、自然と人がどのように動いているのかについて考える習慣がつくからです。   しかし美術解剖学で人体の動きを学ぶ際にも専門用語が複数登場するので、この前提知識を知らないと勉強に時間がかかってしまいがちになります。   そこで今回は美術解剖学を勉強する際に登場する「体の動きに関する解剖学用語」について紹介します。 動きに関するものだけなので比較的簡単 ...

ReadMore

美術解剖学人体の位置と方向を示す用語アイキャッチ

美術解剖学

2021/5/24

【美術解剖学】人体の位置と方向を示す解剖学用語を解説

  美術解剖学では体の各部の位置や方向を説明するためにあらかじめ軸を決めて、それを基準に位置や方向を説明することがよくあります。 人体は複雑な構造をしているので、決められたルールに従って方向や位置を決めることでそれぞれの部位や方向をわかりやすくしています。   逆に言えばこの決められたルールを知らないと、体のパーツの位置や方向の説明を見たとしてもわかりにくくなってしまいます。 そこで今回は解剖学における「人体の位置と方向を示すための用語」について、3Dモデルを使って簡単に紹介します。 ...

ReadMore

解剖学筋肉の形状と構造アイキャッチ

美術解剖学

2021/5/28

【美術解剖学】筋肉の基本形状と構造を解説【イラスト】

    キャラクターイラストを描く場合だけではなく、3DCGでのキャラクターモデリングなどをする際に前提となる知識で多くあげられるもののひとつが 「美術解剖学」ではないでしょうか。   特にある程度絵を描いたりしている方のなかでは美術解剖学の知識が必須だというのは一般常識だったりしますよね。   このブログでは以前に解剖学の中でも文字通り骨子になる人間の骨格についての記事をいくつか書いていましたが、今回からいくつかの記事に分けて人間の筋肉についても解説していこうと思 ...

ReadMore

スライドPixaUSDアイキャッチ

CG関連

2021/5/19

ピクサーUSDについての入門スライド

  MAYA2022にも追加された機能である「USD(Universal Scene Description)」ですが、いまいちどんな機能かわかりにくくて必要なのかなーと思ってました。 しかし色々調べているとUSDに関して解説してくれているスライドがアップされていたので紹介します。   最近よく名前を聞くようになってきたけどどんな機能なのか概要が知りたいなーと思っている方は参考にしてみてはいかがでしょうか。   ピクサーUSDについての入門スライド 今回紹介するのはSlide ...

ReadMore

RazerTartarusV2アイキャッチ

ガジェット

2021/5/17

【Razer】3DCG制作用にRazer Tartarus V2を購入してみた【左手デバイス】

  ゲームやイラスト制作の作業効率化をサポートしてくれる「左手用デバイス(片手デバイス)」は、3DCG制作の効率化にも一役買ってくれる便利なガジェットです。   以前の記事で紹介したCLIP STUDIO PAINT専用で発売されている「CLIP STUDIO TABMATE」も シェアウェアを挟むことでイラスト制作だけではなく3DCG制作でも使うことができるのですが、ぶっちゃけTABMATEではキー数が少なすぎて役不足感が否めませんでした。     そこで今回は思 ...

ReadMore

WordPress

【WordPress】写真を分割比較したいなら「Twenty20 Image Before-After」がオススメ

Twenty20 Image Before-Afterアイキャッチ

Sponsored

 

一昔前のテキストのみのブログは最近全く見かけなくなり、沢山画像を使っているブログが最近増えてきました。

 

 

当ブログも写真や画像関連の記事が多いので画像を沢山使用するわけですが、画像加工したものと加工する前の画像などを分割して確認出来るようにしたいなと思うことが多いんですよね。

 

今回はそんな時に便利な画像を分割比較できるWordPressプラグイン「Twenty20 Image Before-After」を紹介したいと思います。

 

 

写真系のブログを書いている方はもちろん、画像加工やイラスト系のブログを描いている方にもオススメです。

 

 

【WordPress】写真を分割比較したいなら「Twenty20 Image Before-After」がオススメ

 

2つの画像を比較する際に別々で画像を載せても良いのですが、その際は画面をスクロールしなければ見比べることができませんよね。

 

どうせならひとつの画像内で2つの画像を見比べることが出来ればわかりやすく比較することが出来て、どの様に変化しているのか一目瞭然です。

 

Twenty20 Image Before-After」はそんな時に便利なプラグインなので、画像を沢山使う系ブロガーの方々は是非導入して使ってみていただきたいです。

 

それではプラグインのインストールから設定までの手順を紹介していきます。

 

「Twenty20 Image Before-After」をインストール

WordPressのプラグイン▶新規追加から「Twenty20 Image Before-After」と入力します。

 

プラグインをインストールしたら「有効化」をクリックで完了です。

細かい設定が必要ないので楽ですね。

 

注意

少し前によく使われていた同じ様なプラグインである「Twenty Twenty」というプラグインもあるのですが、しばらくアップデートされていないので、「Twenty20 Image Before-After」の方がオススメです。

こちらの方が使い勝手もよくカンタンです。

 

 

記事内で写真を追加していく

「Twenty20 Image Before-After」が有効化されると記事内エディターに「Add Twenty20」という項目が追加されます。

記事の任意の場所でこれをクリックすることで分割比較出来るようになります。

 

ショートコードを作成

分割表示したい画像のショートコードを設定して挿入していきます。

 

まずは分割比較したい写真や画像をメディアに入れておきましょう。

同じサイズの画像にしておかないと上手く表示されないことがあるので、画像作成時には同じサイズになっているか確認しておきます。

 

記事の任意の場所で「Add Twenty 20」アイコンをクリックしたらこのようにメディアウィンドウが表示されます。

 

分割して表示したい画像を順番に選択していきます。

 

最初に選択した画像がBefore(左側)、次に選択した画像がAfter(右側)に表示されます。

 

 

 

設定画面に移動するので、細かい設定をしていきます。

 

 

設定項目

  • Before Text :画像の左下側に表示される文字部分
  • After Text  : 画像の右下側に表示される文字部分
  • Width : スライドの幅
  • Offset : 境界部分の位置
  • Direction : 境界部分の方向
  • Alignment : スライドの位置
  • Move slider on mouse hover : マウスをかざすだけでスライド移動が出来るかどうかの設定

 

上記の設定をしたら「Inset Shortcode」をクリックします。

 

 

 

ショートコードが作成されるので、これで記事内の画像が分割比較出来るようになります。

 

以下で分割比較が出来ているはず……!!!!

 

 

分割表示出来なかったらプラグインのせいです(真顔)

 

注意:分割表示できないエラーが起こることがある

「Twenty20 Image Before-After」は非常に便利なプラグインなんですが、有効化しても分割表示された画像が表示されないことが多いようです。

 

僕もプラグインを最初にいれた時はちゃんと表示されないことも多く、環境にもよると思うんですがまだ少し不安定なプラグインのようです。

 

上手く表示されない場合は一度プラグインを「無効化」▶「有効化」してみると直ることがあります。

 

また他のプラグインやテーマ、設定が邪魔することもあるみたいですね。

 

 

 

まとめ

 

今回は2つの画像を分割して表示したい場合に便利なWordPressプラグイン「Twenty20 Image Before-After」を紹介しました。

 

難しい設定も少なく、非常に使い勝手も良いので写真を沢山使うブロガーの方は是非使用してみてください。

ただしエラーが多いのが欠点なので、沢山プラグインを入れている方は表示されないトラブルに見舞われるかもしれません。

 

 

今回分割で比較をした画像の作り方の記事は別であるので、気になる方は是非読んでみてください。

▼トーンマッピングペルソナでHDRっぽく色調補正する手順【Affinity Photo】

AffinityPhotoトーンマッピングペルソナアイキャッチ
トーンマッピングペルソナでHDRっぽく色調補正する手順【Affinity Photo】

  Affinity Photoで画像加工をする際に複数の画像素材を組み合わせてまとめて合成する「HDR合成」があります。     画像の明るさなどのトーンの幅(レンジ) ...

続きを見る

 

 

Twenty20 Image Before Afterの紹介でした!

Sponsored

  • この記事を書いた人
  • 最新記事

夏ワタル

デザイナー/イラストレーター。 イラスト制作や3DCG制作に関するTipsを発信しています。 才能ゼロでもイチから独学で絵が描けるようになる方法を研究中。 MAYAとSubstanceシリーズをメインに使っています。

-WordPress
-, ,

© 2021 ナツヲカケル−兼業クリエイター雑記−