やっちゃえ先生探究記

生徒の力が引き出される「学習者中心の学び」をデザインしたい教員です。地道な形成的評価を大切に。

一瞬で思い通りにできるブログのカスタマイズ記事15選!〜初心者でも簡単!〜

http://3.bp.blogspot.com/-Nus31EfeJdw/VHxqY-Ny-ZI/AAAAAAAApXI/kBrqFWXutmI/s180-c/zei_etax.png

ゴールデンウィークに突入し、ずっと行おうと思っていたブログのカスタマイズを一気に進めている最中です!

私はweb関係のことはど素人ですので、過去の先輩方の記事を参考にしてここまでなんとか作りかえられました!

 HTMLとかCSSと聞いても、さっぱり?で、とにかく「コピペ」でカスタマイズを繰り返していたのが、この数日である程度自分でどこをいじればどうなるかがわかってきました。

プログラミング、面白い!おそるべし! 

という気持ちです。「成長している感」が得られます(笑)

今日は私が参考にした記事の中から、厳選したお役立ち記事を紹介します!

・かんたん ・すぐできる ・いろいろ試せる

の3要素をすべて含んでいる記事です!

 

カスタマイズ総集編

「チェックリスト」のようにこの2記事を見ながら、何をどう変えるか試行錯誤しました!常にタブで開きっぱなしにするくらいです。

www.yukihy.com

shiromatakumi.hatenablog.com

 

ブログテーマはこちらを利用させていただきました!

コピペ一発でおしゃれになります!しかもオリジナリティを出せる!すごい!

www.ituore.com

当ブログの「グローバルナビゲーション」(↓紺色のところ)も上記記事を読んで自分でいじっていたらできました!

f:id:Yacchae:20170503194636p:plain

 

読者になるボタン・フォロー・SNSシェアボタン

本当にコピペ一発でした!慣れてこれば、色を変えたり幅を変えたり、とできるようになってきます!当ブログのカスタマイズはこの2つの記事から始まりました!

georges.hatenablog.jp

www.ituore.com

 

ブログタイトル・見出し

最初はできるのかな、と心配していましたが、最終的には、「いや〜こういじったらどうなる?」と遊び心が炸裂してしまうくらい何にしようか楽しめます。

www.yukihy.com

www.north-geek.com

 

ブログのフォント

無料版でも、フォントは自由自在に変えられる、というのがまず驚きでした(笑)

先に紹介したブログテーマ「Spirea」を入れた関係で結局フォントはあまりいじっていませんが、この記事読めばフォントも自由自在です。

www.north-geek.com

 

太字強調文字を蛍光ペン風に!

これ〜やりたかった!過去記事にも適用したら、蛍光ペンだらけのブログになってしまったので、一旦私は封印中…

www.north-geek.com

 

問い合わせフォーム!

地味に大切ですがやっていなかったことを反省…

www.kotodamablog.com

 

「続きを読む」機能!

これ、いるの?と思っていたのですが、必要です。理由は、

ブログのトップページにはSNSシェアボタンが貼れない

=記事をSNSシェアしてもらうためには記事ページに飛んでもらわないといけない

=トップページで記事が読めてしまったらシェアされない(言い方難しい)

ので、読者の方を記事ページにそれとなく誘導する仕掛けであり、かつこれがあることでトップページの記事表示量が少なくなり、動作が軽くなりました!

georges.hatenablog.jp

www.yururimaaruku.com

 

関連記事を イイ感じに!

記事下に関連記事がいくつかでると、思わず押しちゃいます私は。

corp.shisuh.com

www.yukihy.com

 

「トップへ戻る」ボタン!

これは野球でいうなら本当に8番セカンド的な人。渋くて好き。

nohack-nolife.hatenablog.com

 

まとめ

先輩方も記事中で言及されていましたが、

①カスタマイズとページ読み込み速度はトレードオフ

②カスタマイズ前に必ずHTMLやCSSコードを保存しておく!

ことを忘れずに行うとよいかと思いました!(わけわかんない所にコードをコピペしてぐちゃぐちゃになった私)

自分でいじれると楽しいですね!プログラミング学習は小学校にも入ってきますが、こんなサービスもあるのでやってみようかなと思ってしまいました!

prog-8.com