この記事は移転しました。約2秒後に新記事へ移動します。 移動しない場合は以下をクリックしてください。 miya-moto-memo.hatenablog.com
どうも!フジグチです! 当ブログではカスタマイズ用のCSSコードを載せて、手順の説明をすることがよくあるのですが、今までは点線を使用し区切りを分かりやすいように表していました。 さらに手順の説明がしやすく、見る方もどの手順まで進んだか分かりやすくなるように、CSSでステップバー(タイムライン)を作ったのでご紹介します。 今回の記事の流れと、デザインの感じを掴んで頂くために実際に使ってみます。 STEP CSSコードを入れる お好きなデザインを選び、そのCSSコードをご自身のデザインCSSに入れてください。 STEP 定型文にHTMLを登録する HTMLに入れるコードをコピーし、定型文に登録する。 STEP 登録した定型文を使い記事内にステップを追加する 手順に合わせてステップを追加し、記事を書いていく。 こういう感じになります。 ステップバー(タイムライン)の使用例 ステップバー(タイムラ
今回はNotionページのデザイン変更(CSS適用)に関して書いていきます。 なお、NotionページにCSS適用するためにChrome拡張機能「Stylus」を使用します。 CSS適用するのは「見出し1~3」「引用ブロック」等です。 以前もNotion見出しデザイン案の記事を書いたのですが、これはNotionの機能の範囲内で背景色を変更したり文字色を変更したりする方法でした。 関連記事【6案】Notionの見出しデザイン案(区切り線/背景色/文字色/コード/絵文字) 上記の記事ではCSS適用しているわけではないため、見出しの数だけ毎回デザイン適用の設定をしなければならず、けっこう手間でした。 今回の対応ではCSSさえ書ければ、それ以降は手間がないので今回の対応の方が便利に感じる人も多いかなと思います。 それでは本題へ。 変更前後(画像) 変更前 変更後 参考リンク 適用したCSS Chr
数日前から適用しているのですが、記事ページの最終更新日を調整しました。 元々、JavaScriptとCSSを追加適用して表示させていました。 ブログカスタマイズ【はてなブログ-カスタマイズ】更新日を追加表示するですが最近、はてなブログが「最終更新日の表示」に対応したみたいです。 はてなブログ開発ブログ記事ページに最終更新日が表示されるようになりましたせっかくなので、はてなブログが対応した方に乗り換えることにしました。 ですが簡単にはいかず、自分のブログカスタマイズと干渉してデザインが崩れてしまいました。 今回の記事では、どんなデザイン調整をしたのか書いていこうと思います。 変更内容(画像) 変更前 変更後(設定変更) 変更後(JS削除、CSS修正) 参考サイト コード 削除したコード 修正したコード 修正前 修正後 デザインの適用手順 注意事項 おわりに 関連記事 変更内容(画像) まずは
はじめに 今回は無料はてなブログでもできる、ブログタイトル下にグローバルメニューを設置する方法をご紹介します。 一つの記事を閲覧するためにブログに訪れた読者の方が他の記事を閲覧するきっかけにもなり、欲しい情報に辿り着きやすくなってブログの滞在時間が伸びるおすすめのカスタマイズです。 読者のブログ滞在時間や読みやすさはGoogleアドセンスの合格にも繋がりますので、アドセンス合格を目指す方もぜひ取り入れてみてください。 はじめに グローバルメニューとは コピペ後の完成イメージ スマホで反映されない場合 グローバルメニューの設置 デザインCSS CSSコードを入力する場所 コピペ用CSSコード ヘッダーにHTMLコードを貼り付ける コピペ用HTMLコード 色の変更 注意:CSSコードを貼り付けてもうまくいかない時は まとめ グローバルメニューとは グローバルメニューとは、ブログのタイトル下にあ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く