はてなブックマーク

いつの間にか目次が標準で出るようになっていますね。 先月からだったとは気づかなかった。 せっかくなので、目次のカスタマイズ法を載せようかと思います。 staff.hatenablog.com CSSの貼り付け場所 動きをもたせた *2017年6月8日追加 CSS 目次が横に縦に並ぶバージョン CSS シンプルに変える CSS シンプルに変える2 CSS CSSの貼り付け場所 以下で紹介するCSSの貼り付け場所はこちら。 デザイン→カスタマイズ→デザインCSS。 動きをもたせた *2017年6月8日追加 「目次」を少し目立つようにして、動きを加えました。 こんな感じで重ねると右にちょっときます。 「目次」の横のアイコンはFontAwesomeを利用しています。 各々導入してみてください。 こちらの要素をheaderの中へぽんと放り込んで下さい。 <link rel="stylesheet"

メインブログの方で写真を沢山貼りたくなったので、Masonry風ギャラリーを導入しました。 今回はその方法をコチラでご紹介。 実装例 見出しをこんな風に表示するのもあり？ CSS 貼り付け場所 コード html 最後に 実装例 どんなものかを見てもらう為の実装例です。 画像を貼るとこんな感じ。 動画もこの通り。 blog.mshimfujin.net あまり意味はないかもしれませんが、こんな感じのリンクも貼り付けられます。こちら、メインブログでの実装例になります。ドラゴンクエストミュージアムに興味がありましたら是非覗いて覗いてみてください。 見出しをこんな風に表示するのもあり？ 文章を書くとこんな感じです。上の見出しは<h3>を使用。基本は写真を貼って使う用だと思うのですが、このようにアイデア次第で何にでも使用する事が可能です。以下、ギャラリー感を出す為にデスピサロとの戦闘ジオラマを貼り付

昨日のエントリーを書くにあたって、CSSをいろいろ弄っていたら上の画像みたいなのを作る事が出来たので軽くご紹介 もしかしたらこちらの方が需要があるかも知れませんね。 mshitech.hatenablog.com 三つ紹介します。好みに応じてどうぞ。 CSSの貼り付け位置 CSS エッジの利いたボタン オリジナルよりより丸いタイプ 読者数が吹き出しっぽくなったタイプ 軽く解説 CSSの貼り付け位置 まずはCSS、その貼り付け場所はこちら。 デザイン→カスタマイズ→デザインCSSです。 CSS エッジの利いたボタン 一つ目からいきます /* 読者になるボタン角 */ .hatena-follow-button { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } .hatena-follow-

今回は読者になるボタンをカスタマイズしました やり過ぎ感あるかなー、と思いつつも、きっとこう言うの欲しい人いるよね？と思ってエントリー。 htmlとcssを両方いじる必要が出てきますので、その辺りをいじれる方向けです。 作業の前はメモ帳とかテキストエディタにバックアップを取って元に戻せるようにしておいてください。 参考にしたのはこちら。 photoshopvip.net こちらで紹介されているTwitter Button Conceptを参考に読者になるボタンのカバーをつけてみました。 codepen.io 挙動は大丈夫だと思いますがロゴの位置など調整不足です。ご了承ください。 CSS CSSのコード htmlの張り方 html ちょっとおしゃれなプロフィール欄との組み合わせ まとめ CSS まずはCSS、その貼り付け場所はこちら。 デザイン→カスタマイズ→デザインCSSです。 以下コード

今回はプロフィール欄のカスタマイズを紹介したいと思います。 htmlとcssを両方いじる必要が出てきますので、その辺りをいじれる方向けのエントリーです。 でも、そんなに難しくないので興味の有る方は是非挑戦してみてください。 完成品 参考元 CSS htmlの張り方 html カスタマイズの方法 まとめ 完成品 about こちらがボタン部分の完成品です。ちょっとカーソルを持って行きたくなる動きをしてくれますよね。 「読者になるボタン」のコードをはったら表示がおかしくなったので、以下画像で紹介。 モジュールの「プロフィール」と入れ替えるため、最終的にはこれで完成となります。 参考元 coliss.com アニメーションはこちらで紹介されていた↓を改変。 codepen.io CSS まずはCSS、その貼り付け場所はこちら。 デザイン→カスタマイズ→デザインCSSです。 以下コードです。コード

はてなのブログのヘッダのタイトル画像を、うまく調整するのって難しいですよね。 はじめに 貼り付ける場所の確認 CSS 軽く解説 はじめに やっと作った画像もアップロードするとこんな感じに・・・ 切り抜きたく無いのに切り抜きを強いられたり、画像の解像度を落としたく無いのに画像の解像度を落としたり。 しかしそんなことをせずとも、このまま未調整の画像をヘッダー画像に使うことが出来ます。 こんな感じで綺麗に収まりますよ。 貼り付ける場所の確認 コードを貼り付ける場所はこちら。 デザイン→カスタマイズ→デザインCSSです。 当サイトではテーマにInnocentを使わせていただいていますが、他のテーマでも大体以下に紹介するコードで収まると思います。 CSS /* タイトルイメージ調整 */ #blog-title { padding-top: 5px; /* 画像上部の余白*/ padding-bot

完成図 以前と同様の押した事が感覚的にわかるので、思わずポチりたくなる！！！ かもしれないボタン付きのヨメレバ・カエレバ・トマレバをつくりました。 なお、CSSをきちんと勉強した事の無い人間が書くCSSなので、β版のようなものとしてお考え下さい。 何かエラーや崩れがあれば教えた頂ければ嬉しいです。 できる限り手直ししていこうと思います。 修正・追記 * 2016年11月2日 yahooのフォントサイズを10pxから9pxに変更しました。 * 2016年11月5日 ボタンが静かに沈み込むバージョンを追記しました。 * 2017年6月10日 枠の影を取ってシンプルにしました。 blisk.io モバイルデバイスの動作確認は、bliskで行っています。 はじめに 使えるボタンの種類 コピペする場所 CSS スマートフォン用の設定 追記 2016年11月05日 完成図 CSS はじめに ボタン以外