ブログのメイン画像・サブ画像を入れるためのマニュアルです。

・ブログ記事作成マニュアル
http://test.rals.co.jp/recruit/blog/blog-manual/

素材探し

メイン画像は必須で、サブ画像は短いお知らせなどの記事以外は基本的に1～2枚程度入れてほしいです。
※短いお知らせの記事などは、サブ画像なくても別にOK

 

社内イベントなどの記事については、撮影した写真があればそれを使います。

写真の用意が特にない記事については、素材サイトから内容に関連する写真素材をダウンロードして使用することになります。

 

素材サイト　※アカウントは別途共有します

■写真AC
https://www.photo-ac.com/

■イラストAC
http://www.ac-illust.com/

 

※ダウンロードする画像サイズは、MEDIUMでいいです。（横800×縦520px以上であれば大丈夫）

 

メイン画像は、右下にラルズネットのロゴが入っている横800×縦520pxの画像を使うのがルールなので、ダウンロードした画像を横800×縦520pxにしてロゴを入れる作業が必要になってきます！

ロゴマークを選ぶ

写真素材の色合いによって、見やすい方を選ぶなど、使い分けてください！

ロゴを決めた後は、macとwindowsで手順が違うのでそれぞれの手順を確認してください・・・

メイン画像用：加工方法（mac）

macの場合は、先に外部サイトで画像を縮小してから、「プレビュー」というソフトを使ってロゴを合成します。

画像を縮小する

写真ACからダウンロードした画像を、メイン画像用のサイズ（横800×縦520px）に合わせます。

■画像の縮小用ツール

https://www.peko-step.com/tool/resize.html

 

①写真素材を「ここに画像をドロップしてください」というところにドロップし、下の「画像のサイズ変更」で幅を800pxに合わせる。

 

②この状態では高さが520pxより大きいので、左上のハサミマークから、高さが520pxになるようにトリミングする。

 

③サイズが800px × 520pxになったら、左上のファイル→保存

 

macの「プレビュー」アプリで、ロゴを合成する

①↑で保存した画像を開く

　※普通に画像を開けばプレビューアプリで開かれるので、普通に画像を開く感じで大丈夫です。

 

②それとは別に、ロゴ画像も開く

下記にロゴの2種類が保存されているので、使う方を選択します。

－－－－－－－－－－－－－－－－－－－－－－－－

X:\函館オフィス関連\アルバイト\ライター\paint3D

－－－－－－－－－－－－－－－－－－－－－－－－

logo_color.png　→カラーのロゴ
logo_white.png　→白いロゴ

 

③ロゴのプレビュー画面の方でコピー（command+C）して、写真素材の方に貼り付ける（command+V）

 

④ロゴ画像が写真の上に貼り付けされるので、動かして青い●が写真の四隅にピッタリ合うように調整し、保存。（command+S）

 

→画像サイズの圧縮　に移ります。

メイン画像用：加工方法（windows）

windowsのPCを使っている場合は、付属の「ペイント3D」というソフトを使用します。

ダウンロードした画像を開き、リサイズ

ダウンロードした画像を開いたら、画像の上で右クリックして、「キャンバス　オプション」を選択。

右側にメニューが出てくるので、サイズを合わせる。

 

下2つの「縦横比を固定する」「キャンバスでの画像のサイズ変更」両方にチェックを入れてから、幅の欄に「800」と入力。

この時、高さも同じ比率で縮小されますが、そのサイズが520ピクセル以上になってればOK！

 

520以下になった場合は一度「Ctrl＋Zキー」で戻って、今度は高さの方に「520」と入力してみてください。

幅・高さを揃えるためトリミング

横800×縦520pxになるようにトリミングします。

※リサイズの段階でぴったり横800×縦520pxになっていれば、この作業は飛ばしてください

 

上のメニューからトリミングを選び、不要な部分を調整してサイズを合わせます。

右の数字の方に直接入力しても調節可能です。

サイズを合わせたら、「完了」をクリックします。

 

合成手順

上部メニューの「ステッカー」から、右側の「ステッカーを追加する」を選択し、ファイル選択画面にうつります。

ステッカー用のロゴは下記共有フォルダに保存しているので、↓をコピーしてフォルダを開きます。

－－－－－－－－－－－－－－－－－－－－－－－－

X:\函館オフィス関連\アルバイト\ライター\paint3D

－－－－－－－－－－－－－－－－－－－－－－－－

logo_color.png　→カラーのロゴ
logo_white.png　→白いロゴ

の2種類が保存されているので、使う方を選択します。

画面上にロゴが現れるので、写真全体にかかるようにロゴの大きさを調節します。サイズを合わせたら、右側のレ点のマークをクリックするとスタンプが貼り付けされます。

これでロゴ入れは完成なので、保存します！

→画像サイズの圧縮　に移ります。

画像サイズの圧縮

サイズの大きい画像をそのまま使ってしまうと負荷がかかってしまうので、画像を圧縮します。

下記サイトを利用します。

 

■TinyPNG

https://tinypng.com/

 

※ただ画像をドラッグして持って来るだけなので、詳しい手順は割愛します。

その他：サブ画像について

サブ画像も、ダウンロードしたままブログに使うとサイズが大きすぎて負荷がかかってしまいます。

 

メイン画像の時と同じツールを使って、【横720px × 縦400px 】になるように縮小をお願いします。

 

■サブ画像の縮小用ツール

https://www.peko-step.com/tool/resize.html