Daphne

なぜか上手くできない引用ボックス… そもそもFontAwesomeを表示させたい位置に現れず、□になってしまい、全く反映されないのです。色々試してみたところ、一応真ん中に   この子がポツーンと出てきたが、どうしたら良いかわからず…。それに二重になって表示される？！ ３日間くらい悩みましたが、色々調べてbloggerにも適応するようにアレンジしてみました。 A と B と C の３種類バージョンのCSSを載せます A版 は文章の色とFontAwesomeコンテンツを違う色に指定しています。 B版 は文章の色とFontAwesomeコンテンツと同じカラーです。 変更できませんが、指定すればA版と同じようにできます。 C版 は 文章の色とFontAwesomeコンテンツと同じカラーで変更できません。 それでも良ければ、これが一番シンプルな設定ですよ。 何故このようなことになっているかというと、blogger のテンプレートによっては、SVGでの読み込みしかできないようなのです。 ブログ記事後半で説明致しますが、SVGだと display: none; で疑似要素とiタグを消さねばなりません。２つコンテンツフォントが表示されてしまうのです。しかも本来表示させたい方が□…。 こちらのブログでは A版 のCSS引用ボックスを使用します。 こんな感じで表示されます。  こちらに引用文を載せます。文章をどうぞ。 引用元タイトル A版の場合は下記をコピーしてブログhtmlに貼り付け <blockquote> <p><i class="fas fa-quote-right my-gray"></i>&nbsp;ここに引用文を載せます</p> <cite><a href=”引用元のURL” target=”_blank”>引用元タイトル</a></cite> </blockquote> ※ <i class="fas fa-quote-right my-gray"></i> はFontA...

付箋ボックスを設定する際に、PC版に合わせるとスマホ版が狭くなってしまいます。 下記を挿入したら実際のHTML記事で挿入しましょう。 box8 sample <div class="box8"> <p>ここに文章</p> </div> box3 sample <div class="box3"> <p>ここに文章</p> </div> CSSで以下のように設定してみましょう。 /*スマホ版 付箋 css*/@media only screen and (min-width:320px) and (max-width:479px){ .box8 { padding: 0.5em 1em; margin: -1em 0.8em; color: #232323; background: #fff8e8; border-left: solid 10px #ffc06e; } .box8 p { margin: 0; padding: 0; } /*無地ボックス css*/ .box3 { padding: 0.5em 1em; margin: -1em 0.8em; color: #555555; background: #f7f7f7;/*背景色*/ } .box3 p { margin: 0em; padding: 0em; }} /*PC版 付箋 css*/ @media only screen and (min-width: 1200px) { .box8 {　 padding: 0.5em 1em; margin: -1em 4em; color: #232323; background: #fff8e8; border-left: solid 10px #ffc06e; } .box8 p { margin:...

(C) Google スマホでブログ Topに表示されるはずの「more」または「もっと読む」が表示されず、一度全部やり直しました。しかし実際、設定するのは簡単でしたね…。でもBloggerは機能説明不足しすぎだと思います。 ※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。 (C) Google ① 設定の仕方は[レイアウト]⇒[ガジェットでページ追加] ② 上記の写真のように 「表示するページ」のいずれかを選択する。 ※お問い合わせページを作成していたら、チェック。なければホーム。 これだけなのに大変苦労しました…。 そうするとmoreが表示されます。

ブログの内部リンクを下記のようなカード風のリンク（ブログカード）の設置方法を説明致します。とくに目立たせたい場合に使用するとわかりやすいですよね。 より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカー ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。 使い方  ① 上記「ShareHtmlを、もっと綺麗にしたメーカー」よりリンクURLを入力して下さい。 ② プレビューとHTMLコードを確認します。 ③ #HTMLコードをコピーして任意の記事HTML内に貼り付けます。 ※このままではデザインが反映されません。 「CSS」の内容を自分のブログに登録する必要があります。 一度CSSをと登録してしまえば、以降はHTMLを貼り付けるだけです。 また、ツールで生成されるCSSコードに誤りがあるそうなので、 公式 から配布されている下記CSSコードを各ブログに貼りましょう。 /*-----ブログカード用 New Share HTML----*/ /*-----ブログカードNew Share HTML----*/ .link-box { border:1px solid #e1e1e1; padding:10px; display:flex; margin:30px; } .link-box:hover { background-color:#f3f3f3; -webkit-transition:background-color .35s; transition:background-color .35s; } .img-box { width:25%; float:left; } .img-box div { min-height:120px; background-size:cover; background-position:center center; } .text-box { width:75%; float:left...

GoogleフォームとGoogle Apps Scriptを使用してお問い合わせページが簡単に作成できます。しかも背景画像、それに微妙に動きます（笑） 可愛い画像が何種類かあり、自由に選べるのでオススメですよ。 以下、作成する方法をご紹介します。 ※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。 フォーム画面の作成 (C) Google ①  Googleフォーム からフォームを作成を選択すると、下記画面になるので無題のフォームに「お問い合わせ」や「Contact」を入力します。 ② その下部に「無題の質問」とあるので、例えば「お名前」や「Name」に変更します。 初期ではラジオボタンになっているので、 記述式 を選択して下さい。 (C) Google ③ ＋で質問を追加します。 (C) Google ④「Email」や「Comments」を追加したら、必須ボタンをONにしておきましょう。 ちなみに、お問い合わせ内容は記述式ではなく、段落でも良いです。 (C) Google ⑤ 右上のパレットボタンから、色や背景画像を選択します。 (C) Google カラーの右下ボタンを押すと、背景画像が選べます。 (C) Google ⑥ 完了したら、右上の歯車ボタンを選択してプレゼンテーションの 「別の回答を送信するためのリンクを表示」のチェックを外し、 「お問い合わせありがとうございます。確認後返信させていただきます。」や「Thank you for contacting us.」等コメントを記入します。そして保存をクリックして下さい。 (C) Google スプレッドシートを作成し、回答を一覧表示させる ①作成したフォームに「回答」とあるので、クリックすると簡易一覧が出てきます。 しかしより分かりやすく表示させるために、GoogleのExcel版たるスプレッドシートを作成し、問い合わせ内容を一覧で表示することが出来ます。 (C) Google ② 緑の＋をクリックして、「新しいスプレッ...

当ブログのトップページ（ブログタイトル及び説明文）のfontを追加しました。 Google Font より好みのフォントを指定してダウンロードします。 ① 希望のフォントページの、右上にある「SELECT THIS FONT」をクリック。 ②「CUSTOMIZE」で斜字や太字などスタイル設定する。 ③「EMBED」に表示されている、 <link rel...  コピーします。 Bloggerですと[テンプレート]⇒[HTMLの編集]⇒headタグ内の</head>手前にペーストして下さい。 当ブログで使用しているfont Amatic SC <style> @import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700'); </style> Pacifico <style>@import url('https://fonts.googleapis.com/css?family=Pacifico');</style> CSS追加 Mobile版での表示 基本PCと携帯を分けて記述しないと反映されません。 .mobileを冒頭につけて下さい。 .mobile .header h1{ font-family: 'Pacifico', cursive; }

基本的に、Prism 導入方法はCSSとJavaScriptのファイルをダウンロードして自分のサーバーにアップロードします。しかしBloggerにはファイルをアップロードする機能がないんですね…。ですからCDNを使用して、ヘッダに外部から読み込んで使用できるようにします。 CDN（Content Delivery Network) の詳しい説明は下記を参考にして下さい。 サーバー負担が軽減し、サイトの表示速度が高速化するので軽量さを求めるならば、CDNの方が良いですね。 CSSやJSはCDNを利用してウェブサイトの表示速度を高速化しよう！ ウェブサイトを高速表示させるには様々な部分を改善しなければいけないのですが、その中でも手軽に導入できるCDNを導入してみるのが良いかと思います。CDNはjQueryのjavascriptやcssファイルを世界中にある高速なサーバーに設置して、そのファイルを皆で共用しようと言うものでウェブサイトの表示速度を速くしてくれます。 ※ちなみにThird-party tutorialsとして公式にて紹介されていましたが、出来ませんでした。私が初心者なので…理解できず断念。どなたか教えて頂きたいです。 Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot Beautify Source Codes In Your Posts With Prism Syntax Highlighter For Blogger PrismのCDNを確認 CDNを利用する場合は、ファイルのダウンロードはせず、CDNのURLを指定します。 cdnjs こちらに置いています。 ヘッダー内に記述 2行目と3行目はプラグインの行番号表示と特定行ハイライトです。 </head>の手前に <link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism.min.css' rel='stylesheet'/> <link href='https://cdnj...

ソースコードをハイライトするライブラリを探していたところ、初心者でも使いやすく、デザインがシンプルなPrism.jsを起用することにしました。プラグイン機能を指定し、拡張できるので便利です。以下、使い方をまとめました。 Prism.jsをダウンロードする http://prismjs.com/download.html 出典：Prism.js デザインと言語を選択 Themesはdefaultにしました。 Languagesでハイライトしたいプログラミング言語を選択します。 行のハイライトと行番号のプラグインを追加 Line Highlight とLine Numberを選択します。 JSファイルとCSSファイルをダウンロード カスタマイズしたデータの容量の確認が上記に出ます。 シンタックスハイライトの表示を確認し、javascript(JS)とCSSファイルデータをダウンロードしてください。 19.24KB と大変軽量です。 ファイルを各ブログでアップロード ※bloggerにはファイルをアップロードする機能がないのです…。 つまりダウンロードしても意味がない。WordPress等ならばアップロードできたり、プラグインがあったりと便利そうです。 Bloggerでの方法を探したのですが、分かりませんでした。 CDNを使用した方法 でシンタックスハイライト表示して下さい。 BloggerでのPrismシンタックスハイライトはCDN利用がオススメ 基本的に、Prism 導入方法はCSSとJavaScriptのファイルをダウンロードして自分のサーバーにアップロードします。しかしBloggerにはファイルをアップロードする機能がないんですね…。ですからCDNを使用して、ヘッダに外部から読み込んで使用できるようにします... Prismの設置 prism.jsを使用するために、headタグ内に読み込む記述を追加します。 prism.cssを<head>要素内に <style>要素で読み込ませます。 </head> の前に下記を置く。...

ネットを閲覧している最中に、「次ページへ」が７つもある長いサイトに訪問したりします。欲しい情報がどこにあるのかもわからないし、各ページごとの検索になるので command＋F も何度もやらないといけない。 そこで目次を見出しと連動させて自動生成する方法をご紹介致します。 参考にさせて頂いたサイト Bloggerで目次と見出し番号を自動生成させるカスタマイズ方法 / 人気のあるBloggerブログの作り方 ※こちらでご紹介しているソースは、目次の連番と本文の「1.見出し」及び準見出し等が番号と連動しております。 例 目次 1.見出し 　準見出し に対して、以下が本文の表示です。 1.見出し ー本文ー ↑ 見出し ー本文ー 上記のようなスタイルを希望していたので、カスタマイズ致しました。 本ブログのような目次スタイルになります。 特に重要なカスタマイズ箇所 下記の箇所のchapNo削除したところ、本文「見出し」になったので変更。 変更前 toc += '<a href="#' + chapid + '">' + chapNo + $(this).text() + "</a>"; $(this).html(chapNo + $(this).html()); }); 変更後 toc += '<a href="#' + chapid + '">' + chapNo + $(this).text() + "</a>"; $(this).html($(this).html()); }); 実際挿入するタグは下記になります。（上記ソース変更済み） <script type='text/javascript'> //<![CDATA[ if (typeof(jQuery) == 'undefined') { document.write("<scr" + "ipt type...

デザインやレイアウト変更の為にHTML・CSS・JavaScriptの勉強中です。 ブログ初心者なのでさっぱりわかりませんでしたが、なんとなく理解出来るようになってきました。図書館や本屋さんでコンピュータ専門書を読んでる最中、知ってる言葉が多く出てくる気がするのでちょっと嬉しい。 さて、色々調べていると、ブログの高速化・最適化が必須ということが分かりました。 ブログにアップロードする画像容量は100KB以下が妥当… Webページの表示速度を重視しているGoogle にとって 重いサイトはSEO的に不利 だとか… サイトの表示速度、問題点を定期的にチェックする まずは自分のサイトを測定して、どこが重いのか確認してみましょう。 様々な要因がある中で、大量のCSSやJavaScriptもサイトの動作を鈍くさせています。 JavaScriptは動きのある要素を作る為のプログラム言語なので、例えばSNS連携・広告表示なども使用しています。容易なコードでも数が増えれば増える程重くなるんですね。 デザイン重視にするとどうしても重くなる…でも訪問してくださった方々にとってはスムーズで快適なサイトの方が勿論良いです。 基本的にはシンプルにする事が重要 HTML文書を軽くして、CSSでカスタムしましょう。 さらにCSSやJavaScriptも圧縮してくれるオンラインサービスをご紹介します。 CSS & JavaScript Compressor 使い方 出典：CSS & JavaScript Compressor CSS & JavaScript Compressor  にアクセス 画像のようにコードを入れる箇所にCSS/JavaScriptを入れ、圧縮開始します。 右下の枠、すぐに生成されたコードが表示されるのでCopyし、通常通り「追加」すれば完了です。 1000Bytesサイズダウンしました。

Milliardの関連記事を導入したものの、モバイル版に表示されない。 公式の Bloggerでテンプレートを直接編集して指定位置に直接関連ページを出力する方法 でも解決しないので、調べたらやっと出来ました… Milliard関連記事の作成方法 ① 画像のように各自 関連記事ツール設定画面 からコード生成します。 ② PC版のリストを2列にしたいので、表示件数を偶数にしています。 そしてフッターのガジェットに追加します。 （現時点でPC版はブログの一番下に表示されます） ③ HTML編集で <data:post.body/> を探すと、二つ出てきます。 （HTML内の何処かを押して「command + F」検索画面が出ます。） 1番目がPC版 2番目がモバイル版 それぞれの直下に生成したhtmlを挿入すると、PC版とモバイル版の記事下に関連記事が出ます。 ※テンプレートによっては一つだけで、PC版とスマホ版共通しています。 ④ 次に下記をCSSに追加し、１列から２列に変更します。 /* PC版 関連記事 Milliard カスタマイズ */ @media screen and (min-width: 1200px) {  .ssArticlesContainer {   overflow: hidden;  /* ←横並び解除の設定 */ } .ssArticlesContainer .ssPanel {    margin: 0 2% 0 0;   width: 48%;   float: left;   line-height: 1.4;   font-size: 90%; }  .ssArticlesContainer .ssPanel a:hover {   text-decoration: underline;  /* ←マウスオーバーでアンダーライン */ } div.ssOriginalTemplateImgContainer img.ssImg {   height: 80px;  }} ...