ZENO-TEAL

今日もドッタンバッタン大騒ぎ

サポート終了と当サンプルサイト実質終了のお知らせ

はてなブログProを今期限りで終了することにしました。

タイトル下のグローバルナビゲーションバーを多段形式にする

ZENO-TEALでは簡易的なナビゲーションメニューを設置できるようにしています。あくまで最低限のつもりでしたが、それなりに使っている方もいらっしゃるようです。今回はこれを少しだけカスタマイズしてみます。

ヘッダー部分の背景画像を横幅いっぱいに広げる方法

このZENO-TEALを使っている方で、わりと多くの質問をいただいたり躓いているポイントの1つにヘッダーの画像表示が上手くいかないというものがあります。今回はここの設定例をいくつか出してみます。

タイトル下のオススメ記事その3(スマホ表示でスクロールできるようにする)

Freepikによるデザイン タイトル下にオススメ記事を挿入する方法をこれまで2種類紹介しました。しかしどちらの場合も、画面サイズによって表示数が決まっており、スマホ表示の時は2つしか表示できませんでした。(しかも通常記事と同じようなスタイルなので…

記事に画像がない時に表示されるデフォルト画像を変更する方法

この記事もそうですが、「続きを読む」までの間に画像が1つもないとトップページではデフォルトの画像が表示されます。これもcssで設定しているので自分で好きな画像に変更することができます。

バージョンアップと軽量版ZENO-LITE公開

前回の記事で予告したとおり、ZENO-TEALの更新を行いました。主な変更内容は前回の記事のとおりです。

バージョンアップ(仕様変更)のお知らせ(予告)

おかげさまでZENO-TEALはたくさんの方に使っていただいているようです。フィードバックも多く頂いております。ありがとうございます。

h2見出しが画面最上部に固定されるのを解除する方法

このテーマでは、見出しにh2タグを使うと、そのセクションの終わりまでその見出しが画面最上部に固定されます。テーマを作成しているときにこのcssを知って採用したのですが、使っているうちに若干ウザくも感じられるようになりました。なので、今回はそれを…

カスタマイズ5:全体のテーマカラーを変更する

このZENO-TEALというテーマはその名にあるようにTEALという色をテーマカラーとしています。この色を変更したい人もいると思うので、今回はそのカスタマイズ方法です。

トップページに見出しのかけらなどが出てしまうときの対処法

おかげさまで何人かの方に実際に使ってもらえているようですが、いくつか見たところ、トップページの各エントリーの文章部分に妙なものが入っていました。妙なものというか、h2やh3の見出しがちょこっとだけ出ていたり、はてなブログカードの上端だったり。

タイトル下のオススメ記事その2(画像サイズバラバラ対応版)

タイトル下にオススメ記事を表示するカスタマイズを以前の記事で紹介しましたが、画像サイズがバラバラの場合にうまく表示されません。これを解決する方法はいくつかあるのですが、面倒なのでもう1つ新しいスタイルを作ってみました。

カスタマイズに便利な、はてなブログで使えるアイコンフォント一覧

はてなブログではデフォルトで読み込んでいるアイコンフォントがあります。テーマの作成や記事中でこれらを使うこともできるので、どんなものが使えるのかチェックしておくといいでしょう。

カスタマイズ4:フッターにコンテンツを表示

ブログの一番下、フッターもカスタマイズしてみましょう。普段は目立たないところですが、ここにこだわると「やるな」と思われますよ。

カスタマイズ3:記事の上下にシェア用ソーシャルボタンを設置

はてなブログにはTwitterなどのシェアボタンが標準で付いていますが、読み込み速度やデザインの関係からオリジナルのものに差し替えたい場合もあります。ZENO TEALではあらかじめスタイリングしたシェアボタンを用意してあります。

カスタマイズ2:タイトル下にグローバルナビゲーションバーを表示

タイトル下にナビゲーションメニューを作ることも簡単に導入できます。重要なカテゴリーなど置いておくと目立ちますよ。

カスタマイズ1:ヘッダー(タイトル下)におすすめ記事を並べて表示する

ZENO TEALのデフォルト状態ではタイトルのすぐ下にメインエリアが来ますが、ヘッダー部分(タイトル下)におすすめ記事を入れることができます。

サンプルエントリー:先頭に画像がない場合の記事

記事の最初に画像がない場合、トップページには代わりにデフォルト画像が表示されますが、先頭でなくても最初の段落内に画像があればそれが表示されます。小さな画像でもそれが表示されてしまうので、一応注意してください。

サンプルエントリー:COMPUTEX TAIPEIに参加するため、台湾へ!

台湾にやって来ました。突然ですが、台湾です。明日5月30日のASUSの発表会および5月31日からのCOMPUTEX TAIPEIに参加するためです。 実はこれ、ASUSのZenFanの企画でして、以前書いたZenFone Goのレビューの結果、ASUS JAPANさまに招待していただいたもので…

htmlとスタイルのサンプル

この記事はhtmlコードそれぞれの見え方を確認するためのサンプルエントリーです。すべてが載っているわけではありませんが、ある程度参考になると思います。