アメブロのデザイン変更方法 各種

自分は、アメブロをメインブログにしてます。そのアメブロにカスタマイズの事を書いたものをリンク集として作ってみました。
若干古いものも、ありますが、「アメブロのデザインのカスタマイズ」に興味のある方は、是非参考にして下さい。

(ちと、ゴチャゴチャしてますが・・汗)


Kermit de Frog - 無料写真検索fotoq
photo by Looking Glass

※1.最近、追加または訂正したものには、テキスト(目次項目)の右横に日付を入れるようにしてます。
※2.カスタマイズをするのに、どうしてもパソコンの機能のコピペ(コピー&ペースト)だけは、出来ないと作業を進ませていく事ができません。 その方法は、こちらを参考にしてみて下さい。⇒コピー&ペースト:コピペの方法

アメブロ、カスタマイズ【customize】まとめ

アメブロが提供しているデザインのものでもカスタマイズは出来ますが、「CSS編集用デザイン」が、なんといってもカスタマイズの自由度は高いです。 自分なりに整理してみました。

◎カスタマイズの基本、CSS編集用デザインを使おう・・♪( ´θ`)ノ

アメブロの既存のデザインからCSS編集用デザインに変更する手順2015/03/07
CSS編集用デザインのサイドバーと記事本文の幅2015/03/24

ブログ全体のカスタマイズ

1.ブログ全体に画像背景を設置2015/03/09
2.ブログに影を付けて立体的に見せる 2015/03/10

【サイドバーのカスタマイズ】

1.フリースペースの余分な隙間を詰めるには 2015/05/16 2.読者ボタン(プロフィール欄)、オンマウスで「ありがとう!」
3.サイドバーにテキストリンクを設置する方法 2015/05/16
4.サイドバーのテキストにカーソルが乗った時に背景色を付ける方法2015/05/04
5.サイドバーの「テーマ欄」をスクロール表示させる方法2015/05/02
6.サイドバーのテーマ欄の目立たせたいテーマを太字にする方法2015/05/16
7.サイドバーの不要なテーマを非表示にする方法2015/05/16
8.サイドバーの「このブログの読者一覧」、「お気に入りブログ一覧」をシンプルに!
9.アメブロのサイドバーにバナー(画像リンク)を設置するには2015/03/17
10.サイドバーのタイトル横にちょっとオシャレなGIF画像をつけるには2014/09/05
11.ユーチューブの動画を埋め込むには 2015/01/08
12.自分のブログ専用のGoogle検索をサイドバーに設置する方法2015/01/31
13.「読者欄」の「読者になる」ボタンを独自のものにする方法2015/03/22
14.サイドバーにオンマウスで画像が変わるバナーを設置する方法2015/04/03
15.Google+のバッジをアメブロのサイドバーに表示させる方法2015/04/07

【記事欄のカスタマイズ】

1.ウェブサイトに表を書く方法:テーブルタグ 2015/04/05
2.ブログ記事を読み易い書体にするには・・:メイリオフォント2014/11/01
3.リンクにカーソルを乗せた時に簡単な説明文を表示させるには 2014/10/09
4.記事欄の角を丸くするには 2014/10/07
5.枠で囲ったテキストリンクのつくり方 2014/05/03
6.囲み枠のついたテキストリンクVol.22014/05/04
7.枠で囲ったテキストリンク(3)
8.テキストを行書体にするには 2014/06/06
9.各種アンダーライン 2015/03/23
10.文章の強調したい箇所に背景色 2014/06/18
11.文章(テキスト)を枠で囲むには?(角丸)
12.オシャレな「記事のタイトル付、枠囲い」・・①
13.ちょっとおしゃれなタイトル付枠囲い ・・②
14.タイトルに背景色のついた囲み枠・・③
15.続:タイトルに背景色のついた囲み枠・・④
16.見出しタイトルに背景色の付いた立体的囲み枠
17.短い「文字」、「言葉」を囲むには・・ 2015/05/06
18.文章(テキスト)を反転させて目立たせる方法
19.画像クリックで他のページへ移動(画像リンク)させる方法2015/03/23
20.簡単な説明文付きの画像リンクの設置方法
21.囲み枠つきテキストリンクに画像を添付する方法 2014/05/09
22.リンククリックでページ内の指定位置に移動、ジャンプするには・・
23.ブログ記事欄に表(テーブル)を書く方法(基礎編)
24.ブログ記事欄に表(テーブル)を書く方法(応用編、タイトル付10行の表)
25.ブログに表を書くには? テーブルタグ 応用編ー2
26.タイトル付の9舛の表(テーブルタグ)
27.リンク文字(テキスト)にカーソル(マウス)を乗せると説明文を表示
28.文字の色を濃くするには・・ 2015/05/28
29.画像にカーソルを乗せると違う画像を表示させるには2014/08/20
30.リンク(テキストや画像)にカーソルが乗った時に説明文を表示2015/05/28
31. オンマウスで説明文
32.画像を動かす、マーキータグ
33.文字と画像を一緒に動かす(マーキータグ-2)
34.マーキータグで文字、画像を上、下へ動かす方法
35.背景に画像を使って、テキスト(文章)を流す方法
36.テキストと画像を流すには・・記事の最後に、お別れの挨拶を♪2014/07/09
37.画像の表示サイズを変更するには2014/04/05
38.画像サイズを変更する方法(幅と高さを指定)
39.画像を反転させる方法(画像リンク)、マウスポインター(矢印、カーソル)が乗った時に・・
40.オンマウスで(カーソル、矢印を乗せると)画像を反転させる方法、2013-12-16
41.オンマウスで画像を反転させる方法③
42.オンマウスで違った大きい画像を表示させる方法
43.画像の横に文字を書くには?
44.個別に画像に枠を付けて尚且つ立体的に 2015/04/02
45.エクセルで画像に枠をつけるには2014/07/24
46.記事、メッセージボードのリンクを目立たせるには・・
47.打消し線を赤くする方法(赤色打ち消し線) 2014/04/08
48.小見出し各種
49.小見出し、パート2
50.「打ち消し線」を赤くして、目だたせる方法
51.ブログ記事にマーカーを引く方法2015/05/19
52.ブログの記事の文字を行書にするタグ
53.記事タイトル下の「テーマ」を非表示にする方法
54.タグコードを閲覧者が見えるようにするには 2014/06/06
55.タグを表示させる特殊文字
56.記事を書く時、使ってはいけない記号
57.画像のURLにタグコードを付けて画像を表示させる方法
58.元のサイズが大きい画像を表示させるには 2014/05/06
59.大きいサイズの画像を端が切れずに表示させる方法
60.ブログ記事内に複数の画像を横一列に並べる方法①
61.ブログ記事内に設置する横並びの画像リンクを作る方法②
62.カーソルが乗った時、リンクがずれるようにするには2014/08/17
63.マウスが乗った時、リンクが少し、ずれるようにする方法2015/05/24
64.アメブロに表示させたい画像を一旦、他のサイトにアップしてから表示させる方法
65.CSSを使って、大きい画像を記事幅に合わせて縮小表示する方法
66.アメブロで画像を横に並べるには
67.二枚の画像を横に並べるには(テキストつきで) 2014/05/14
68.
テキスト(文章)や画像等の位置を調整するには2014/03/29
69.GIF画像が動かないと思ったときは 2014/04/15
70.○ブログ記事を書いてる途中で間違って閉じちゃったら!?2014/06/03
71.コメント欄に自分の画像を表示するには・・
72.記事の最後に最新記事へのリンクを設置するには 2014/07/14
73.小見出しにマークを付けるには 2014/08/10
74.記事タイトルエリアに背景色&下線 2014/09/06
75.二重赤色取り消し線を引くには 2014/09/13
76.Facebookに投稿された動画を自身のPCに保存するには2014/11/25
77.フェースブックの投稿をアメブロに埋め込むには 2014/11/25
78.Facebookの投稿をアメブロに埋め込むには 2014/12/14
79.アメブロの記事欄とコメント欄の文字の大きさを調整する方法 2015/01/27
80.ブログ記事欄の特定の箇所に背景色を付けるには
81.記事タイトルエリアに背景色と下線を引く方法2015/03/21
82.「CSS編集用デザイン」記事欄に影を付けて立体的にする方法 2015/04/19
83.記事内の小見出しを簡単に書く方法
84.サブタイトルを背景色を付けて目立つようにする方法2015/05/18

【その他、豆知識、便利なサイト・・】

1.メッセージボードに枠線を付ける方法 2015/02/25
2.アメブロにGoogle+の投稿を埋め込むには 2014/11/30
3.HTMLタグコードをサイトに表示させるには 2014/11/15
4.ブログ記事欄の特定の箇所だけ違う書体:フォントにするには2014/11/15
5.記事欄に枠線と背景色を付けるには:アメブロ既存デザイン2014/11/13
6.アメブロにFlickrに投稿した画像を表示させるには2014/11/08
7.右クリックでコピペ出来なくするには 2014/11/01
8.コメント欄に自分のプロフ写真を 2014/06/22
9.コメント欄に枠線と背景色をつけるには・・2014/10/06
10.画像URLを取得するには グーグルクローム他
11.縦に長い画像をスクリーンショットするには2014/06/23
12.GIMP(画像加工ソフト)ダウンロード、最初の一歩。2014/06/09
13.画像加工サイト(ピクスラーエディター)を使って2014/04/22
14.とても便利なアクセス解析「Qlook:クルック」の設置方法についてのメモ 2015/05/01
15.記事修正に、とっても便利なブックマークレット
16.予約投稿の方法(アメブロ)
17.便利な画像加工ソフトSkitch(スキッチ)
18.自身のブログの各サイズを調べる方法
19.ブログを紹介してくれた方を探すには
20.スクリーンショットの方法(Windows7)
21.自身のアメブロの全記事数を調べる方法
22.検索を絞り込むには・・
23.フリープラグインの外部化(Dropbox)2014/04/18
23′フリープラグインの外部化(グーグルドライブ編)2015/1/22
24.記事内の目立たせたい部分の囲み枠を作成する便利なツール
25.画像の元のサイズ(本来のサイズ)を調べる方法2015/03/25
26.“画像の本来のサイズを取得するツール”
27.売上アップを目指す「無料ホームページ教室」
28.直リンクとは・・
29.『無料写真検索 fotoq』
30.無料画像サイト・・
31.フリー素材の来夢来人
32.無料でしかも、インストールやダウンロード無しの画像サイト:写真加工.com2015/03/12
33.アイコン画像の無料サイトは 2014/05/03
34.商用無料の写真検索さん – フリーの画像素材が6700万点以上  
35.GIFアニメを作る2015/05/29
36.ウェブで無料作成できるGIFアニメ作成サイト。
37.無料テンプレート⇒WordPressテーマ一覧 | ワードプレステーマTCD
38.無料画像他、HTMLクイックリファレンス
39.ボタン素材を自動生成してくれるサイト 2015/03/11
40.画像加工無料サイト①
41.ブックマークレットって?-1
42.とても便利な過去記事修正ブックマークレット(アメブロ) 2014/05/11
43.リンクテキストを自動生成してくれる便利なブックマークレット2014/05/11
44.リンクを貼る時に、とても便利なURLコピー用ブックマークレット
45.jQueryコード
46.入力した文字数を簡単に調べられるサイト
47.HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
48.ぐるぐるとカーソルを動かすだけで色を選べる便利なサイト2014/05/12
49.カラーコードサイト022015/03/13
50.上位サイトの使用キーワード(共起語)抽出ツール「LSI調査」
51.画像加工編集:「バナー工房 」を使って2015/04/01
52.バナーやリンクボタンをHTMLタグコードで作成する方法2015/03/19
53.ブックマーク(Chrome)をブックマークバーに効率的に 表わすには
54.画像を、その本来のサイズで見るには 2014/04/16
55.「ペイント」を使って画像サイズを縮小するには 2014/07/22
56.ペイントソフト(Windows7)でトリミングするには2014/07/23
57.リンクを貼る時に便利です。URLコピー用ブックマークレット2014/08/12
58.ブログ記事をサムネイル画像つきで紹介出来るには2014/08/13
59.画像URL(パス)から、その画像をパソコンに保存するには2014/10/05
60.Firefoxを最新バージョンにするには 2014/11/01
62.最新ページへのリンクボタンを設置する方法 2015/01/25
63.写真の大きさを縮小するには・・(Windows7のペイントソフトを使って)2015/02/03
64.アイキャッチ画像を探すのに「三つ星」のサイト!!2015/02/09
65.Pixabay「ピクサベイ」高画質な画像提供サイト 2015/033/10
66.アメブロのCSSソースを見るには 2015/02/23
67.アメブロ既存デザインにヘッダー画像を設置する方法
68.アメブロのバックアップにFc2ブログは 2014/05/08
69.アメブロ各欄の文字数制限2015/03/23
70.コメント欄に書かれたURLを自動的に自身のページへのリンクにする方法
71.windowsの基本的なショートカットキー2015/04/11
72.テキストリンクにマウスが乗った時に色をフェードさせる方法
73.「記事についたいいね!」から「迷惑いいね!」を消す方法
74.フェイスブックページプラグインの設置方法 2015/04/22
75.画像縮小サイト2015/05/02
76.Flickrの中からブログ利用がOKな写真を探せるサイト:PhotoPin2015/05/06
77.FaceBookにブログ記事をシェアした時にプロフ写真以外の画像を表示させる方法 2015/05/13
78.プロフィールページの【ペタをつける】ボタンを消す方法2015/05/21
79.パソコン画面上の写真を自身のパソコンに保存する方法2015/05/27

*【番外編:ブログネタ.etc】

まだまだ、不十分ですが、順次、整備していくつもりです。 ブログデザインをチョコチョコいじくるのも、楽しいものかな~と^^; 少しでも、お役にたてば、うれしいのですが・・( °◡°)

※2015/05/29 一部修正しました。

あいさつ

最後まで、ご覧頂き、ありがとうございました。


WordPressにデフォルトで入っている”Press This”の使い方|やさしいアメブロカスタマイズ!と女性タレント画像

Press This – WordPress Codex 日本語版 こんにちワ。西島秀俊です。”綾小路きみまろ”です。。ワンタンですwwWordpressに最…

情報源: WordPressにデフォルトで入っている”Press This”の使い方|やさしいアメブロカスタマイズ!と女性タレント画像

( °◡°)

GIFアニメ画像を作るには|やさしいアメブロカスタマイズ!と女性タレント画像

アニメGIFをバナー工房を使って簡単に作る方法Perfume Official Site “道路工事きもまろ”ことワンタンです!Wこんにちワ^^;ダウンロード…


自分が良く使う画像加工ソフトGIMPだと、50枚とか100枚の静止画を使ってGIF画像を作れるみたいですが、そのやり方は、まるで高等数学の方程式を解いていくような感じで気が遠くなります(笑)。
それに比べて、「バナー工房」では、直感的に、簡単にGIF画像が作れちゃいます。
時間が空いた時にでも、ちょこっと作ってみるのも楽しいのでは!?と思います。

情報源: GIFアニメ画像を作るには|やさしいアメブロカスタマイズ!と女性タレント画像


( °◡°)