他の方のブログを読んでいて、これは意図しないデザインの崩れ・隙間ではないかと思うことがあります。 例えばはてなブログで広く普及しているyukihyさんのドロップダウンメニューを利用されている方で背景いっぱいにタイトル画像を設定している場合、メニュー上下に余計な隙間ができ、気になることがあります。 意図しないデザイン崩れ・隙間 Chromeのデベロッパーツールで簡単に検証・修正しよう まとめ 意図しないデザイン崩れ・隙間 これはコードに問題があるのではなく、元々のテーマに合わせてデザインされているので、別のテーマやタイトル画像の設定の仕方を変えると意図しないデザイン崩れが出来るのは仕方のないことです。これはカスタマイズする側が自分で微調整しましょう。 Chromeのデベロッパーツールで簡単に検証・修正しよう Chromeのデベロッパーツールでブラウザ上でCSSの検証・プレビューができます。デ

レスポンシブにも対応出来る「ヨメレバ・カエレバ」の可愛いデザイン作りましたー。 沈黙のWebライティングposted with ヨメレバ松尾茂起/上野高史 エムディエヌコーポレーション 2016年11月 楽天ブックス楽天koboAmazonKindle Amazonアソシエイトや楽天、もしもアフィリエイトの商品紹介に「ヨメレバ」や「カエレバ」を利用している方も多いのではないでしょうか？ 今回はその「ヨメレバ」または「カエレバ」のデザインを可愛くカスタマイズできるCSSをご用意いたしました！コピペで簡単に出来ますのでよろしければ使ってみてくださいね。 ヨメレバ・カエレバのデザインをカスタマイズする方法 ヨメレバ・カエレバ側の設定 基本設定 ボタン色の設定 リンク周りの点線を消したい場合の設定 おわりに ヨメレバ・カエレバのデザインをカスタマイズする方法 記事にした場合、こんな感じでデザインさ

通常、記事を書くとその記事を初めて作った日、つまり「記事の作成日」が表示されますよね。 しかし、私のように一度書いた記事をよく「書き直す」人もいるかと思います。 そこで、「記事の作成日」と同時に「記事が更新された日時」も一緒に表示する方法を紹介します。 更新日時を表示するメリットとしては、記事を書く側も見る側も「この記事の情報がいつのものか」が分かりやすくなる事が挙げられます。 情報が古いままなのか、随時更新されていっているのかが分かりやすくなると、特に見る側にメリットがあるのではないかと思います。 記事の更新日時を表示する設定 jQueryとFont Awesomeの読み込み設定 「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」の欄に下記のコードを追記します。 既に同じファイルを読み込むコードが追記されている場合は、この作業は不要です。 <!--「jQuery」参照U

ページトップへ戻るスムーズスクロール（jQueryなし） ページトップへ戻るスムーズスクロール（jQueryなし） HTMLJavascriptCSSはてなブログ用お問い合わせ等 当サイトの右下に表示している「 」は、クリックしますとスクロールしてページトップに戻ります。こうした「ページトップに戻る」リンクは最近では必須になってきています。これまで公開しているスクリプトにも含まれていますが、リクエストもありましたので単独で切り出してみました。「 」は、ホームページへのリンクだけです。 01HTML <ul class="toTop-nav"> <li><a href="javascript:void(0);" onclick="smoothScroll(0);return false;">アイコンまたはイメージなど</a></li> <li><a href="あなたのブログURL">アイコ

ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作