クマの動物研究

副業ブログと猛獣事件を研究しています。

シェアボタンの表示速度が遅いのでボタン式にかえてみた話。コピペでOK!

カスタマイズf:id:cumata-tan:20210715181214p:plain

こんにちは、クマです。

今日はCSSとかHTMLとかよく分からないけど使ってみようというお話。

 

ブログブログのくせに!

と言われるかもしれませんが、これでもクマ…。

 

f:id:cumata-tan:20210713130153j:plain

クマ

プログラミングというものをよく分かっていません!

 

f:id:cumata-tan:20210713130113j:plain

熊ちゃん

えばっていうことか。

 

よく分かっていないけど。

プログラミング=パソコンに命令をだすこと。

とゆーことはわかる。

 

プログラミングって何?

 

つまりプログラミング語でパソコンに「ふきだしつけろ!」と命じることで、

 

f:id:cumata-tan:20210713130054j:plain

クマな人

こうして吹き出しをつけることができる。

 

 

しかしパソコンは人間のことばを理解することはできません。

 

f:id:cumata-tan:20210713130029j:plain

熊ちゃん

こんにちは。

 

f:id:cumata-tan:20210714140541j:plain

パソコン

■◯×♨◆…⁉

 

 

f:id:cumata-tan:20210713130102j:plain

熊ちゃん

わっ。な、なんだって?

 

f:id:cumata-tan:20210714140541j:plain

パソコン

△■◯! ◎▢×◆…⁉

 

f:id:cumata-tan:20210713130143j:plain


わ、分からないよう。

 

 こんな風に言葉が通じない。

パソコンに仕事をしてもらうには熊ちゃんがパソコンに言葉を合わせなければなりません。

 

パソコンの言葉

 

パソコンに命令するために使う言葉。

それがプログラミング言語。

いちばん基本のHTML語&CSS。 

 

はてなブログでもHTML編集モードがありますよね。

f:id:cumata-tan:20210714144408p:plain

 

f:id:cumata-tan:20210713130117j:plain

素人

えっ、これで基礎なの? 

 

細かい文字が並んでいる。

最初の頃…これの意味がまっったく分からなかったので…。

見なかったふりをして「編集見たままモード」にそっと戻っていました。

 

この記事はそんなクマと同じ…。

HTMⅬって。CSSって。何なのだよ⁉

というあなた向け。

 

素人でも使える

 

去年まではまったくの素人。

なんなら始めた当初はスマホでブログを書いていた。

パソコン買ったら買ったでわからないことだらけ。

f:id:cumata-tan:20210714145533j:plain

 まあ、今でも全然よゆーで素人なんですが。

始めた頃に比べると知識と経験は増えた(と自分では思っている)。

 

もちろんいちからブログのテーマを設計してみろとかいわれると激しく困るんですが。

 

コードをコピペするだけならカンタン!

 

f:id:cumata-tan:20210713130110j:plain

熊ちゃん

コピペはできますか!

 

f:id:cumata-tan:20210713130153j:plain

素人

はい、それならできます!

 

 

基本はコピペするだけ

 

基本的には公開されているコードをコピーして自分のブログに貼りつけるだけ。それだけで上記のようにマーカーを引いたような見出しにしたり、目次をかっちょよくしたりできます。

 

 

▽見出しを変える

f:id:cumata-tan:20210714141224j:plain

f:id:cumata-tan:20210714141220j:plain

色んな見出し

 

▽目次を変える

 

f:id:cumata-tan:20210714141946p:plain

色んな目次

 

素人でもこういうカスタマイズが簡単にできます。

 

f:id:cumata-tan:20210713130433j:plain

熊ちゃん

どうやったらできるのさ?

 

わたしがふだん参考にしている記事はこの前も紹介しました。

ブログをオシャレに変えたい方はこちら

 目次や見出しの種類が豊富!

 

基本はCSSをコピペするだけなのでカンタン! 

色は自由に変えられます。

 

①最初はとにかく慣れるために既製品をそのままコピペして使う。

②CSSを触るのに慣れてきたら自分で色などを変えてみる

 

記事をよーく読みこむのが失敗しないコツです。

 

カンタンなのにデザインが美しい

 

HTML&CSSがにわかでも使えるようになると変わります。

 

  • デザインが変わる
  • ブログが楽しくなる
  • いろいろ試したくなる

 

自分の好きなようにデザインを変えることができるので気分があがりますよ。

やがてデザインをいじるのに夢中になって記事を書く時間がなくなるという(笑)

 

お客さんが見て「古臭いデザインだなあ」と思われると離脱されてしまうかもしれないので、ある程度ブログを書くのに慣れてきたら手をいれてみるのもいいかもしれません。

 

f:id:cumata-tan:20210715172220p:plain

SEO対策になる

 

読者の利便性を高めることはSEO対策にも吉◎

たとえば、はてなブログのシェアボタン(ブックマークやTwitterのボタン)は表示速度がやや遅いので使わずに、独自につけている方も多い。

 

f:id:cumata-tan:20210713130153j:plain


少しでも表示速度を上げることが見る人のために…。

 

お客さんのためになります。

 

ただしCSSを使いすぎると逆に表示速度が落ちるので気をつけて。

 

シェアボタンのつけかた

 

ちなみにシェアボタンのつけ方は。

こちらが参考になります。

www.notitle-weblog.com

 

今回はシェアボタンのみのご紹介になりましたが、他にもトップページに記事をよっつ並べる方法やスライドショーにする方法などもあります。

 

はてなブログ、カスタマイズで調べると色々出てくるのでぜひ試してみてください。

 ※トロイの木馬に気をつけて。

はてなブログのカスタマイズ方法を探していてパソコンがトロイの木馬にのっとられた話。

 

 

これらのカスタマイズを施せば…。

素人でもWordpressみたいにおしゃれなサイトにすることができますよ!

 

 

小学校でもプログラミングの授業が

 

f:id:cumata-tan:20210713130122j:plain

素人

2020年から小学校でもプログラミングが必修科目に。時代ですね。

 

 

プログラミングの本は大人が見てもさっぱりですが、これはまだわかりやすいかな。

この本にかかれているとおりに言語をうちこんでいくとエルサが動いて氷の魔法を使いだします。専用サイトが用意されているので勉強しやすい◎

子供用なんですが、大人むけの本は意味が分からなかった…。情けなきことですがイチから学ばなくては理解できないのでここからスタート。