シーサーブログをちょとカスタマイズ
看護師ブロガーで既に2,200記事以上書いているのに、最近はあまりブログのことをポストしていない…。古巣のSSブログが今年3月で消滅。それにともない新たにシーサーブログに移転。パソコン版では、CSSやHTMLを少しいじって自分なりにカスタマイズを楽しんでいます。
— ふるたによしひさ@看護師 (@yoshihisanurse) January 17, 2025
ちょっとしたことですけど、おもしろいです。
SSブログの有料テンプレートが使えない
SSブログが今年3月で消滅。
それにともない、ここシーサーブログ新たにスタートをしています。
以前のSSブログでは、カエテンジョイで有料のテンプレートを購入。
それをさらに自分仕様にカスタマイズをしていました。
なので、ボクのブログは、ほかのSSブログとは違って、
あまり見かけないデザインになっていました。
で、ここシーサーブログでは、
以前使っていた有料テンプレートが使えません。
SSブログ仕様でしたから使えません。
シーサーブログ用の有料テンプレートを探しましたが、ない。
どうも販売終了になっているようです。
シーサーブログテンプレートをカスタマイズ
最近は本業などが忙しくて、なかなかじっくり時間がとれません。
なので、シーサーブログのテンプレートを使用することにしました。
※(PC版のテンプレートデザインについてです)
ボクの場合は、
①本文を画面の中央に
本文がパソコン画面の真ん中にくるようにしたかったので、そうしました。
本文が正面にくるようにしたほうが読みやすいかなと。
②ブログタイトルを大きく
一番上のブログタイトルのフォントを大きくしました。
.Header .Header__inner h1 {
font-size: 4.5rem;
font-size: 4.5rem;
パッと見たらわからないかもしれませんが、
このブログを同じテンプレートを使っている他のブログと比べると、あきらかに文字が大きくなっているのがわかります。
このほうが目立っていいですね。
③本文などの文字を大きく
記事の文字などを少し大きくしました。
font-size: 1.7rem;
他のシーサーブログの文字よりも少し大きくなっています。
このほうが読みやすいと思います。
④文字の色を超超真っ黒に
こまかいですが、文字の色をものすっっっっごく真っ黒にしました。
もうね、ブラックホール並みの真っ黒さです(笑)
color: #000000;
標準のテンプレートは黒は黒でも、そこまで真っ黒の色じゃないんです。
パッと見は分からないかもしれませんが、
いまみなさんが読んでいることブログの文字は、
超超まっくろにしています(PC版)
文字を超超真っ黒にすることで、
よりはっきりと見え、読みやすくなります。
⑤リンクにカーソルを置くと、へこむ
リンクになっている文字にカーソルを置くとへこむようにしました。
a:hover {
position: relative; top: 3px; left: 3px;
}
position: relative; top: 3px; left: 3px;
}
これをCSSのa:hoverのところに置き換えると
カーソルの矢印をリンクになっているところに置くと
文字がへこむようになります。
「ここはリンクですよ」
とわかりやすくなります。
上の3pxと3pxは、もともと1pxと1pxにしていましたが、
3pxと数字を大きくすると、へこむ幅が大きくなってより分かりやすくなりました。
みなさんのコメントも、
リンクになっているお名前はカーソルを置くとへこむようになっていますね。
こうすることで、
「この人のブログに飛ぶよ」
と分かりやすくなりました。
⑥一番上にスクロールするボタン設置
記事を読んでいくと画面が下になっていきますが、
ページの一番上まで戻る動きをしてくれるボタンを設置しました。
/* 上に戻るボタン */
.pagetop {
color: #fff;
background-color: rgba(0,0,0,0.3);
text-decoration: none;
display: none;
position: fixed;
bottom: 4rem;
right: 1rem;
font-size: 4.5rem;
width: 5.3rem;
height: 5.3rem;
line-height: 5.3rem;
border-radius: 5.3rem;
text-align: center;
cursor: pointer;
}
.pagetop:hover {
color: #fff !important;
background-color: #ed702b;
text-decoration: none;
}
画面の右端にある丸い上矢印↑ボタンです。
このボタンを押すと、一気にページの一番上までスクロールしてくれます。
他のシーサーブログを見ていても、
この「上に戻るボタン」がないブログがけっこうありますね。
まあなくてもいいのですが。
あればそれはそれで便利ですよね。
カスタマイズを楽しむ
これらはPC版ですので、
パソコンでブログを見るときは効果がはっきりわかります。
ボクは基本パソコンでブログを書くし、他のブログを読みます。
家ではパソコンが主体です。
なので、このように自分なりにカスタマイズを楽しんでいます。
ちょっとしたことですが、
ブログは楽しくやらないとね。
それでは最後まで読んでくださって、ありがとうございました。

ふるたによしひさの発信は、こちらもどうぞ。
X(旧Twitter)のフォロワーさんが7,000人を超えました。
X(旧Twitter)のフォロワーさんが7,000人を超えました。
X(Twitter)≫ふるたによしひさ@看護師
YouTube≫おしえて!看護師よしひさ先生
↑チャンネル登録者数1000人超えました。
↑チャンネル登録者数1000人超えました。
この記事へのコメント
今後もよろしくお願いします
私はサイドの中の文字などは中寄りに寄せることが
出来ましたが記事本文は中寄りに出来ませんでした。
もう少しCSS編集に詳しいといいのですが・・・
色々カスタマイズされてますね。
参考にしたいと思います。
今後ともよろしくお願いいたします
タイトル大きくしようかな.
スマホビューで,広告出ないようにしたり,見やすくしたいですね.
であhでは.
私なんかはめんどくさがりなので無理です。( ̄▽ ̄)ムリー
シーサーブログテンプレートのカスタマイズですが・・・
色々試して反映すると楽しいですね。
また、他のブログのソースコードを開いて参考にしています!?(=^・ェ・^=)
大きい画面だと見やすいですね。
時間があればカスタマイズしようと思ってるのですが、なかなか手が回りません^^;
文字が大きくて読みやすいです!
Facebookで「ひで蔵」さんとつながっているので、聞いてみようと思います。
カスタマイズされるなんて凄いですね。
すごいですね。私は毎回記事書くのにさえ
おたおたしていますので、カスタマイズまで
全然手が届いていません。
というか、カスタマイズできるのも知りませんでした^^;
勉強になりました。
ちょっともやもやしてます。^^;
なんとも悩ましいのが これまでのブロガーさんのリンクをどうしようかと。
まだ しばらく 悩みながらも ”カスタマイズ”してゆく日が続きそうです。
nice!です^^
なかなか思うような画面にできません。
先日やっとプロフィールを追加できましたが、
アイコンの画像をもっと小さくしたいんですが、できてません。
その他にも改善したいとこもあるんですが、
まぁ、気長にいろいろやって行こうと考えてます。
私は殆どいじれないので、大変勉強になります