パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

NEW !
テーマ:

こんにちは、パソコンインストラクターの川上雄大です。

 

 

アメブロのヘッダー画像をエクセルで作る方法を以前にも書いておりますが、

 

エクセル(Excel)でヘッダー画像を作るには

 

Macのエクセル(Excel)だとWebページで保存しても画像がバラバラになるのですが・・・

 

など・・・

 

 

改めて、エクセル2016(Windows10)でのアメブロのヘッダー画像の作り方を書いておきます。

 

 

あ、ヘッダー画像って、この赤い枠のところです↓

 

 

 

 

まず、エクセル2016を起動します。

 

 

まずは、ヘッダー画像の大きさのベースを四角形で作ります。

 

[挿入]-[図形]-[正方形/長方形]

 

をクリックします。

 

 

 

ドラッグして、長方形を描きます。(適当な大きさでOKです。)

 

 

今回のヘッダー画像の大きさは、

 

1120px×300pxで作成しますので、

 

[描画ツール]の[書式]内で、

 

[高さ」の欄に、半角で「300px」と入力し、

[幅]の欄に「1120px」と入力します。

(確定すると、cmに戻ってしまいますがOKです。)

 

 

 

次に画像を入れますので、

 

[挿入]-[画像]

 

をクリックして、

 

 

画像を挿入します。

 

 

大きさや配置などを決めて、さらには[図ツール]の[書式]内で「トリミング」をします。

 

うまく収めます。

 

 

次に文字を入力します。

 

[挿入]-[ワードアート]

 

をクリックします。

 

 

文字をそれぞれ入力し、大きさや配置を整えます。

 

 

文字の色は白色にしておきます。

(いっぺんに各ワードアートを選択するには、ひとつめをクリックした後、SHIFTキーを押しながら、2つ目以降のワードアートをクリックしていきます。)

 

 

背景の四角形の色を黒色にするので、

 

[描画ツール]-[書式]-[図形の塗りつぶし]

 

をクリックして、「黒」をクリックします。

 

 

このようになります。

 

 

あと、背景の四角形の線の枠を「枠線なし」にしたりします。

 

 

これでエクセル2016でヘッダー画像を作ることができました。

 

あとは、作成した部品をすべて選択して、コピーします。

(すべて選択するには、背景の四角形をクリックした後、Ctrl+Aを押してもOKです。または、背景の四角形をクリックした後、SHIFTキーを押しながらひとつひとつクリックしていってもOKです。)

 

 

[ホーム]-[コピー]をクリックします。

 

 

今度は、Windows10標準のペイントを起動します。

(Windowsアクセサリの中にあります。)

 

 

 

ペイントが起動します。

 

 

[ホーム]の[貼り付け]をクリックします。

 

 

 

すると、エクセルで作成したヘッダー画像が貼りつきます。

 

 

そのまま、「トリミング」ボタンをクリックします。

(もしも「トリミング」ボタンが押せない場合は、ヘッダー画像の点滅が消えてしまっていますので、再度コピペしなおすか、選択しなおしてください。)

 

 

 

すると、ヘッダー画像が表示されます。

 

 

[サイズ変更]ボタンをクリックします。

 

 

[ピクセル]をクリックして、

[縦横比を維持する]のチェックを外します。

その後、[垂直方向]欄に300と入力し、[OK]をクリックします。

 

 

 

これで完成ですので、[ファイル]-[名前を付けて保存]-[PNG画像]

 

をクリックし、

 

 

半角英数で名前をつけて保存します。

 

 

 

ペイントは終了し、エクセルのデータも保存しておきます。

 

 

 

あとは、ヘッダー画像をアップロードし、CSSを編集して、ヘッダー画像を変更します。

 

 

 

 

このように、ちょいちょい~と、ヘッダー画像を変更することができます^^!

 

 

 

ただし、この自作のヘッダー画像はスマホでは表示されません。パソコン版のみになりますのでご注意を!

 

 

デバイスごとのアクセス解析を見てみると、

 

2019年1月現在、

私のこのパソコンブログの割合は、約6割がパソコンで見られている方がいらっしゃるのに対し、

 

私の音楽ブログの方は、逆転していて、パソコンで見られている方が3割5分と少なくなっています。

 

 

スマホでアメブロを見る割合が増えてきているのは事実ですが、それでもパソコンで見られる方がゼロでない以上、ブログの顔をきちんとしておくのも大切かと思われます。

 

 

 


以上、アメブロカスタマイズでした。

 

Instagram

 


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大

 

■川上雄大の音楽活動情報はこちら■

テーマ:

こんにちは、パソコンインストラクターの川上雄大です。

 

 

 

色んな方とお話ししていますが、

 

「忙しい、忙しい」

 

と口にする人がいます。

 

 

みんなそれぞれ「忙しい」と思うんです。

 

暇に見える人も、なにかしら忙しかったりします。

 

 

ただ、それを「忙しい」と感じるか、「忙しくはない」と感じるかは、その人の感じ方かな、なんて思います。

 

 

たくさんやらなければならないことを、次々と処理をしていくにはどうしたらいいか、という悩みをお持ちの方はたくさんいらっしゃるのかな、なんて思ったりします。

 

 

たとえば、Facebook個人ページを更新して、Facebookページを更新して、Twitterを更新して、Instagramを更新して、ブログを更新して、WordPressを更新して、YouTubeを更新して、LINE@を更新して・・・

 

というだけでも、みなさん、もうお手上げ~、

 

そんな毎日なんかできないです!って、逆ギレされたりします(笑)

 

 

でも、実際に、そんなパソコンが得意でない人でも、十分に活用して、更新して、売り上げや利益を得ている人たちはいます。

 

そう、きっとやり方を知らないだけなのかもしれません。

 

 

 

当スクールにも、

 

「川上先生のこのブログを見て勉強していましたが、なかなかうまくいきません(泣)どうしたらいいでしょうか?」

 

といただき、

 

実際に、直接レッスンすると、3秒ほどで解決したりする場合があります。

 

 

これを3秒ルールと…

 

言うか言わないかは別として(苦笑)

 

 

なので、

 

わからないことは専門家に任せて(頼って)、早く目的のことを達成できるように動かれるといいかな、なんて思ったりします。

 

 

 

私も、直接の無料対応はしておりませんが、

 

この無料ブログを通じて、みなさまにお役に立てることを切に願っております。

 

 

 


以上、川上雄大でした。

 

Instagram

 


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大

 

■川上雄大の音楽活動情報はこちら■

テーマ:

こんにちは、パソコンワンポイントレッスン!パソコンインストラクターの川上です。
(2019年1月21日現在です。)

 



この記事では、アメブロカスタマイズする方法を書いておりますが、そのカスタマイズする基本はこちら↓をご覧になってくださいませ。

アメブロでHTMLタグを記事で使うには

 

■アメブロ便利技■

 

 

■アメブロカスタマイズ■

◆アメブロをカスタマイズするにはまずここから↓

デザインをCSS編集用デザインにしないとダメです
フリースペースを配置してください
フリープラグインを配置してください
 

◆ヘッダー下のメニューバー(グローバルナビ)

メニューバーの設置方法
メニューバーのボタンを画像にする方法
メニューバーの角を丸くして枠をつけたい
メニューバーのグラデーション
「カスタム可能」でないデザインでメニューバーを設置するには
 

◆ヘッダー画像の作成と設置

エクセルでヘッダー画像作成
CSSでのヘッダー画像の挿入方法
ヘッダー画像の設置
ヘッダー画像に文字を埋め込んだ場合のタイトルや説明文を非表示にする方法(CSS)

ヘッダー画像の画像アドレス(URL)の取得方法

◆CSS(シーエスエス)

CSSって何?
「CSSの編集」って?
CSSの基本書式
CSSの記述場所
CSS編集デザインとサイドバーの色

 

◆プロフィールページ

【要確認!】アメブロのプロフィールページが変更になりました!
 

◆スライドショー

アメブロのヘッダー画像をスライドショーに
サイドバーにスライドショーを設定するには
 

◆サイドバー

角を丸く、背景色
影付き、グラデーション
サイドバーのリンク文字の色を薄い色に変える
プロフィール画像を大きくするには(CSS)
 

◆フォントの変更

メイリオフォントに変更する
 

◆記事内のメニューバー

記事中のメニューバー
電話をかける


◆記事の囲み枠
記事ごとに囲み枠を設定したい
 

◆テーマについて

テーマを編集するには(カテゴリ分類の方法)
「カスタム可能」でないデザインでテーマ編集するには <新デザイン用>
 

◆基本色コード

覚えておきたい5つの色コード
 

◆メッセージボード

メッセージボードの書き方
メッセージボードを活用してみましょう!記事エリアの最上部に表示されるとこです。

◆リンク
リンクの文字にのせるとプクッと文字が膨らむ方法
リンク文字の下に下線を引くには(リンク文字を青く、大きく、太く)

◆ざっくり
ピンク色のカスタマイズ
 

 


 


 

■アメブロ基本設定■

 

 


最新デザイン(横幅が1120pxと広く、プロフィール画像が丸いデザイン)用のカスタマイズ

最新デザインでメニューバーを設置するには(既存のデザインの場合)

最新のデザインでサイドバーをカスタマイズする方法

最新デザインでヘッダー画像を設置する方法

アメブロ最新デザインで、ブログタイトルと説明文の位置を自由に配置する方法

プロフィール画像が丸いデザインでのメニューバーの設置方法

サイドバーの見出しの色を変えるには(プロフィール画像が丸いデザインの場合)

最新のデザインで記事枠を囲む方法(プロフィール画像が丸いCSSデザイン)

記事内の文字の大きさ、行間隔、文字の間隔の変更(新・CSS編集デザイン用)




以上、アメブロカスタマイズの目次でした。

LIDS札幌・ライフデザインスクール
川上 雄大

 


テーマ:

こんにちは、パソコンインストラクターの川上雄大です。

 

 

最新のデザイン(プロフィール画像が丸いCSSデザイン)で、

 

サイドバーをカスタマイズする方法は、

 

最新のデザインでサイドバーをカスタマイズする方法

 

サイドバーの見出しの色を変えるには(プロフィール画像が丸いデザインの場合)

 

 

の過去記事ですでに書いている通りですが、

 

そういえば、記事の枠についてまだ書いていなかったような気が・・・

 

 

ですので、今回お伝えしますね。

 

 

例えば、最初はこのように記事枠がない状態だとします。

 

 

 

この↓CSSコードを追加すると

 

 

/* メインエリア背景 */
.skin-bgMain {
border:5px double  #008080;
border-radius:10px;
padding: 10px;
margin-left: -20px;
background-color: #FFFFCC;
}

 

 

 

このように、記事の枠線が二重線になり、緑色になります。

そして、角も丸くなります。

 

 

 

さらに、記事一覧も同様になります。

 

 

 

ただ、さらに

 

.skin-blogArchiveBody {
padding: 30px 30px 0 30px;
background-color: #FFFFCC;
}

 

 

とすると、ビチビチ感がなくなります。

 

 

 

どうぞ、お試しくださいませ^^!

 

 


以上、アメブロカスタマイズでした。

 

Instagram

 


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大

 


テーマ:

こんにちは、パソコンインストラクターの川上雄大です。

 

 

(2019.1.1 菅原道眞公がご祭神の栗山天満宮にて)

 

あけましておめでとうございます。

今年の元旦は実家の栗山町で過ごしました。

朝7時に栗山町の温泉に入り、その後栗山天満宮に初詣に行ってきました。

 

 

天然温泉くりやま

湯地91番地(ホテルパラダイスヒルズ内)
JR栗山駅より車で約5分

 


昨年は色んな方とご一緒出来て、そして色んなご縁をいただき、深く感謝しております。

今年はまた気持ちを新たに、まだ見ぬ世界へとチャレンジしていこうと思っています(^ ^)



どうぞ今年もよろしくお願いいたしますm(__)m

 

 

 


以上、ご紹介でした。

 

Instagram

 


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大