ダメ人間はどう生きるか。

ミニマリストになりたいコミュ障ごぶりん。

【ブログカスタマイズ】Canvaでアイキャッチ画像作成&ヘッダー下におすすめ記事を並べてみました

じーわじわブログの見た目と機能を整えております…

まだまだ、こまごまと調整中です。↓現在のブログの上部分。

f:id:gobrintan:20200119233805j:image

今回はアイキャッチ画像作成&ヘッダー下におすすめ記事についての記事です。

私が使用している、はてなブログテーマの作成者さんの記事を参考に、ヘッダー下におすすめ記事並べてみました~~!!!

【はてなブログ】ヘッダー下におすすめ記事やアイキャッチを並べて表示するカスタマイズ方法

元CAバンビ (id:zuboraca)さま

https://www.bambi.pro/entry/blog-eyecatch-list

 

しかし、こちらの記事とコードだけではうまく設定が出来ませんでした…

アイキャッチ画像が横4列にならず、

全部でっかいサイズで1つづつ縦並びになってしまう…

画像がでかいからなのか…?分からん…と困り果てていました。

 

普段お世話になりまくっているWebディレクターさんに相談したところ、数十分で手直しを加えて下さり…

この↓コードをデザインCSSに追加することで

/*===2020-01-18- head area 4box ===*/
.article-img { display:inline-block; width:20% ; margin: 0 2%;}.

article-img a img{ width:100%;}

画像が4つ並んだ…!!!嬉しい~~~~

f:id:gobrintan:20200119233824j:image

しかしながら…

 

ヘッダー下はこれで良いんですが、

記事一覧を見ると…

アイキャッチ画像の一部分しか表示されないので、画像の文字が読めない。

f:id:gobrintan:20200119233855j:image

これはCSSでなんとかなるのかな…?

ブログテーマ変えた方が良いのか…

分からんので現時点ではとりあえず後回し。

 

レスポンシブ対応も出来てないから、スマホから見るとぐちゃぐちゃになってるのもどうにかしたい…。

 

 

アイキャッチ画像

Webディレクターさんに、アイキャッチ画像を無料で作れるおすすめサイトも紹介して頂きましたー!!!

Canva

https://www.canva.com/

 

とりあえずヘッダー下にのせる為の4つ+昨日の記事分を作成。

f:id:gobrintan:20200119233951p:image
f:id:gobrintan:20200119234544p:image
f:id:gobrintan:20200119234108p:image
f:id:gobrintan:20200119234049p:image
f:id:gobrintan:20200119233937p:image

画像サイズは適当です。

ちゃんとサイズ考えた方が良いんやろか…

 

アイキャッチ画像を作るのはめちゃくちゃ楽しい( ¨̮ )/( ¨̮ )/( ¨̮ )/

ほんと、記事一覧でちゃんと表示されるようにしたいな…

難しい~~~

 

あとページ上部に固定グローバルメニューをつけたり、カテゴリ階層化してみたりもしたのでまた次回書きます。

過去記事が多いので、カテゴリ割り当てまだまだ編集中です。

 

にほんブログ村 OL日記ブログ 派遣OLへ
にほんブログ村

にほんブログ村 OL日記ブログへ
にほんブログ村

にほんブログ村 ライフスタイルブログへ
にほんブログ村

にほんブログ村 その他生活ブログ 節約・節約術へ
にほんブログ村