4.便利な機能を使ってみよう Feed

カスタム HTML を利用してブログパーツを表示する

カスタム HTML を利用すると、ブログのサイドバーに HTML ソースを挿入することができ、以下のような場合に自由度が高く大変便利です。

  • サイドバーにテキストを貼り付ける
  • サイドバーに画像を貼り付ける
  • サイドバーにブログパーツを貼り付ける
  • サイドバーに Javascript やHTML ソースを貼り付ける

外部サービス提供のソースコードを貼り付ける際、文字コードの指定部分は基本的には UTF-8 に変更してください。

続きを読む »

記事フッターの各サービスリンクをボタン表示にする

記事フッターに表示可能な「Facebook いいね!ボタン」「Twitter」「Google +1 Button(+1 ボタン)」「はてなブックマーク」「Tumblr」「Pinterest」「Pocket」「Email This」「Digg This」「Save to del.icio.us」の各リンクがボタン表示できるようになりました。

■記事フッター(ウェブページフッター)への追加方法

管理画面でブログを選び、[デザイン] > [表示項目を選択] の記事のフッター(もしくはウェブページのフッター)にチェックを入れ、すぐ下の[設定]リンクにアクセスします。

新たに表示されたダイアログで、フッターとして使用したい項目にチェックを入れます。

最後に、[変更を保存]をクリックすると、下図のように記事のフッターの各サービスに関するリンクがボタン表示になります。

カスタムCSSについて(背景)

カスタムCSSでカスタマイズをするときに便利な「背景」に関係するプロパティを紹介します。

background(バックグラウンド)

backgroundとは、背景に関する値を指定するプロパティです。
ブログの背景画像や背景色の指定は、このプロパティが使用されています。

background背景に関する値を一括指定する
background-color背景色を指定する
background-image背景画像を指定する
background-repeat背景画像の繰り返し方法を指定する
background-position背景画像の位置を指定する
background-attachment背景画像を固定するか移動させるかを指定する

【使用例】
bodyに、画像「aaa.jpg」繰り返しせず左上固定で表示させる。

body {
   
background-image: url(http://●●●/img/aaa.jpg);
   
background-repeat: no-repeat;
   
background-position: left top;
   
background-attachment: fixed;
}



参考までに、各プロパティの設定値をご紹介します。

続きを読む »

カスタムCSSについて(余白・レイアウト)

カスタムCSSでレイアウトをするときに便利な「余白」に関係するプロパティを紹介します。

■margin(マージン)とpadding(パディング)

marginとは、領域の内側の余白を設定をするものです。
逆にpaddingとは、領域の外側の余白を指定するものです。
値の単位は主に「px(ピクセル)」を使用し、「5px」「10px」のような書き方をします。
下図は、左側に余白を指定したときの両者の違いを示しています。

ブログのレイアウトでは、この2つがよく使用されています。

margin

外側の余白の値を指定する
margin-top
外側上部の余白の値を指定する

margin-bottom

外側下部の余白の値を指定する

margin-right

外側右部の余白の値を指定する

margin-left

外側左部の余白の値を指定する

padding

内側の余白の値を指定する

padding-top

内側上部の余白の値を指定する

padding-bottom

内側下部の余白の値を指定する

padding-right

内側右部の余白の値を指定する

padding-left

内側左部の余白の値を指定する

一度に様々な余白を設定すると、レイアウト崩れの原因になります。
最初はシンプルに設定し、少しずつ慣れていきましょう!

カスタムCSSについて

デザインの編集画面に「カスタムCSSを編集」というメニューがあります。
「CSS」とは、Cascading Style Sheet(カスケーディングスタイルシート)の頭文字で、読み方は「シー・エス・エス」です。

CSSは、HTML文書に対する装飾(デザイン)を指定することができる規格のひとつです。フォントや文字の大きさ、色、文字 飾り、行間、背景、配置などの「見栄え」を指定できます。

<<CSSの書式>>

セレクタ { 属性 : 値; }

セレクタ ・・・ 変えたい部分の名前
属性 ・・・・・ 変えたいセレクタ内の具体的な部分(色、背景、幅など)
値 ・・・・・・ 具体的な値(カラーコードや数値)

: ・・・・・・ 属性と値を区切る
; ・・・・・・ 値の終わり 
※スペースはすべて半角。

((例:bodyの背景を赤にする))

body { background-color: #FF0000; }

「カスタムCSS」は、オリジナル・テーマを元に、
デザインをピンポイントでカスタマイズすることが可能です。

自分だけのデザインを楽しむ事ができる
「カスタムCSS」にトライしてみましょう!

注※CSSに関するサポートは行っておりません

Twitterの投稿に便利な機能

「記事タイトル」と「記事URL」をTwitterの投稿フォームにコピーする機能が
「記事フッター」に追加できるようになりましたのでご紹介します。

設定は、ブログ>デザイン表示項目を選択から行えます。

1.表示項目の「記事/ウェブページ」にある「記事のフッター」の
「設定」をクリックする

2.「ブログ記事フッタープレビュー」にある「Twitter」にチェックし
「変更を保存」をクリックする

3.ページ最下部の「変更を保存」をクリックする

4.ブログ記事のフッターを確認する
「Twitter」リンクが表示されるのでクリックしてください。

5.Twitterにログインし、投稿内容を確認する
「投稿する」をクリックするとTwitterへの投稿が完了します。

なお、コピーされた記事のタイトルとURLは、
Twitterの最大文字数である140文字には含まれません。

ぜひご活用ください!

RSSフィードの追加方法

お気に入りのブログの最新エントリーをサイドバーに表示することができます。
最大 5 つまで登録できます。

【RSSフィードとは?】
ブログやホームページの更新情報を知らせるための提供データです。
RSSフィードを使うことで、新着記事を自動で取得することができ、
ブログやホームページを毎日巡回する必要なく更新を知ることができます。


■RSSフィードの追加方法

1.管理画面から[ブログ]>[デザイン]>[表示項目を選択]をクリックする

2.「RSSフィード」の[フィードを追加]をクリックする



3.追加したいフィードのURLか、ブログのURLを入力する

入力後[続ける]をクリックしてください。

4.追加するフィードの内容を確認する
「フィードの上に表示するタイトル」と「表示する記事の数」を設定してください。
タイトルの初期設定はブログタイトルになっています。

設定後、保存をクリックしてください。



5.RSSフィードの一覧に追加されたことを確認する

以上で設定完了です。
ブログのサイドバーでRSSフィードを確認してみましょう!

YouTubeから動画を貼り付ける方法

動画共有サイト「YouTube」から、動画をeoblogに貼り付けることが出来ます。


■動画の貼り付け方法

1.ブログ記事の作成画面で「YouTube」のマークをクリックする

2.動画を探す

探したい動画のキーワードを入力して[検索]をクリックします。

3.動画を挿入する
挿入したい動画のサムネイルをクリックするとメニューが表示されますので、
[挿入]をクリックします。

4.記事を保存する
[保存]ボタンをクリックしてブログ記事を確認してください。 



上記以外に、以下の方法でも貼り付けることができます。


■動画の貼り付け方法 その2

1.YouTubeにアクセスする

2.動画を検索する

ブログ記事に挿入したい動画を選びページにアクセスします。

3.動画下にある「共有」>「埋め込みコード」をクリックして表示されたコードをコピーする

4.ブログ記事作成または編集画面を開き、「HTMLの編集」にチェックを付ける

5.貼り付けたい箇所に、先ほどコピーしたコードをペーストする

6.記事を保存する

[保存]ボタンをクリックしてブログ記事を確認してください。

ブログ内検索について

eoblogのブログ内検索は、各ページの右上にあります。
 


 

まずは調べたいキーワードを入力します。
 
「このブログから」のボタンをクリックすると、そのブログの中でキーワードに一致する記事などを検索できます。

 
 
「全体から」
のボタンをクリックすると、eoblogのすべてのブログから、キーワードに一致する記事などを検索します。

ウェブページについて

ブログ記事とウェブページの違いについて

ブログ記事は更新されると最新の記事が一番上に表示され、新しい情報を素早く公開できます。
ウェブページはブログ記事とは異なり、ブログやプロフィールの紹介、地図やお店の情報など、すぐには変わらない情報を公開するのに便利です。

続きを読む »