まさかなBLOG

Font Awesome Font Awesomeでアイコンを使用するための手順 Bloggerの引用スタイルがショボかったので、何とかカスタマイズを使用した際に、Font Awesomeのアイコンを使用する必要があったので、使用可能にするまでの手順をまとめます。 引用スタイルの変更の記事はこちら 　 Bloggerで引用スタイルを変更する １．以下サイトにアクセス Font Awesome　のサイトのアクセスします。 　 https://origin.fontawesome.com/ ２．「Start Using Free」をクリック 以下の画面キャプチャのとおり、「Start Using Free」を選択します。 無料ユーザーとして利用します。 ３．コードをコピー 「Start a New Project」というページが表示されるので、表示されているコードをコピーします。 コードをクリップボードにコピー ４．</head>の直前に貼り付け。その際、終端記号/を追加 自身のWebページのHTMLコードを表示し、</head>の直前に貼り付ます。 その際、貼り付けたコードに終端記号"/"を追加しました。 …rel='stylesheet' / > これで、設定は完了です。 実際にアイコンを表示してみる 設定が完了したので、ためしにアイコンを表示させます。 手順は以下の通りです。 １．使用するアイコンをFont Awesomeのページから選ぶ Font Awesomeのトップページに検索ボックスがあるので、キーワードを入力して検索を行います。 左上に検索ボックス ２．選んだアイコンのコードを取得する。 選んだアイコンのページを開くと、以下の画面キャプチャのところにコードが表示されているので、コピーします。 赤枠したところにあるコードをコピーします。 ３．アイコンを表示するページのHTMLに取得したコードを貼り付ける。 以下のようにHTMLコードの編集画面で、コピーしたコードを貼り付けます。 ...

Bloggerをカスタイマイズ デフォルトの引用のスタイルがなんかビミョウ・・・ ブログで記事を書いていると必ず、引用を行う場面があるかと思います。 私も他のサイトの内容を引用しようとした際に、Bloggerの投稿の編集画面から以下のボタンを押して引用のスタイルを適用しますが、デフォルトのスタイルがかっこよくありません・・・ 引用ボタンをポチっと デフォルトの引用のスタイル。中央揃えで少し字が大きくなっただけ・・・ これは何とかせねばということで、引用スタイルの変更を行います。 変更内容 注意点 この変更では、Font Awesomeのアイコンを使用しています。 Font Awesomeの設定方法については、別途記事にする予定です。 HTMLの編集 テーマ→ HTML の編集で、「blockquote」で検索する。 以下のようにコードを編集する。 CSSの追加 テーマ→カスタマイズ→上級者向け→CSSを追加 以下のコードを追加する。 表示結果 上記の変更を行うことで、引用が以下のように表示されるようになりました。 引用がいい感じに表示されました 参考にしたサイト CSSで作る！魅力的な引用デザインのサンプル30（blockquote） さいごに いかがでしたでしょうか。 ブログやる上では、CSSの知識が必須であることを痛感しました。すこしずつ勉強していきたいと思います。