人気ブログLITERALLYの著者CatNoseさんが2016年1月17日に発表した、最強のはてなブログテーマDUDE。 このテーマを使えば、初めからオシャレなブログができてしまうということで異常なほどの人気を誇る。どれほどの人気かというと、テーマ発表後3ヶ月に満たない2016年4月14日現在で、インストール数3187。はてなブログの人気テーマランキングで堂々の2位につけている。 何を隠そう、このブログももちろんDUDEを使用している。DUDEを選んでからもうすぐ一ヶ月になるが、スマホ表示まで含めて一通り満足のいくカスタマイズができた。本記事ではこの経験をもとに、はてなブログテーマDUDEに特化したカスタマイズ解説をしていく。読み進めていくうちにcssの基本が分かるくらい丁寧に説明したつもりなので、全く知識のない人もぜひ挑戦してみてほしい。 DUDEに特化といっても、はてなブログであればc

以前、はてなブログのスマホデザインのカスタマイズ方法について書いた。 はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally 多くの方に参考にして頂いたようでとても嬉しい。続編を書いて欲しいというご要望をいくつか頂いたので、僭越ながらまたデザインカスタマイズのTipsを書こう思う。前回はスマホデザインについてのみ触れたが、今回はPC表示のカスタマイズについて。主にコピペだけで「超カンタン」におしゃれなブログが作れるので、Webデザイン初心者の方にも是非読んでいただきたい。 はてなブログユーザーでないのにこのページに辿り着いてしまった方、大変申し訳ありません… はてなブログテーマ「DUDE」を作りました。 「はてなブログを一瞬でおしゃれに美しくする最強のデザインカスタマイズ方法」と仰々しいタイトルを先に決め、ブログのカスタマイズ記事を書き出し

こんにちは！りさこです！ 私は、はてなブログの人気テーマ『Written』を使っているのですが、タイトルのカスタマイズに少し手こずったので、まとめておこうと思います。 カスタマイズしてない状態 なにもカスタマイズしてないと、文字色は黒で、左寄せになってます。 タイトルの文字色を変える方法 まずはタイトルの文字色を変えてみます。 本来ならば、 #title { color: #ff8d8df; } と書けばタイトルの文字色が変わるはずなのですが、なぜか変わりません… ぐぐってみると、jQueryを使えばできるらしいということが分かったので、 デザイン→カスタマイズ→フッタ→HTMLを記述できますという空欄に <script src=\"http://code.jquery.com/jquery-1.11.0.min.js\"></script> <script> $(\'#title\').

2016/4/27更新　スマホでも動作するよう対応しました こんにちは、錠前（ @jomae_yasushi ）です。 YouTube動画が大量に貼り付けられたページを開いてPCがクラッシュしそうになった経験、ネトサフをよくする人なら一度はあるかと思います。とにかく重いですよね〜 私も先日動画をふんだんに貼り付けた 楽曲紹介記事 を作ってみたのですが、30本の動画を埋め込んだページはノートPCでも表示に少し時間がかかり、スマホでは何度リロードしてもなかなか表示されないといった具合で、これはいかんと急いで対応策を調べました。 ネットのあちこちに書かれている色々な方法を試してみたのですが、JavaScriptの知識に乏しい私でも簡単に実践できた方法を以下に紹介します。ついでに知っておくと理解が深まる周辺知識もまとめてみました。 YouTube動画とサムネイルのURL YouTubeの動画ページ

読書管理をメディアマーカーのサイトでしており、このブログでもサイドバーに「読み終わった本」の表示をしています。 今日はメディアマーカーのはてなブログサイドバーへの設置方法の話です。 ブログパーツをつくります メディアマーカーのサイトでサイドバー設置用のブログパーツを作ります。 その前に、amazonアソシエイトをしている方は、メディアマーカーの「設定」から amazonアソシエイトIDを入力しておいて下さい。 それでは、ブログパーツの作成方法を紹介します。 まずは、メディアマーカーへログインし、「設定」→（右欄）「出力・連携」→「ブログパーツ」と進みます。 そこで、表示するパーツの詳細を設定します。 「テンプレート」ではパーツの種類を選択します。わたしのは「登録メディア【詳細・縦長】」です。 「登録メディア【シンプル・縦長】」がその名の通りシンプルで使いやすいかもしれません。 画面の下にい

たとえば、他の方のブログを開いたとき あなたは最初に何に目を向けるでしょうか。 記事の中身はもちろんですが、 そのブログは「誰が書いたのか」ということも 気になる点のひとつではないでしょうか。 はてなブログでは、この「誰が書いたのか」という情報は 「プロフィール」欄にまとめて表示されるようになっています。 しかし、この「プロフィール」欄、カスタマイズできる内容が きわめて限られているため、どのはてなブログを見ても同じような デザインになってしまっています。 そこで、今回はこのプロフィール欄を自分の好きなように カスタマイズする方法をご紹介したいと思います。 プロフィール欄のカスタマイズはすごく地味ですが 料理におけるスパイスのように効いてくるのです。 劇的？ビフォーアフター まず、ぐうたらジャーナルでの実例からごらんください。 こちらがカスタマイズ前のプロフィール欄です。 購読していただく

つまり、基本的にはHTMLがしっかりしていれば文章自体は存在するんですが、CSSも上手く使ってやらないと見やすくならないということですね。 他にもJava Scriptなどを使うと、文章に「動き」をつけることが出来ますが、基本的には上の２つを使ってカスタマイズするのが主流な流れだと思ってください。 はてなブログ：PC版カスタマイズ PC版でカスタマイズしている部分は、以下の通りです。 ブログデザインテーマ＆記事幅 デザインはブログテーマの「Innocent」です。このテーマは、少し設定するだけで簡単にグローバルメニューが設置できるのが魅力です。 記事幅に関しては、初期設定だとAdsenceが記事幅より飛び出してしまっていたので、720pxに変更しています。「Innocent」を作った作者の半月さんがカスタム記事を書いているので、そちらを参考にして変更しています。 記事自体は「Blank」テ

最近ブログを書くときに、背景色や枠で囲ったりすると一気に見やすくなるなあと思って使い始めています。 それどうやんねん？とのコメントをいただいたので、記事にしてみたいと思います（ネタ提供あざっす！）。 実例 どんな感じかと言うと、例えば下の図は昨日の記事 【お知らせ】当ブログで配布していたSNSボタンに関して重大なミスがありますので修正をお願いします - Yukihy Life なのですが、 ん〜、何か読みづらくないですか？？ 普通に記事を書いていくと、改行するタイミングだったり、句読点の位置・太字ぐらいしかアクセントをつけることが無いと思います。 ましてや僕のブログ、誤字脱字がめちゃくちゃ多いんですよね。二ヶ月後ぐらいに「ぎゃーー！！」って気づくことも良くありげ。 そこで以下のように背景にちょっと色をつけてやると… このようにどこがURLでどこが説明なのかの判断が一瞬ででき、分かりやすいよ

PR：はてなブログのテーマ「Naked」を作成しました！デフォルトでもカスタマイズもしやすいテーマです。よろしければご利用ください！↓ www.yukihy.com 今までいろいろとはてなブログをカスタマイズしてきて、特にシェアボタンなどはいろんなところで使われているようでありがたいです！ 数も多くごちゃごちゃになってきたので、一旦まとめたいと思います。 新しいカスタマイズを行い次第、この記事にどんどん付け加えていこうと思っています。 カスタマイズ記事まとめ 見出しのデザイン SNSシェアボタン関係 旧バージョン 新バージョン SNSフォローボタン メニュー関係 スマホ版のみ グローバルメニューと両立してレスポンシブ対応にする グローバルメニュー（ドロップダウン）&トグルメニューのレスポンシブ対応 グローバルメニュー（ドロップダウン）&スライドメニューのレスポンシブ対応 レスポンシブ対応な