concrete5で作成されたサイトは、

あなたがご自分でコンテンツの追加・変更ができます。

 

文書作成wordなどを使ったこと、

あるいはご自分でブログを書いたことがあれば、割と簡単にできます。

 

この機能はブログ投稿に留まらず、

 

他のコンテンツの追加・変更も外部のホームページ制作会社に頼ることなく、

 

(権限の設定が出来ていれば)ブロックの追加や、

ブロックをまとめたスタックの編集・追加からコンテンツそのものの追加・編集ができます。

 

 

今回は手始めに

concrete5でのブログ投稿についてあなたにお伝えしようと思います。

ブログ投稿

 

あなたは、どっちですか?

 

あらかじめWord()などで文書を書いておいて何度か校正していた方が、

記事として遥かにまとまったものになっていると思いませんか?

 

校正で、段落、改行・行間、太文字でのメリハリを付けることで、文書そのものの書き方も変わってきますし、校正そのものもやり易くなり記事の完成度も高まります。

 

そしてword文書()をそのまま取り込めますから便利です。

 

.word(マイクロソフトのワード)をお持ちでなくても

フリー(無償)の文書作成ソフト

OpenOfficeLibreOfficeがあれば、同じようにそのまま取り込めます。

 

そのままと言うのは、文書はもちろん段落、改行・行間、太文字ハイパーリンクまでもそのまま取り込めます。

concrete5 japan
 https://concrete5-japan.org

 

 

準備する

 

  1. ⓵ 記事を下書きする

 ブログ本文の内容は、段落、改行・行間、を含めしっかり構成しておくことをお薦めします。

 

  1. ② 画像を準備する

 画像は、デジカメやスマホで撮ったものをそのまま使うのではなく、

 

 

で、あらかじめ最適化しておくことをお薦めします。

 

 

ブログを書く

 

010.あなたのconcrete5のサイトに行きます。

concrete5のサイト
あなたのconcrete5のサイトに行きます。

 

020.あなたのサイトを編集(ブログ投稿)ができる権限でログインします。

ログイン
ログインをクリック

  ページ右下のログインをクリック

 

030.ユーザーIDとパスワードを入れてログインです。

ユーザーIDとパスワード
ユーザーIDとパスワードを入れてログイン

 

040.画面右上の管理画面上のから「ページの追加と、サイトの案内」アイコンをクリック

ページの追加と、サイトの案内
画面右上の管理画面上のから「ページの追加と、サイトの案内」アイコンをクリック

 

050.新しいページ>ブログ記事をクリック

ブログ記事のブロック
新しいページ>ブログ記事をクリック

 

060.ブログ記事のブロック(※)が開きました

ブログ記事のブロック
ブログ記事のブロック

 

コンポーザー・ブログ記事

 ※.ブロックとは、concrete5で使用するコンテンツの塊です。

 

Concrete(コンクリート):コンクリート・ブロックを積み上げる形で、簡単に記事(コンテンツ)を完成させていくことと言う意味からconcreteというCMS(コンテンツ管理システム)が出来ました。

 

concret55はオープンソースとして生まれ変わった時のバージョン№です。

 

 その後バージョンではconcrete5はそのままCMSの名称として定着し、

現在はバージョン8.4.3(2018/09/25)です。

 

  061.エントリー名:ここはブログのタイトルを入力します。

ブログのタイトルを入力
ブログのタイトルを入力します

 

     ここでは、「知ると重宝する画像の最適化②」というタイトルにします。

 

  062.URLスラッグ:アルファベットと数字で入力します(ドメイン/blog/URLスラッグ

ブログ投稿日
URLスラッグ:アルファベットと数字で入力します

 

     ここでは、[website20181019]と入力します。

20181019はブログ投稿日です。

 

  063.短い概要:記事の概要を入力します(ここもWordであらかじめ用意しておきましょう)

記事の概要を入力
記事の概要を入力します

 

  064.記事 サムネイル:お知らせページなどで表示される記事の画像です(用意してあった画像を指定します)「ファイルを選択してください」のクリックで画像の選択ができます。

サムネイル画像
サムネイル画像を選択します

 

  065.記事 Content : ブログ記事の本文を入力する欄です。

ブログ記事の本文を入力する欄
ブログ記事の本文を入力する欄

 

(あらかじめ用意しておいたWord文書からコピー&ペーストできます。直接入力も)

   ⓵「W」アイコンをクリックし

   ② word本文を開き

   ③ word本文を、[Ctrl]+[A]キーで全選択

   ④ そのまま、[Ctrl]+[C]キーでコピー

   ⑤ Content画面に移動し、記事欄をクリックし、

     そのまま[Ctrl]+[V]キーでWord記事をペースト

   ⑥ 「編集モード」クリックで記事の編集ができます。

 

  066.エントリー名、URLスラッグ、短い概要まで入力した状態

(この画像は、1つ前のブログ記事「知ると重宝する画像の最適化②」を執筆した時のものです)

1つ前のブログ記事

 

  067.用意してアップロードしておいた画像のファイルマネージャの画像フォルダを開き、画像「01-0376-031-0024kb.jpg」を選択(クリック)します。

ファイルマネージャの画像フォルダを開き、画像を選択
ファイルマネージャの画像フォルダを開き、画像「01-0376-031-0024kb.jpg」を選択

 

 

  068.サムネイル画像が選択された状態

サムネイル画像が選択された状態
サムネイル画像が選択された状態

 

  069.Word本文を[Ctrl]+[A]で全選択しているイメージ

Word本文を[Ctrl]+[A]で全選択しているイメージ
Word本文を[Ctrl]+[A]で全選択しているイメージ

 

 

 

070. [Ctrl][V]キーでWord記事をペーストした状態の一部イメージ

Word記事をペーストした状態の一部イメージ
Word記事をペーストした状態の一部イメージ

 

 ご覧いただけるように、

 

ハイパーリンク前回回目は画像の容量圧縮(画質を落とさないで容量を小さくする)でした。

もそのままコピペできています。

 

<h3>レスポンシブ ウェブ デザイン</h3> は、後で(編集モードで)「見出し3」で囲み分かりやすくする為にWordで編集していたものを、そのままコピペした結果です。

 

実際の処理では<h3></h3>は、カーソルを合わせて「Delete」キーや「BackSpace」キーで削除し

「見出し3」編集を行います。

 

「編集モード」をクリックし記事の編集をします。

 

080.編集モード

編集モード
編集モード

 

 これが、編集モードです。

記事欄にマウスカーソルを移動すると、緑線で囲まれます(ここが編集可能なエリアです)

ここでクリックすると、黄緑の網掛けになります。

➡ポップアップの「ブロック編集」をクリックし、記事を編集します。

 

  081.記事の編集「見出し3」の適用

記事の編集「見出し3」の適用
記事の編集「見出し3」の適用

 

   <h3>レスポンシブ ウェブ デザイン</h3>の両端の<h3></h3>を「Delete」きーで削除し、

  ⓵ レスポンシブ ウェブ デザイン をマウスで範囲選択し、

  ②「標準」の▼からプルダウンで

  ③「見出し3」を選択しクリックし、「見出し3」を適用します。

 

  082.記事中の画像の選択&適用

 

記事中の画像の選択&適用
記事中の画像の選択&適用の作業をスムーズに行うために

 

 <!img コンテンツが白い部分の画像à 01.)をマウスで範囲選択し、

 

01. <!img コンテンツが白い部分の画像àも、

あらかじめ用意しておいた文中用の画像を選択しやすくするために

word文書にそのまま書き込んでいたものです。

 

②「画像」アイコンを選択します。

 

  083.画像を選択するポップアップ「画像のプロパティ」が開きます。

サーバブラウザ
サーバブラウザ

 

⓵「サーバブラウザ」をクリックします

 

  084.ファイルマネージャが開きます。

ファイルマネージャ
ファイルマネージャ

 

    ・格納しておいた画像があれば選択(クリック)します

    ・ここから「ファイルをアップロード」もできます。

    ・別のフォルダにある場合は、「フォルダへ移動」をクリックします。

 

  085.該当の画像を選択しました

代替テキスト
代替テキストを変更する場合は、ここに入力

 

   ⓵ 代替テキストを変更する場合は、ここに入力します。

    (省略値は、画像ファイル名.属性が入っています)

   ② 画像にキャプションを付ける場合は☑します。

 

  086.代替テキストに変更がある場合は入力(alt=””””内に反映されます)します。

  画像のキャプションを付けたい場合もここで指定します。

キャプションを付ける
キャプションを付ける

 

   ② 画像にキャプションを付けるで☑した状態です。

 

  087.実際の画像が反映されました。キャプションはここで直接入力します。

画像が反映
選択した、画像が反映

 

  ⓵ 選択した、画像が反映されました。

  ② キャプションはここに入力します。

 

 

090.すべての編集が終わったら「保存」です

保存
すべての編集が終わったら「保存」です

 

091.「ペンシル」アイコンをクリックして公開します。

でも、Topics(ブログのカテゴリ)が指定されていません(トピックがありません)これは別のところで指定します。

ペンシル
「ペンシル」アイコンをクリックして公開

 

092.「ページを公開」ボタンでブログの公開をします。

ページを公開
ページを公開または時計アイコンで時間指定の公開

 

 時間指定で公開する場合は、隣の時計アイコンにカーソルを合わせます。

 

093.公開されました。

ブログの公開
ブログの公開

 

094. Topics(ブログのカテゴリ)を指定する。

ブログのカテゴリ
サイトマップ

 

 画面上部右側の「管理画面・サイト全体の設定を変更」ボタンを押し、

「管理画面」> サイトマップ をクリックする

 

095.ブログのタイトルまで進む

ブログのタイトル
ブログのタイトル

 

  ③ 「管理画面」> サイトマップ をクリックする

  ④ サイト内ブログの左側の「+」をクリックし、ブログの全タイトルを表示し、

  ⑤ 今回のブログ「知ると重宝する画像の最適化②」を右クリック>

  ⑥ 開いたポッポアップの属性をクリック

ブログのタイトル
ブログの属性

 

097.「選択された属性」

選択された属性
選択された属性

 

  ⓵ 画面を縦スクロールし、左サイドナビの ブログ >ブログ記事トピック をクリック

 

098.表示された「ブログ記事トピック」

ブログ記事トピック
ブログ記事トピック

 

  ② 「ブログ記事トピック」のカテゴリー をクリックして☑し、

  ③ 「変更を保存」する

 

SEO設定

SEO設定
Metaタグタイトルと、Metaタグ説明に入力

 

  096と同じ手順で、

:サイト内ブログの左側の「+」をクリックし、

:ブログの全タイトルを表示し、

:今回のブログ「知ると重宝する画像の最適化②」を右クリック

:開いたポッポアップのSEOをクリック

 Metaタグタイトルと、Metaタグ説明に入力して「変更を保存」する

Metaタグタイトルと、Metaタグ説明の基本は、ブログのタイトル+キーワードとブログの記事の概要

 

記事概要と新しい記事

 

尚、ブログのタイトルと記事概要はブログページのトップに表示されます。

ブログページトップ
新しい記事はブログページのトップに表示

 

また、新しい記事は、トップページの「Whats new」にブログタイトルが表示されます。

新しい記事
What’s new