画像を加工する

      2014/09/25

concrete5 -- Home 2014-09-21 10-55-06
せっかくなので画像をconcrete5内のツールを使って加工したいと思います。

ファイルマネージャー

concrete5 -- Home 2014-09-21 13-25-55
管理画面のボタンは編集モードの右端にあるボタンなので、それをクリックして、ファイルをクリックするとファイルマネージャーが表示されます。

concrete5 -- ファイルマネージャー 2014-09-21 13-02-10
加工したい画像をクリック。表示された項目の中から「編集」をさらにクリックします。

画像の編集でできること

  • 画像の拡大、縮小
  • 画像の切り抜き
  • 画像の回転
  • 画像の上下、左右反転
  • フィルター加工。

画像の切り抜き

concrete5 -- ファイルマネージャー 2014-09-21 13-10-21
画像の横幅はそのままに、縦幅を狭めたいので、まず「画像の切り抜き」ボタンをクリック。
鍵マークが選択されていると、縦横等比率?でサイズが変更されてしまうので、鍵の選択を解除します。
なんとなく鍵がついてるついてないはわかるけど、鍵が解除されるアイコンとかになるともっとわかりやすいかもしれませんね~!
で、できたら「切り抜きを確定」をクリック。これで切り抜きができました。

画像のフィルター加工

さらにフィルター加工もします!「フィルター」をクリック。
フィルターの種類はグレースケール、セピア、ぼかし、ビネットがあります。ぼかしとビネットはさらに調節できるようです。
concrete5 -- ファイルマネージャー 2014-09-21 13-12-18
今回はビネットを使ってまわりをぼやっとフチどり?っていうのか!?をします!!(強引な説明である!)
数値を決めたら、「保存」をクリック。
画像は上書き保存されるようです。
(別名でも保存できるようになったらさらに便利かな~特に残しておく必要もないか!?残しておけばマウスオーバーの時の画像作るのがもっと簡単にできるよ☆くらいのメリットはある!)

追記

concrete5 -- ファイルマネージャー 2014-09-21 14-17-28
そういえば画像のコピーできたわ!解決!

ヘッダー画像にしてみる

concrete5 -- Home 2014-09-21 13-14-14
トップに戻って編集モードにして、画像ブロックをヘッダーに追加。
左のブロックメニューの一覧から、画像ブロックをヘッダーの位置までドラッグします。

concrete5 -- Home 2014-09-21 13-14-50
先ほどの画像を選択します。マウスオーバー時に画像を変更する場合は「ホバー画像」も選択しておきます。

concrete5 -- Home 2014-09-21 13-15-29
できたら左のメニュー内の「変更を公開」をクリックします。

concrete5 -- Home 2014-09-21 13-16-14
こんな感じでconcrete5内のデフォルト機能だけでヘッダー画像がつくれます^▽^

 - concrete5