アメブロ (旧)ヘッダー上の ニックネーム ルーム|ブログ を消す

内藤です。

アメブロの旧カスタム可能デザインの【ベーシック】で、ヘッダー上の ニックネーム ルーム|ブログ を消すやり方です。



スキンCSSの編集で、次を入れます。

/*ヘッダー上のニックネーム類非表示*/
#overHeader #userNaviArea{
display:none !important; /*表示設定*/
}

これで、ヘッダー上のニックネーム類がなくなります

ヘッダー画像URLの取得の仕方

内藤です。

ヘッダー画像のURLの取得の仕方です

アメブロの管理画面から [クイックリンク]右上の三本線から デザインの変更 ⇒ [CSSの編集] で

『ブログデザインヘッダ・背景用画像の追加』 からパソコン内から画像をアップロードします。


アップロードされた画像が表示された「画像のパス」というのがURLになります


このURLをコピーして使うようにします。

アメブロ (旧)ヘッダー画像を挿入する

内藤です

旧カスタム可能デザイン【ベーシック】で、ヘッダー画像を挿入するやり方です。
ヘッダー画像でタイトルを画像として埋め込まない場合は代わりにこちらを入れます。
⇒ タイトルを画像化する場合はこちら

スキンCSSの編集で、一番最後に次を追加します

/*ヘッダー画像*/
#header {
background:url(画像のURL) no-repeat; /*画像*/
height: 300px; /*画像の高さ*/
}

※ no-repeatは 繰り返しなし を意味します。
画像URLを入れる際に ( )は削除しないでください。

アメブロ (旧)ヘッダー画像を挿入する(タイトルを画像化)

旧カスタム可能デザイン【ベーシック】でブログタイトル、説明文を非表示にし(タイトルや説明文も画像として埋め込)、ヘッダーをクリックしたときにトップページへ移動するリンクをはるようにします。

スキンCSSの編集で、一番最後に次を追加します
※ヘッダー画像が800px×300pxの場合

/*ヘッダー画像*/
#header{
background:url(画像URL) no-repeat; /*背景*/
height: 300px!important;/*高さ*/
}
/*ブログタイトル、説明文位置初期化*/
#header h1,#header h2{
margin:0; /*マージン*/
padding:0; /*余白*/
}
/*ヘッダー画像のリンク設定*/
#header h1 a{
width:800px;/*画像の横幅*/
height:300px;/*画像の高さ*/
display:block; /*表示設定*/
position:absolute; /*位置設定*/
text-indent:-9999px; /*テキストインデント*/
text-decoration:none; /*文字装飾*/
}
/*ブログ説明文を非表示*/
#header h2{
display:none; /*表示設定*/
}

ヘッダー画像の大きさに合わせて、高さと横幅は変更します。
画像URLは、アメブロにアップロードした画像URLにしてください

サイドバーのテーマをツリー状にするには

アメブロのサイドバーにあるテーマ一覧(カテゴリ)をツリー状にしたい場合の方法です。

このような感じにしたい場合です。


アメブロでは、テーマの親子関係を作る事ができません。

ですので、テーマを作るときに先頭に文字として ┣ や ┗ などを付けて、ツリー状に見せます。
※┣ ┗ などは『けいせん』で文字変換すると出てきます。

管理画面のマイページ上にある [クイックリンク] ⇒ [テーマ編集] で編集します




綺麗にツリー状になるよう、並べ変えながらやってみてくださいね。

YouTubeの動画をアメブロに埋め込む

YouTubeの動画をブログに埋め込む方法です。

アメブロならば、メッセージボードに設置すると見てもらいやすいですね。

YouTubeの動画をブログに埋め込む

1.YouTubeで動画を開く

YouTubeで埋め込みたい動画を開きます。

2.共有ボタン

動画の下にある「共有ボタン」をクリック


すると「埋め込みコード」「メール」のボタンと一緒に、facebook等のアイコンが表示されます。

アイコン類の下の「その他」をクリックするとアメブロのアイコンも出てきます


アメブロのアイコンをクリックすると、アメブロの投稿画面に埋め込み用のタグが挿入されます
(アメブロにログインしている場合)

※ただし、アメブロのレイアウトを3カラムにしている場合は、大きさが合いません。

3.大きさを変える場合は、埋め込みコードから

アメブロを3カラムにしている場合は、アメブロのアイコンからではなく、「埋め込みコード」のボタンをクリックします。


「以前の埋め込みコードを使用する」にチェックをいれ、カスタムの幅を変更します。

アメブロが3カラムなら400pxほどで。

4.埋め込みコードをコピーし、アメブロで貼り付け

あとは、埋め込みコードをコピーし、アメブロに貼り付けます。


コピーしたものは、アメブロでタグ編集エディタか、HTML表示にして貼り付けます。
メッセージボードに貼り付ける場合もHTML表示にして貼り付けます。


i2iアクセスランキングの設置

ブログで良く見かける i2iアクセスランキング
i2iアクセスランキングは、アクセス元のランキングです。

つまり、どのサイトからのアクセスが多いかわかるものです。

i2iアクセスランキングの設置

i2iに登録

まずは、こちらからi2iに新規ID登録します。


メールアドレス、希望ユーザーID、パスワードを入力します。
規約事項を良く読み、『規約に同意して登録』をクリックします。

登録したメールアドレスに、確認URLが記載されたメールが届きますので、確認URLをクリックし、登録を完了。

2.アクセスランキングの設定

登録したユーザーID、パスワードを入力し管理画面へログインし『新規パーツ』をクリックします


新規パーツ作成画面になりますので、『アクセスランキング』をクリック。


パーツ名を入力し、『実行』をクリック。


パーツの作成ができたら、『管理画面へ移動』をクリック


サイトの情報を入力します。
『サイトのタイプ』は、PCサイト、ケータイサイト、ブログサイト、すべてにチェックを入れて、次に進みます。


サイトのジャンルは、ブログに書いているテーマに合わせて選びます


サイト名と、サイトURLにブログタイトル、ブログURLを入力します。

次をクリックすると、確認画面になりますので、確かめてサイト情報の編集を終了し、『設定状況概要』に進みます。

3.詳細設定

『詳細設定』から設定を行います。


各項目、文字サイズ、色、ランキング表示件数など変更します。

変更後は、右側の『プレビュー更新』をクリックし、『設定内容を適用』をクリックして設定を決定します。

4.タグの発行

i2iの管理画面の左下にある管理メニューの『タグ発行』をクリックします。


i2iアクセスランキングを設置した際に画面に表示されるFlashバナーの種類を選び、『タグタイプ決定/変更』をクリック。

そして、『アクセスランキングタグ』をコピーし、アメブロの『フリープラグイン』に貼り付けます。

URL変更

管理画面の『便利機能設定』で、『URL⇒タイトル変更』をクリックします。
『タイトル変更していないアクセスのランキング表示』を『しない』に、『主要検索エンジンの表示・非表示』を『非表示』にします。
※『タイトル変更していないアクセスランキング表示』を『する』にすると、URLがそのまま表示されてしまい、効果的ではありません。

表示変更

アクセスがあっても、表示変更をしていないアドレスは『未設定』となっています。そのアドレスを表示させたい場合は、右横にある『表示変更』をクリックします。


『変更後に表示する情報』のタイトルに、表示させたいURLのサイトタイトル(ブログタイトル)を入力します。

『タイトル変更設定の確定』をクリックして変更完了です。


タイトル変更されました。

統計期間

アクセスが少ないうちは、統計期間を長くしておきます。

管理画面の『便利機能設定』の『期間設定』でタイプAの過去7日分累計になっているところを、30日などにします。

アメブロのカスタマイズ手順 デザイン変更から

カスタム可能を選択します

アメブロでカスタマイズをするには、まずはカスタマイズが可能なデザインを選ぶ必要があります。

昔は”デザイン”ではなく、”スキン”と呼ばれていましたが、いつの間にか”デザイン”に変わっています。
管理画面のところどころでは”スキン”の表記が残っていたりしますが。

今CSSを編集してカスタマイズが出来るのは、『CSS編集用デザイン』だけになっています。
以前は、『ベーシック』や『ピーチ』『ブルー』など数種類ありましたが、1つだけになってしまいました。

アメブロでは2011年の7月末に、デザインの大幅な切り替えがありました。
7月以前のデザインを使っている場合、今デザインの変更をしてしまうと7月以前のデザインに戻すことができなくなります。

では、デザインの変更の手順です。

(旧管理画面)
管理画面のマイページ上にあるクリックリンクを開きます
マイページ上のクリックリンクが便利です

[クリックリンク] ⇒ [スキンCSSの編集]をクリック
クリックリンクからスキンCSSの編集をクリックします

カスタム可能を選択
カスタム可能を選択します

(追記)
管理画面右上の三本線から、 ブログデザイン ⇒ デザインの変更


画面の下部にある カスタム可能を選択


CSS編集用デザインを選択
CSS編集用デザインを選択します

これで、[スキンCSSの編集] からCSSを編集してカスタマイズすることができます。

今あるデザインで[スキンCSSの編集]ページが表示されるのはこの『CSS編集用デザイン』だけとなっています。

最初は、何のデザインも入っていない状態で殺風景ですが、読みやすい、利用されやすいアメブロを作るならば、CSS編集用デザインでカスタマイズしていく必要があります。

カスタマイズのCSSコードはまた今度アップしますね。

アメブロ (旧)背景に色を付けたり、画像を入れたい

内藤です。

ブログの背景に色を付けたり、画像を入れたいという方は結構いると思います。

デザイン(スキン)でベーシックを選ばれている場合

CSSの前半に

/*5)ページ背景に画像を入れる*/
body{
background-image:url();
}

というところがあります。

この url()の括弧の中に、画像URLを入れればOKです。

背景画像を縦に繰り返したい場合は 最後の } の前に

background-repeat:repeat-y; を追加します

/*5)ページ背景に画像を入れる*/
body{
background-image:url();
background-repeat:repeat-y;
}

のような感じです。

背景画像を横方向に繰り返したい場合は
background-repeat:repeat-x; を

繰り返したくない場合には
background-repeat:no-repeat;

とします。

画像ではなく色を付けたい場合は

/*5)ページ背景に画像を入れる*/
body{
background-color:#F2F2F2;
}

のように変更します。

#F2F2F2というのが色を表すカラーコードになっています

カラーコードはこちらでお好みのものを選んでみてくださいね

アメブロ (旧)文字の大きさとリンクを読みやすく、わかりやすくする

内藤です。

文字が読みやすく、リンクがわかりやすい
これって読者目線ではとても大事です。

文字は大き目
リンクは目立つように青

旧デザインのベーシックでは、CSSに

div.subContents{
font-size: 15px; /*文字サイズ*/
line-height:1.5; /*行間*/
}
 
div.subContents a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}

を追加してみてください

これで、記事とメッセージボードの文字とリンクが変わります。