はてなブログのキーワードリンクが鬱陶しい？ 無効化する方法は？ - アテナのはてな日記
はてなブログには、「はてなキーワード」というサービスがあります。記事中のキーワードが、はてなの共通辞書に登録されていると自動でリンクが付きます。 キーワードの意味を調べたい読者にとっては便利なのかもしれませんが、記事を書く側からすると、意図しない個所にリンクが付いてしまい鬱陶しく感じることもあるかと思います。 このキーワードリンクは無効化できるのか調べてみました。 はてなブログProでは、「キーワード自動リンクオフ」という機能があり、自動でリンクが付くのを無効化する事ができます。 ですが、無料版でも、別の方法で無効化することができます。 ＣＳＳで非表示にする方法 CSSを編集することで、有料版と同様に無効化することができました。 [デザイン] > [カスタマイズ] > [記事] > [記事上下のカスタマイズ] > [記事上] に、以下のコードを追記します。 <style> .entry-c
はてなブログでタイトルや本文の文字色を変える方法 - マトリョーシカ的日常
ブログカスタマイズ さて、食傷気味のブログ論はわきへ追いやってそれよりは幾分建設的なカスタマイズの記事を書こう。今日はブログの文字色の変え方を説明する。「そんなの分かってるよ」という意見もあるだろうがアクセス解析を見る限りでは少しは需要があるらしい。「はてなブログ 文字色 変更」とかで月に二、三人が来ているのだ。彼らを見殺しにするわけにはいかない。 変え方は簡単、問題はどこを変えるか 聡明なみなさんならブログ内の文字色を変えることくらいわけないだろう。 color:#000000; こうやって書けば文字色を黒にすることができる。文字の色は十六進数を使って表現している。詳しくはこのページをみると分かりやすい。 WEB色見本 原色大辞典 - HTMLカラーコード 問題はどこを変えるかである。以前デザインを変えようと思いはてなブログのソースを見たことがあるがあれはウェブデザインに疎い人にとっては
はてなブログのテーマを「Evergreen」に変えました - 攻めは飛車角銀桂守りは金銀三枚
2016 - 01 - 04 はてなブログのテーマを「Evergreen」に変えました はてな シェアする Twitter Google+ Pocket スポンサーリンク 先日からテストしながら検討していた「はてなブログ」のテーマ変更。 ついにしました。先日も「これはいいかも」ってテーマに変更していたのですがスマホ表示がなんだかとても遅いような感じがしてやめてました。 今までのテーマもすごく良かったのですが、わたしの人生と同じように「シンプルで何もない」そっけないものにしようかと。 選んだテーマは「Evergreen」 選んだテーマは「Evergreen」です。 これは「はてなブログ公式」ってやつみたいですね。 選んだ理由は シンプル サイドバーがない レスポンシブ対応 の３点。 サイドバー・・・前にも書きましたが見てる人はいるのかなと。 なんか邪魔に見えて。 たしかに「関連情報」を載
CSSを外部ファイルにする方法－はてなブログ編 - 攻めは飛車角銀桂守りは金銀三枚
今日は実験ではてなブログのCSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を外部ファイルにして読み込んでみました。 はてなブログのCSSって設定しにくい 以前から感じていたのですが、はてなブログのCSSって設定しにくいですよね。 CSSを書いている途中で「ちょっと調べものを」と他の画面に行ったりすると編集用のボックスが消えてたり。 またCSS編集するの押してから書いて、他の画面に行くとボックス消える・・・これの繰り返し。 しかも、テーマ変えるとCSS無くなったり（最近テーマ変更してないので今もそうなるのかは不明）するし、簡単にはテーマ変更できないような気がしてました。 CSSは基本外部ファイルにできるはず そこで今回はCSSを外部ファイルにして、少しでもテーマの変更やCSSの変更の入力のしにくさを解消するために、別ファイルにして、それを読み込む方法
はてなブログにLINE風吹き出しをつけてみた。実は2回目。 - 攻めは飛車角銀桂守りは金銀三枚
はてなブログでLINE風吹き出しを再現してみました。 実は２回目の挑戦です。 以前に設定したヤツはブログのテーマをカスタマイズしている時におかしくなって、デザインが吹っ飛んだのであわててテーマを別のものに変更したら設定もなくなってしまいました。 しかもその時に参考にしていたサイトの記事がすでになくなっており、再現できずにおりました。 今日は暇なんで別のサイトでされているのを見つけたので再現。 LINE風吹き出しはCSSで行います LINE風吹き出しはCSSで行います。 はてなブログではダッシュボードの「デザイン設定」→「カスタマイズ」→「デザインCSS」に設定します。 いま使っているテーマはレスポンシブ対応なのでここに設定すればスマホでも同じ表示になっていると思います。 LINE風吹き出しCSS 以下のCSSをデザインCSSの最後に設定します。 CSSはわいひらさんのnelog.jp から
https化ではてなブログのブックマーク数が取得できなくなっていた件を対応 - 攻めは飛車角銀桂守りは金銀三枚
cropped-obake-profile.png 1月 13, 2021 — by white_obake cropped-obake-profile.png コメント コメントを残す コメントをキャンセルメールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です コメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。 上に表示された文字を入力してください。
私のブログカスタマイズと、Webデザイン独学方法まとめ（初心者向け） - にんじんの塔
／^o^＼ヤッホォ！みんなー！久しぶりに普通の文体が続いてびっくりしたかー！？ 普通の文体で書くと、むしろ「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね」って言葉を思い出しちゃう私だよ！やれやれ。（風の歌を聴け☆） さて、今日は個人的まとめなので雑で～す(∩^o^)⊃━☆ﾟ.*･｡ﾟ そして初心者向けだよー。本当はライブドアブログ（人参より茄子が好き）で書こうと思ったのですが、はてなブログはリンク機能がすんばらしいので、はてなブログで書きますね。暑いのでトマトを食べながら阿波踊りしています。 ◆ブログカスタマイズ テキストサイトや、MovableTypeやWordpressでブログをやっていた頃は凝っていたけれども、通常のブログサービスを使う場合、いろいろデザインするのダルいので、提供されているものの中から使います。 ヘッダ画像のインパクトが強いと他のブログと印象
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
HTML／CSS、PHP、jQueryの基礎を学ぶなら超オススメ！プログラミング学習サービス「Progate」
まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO！ エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ
はてなブログ(はてなダイアリー)でサイドバーを右側から左側にする方法 - プログラミング技術メモとちょっことアプリ開発メモ
2013-12-29 はてなブログ(はてなダイアリー)でサイドバーを右側から左側にする方法 完成イメージ はてなブログの右側にあったサイドバーが。。。 左側に！ 設定方法 1. はてなブログの管理画面から「デザイン」=>「カスタマイズ」=>「デザインCSS」をクリックし、CSSが記載出来るフレームを表示させる。 2. 下記のCSSコードを追加し、「変更を保存する」ボタンを押す。 使用しているデザインが異なると下のソースコードで上手く変更出来ない可能性もあるのであしからず。 /* sidebar changes right side to left side. */ #blog-title, #wrapper { float: right; } #box2 { border-right: 1px solid #ddd; } /* <system section="theme" selec
サイドバーの位置を左にしてみました - sos の 作業メモ
人間の目は左から右に動くから左記事の方が読みやすいというのが定説だったけど、これは興味深い。 ブログのサイドバー位置は左のほうがページビューが伸びる？ http://t.co/1TK3rwnLIm— バンブルビー通信 (@bbb_network) 2013, 9月 7 ふと目にとまったツイート、せっかくなので試してみることにしました。 #wrapper { width: 750px; background: transparent; float: right; } CSSの #wrapperの floatがrightだと本文が右によるらしいので、あとは#box2の値や#main-innerのボーダーを右から左に変えたり微調整。 うーん、たしかに本文よりサイドバーの方に目がいきやすいかも？ なぜ簡単に入れかえられるの？ はてなブログは、 <div id="content-inner"> //
デザインCSSをカスタマイズする土台に適したサンプルテーマを公開しました - はてなブログ開発ブログ
本日、はてなブログのサンプルテーマ「Boilerplate」を公開しました。デザインCSSをカスタマイズする土台に適しています。 Boilerplate（ボイラプレート）は、必要最小限の見た目だけがあらかじめ調整された、プレーンなサンプルテーマです。このテーマをもとにCSSを記述すると、はてなブログのデザインテーマを比較的カンタンに作ることができます。 Boilerplateテーマの見た目「オリジナルテーマの制作にチャレンジしたいけど、ゼロから作るのは大変」という方のために用意しました。ぜひ、このテーマを使ってCSSのカスタマイズに挑戦してください。 もちろん何もカスタマイズしなくても、シンプルなデザインテーマとしてそのまま使うこともできます。 Boilerplateテーマの使い方 Boilerplateテーマのソースコード（CSSおよびLESSファイル）は、GitHubで公開しています。
はてなブログのカスタマイズをするときに見たいブログまとめ - やみつきうぇぶ
2013-11-09 はてなブログのカスタマイズをするときに見たいブログまとめ はてなブログカスタマイズ まとめ デザインの参考になるブログ テーマ ストア - はてなブログ デザイン変更するなら、他人の作ったテーマを参考にするのが一番！ テーマストア設立からだいぶ経って、素晴らしいテーマが増えてきました。 #ChiroruLab ミニマルなデザイン、細いフォントが美しいです。 FeedlyやTwitterなどのアイコンもデザインに合わせて作られています。 マウスオーバーするとわかりますが、ヌルヌルです。気持ちいい。 はぁはぁブログ はてなブログの限界を突破している、そんなデザイン。 はてなブログ内で一番カスタマイズされているブログなのでは？ TMD45INC!!! フラットなUIが美しい、リキッドデザインのオリジナルテーマ。 全画面で表示できるため、ソースコードが変なところで改行されませ
【CSS】【はてなブログ】参加グループのアイコンの角を丸くする - 16bit!
今日ふとダッシュボードを見ていると「はてなブログ グループ」なるものがあったので、 試しに「プログラミング（公式）」と「グループテストしたい人のグループ」に参加してみました。 で、せっかくだからサイドバー（フッタ）に参加グループを表示してみたのですが、 ア イ コ ン が 超 四 角 い わざわざTwitterのアイコンまで角を丸く削って全体的に角のないデザインにしているのに、 参加グループごときにこんな角ばったアイコンが表示されては困るわけです。 というわけで、またまたCSSを改変。 .hatena-module-circles img.circle-image { border-radius: 12%; } グループのアイコンは"circle-image"なので、 それの角を削ってあげればOK。 Twitterアイコンをまんまるから丸みを帯びた四角に変えたときと同じですね。 ちなみにど
Safariでウェブページのソースコードを見る方法。（HTML ＆ CSS） – 和洋風KAI
Safariでソースコード（HTMLやCSS）をみる方法。 というわけで、Safariでソースコードを見る方法です。 SafariのメニューバーのSafariをクリックして「環境設定...」をクリックします。 詳細タブの一番下にある「メニューバーに”開発”メニューを表示」にチェックをいれます。 するとメニューバーに開発が追加され、ウェブページのソースが見ることが可能になります。 右クリックからも見れます。ちなみにソースコードをみるためのショートカットキーは「command + option + U」です。 こんな感じで。 ちなみに別ウィンドウアイコンをクリックすれば このように広々とソースコードを見ることも可能です。 要素の検証がとても便利。 便利なのが要素の検証です。 たとえば、イメージ画像のHTMLやCSSを知りたいときは、そのイメージを右クリックして要素の検証をクリックします。 する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css-lecture.com
CSS/HTML色見本
HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント