過ぎし子育ての日々はほぼ笑い話

放っておきたいのに、放っておけない。憎たらしいのに何よりも大切。他人の子のしぐさはほほ笑ましいのに、わが子はハラハラ。まだまだ子育て真っ最中。その場は怒って泣いてと激しいですが、振り返れば笑い話。心配性なアラフォーシングルマザーが子供たちと格闘する日々をつづった雑記ブログです。あと、趣味のイラストを少々。

カード型テーマにデザインを変更して行ったカスタマイズ一覧

昨日一昨日と、ブログのデザインを、カード型のテーマ「Thumbnail2 」に変更した記事を書きました。
本日は、最後にカスタマイズした内容を備忘録として残します。

昨日と一昨日の記事はこちら🔻


今回でブログテーマを変えたのは、3回目なのですが、以前も一生懸命カスタマイズしたはずが、さっぱり覚えてなくて、自分にビックリ!!

そう、記録って大事です。

しかし、こう申しましても、今回もブログの先輩方が、余すことなく素晴らしいカスタマイズの情報を記事にしてくださっているからに他なりません。
いつも本当にありがとうございます。

もしリンクを貼らせていただいて、不都合がございましたら、すぐに修正いたしますので、ご連絡いただきたいです。

テーマ変更後のカスタマイズあれこれのイラスト

広告
 

カード型のテーマ「Thumbnail2 」に変更後のカスタマイズあれこれ

グローバルメニューとトグルメニュー

カスタマイズでおなじみの、ゆきひーさんの記事をコピペさせていただきました。

ゆきひーさんのグローバルメニューの記事はこちら🔻

www.yukihy.com

色の変更や、幅の調整、トグルメニューを上部に固定する方法も一緒に書いてあります。
ありがたい!!
トグルメニューをスマホ画面の右上に固定したかったので、そのコードだけ入れました。

見出しのカスタマイズ

こちらもカスタマイズでおなじみの、シロマさんの記事をコピペさせていただきました。
ありがとうございます。

シロマさんの見出しのカスタマイズについての記事はこちら🔻

www.notitle-weblog.com

文字を大きくする

これですよ、これ!!カスタマイズで一番やりたかった。
もう本当にいろんな意味で、文字大きくないと辛い

こちらも大変お世話になっております、はるなぴさんの記事からコピペさせていただきました。

いつもありがとうございます。

はるなぴさんの文字を大きくするカスタマイズの記事はこちら🔻

www.halu7.com

もくじのカスタマイズ

せっかくなので、もくじの文字も大きくしました。
もくじのカスタマイズも、ゆきひーさんのブログよりコピぺさせていただきました。

ゆきひーさんの目次のカスタマイズの記事はこちら🔻

www.yukihy.com

タイトル画像の大きさを調節

一応イラストもジャンルに入っている当ブログなので、タイトル画像は大きめで表示したいのです。

大きく表示できても上下に余白が入ったり、スマホだと大きく表示されすぎて大変なことになったり…
レシポンシブデザインなんで当たり前なんですけど。

画像の高さを端末によって切り替えるコードで参考にさせていただいた、えむしてっくさんの記事はこちら🔻

mshitech.hatenablog.com

いろいろカスタマイズしているうちに、コードを続けて貼ると、パソコンとスマホの画面表示がうまくいかなくなり、少し変えて、パソコン用と、スマホ用をCSSファイルの上側と下側に配置してみたら、きれいに表示されるようになりました。

当ブログの場合はこちら

/* タイトル画像調整 */
#blog-title {
padding-top: 0px; /* 画像上部の余白*/
padding-bottom: 0px; /* 画像下部の余白*/
height: initial;
}
.header-image-only #blog-title #blog-title-inner {
height: 450px; /* 画像の高さ */
background-size: contain;
}


/* タイトル画像調整・モバイル用 */
@media (max-width: 750px) {
#blog-title {
padding-top: 20px; /* 画像上部の余白*/
.header-image-only #blog-title #blog-title-inner {
height: auto; /* 画像の高さ */
}
}

※モバイルの切り替え画面の大きさは、iPhone7のサイズ(750px)にあわせてあります。

あ・・・詳しい方から見て大丈夫なのかどうかわかりませんが、自分のブログでは何とか希望通りに表示してくれています。

ブログの幅、記事の幅、サイドバーの幅を固定

これまた固定すると、スマホで表示がくずれるんですよーーー😭
まあレシポンシブデザインなので、当然なんですが、それぞれパソコン用と、スマホ用を指定したコードを入れました。

さらに、ブログ全体の幅を指定したら、画面の左側に寄ってしまって、ムキーーー💢
こういうものなの???

という事で、両サイドのマージンを自動にするコードを加えてみたら、中央になりました。

当ブログコードはこちら

/* ブログの幅を固定 */
#container {
margin-left:auto;
margin-right:auto;
width: 1080px;
}


参考にした書籍はこちら🔻

内容的には、ネットで調べられるものばかりですが、私は紙の本が好きなので、たびたび開いてみています。

オールカラーで、CSSのカスタマイズも多数載っています。
サンプルナンバーがついているものは、サポートのページからコードをダウンロードできます。 

ページトップへ戻るボタン

グローバルメニューを、上に固定する方法を、頑張ってみたのですが、まだできず、この『上に戻るボタン』は、大変重要な項目となりました。

一番簡単に実装できた、はてぶ丸さんの記事はこちら🔻

hatebumaru.hatenablog.com

ホントにコピペで簡単実装!!

ひとつ付け加えるとしたら、戻るボタンに色をつけたい。
当ブログ、水色からピンクへのグラデーションになっておりますので、ピンクの戻るボタンにしたいと思いました。

色を変えるCSSコードは、下記の箇所です。

color:rgba(0,0,0,0.4);

color:rgba(0,0,0,0.6);


カッコ内の数字を変えるとカラーのボタンになりました。
カッコ内の左から3番目までの「0」はRGBのカラーコード、最後の小数点の0.4と0.6が薄さのようです。

当ブログはピンクなので、

color:rgba(255,51,102,0.4);

color:rgba(255,51,102,0.6);

で、入れてあります。

カラーコードは「#」の付くコードしか知らなかったので、この0が色につながるなんて!!
カラーチャートのページを見つけたので、リンクを貼らせていただきました
webセーフカラーのチャート🔻
Web Safe Color一覧表/カラーチャート

一覧表示からはてなスターを消す

はてなスターは励みになるし、付けてもらえると本当に嬉しいんですが、一覧表示で見ると、サムネイル画像なみに目がいってしまうので、おもいきって消してみました。

一番簡単に実装できた、よっしーさんの記事はこちら🔻

www.yossy-blog.net

サムネイル画像を、画像の上の部分からトリミングさせる

はてなブログのサムネイル画像は、一度正方形にトリミングされてから、サムネイルの大きさに加工されるそうです。

そうすると、あまりにも意図しないところで切れるので、それをせめて画像の上の部分からトリミングしてもらえるようにコードを追加しました。

参考にしたのは、今回のテーマ作成者のろくぜうどんさんのサイトで、丁寧にコメントの返事を書かれているところから発見!
そのろくぜうどんさん記事はこちら🔻

blog.rokuzeudon.com

以下、このページのコメント欄のコードを引用させていただきました。

.page-archive .entry-thumb {
background-position: top;
}


カスタマイズしたのは以上で終了です。

広告
 

ここで、スペシャルサンクス

いろいろカスタマイズして、カード型デザインにこだわりました。

元はイラストのサムネイル画像をもっと大きくしたい事と、すっきりした見やすいブログにしたいと思った事がきっかけでしたが、もう1つ。

いつもお邪魔している、さすらいのうにさんのブログが、WordPressで作ってあるそうで、いくたびに見やすくて羨ましい・・・✨

ブログを読むのは、パソコンの方が多いのですが、たまたまスマホで見たら、もっとサムネイル画像もキレイで見やすい!!羨ましい✨✨

でもはてなブログは居心地がいいので、これからもお世話になります。

さすらいのうにさんのブログはこちら🔻

sasurai-no-uni.com

ブログにいったら、すぐにわかると思いますけど『将棋愛』にあふれたブログです。
いえ、このリンクカードでわかってしまいますね。

卯野ハンナも将棋をしているのか??って。
いえ、はさみ将棋しかできません。

でも将棋がわからない私ですけど、うにさんのブログが将棋愛に満ち溢れているのがわかります。
細かいところに将棋アイテムが潜んでいます。

パパブロガーでもある、うにさんのご当地グルメ記事と、育児系の記事は、面白くて大好きなので、楽しみにしています。
うにさん、このへんの記事も、ぜひ続けくださいね✨
私が理解できる記事がなくなってしまいます💦

今があるのもさすらいのうにさんと、さとるさんのおかげです。

最後に

CSSファイルに入れたコードも、ちょっと順番を変えると、希望通りに表示してくれたり、くれなかったりで、カスタマイズにだいぶ時間がかかってしまいました。
なんとかできたのも、ブログの先輩方のおかげです。

ソーシャルパーツは検討中です。
ダサいといわれればダサいですが、一目でわかるし、カスタマイズして表示速度が上がるならやってみようかと思います。

テーマ変更手順も、前回リスト化した。
カスタマイズもこれだけ残しておけば、次のテーマ変更もバッチリ・・・たぶん💦

読者登録して、たびたびお邪魔しているブログは、文章の書き方だったり、イラストの見せ方だったり、色合いだったり、何かしら参考にさせていただいています。

そういった目標とする方々と、少しでも交流できて、本当に嬉しいです。
子どもが夏休みに入って、ブログの更新がさぼりぎみになっておりますが、あらためて、ブログ継続のカギは交流だと実感しています。

本日も読んでいただき、ありがとうございました。

広告