HPシェアボタン設置のアレコレ

コンビニをヤメてアレコレ動き出した6月。

 

辞めたことについてのブログはこれからあちこちに書いていこうと思っている。

 

本日はこのホームページのデザイン変更について少し覚書。

HPのリニューアルをするのには数日要したが、jimdoは元々筆者のようなプログラム等に関係していないド素人にも簡単に出来るHPサイト。大きな変更はデザイン選びと配置を変えるだけで完了。

苦労というほどの手間はかからなかったのだが、細かい点で融通がきかないものこのサイトの特徴でもある。

 

一番困ったのがシェアボタンの設置だ。

 

ボタン自体のコードは各公式ページからコピペすればいいのだが、それを貼り付けるのに難儀した。

jimdoにはHPの体裁を整えるのに簡単なツールが用意されている。そのツールのコラムを使うと、HPの範囲を分割できる。

そこにそれぞれのシェアボタンコードを埋め込めば簡単に出来るのだが・・・

 

それぞれのシェアボタンを設置して、ボタン同士の幅を揃えようとしても上手くいかない。

ならば、均等に並べればとしてもなんか間延びしてしまう。

間延びしてしまうのは、コラム分割が6個までと制限されているからだ。

コードを分割せずにまとめて貼り付けてもごちゃごちゃになってしまう。

2列に並べてしまおうかとも考えたが、ある意味目立たせたくはないシェアボタン。

オリジナルボタンの設置も調べたがよく分からんw

既存の公式ボタンを上手く並べて体裁よく見せる方法はないだろうか?更に調べる。

無職なので時間だけはタップリある(笑)

 

2日間ほどググりまくった結果、ボタンを横に並べるhtmlコードを見つけた。

これだ!!

早速コードを各シェアボタンコードの間にコピペしたところ、ちゃんと横並びになった!!!

と、ココで気になるのが、シェアボタン間の隙間がない_ト ̄|◯

これはかっこいいとは言えない。

そこで、ボタンごとにどうやったら隙間を入れられるかを調べた。

これは意外に簡単に見つかり、更にそのコードを埋め込んだ。

で、できたのがこの形だ。

ん~マンダム!!

 

で、これは覚書的にブログを書いておけば、また追加する時に役立ちそうなので、書いている。

筆者同様、中途半端にHPやブログを改造したいけどよく分からんという人にも役立ちそうなので

コードを書いておく。

 

*****以下コピペ******

<div style="float:left;">

&emsp; 

【シェアボタンコード】

</div>

******ココまで******

 

最初の1行目は左寄せに使うコード。leftをrightに変えれば右寄せになる。

「&emsp; 」はスペースのコード。mはmの幅という意味らしいのでココを変えると色々な文字の大きさでスペースが作れるようだ。

詳しくはhtmlスペースで調べれば色々出てくるので、勝手にググってくれ。

最後の「</div>」は最初のコードを閉じる命令だ。

これらコードの間に、それぞれのシェアボタンのコードを埋め込めば簡単にできるのでやってもてくれ。

 

 

折角書いたので、これ読んだら下のシェアボタンを使ってみよう(笑)

このエントリーをはてなブックマークに追加
LINEで送る