すこぶるCMSの最近のブログ記事

今回も弊社サービス「すこぶるCMS」でも利用している、Movable Typeへの動画の埋め込み方法を簡単にご説明いたします。
動画をyoutubeにアップロードして、埋め込みコード(ソース)を貼り付ける作業はどのホームページでも同じなので、参考にしてください。

 

※動画(スライドショー)を作成する場合の画像加工についてはPhotoshop elementsによる画像加工の記事を参照ください。

※無料画像加工Webサービス adobe社のPhotoshop express editorによる画像加工の記事もご参照ください。

 

Youtubeへの動画アップロード

動画を作成したら、まず制作した動画をyoutubeにアップロードしてください。

※youtubeのアカウントを取得し、アップロードします。 この詳しい方法はyoutubeなどのサイトでご確認ください。

動画をyoutubeへアップロードしたら、以下の手順でコードをコピーし、すこぶるCMSの管理画面から貼り付けます。

 

youtubeのサイトでアップロードした動画を選択し、編集画面を表示させます。

次手順で設定を行っていきます。

(1)共有ボタンをクリックし、

(2)埋め込みコードをクリックします。 

(3)表示されたコードを全てコピーします。

 

youtube 動画アップロード

 

次にコピーしたコードをすこぶるCMSの管理画面を開き、設置したいブログ記事に貼り付けます。

※この際に注意として、かならず、ツールバー左上の「ソース」ボタンをクリックしてソースモードにして貼り付けてください。

このあと、更新ボタンと再構築を実施すれば終了です。

 

埋め込みコードの貼り付け

 

 

Youtube動画事例

実際に動画を設置したすると下記のようになります。ご参照ください。

 

※昨年の三遠友の会の際に、Windows Live ムービーメーカーで作成したスライドショーです。

 

このように動画を作成してしまえば、youtubeへアップロードして簡単に動画を埋め込み、貼り付けることができます。

youtubeへ貼り付けると検索エンジンにもyoutubeへアップした画像が表示されることもありますので、そちらの効果も見込めるようになります。

 

興味のある方はぜひ参考にして、挑戦してみてください。

 

youtube動画を活用した企業(商品・サービス)ブランディングについては専門家派遣対応やセミナー講師などの対応が可能です。ブランディング手法などはyoutubeブランディング戦略のページもご確認ください。
 

静岡の(有)アイ・リンク・コンサルタントでは、静岡・浜松・豊橋・群馬伊勢崎にてWEB勉強会「駿河友の会」を開催しています。

検索エンジン対策、画像加工方法、アクセス解析、Facebookなどwebに関する最新情報と設定方法など様々なテーマで実施しています。ご興味のある方は弊社事務局までお問合わせください。 
TEL 054-205-3320。

過去に開催した勉強会テーマは下記よりご確認できます。

平成25年度の勉強会テーマ

平成24年度勉強会テーマ

平成23年度のweb勉強会テーマ

平成22年度のweb勉強会テーマ

今回はよくご質問をいただきます弊社サービスすこぶるCMSの画面でリンクを挿入する方法をご説明しています。 Movable TypeでもプラグインのCKエディターが入っていれば、同様の方法でリンク挿入ができますので、参考にしてください。

 

最初にリンク先のページを開き、アドレスをコピーしておきましょう。 もし同じサイトの中のページであれば、実際にそのページを開くなくても、管理画面から対象のブログ記事を開き、アドレスをコピーすることも出来ます。(下図参照) 

タイトルの下に記載されています、「ハイパーリンク」のアドレスがそのページのアドレスになります。※一度記事を公開しないとこのハイパーリンクのアドレスは表示されませんので、ご注意ください。

 

link120528.gif

 

次にリンク元になる文字を入力します。 下記の場合は「静岡のIT勉強会駿河友の会のご案内サイト」と入力します。

入力しましたら、その文字列を選択し、ツールバーの「リンク挿入」ボタンをクリックします。

 

linkkanri03.gif

 

画像の場合は画像を選択してリンク挿入ボタンをクリックします。(下図参照)

 

link1205282.gifのサムネール画像

 

下記ハイパーリンクの設定画面が表示されますので、URL欄にリンク先のアドレスを入力します。 制作中のサイトの別ページであればそのページのアドレスをいれることもできます。もちらん外部のサイトでもOKです。

このあと「OK」ボタンをクリックすれば設定完了です。

※リンク先のホームページを別の新しいウインドウで表示させたい場合は、上部のターゲットタブをクリックします。

 

linkkanri04.gif

 

下記ターゲットを設定する画面が表示されますので、「New Window(_blank)」を選択しOKボタンをクリックして設定終了です。

 

linkkanri05.gif

 

結構簡単にリンクを挿入することができますので、一度ごお試しください。

 

 

 

静岡の(有)アイ・リンク・コンサルタントでは、静岡・浜松・豊橋・群馬伊勢崎にてWEB勉強会「駿河友の会」を開催しています。

検索エンジン対策、画像加工方法、facebookなどwebに関する最新情報と設定方法など様々なテーマで実施しています。ご興味のある方は弊社事務局までお問合わせください。 
TEL 054-205-3320。

過去に開催した勉強会テーマは下記よりご確認できます。

平成24年度今年度の勉強会日程及びテーマ

平成23年度のweb勉強会テーマ

平成22年度のweb勉強会テーマ

 

よろしくお願いいたします。

Movable Typeのバージョン5を利用している方向け、特に弊社サービスの「すこぶるCMS」などご利用の方向けの情報です。

※以前ご紹介したテーブルを使用した装飾に関する記事へ。

※テーブルのコードを簡単に出力するchos式webサービスの記事へ。

Movable Typeのブログ記事内でテーブル(表組)を利用して表を作成したい場合、通常では文字と枠のボーダー線との間に余白がなく、窮屈になってしまい、情報が見にくくなってきます。

作成したそのテーブルごとに管理画面から表を右クリックすることにより余白を設定することもできますが、ホームページ内の表にすべて一律に余白を設定することができますので、今回はその方法をご説明します。

 

1) まずは基となるテーブル(表)を作成します。

 ツールバーの右上部分の(下図の赤枠)テーブル作成用ツールバーをクリックします。

 ※Movable TypeにCKエディタープラグインが導入されている場合となります。

表作成ツールバー

 

2) 下記テーブルプロパティ画面が表示されますので、行数や列数をそれぞれ調整してください。 

 この例では5行、2列の表の作成をします。 幅は「すこぶるCMS」の場合メイン部分は590ピクセルとなりますので、590ピクセルとします。 

 ボーダーサイズは1ピクセルにしています。このボーダーサイズは表の罫線の太さになります。

テーブルプロパティの設定

 

3) 管理画面に戻るとブランクの表が作成されているはずです。 右側と左側の入力欄の幅が同じ表のなっていますが、左側は項目名、右側はその内容を入れる表としたいので、左側の項目名欄の幅を小さく設定します。

 表のセル上で右クリックをします。 次に「セル」→「セルプロパティ」とクリックします。

セルプロパティ設定

 

4) セルのプロパティ画面が表示されますので、幅を150ピクセルにします。※これで左側のセル幅が150ピクセルになります。よって右側のセルは440ピクセルになります。(合計で590ピクセル)

セル幅の変更

 

5) 管理画面に戻ると下記のようになっていることを確認ください。

セル幅変更後の画面

 

6) 表にテキストを入力していきます。 左側の項目欄など中央揃えにしたい場合、ツールバーの中央揃えボタンをクリックすれば、該当セルは中央揃えに設定されます。

入力が終了したら、「公開」(もしくは「更新」)ボタンをクリックし、「再構築」を実施します。

テーブルの作成イメージ

 

7) 作成したページを実際に確認してみると、このように文字と表の罫線の間が窮屈で見づらいものになっています。

 ※作成したページを確認する方法は、ツールバーの上にあるパーマリンクのアドレスをコピーして開くか、パーマリンクURLの横にある「表示」ボタンをクリックすると、そのページが表示されます。

完成イメージ

 

8) ここで余白を空けるために、表の文字列の周りに余白をつける設定を行います。 今回はこのホームページ全体に一律に設定する方法です。 この設定でホームページ内のテーブルすべてに一律に余白を付けることができます。※一律に設定されると困る場合は、各テーブルを右クリックで個別の表に設定してください。

管理画面の左サイドメニューから「デザイン」→「テンプレート」→「スタイルシート」と進みます。

表の枠に余白を設けて見やすく

 

9) 下記スタイルシートの編集画面が表示されますので、赤枠部分のみ追記してください。

 追記コード:

td {
padding: 8px;
}

※半角の英数字となります。

追記したら、画面下にある「変更を保存」ボタンをクリックし、「再構築」を実施します。

スタイルシート設定

 

再度、この作成ページを確認いただければ、下記のように文字と罫線の間に余白が追加され見やすい表になっているはずです。

完成イメージ

 

表を作成されている場合、同様の方法で、一律に余白を付け加えることができます。 手順9の数値(上記例では8px)を変更すれば余白の量を調整することができます。 ※ホームページ内のすべての表で、一律に余白が変更されますのでご注意ください。

今回も時々お問い合わせをいただきます、Facebookのウィジェットの設置方法をご説明いたします。

設置場所はサイドバナーやホームページのメインコンテンツ部分など、幅を指定して設置することが可能ですので、調整してください。

facebookいいねボタンの設置方法へ(すこぶるCMS MT5ブログへ設置)

Googleの+1ボタン設置方法記事

 

ここではこのブログのメインコンテンツ部分(この本文を記載している部分)に設置する方法です。サイドバナーに設置する場合は、幅を変更ください。サイドメニュー部分に表示させたい場合は、Twitterのウィジェットを設置する記事を参照いただき、新規ウィジェットを作成し設置ください。

設置すると下記のようにfacebookページに投稿した記事が表示されるようになります。

 

 

 

1)まずFacebookページのURL(アドレス)をコピーしておきます。 Facebookページを開いて、Facebook.com以下のアドレスをコピーしておきます。

facebookページのアドレスコピー

 

2)次にfacebookのウィジェット用のコードを取得するサイトを開きます。

   https://developers.facebook.com/docs/reference/plugins/like-box/

 

3)コードを取得するサイトで、Facebookページのアドレスや、幅のサイズを入力してください。

また必要に応じて表示する高さとしてheightの数値の指定やいいねを押した人の顔写真の表示(show faces)など各項目にチェックするなど設定を変更ください。

facebook ページ 表示項目の設定

 

上記設定箇所にチェックを入れたりすれば画面右側にプレビューが表示されますので、どのようなイメージになるか確認しながら行えますので、わかりやすいと思います。

 

4) 設定のチェックが完了したら、画面したの「Get Code」ボタンをクリックしてください(上図赤枠)。

下記画面が表示されますので、「IFRAME」をクリックし、表示されるコードを全てコピーします。

 

コードの取得

 

5) ブログの管理画面を開き、IFRAMEで表示されたコードを、表示させたい位置に貼り付けます。

この際、弊社すこぶるCMSをご利用されたいる方などリッチテキスト表示の片は、必ず「ソース」ボタンをクリック(もしくは下図、画面右上の”フォーマット”を”なし”に変更)してコード表示にしてから、貼り付けてください。 このあと、「更新」「再構築」を実施して終了です。
※うまく表示されない場合、コードの貼り付けが”リッチテキスト”表示のままで、コードを貼り付けたことが原因の可能性が高いです。

 

コードの貼り付け

 

どうでしょうか。うまくいきましたでしょうか。

ぜひ挑戦してみてください。

 

ちなみにTwitterのウィジェットをMTに追加する方法はこちらの記事でご確認ください。

Facebookのコメントを打ち込む際に、相手の名前をリンクさせることができます。Facebookのコメントで名前をリンクさせる方法の記事はこちらです。

 

静岡の(有)アイ・リンク・コンサルタントでは、静岡・浜松・豊橋・群馬伊勢崎にてWEB勉強会「駿河友の会」を開催しています。

検索エンジン対策、画像加工方法、Facebookなどwebに関する最新情報と設定方法など様々なテーマで実施しています。ご興味のある方は弊社事務局までお問合わせください。 
TEL 054-205-3320。

過去に開催した勉強会テーマは下記よりご確認できます。 次回勉強会は2012年8月4日、セマンティックwebに関してです。

平成24年度の勉強会テーマ

平成23年度のweb勉強会テーマ

平成22年度のweb勉強会テーマ

前回Twitterのツイートボタンの設置方法を説明しましたが、Twitterのウィジェットの設置についても何件か質問をいただいていますので、こちらの設定方法を今回はご紹介いたします。ブログは弊社サービス「すこぶるCMS」で使用していますMovable Type バージョン5で説明します。

facebookのウィジェット(Like Box)の設置方法の記事へ。

まずはTwitterのウィジェットを取得するサイトへ移動し、コードを取得する必要があります。

 

それでは、Twitterのウィジェットを取得するサイトを開きます。 http://twitter.com/goodies/widgets

 

サイトへアクセスすると下記画面が表示されるはずです。そこで画面左サイドの「自分のサイト」をクリックします。

Twitterウィジェット取得サイト

 

次に「プロフィールウィジェット」をクリックしてください。

Twitterウィジェットプロフィール

 

下記画面がでましたら、ユーザー名にTiwtterで使用しているIDを入力します。 画面下の「プレビューで確認」ボタンをクリックすると、画面右側にプレビューが表示されるはずです。確認ください。

また、左サイドのカスタマイズ、デザイン、サイズで背景色やサイズなどを調整できます。

※ブログへ埋め込む場合、サイズの横幅を150pxくらいにしておいてください。このサイズはテンプレートによって違ってきます。 挿入したい位置の横幅を事前に確認しておくとよいでしょう。今回のブログであれば150ピクセルくらいでOKです。

Twitterアカウントの入力

 

例えばデザインをクリックすると背景色などを変更することができます。

ウィジェットデザインのカスタマイズ

 

サイズ項目でウィジェットの横幅や高さのサイズを変更できます。 横幅を自動調整にしてもよいです。

横幅縦サイズの変更

 

次に画面下にあります「設定を終了し、コードを生成する」ボタンをクリックします。 上部赤枠の位置にコードが生成されますので、コード全てをコピーします。

ウィジェットコードの取得

 

今回ブログに設置するテンプレートは下記の種類とします。

設置位置は下図赤枠の部分に設置します。

ブログTwitterウィジェット追加位置

 

ブログ管理画面を開き、左サイドメニューの「デザイン」→「ウィジェット」→「ウィジェットテンプレートの作成」をクリックします。

ウィジェットテンプレートの作成

 

ウィジェットの編集画面が表示されたら、タイトルの入力欄に「Twitter」と入力します。※任意の文字列でわかればいいです。

本文欄にTwitterのサイトで取得したコードを貼り付けます。

最後に必ず画面下にある「保存」ボタンをクリックしてください。

ウィジェットテンプレートの作成

 

次に左サイドメニューの「デザイン」→「ウィジェット」→「3カラムのサイドバー(サブ)」をクリックします。

一番右のカラムに設置したい場合は「3カラムのサイドバー(メイン)」をクリックして、以下の作業を実施ください。

ウィジェットテンプレートの位置設定

 

ウィジェットセットの編集画面が表示されますので、右側の「利用可能」欄の中から、先ほど作成した「Twitter」をドラッグアンドドロップで左側の「インストール済み」欄に移動します。

縦の位置もドラッグアンドドロップで移動できますので、検索の上や下側など好みで変更してください。

ここでも最後に画面下の「変更を保存」ボタンをクリックし、再構築を実施してください。 

Twitterウィジェットセットの設置

 

ブログを確認すると下記のようにTwitterのウィジェットを設置できていることを確認できるはずです。

twitterウィジェット設置イメージ

 

Facebookなどのウィジェットもコードを取得した後は、同様の方法で設置することができます。

 

今回はまずTwitterの設置方法でした。 お試しください。

 

静岡の(有)アイ・リンク・コンサルタントでは、静岡・浜松・豊橋・群馬伊勢崎にてWEB勉強会「駿河友の会」を開催しています。

検索エンジン対策、画像加工方法、facebookなどwebに関する最新情報と設定方法など様々なテーマで実施しています。ご興味のある方は弊社事務局までお問合わせください。 
TEL 054-205-3320。

過去に開催した勉強会テーマは下記よりご確認できます。

平成24年度の勉強会テーマ

平成23年度のweb勉強会テーマ

平成22年度のweb勉強会テーマ

運営者

リンク