かくほーログ

見た感じ、そのまんま

はてなデザインZENO-TEALにしてカスタマイズする気になったのはポケ森のせい③

f:id:kakuho22:20171129121637j:plain

 

Macほしいとか前回の記事では言いましたが、WindowsMac合体したのがベストなんじゃないかないかと思いました。売ってないかなそういうやつ。ビジュアルもなんかかっこいいし。こんなリンゴ絶対に食わないけど。

 

 

 

さて今回もブログの模様替え関連

 

04kphenix.hatenablog.com

 

04kphenix.hatenablog.com

 

前回の記事(はてなブログをカスタマイズする気になったのは【ポケ森】のせい②)で紹介したグローバルナビゲーションがヘッダー?の部分と若干離れてしまっているという話をしたんですが、ブクマコメントで解決策を足得てくれたメシアが舞い降りまして、無事解決しました。世の中も捨てたもんじゃない。

f:id:kakuho22:20171129122539p:plain

隙間がなくなった!!!魔法かよ。

 

昨日かいてたコードのグローバルメニューのところにあるMenuのところ

 

/*****グローバルメニュー****/
#menu{
    width: 100%;
    margin: 10px auto;
    background: #444;/*7*/

}

 

 

 の部分の

 

margin: 10px auto; 

 

 

を消したら隙間もなくなりました!

消さなくても10pxを0にするだけでもいいかもしれないです。全く根拠ないですけど(笑)

教えてくださった方本当にありがとうございました!

 

 

あともう一個カスタマイズしてたの前回の記事で書き忘れたので紹介します。

 

 

 

 

トップページのタイトル下に会進め記事を表示

 

これのことですね。

f:id:kakuho22:20171129130416p:plain

これもこのテーマを作った方が方法を紹介してくれていたのでそのまま使いました。

zeno-teal.hatenablog.com

 

この通りに、デザイン設定からのカスタマイズからのヘッダからのタイトル下のHTMLにコード追加します

 

<div class="recommends">
    <a href="記事URL" class="recommend-entry2" style="background-image:url(画像URL);"><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry2" style="background-image:url(画像URL);"><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry2" style="background-image:url(画像URL);"><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry2" style="background-image:url(画像URL);"><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry2" style="background-image:url(画像URL);"><span class="recommend-title">記事タイトル</span></a>
</div>

 

記事タイトルと記事URLは簡単にわかるでしょ?

画像のURLは、僕も最初わからんかったんですが調べてみると、Windowsでは、画像を右クリックしてプロパティを選択するとURLアドレスというのが出で来るので、それをコピペして記入したらできました。

 

ここでやったのはこれくらいです。おすすめ記事は自分で変更しない限り同じ記事が表示されるので、時期などをみて自分で変更する必要もあるかもしれません。

 

カスタマイズでやったのはこんくらいです。

 

 

 

 

そんで今日はこのZENO-TEAL使ってみて気を付けたところ書きます。

 

 

 

広告非表示

①の記事でも言いましたがこのデザインテーマ使うなら広告非表示の設定にすることを強くお勧めしますし、広告非表示にするには、はてなProにすることでしかできません。

広告あるとこんな感じになります。

f:id:kakuho22:20171129123844p:plain

 

 

もうアイキャッチ画像の9割が広告やんけ。僕は口紅についての記事を書いた覚えはありません。

 

というわけでこのデザインテーマを使うにははてなProを契約して、設定の詳細設定にあるはてなによる広告を表示しない

という項目にチェックせなあかんです。

 

 

 

トップページの記事数(PC版)

僕がこれのテーマにした理由の一つでもあるトップページの記事の表示方法ですが、見ての通りカードが並べてあるみたいになってるでしょ。これ2列になってるんで、表示される記事数は、偶数にした方がいいと思います。奇数だと中途半端になるかなと思いますので。

こんな感じになってしまいます。

f:id:kakuho22:20171129124759p:plain

 

これも設定から詳細設定のページで変更できます。

僕の場合は記事数を12にしています。

 

 

 

アイキャッチ画像の表示

アイキャッチ画像というのはトップページの表示される記事に貼られている画像のことです。

このテーマでは記事編集時にはてなブログについている編集でアイキャッチ画像を選択しても反映されません。

 

アイキャッチ画像を使うためには、

編集の時に、記事の一番最初に画像を持ってきて、且つ続きを読むを使用しないと反映されません。

一番最初に画像を載せるとき、1文字分でもスペースが入っていたり、1行目が改行されていたりして2行目から画像が挿入されている場合は反映されません。

これが気を受けるべき点です。

 

僕は今まで記事の最初に写真を載せるスタイルではなかったので、最近は無理やり違和感のない画像を最初に持ってきて何とか違和感ないようにテキトーなコメント入れてます。もしかしたら無理やりなの誰かに気が付かれているかもしれませんが(笑)

 

 

 

今のところZENO-TEAL使ってやっていることはこんな感じです。

このデザインテーマほんとに気に入ってて作ってくれた方には圧倒的感謝感激雨霰ですわ。

 

 

 

 

 

ブログランキング

にほんブログ村 大学生日記ブログ 文系大学生へ

にほんブログ村 その他生活ブログへ

ブログランキング・にほんブログ村へ