[B! CSS] mia-noharaのブックマーク

mia-nohara id:mia-nohara

CSSに関するmia-noharaのブックマーク (8)

とほほのＷＷＷ入門
はじめにご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基本編用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (
mia-nohara 2018/07/11
HTMLの復習。

html

CSS

webデザイン
リンク
意外と知らない、はてなブログカスタマイズの小ネタ10選 - LOGzeudon
当ブログは﹁はてなブログ﹂を使っていて、オリジナルのテーマを利用しています。カスタマイズ作業の中で﹁あ、こんな機能あったんだ﹂と気づくことや、Googleで探して見つけた便利なカスタマイズ方法もあります。複数の方から同じ質問をされたこともあり、せっかくなので一度まとめてみました。公式機能アーカイブページに表示する本文は調整できる SNSなどでシェアされた時に表示する記事の﹁タイトル﹂を変更できるトップページと同じレイアウトのカテゴリーページが存在する aboutページは管理画面から更新できる instagramはwebから埋め込みコードを引っ張ってきた方が良い目次記法は﹁見たままモード﹂でも使えるカスタマイズ要、ちょっと難易度高い小ネタアーカイブページをトップページに変更できる︵追記あり︶画像をクリックしても拡大しないようにできる記事下に関連記事モジュールを表示できる︵
mia-nohara 2018/07/06
知らなかった…… “URLを少し変更すると、トップページと同じレイアウトのページを表示することができます。”

CSS

はてな

ブログ
リンク
【Ameblo】スマホ版でメニューバーが設置されている理由 | ホームページ制作【堀井制作所】
先日、﹁スマホ版でアメブロにメインメニューを設置させることができるんですか？﹂と聞いてくださったお客様がいます。堀井制作所のアメブロをスマホから閲覧すると、上部Amebaロゴのすぐ下に﹇HOME ABOUT NEWS Ameblo Instagram]のメニューが追加されています。アメブロカスタマイズについて、パソコン版はフリースペースやCSSにコードを記述することで自由にカスタマイズができますが、スマホ版は別のテンプレートを使っていることからデザインは一切反映されず、メイン画像やメニューをはじめ何も表示されません。︵他にやり方があるかもしれませんが…︶なぜ追加されているかというと、Amebaが提供しているAmebaOwndとamebloを連携させたからです。　(連携方法はこちら:AmebloとAmebaOwndを連携させる方法) AmebaOwnd連動でメニューを追加 AmebaO
mia-nohara 2018/07/03
AmebaOwndとアメブロを連携させた場合に表示されるメニューバーの消し方。連携を切った後も残り続けてしまって困っていたので導入。ありがたや。

●CSS
リンク
簡単にヘッダー画像を作成してはてなブログに設定する方法！｜いまいちど.ログ
﹁訪問者に少しでも印象を残せたら﹂﹁自分のブログやサイトに愛着を持ちたい﹂目的は様々だと思いますが、サイトのイメージを左右するヘッダー画像はやっぱり大事ですよね。今日はこんな内容です。超簡単にヘッダー画像を作成はてなブログに設定する簡単にヘッダーを作成してみたい方や、ヘッダーはあるけど設定の仕方が難しい。という方には参考になるかと思います。 PIXLR EDITOR(ピクサーエディター)でヘッダーを作成ダウンロードの必要がない画像編集ソフト﹁PIXLR EDITOR﹂を紹介します。Online Photo Editor | Pixlr Editor無料ダウンロードなし登録の必要もなし開いたらすぐに活用できるので、すご～く手軽に使えるツールです。今回ヘッダーを作成する上で画像はあらかじめ用意されていると想定してます。イメージとしては3ステップで完成です。まずは簡単な説明図と
mia-nohara 2018/06/30
ヘッダー見切れちゃうの直した。ありがたい。

CSS

webデザイン

はてな
リンク
Milliard関連記事プラグインのCSSをいじり２列にしてブログになじむようにしてみました - Yukihy Life
関連記事の表記に再びMilliardの関連記事プラグインを使い始めました。その関連記事のデザインを変更したので書いておきます。︵許可はとってあります︶ Milliard関連記事プラグインとは？ Milliard関連ページプラグインについて | シスウ株式会社 Milliard関連記事プラグインは、はてなブログに搭載されていない関連記事を入れることができるプラグインです。記事数が増えてくるといちいちリンクを貼るのも面倒なので、関連記事プラグインで回遊率を上げよう！というものです。かなりオシャレで、表示される記事もしっかり関連したのが出てきます。導入した結果この関連記事表記は、パネルとリストと選ぶことができます。パネルの方がおしゃれですが、今回はシンプルにリストにしてみました。普通に導入するとこんな感じになります。ですが、何となく無駄なスペースが空いてしまうので、CSSをいじって
mia-nohara 2018/06/29
PC表示だけこちらを導入。ありがたや。

ブログ

CSS
リンク
http://www.okuni.me/entry/2018/01/26/191500
mia-nohara 2018/06/28
これはありがたい。

ブログ

CSS

カスタマイズ

webデザイン
リンク
CSSで外部サイトへのリンクの後ろにアイコン画像を表示する
CSSで外部サイトへのリンクの後にアイコン画像を表示する方法を備忘録的に残しておきます。方法は色んなブログで紹介されていますが、画像リンクにアイコンを表示しない方法は決め手に欠けます。外部サイトへのリンクの識別法以下のようにすればリンクの後にアイコン画像を表示されます。 a { background:url(画像のURL) no-repeat right center; padding-right:15px; } これだとすべてのリンクに画像が表示されるので、外部リンクと内部リンクを識別する必要があります。 URLで識別する a[href^="http"] { background:url(画像のURL) no-repeat right center; padding-right:18px; margin-right:5px; } a[href^="http://weboook.blo
mia-nohara 2018/06/28
なるほどー！

CSS

webデザイン
リンク
日本の伝統色和色大辞典 - Japanese Traditional Color Names
原色大辞典とは原色大辞典は1997年にオープンしたネットの色見本サイトです。9種類の色見本と色に関する各種サービスから構成されています。色見本コンテンツはブラウザで定義されているHTMLカラーネーム、日本の伝統色、世界の伝統色、 Webセーフカラー、パステルカラー、ビビッドカラー、モノトーン、地下鉄のシンボルカラー、国鉄制定の塗装色の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。文字列と背景色の組み合わせを試せる配色大辞典、規則性のある組み合わせから色を選べる配色パターン。色見本の他にも、今日のラッキーカラー、コトバから色を解析して調合する成分解析、ストライプを生成するストライプメーカー、グラデーションを生成するグラデーションメーカー、あなたの好きな色と色を調合する色調合、サ
mia-nohara 2018/06/27
昔から大変お世話になっているサイト。

デザイン

CSS
リンク
1