となりの読書会。

となりの読書会。

読書会っておもしろい♪ 大阪府豊中市で開催しているママ向け、子ども向け読書会の記録と 、子どもとの遊びネタ、手作りおもちゃ、おもしろい本の話などを書いてます。 お子さんを喜ばせたいママ、 読書が好きな人、ぜひのぞいていってくださいね。

ブログカスタマイズおすすめ記事 CSSとかHTMLも初心者でも簡単にいじれます。

いつも読んでくださってる皆様

ありがとうございます。

 

今年は、このブログを

今読んでくださってるみなさんはもちろん、

たくさんの人に楽しんでもらえるように

育てていきたいなぁと思ってます。

 

年末から毎日更新したり、

リライトしたり、

少しずつ体裁を整えて

遊んでます。

 

今回はプロフィール画像の変更にチャレンジ。

 

その中でCSSいじったり、

過去にしてきたカスタマイズを

思い出しました。

 

初心者でもコピペで簡単に

ブログをカスタマイズできる

おすすめ記事を合わせてご紹介しますね。

 

 

プロフィール画像変更にチャレンジ

 

デジタルのイラストが多い中

そんな技術を持ち合わせていないため

プロフィール画像

子ども読書会「ほんのとびら」の

看板写真で間に合わせてました。

f:id:tonarinodokushokai:20190108160426p:image

写真の色合いがあまりよくなくて

手描きの雰囲気がいいと言えるほど

手書きの良さも出せていない。

なんとかできないかなー。

 

アイビスペイントXにチャレンジ

アイビスペイントX」

(ほんまは英語やけどカタカナですみません)

という、iPhoneのアプリで

お絵かきができるらしい。

 

指で書いてみたけど、

全然いいのかけない。

 

100均キャンドウで

スマホタッチペン買ってみました。

f:id:tonarinodokushokai:20190108160727j:image

これなら下手ながら

絵がかける!

 

レイヤーがほんの少しなんとなーく

わかる程度のド素人。

 

いざイラスト描きにチャレンジ。

 

f:id:tonarinodokushokai:20190108155931p:image

この写真を取り込んで

レイヤー重ねて

ペンでなぞってみたけど

いがむ、いがむ。。

 

これでアニメ画書いてる人とか

どんなけすごいねん。

 

調べてみたら、

線画は紙に手書きで、

写真撮って取り込んで

着色だけアイビスペイントでできるそうな。

 

 

トレース台を持っているので

印刷したプロフィール画像

ボールペンでなぞってみました。

f:id:tonarinodokushokai:20190108161333j:image

 

この写真をアイビスペイントに取り込んで

線画抽出。

 

色塗りだけでも

100均のペンがあると楽ちんです。

 

線画抽出がうまく行ってなくて、

何度髪に色を塗っても

画像全部茶色で塗ったり、

色ごとにレイヤー変えたいのに

全部同じレイヤーに塗っちゃったり

線画に直接塗ったり

クリッピングやレイヤーの重ねる順番がわからなかったり

大苦戦を重ねながら、

なんとかなんちゃってグラデーション入りの

画像完成♪

 

f:id:tonarinodokushokai:20190108172316j:image

完成した後に気付いたけど

元画像の水色の扉がなくなってしまった。。

ほんのとびらじゃなくて

「ほんのあな」になっちゃった。。

まあいい。もう疲れた。

 

HTML、CSSいじりおすすめ記事

あとは、設定から画像を変えるだけ。

 

ブログアイコン変更!

f:id:tonarinodokushokai:20190108171011p:image

 

あれ?変わらない。

 

ああ、次のページの

アイキャッチ画像変更」

これか。

f:id:tonarinodokushokai:20190108171005p:image

 

あれ?また変更しても変わらない。

 

そこで気付いた。

 

あああ。。。

初心者なのにコピペで

HTMLとかCSSとかいじりまくっちゃってるから

これじゃ変わらないんだわぁ。。

 

 

たしか、この方のこの記事のやり方で

画像を大きくしたんだわ。

CSSいじったら、どの記事参考にしたか

きちんと残しておかないと

こういうとき困るなぁ。

 

プロフィール画像を大きくする方法

このやり方で簡単に画像を大きくできるので

とってもおすすめの記事です。

 

ほかにもいろいろいじってて

形が崩れると怖いので、

下書きに画像をはりつけて

HTML編集に切り替えて

もとのCSSと変わってる数字の部分だけ書き換えてみました。

 

おー!無事プロフィール画像が変わりました。

 

 

f:id:tonarinodokushokai:20190108171157p:imagef:id:tonarinodokushokai:20190108171135p:image

 

丸いアイコンのほうは

やっぱりパッとしないなぁ。 

 

f:id:tonarinodokushokai:20190108171220p:image 

あ!これもプロフィール画像と別で

設定できるのか。

 

最初に間違って変更しちゃった

「ブログアイコン」がこれかも。

 

今度

もっとシンプルな絵に変えてみよう。

 

 

ほかにCSSいじった部分をご紹介。

 

もともと、

どの記事を参考にしたのかわかりませんが

同じことができる記事を見つけたので

紹介しますね。

 

読者ボタンを大きく表示

読者ボタンどこにあるのかわからない

ブログが多いので

ボタンを大きくして、いくつか貼っておくと

わかりやすくていいですよ。

 

はてなブログproでなくてもトップページを記事一覧にする方法

記事内容が全部

トップページに表示されてた時は

すごく重かったし、見にくかったですが

このカスタマイズしてから

すっきりしました。

はてなブログPROじゃなくても

一覧にできるのうれしいです。

 

スマホのサイドバーに記事一覧を表示する方法

これはCSSじゃないけど。

 

ある時、スマホ表示したとき、

カテゴリ一覧がないことに気づきました。

 

カテゴリ、フッターとかじゃなくて

PCと同じように

サイドバーに表示したい。

このやりかたで、

スマホからでもサイドバーに

カテゴリーを表示できるようになりました。

 

いろいろほかにもいじったかもしれないけど

覚えてるのはこのくらい。

 

コピペでいいかんじに

ブログが変わっていくのはうれしいです。

 

CSSコピペ簡単なので、

ぜひチャレンジしてみてください。

 

CSS一文字コピペ忘れで

うまく行かない時とかもあります。

 

変更前に元のHTMLコピペして

必ず残しておいてくださいね。

 

うまく行かない時は、元のHTMLを貼って

1からやり直すほうが早いです。

 

おすすめのカスタマイズがほかにもあれば

ぜひ教えてくださいね♪