【So-netブログ】ブログ本文のフォントサイズを変更する方法 [So-netブログ]
ブログ本文のフォントサイズを変更したい
So-netブログをご愛用のみなさん、こんにちは。
コージーです。
私もSo-netブログを愛用しています。デザインテンプレートがたくさんあって、可愛いですよね。しかし、1つだけ残念なのが、パソコンでブログを見たときに、ブログ本文の文字が小さいんですよね。
そこで、本記事では、ブログ本文のフォントサイズの変更方法を紹介したいと思います。
上記の画像をご覧ください。左側が何も設定を変更していない「初期状態」のときのブログ記事です。そして、右側がフォントサイズを変更した後のブログ記事です。ちなみに、それぞれのフォントサイズは下記のようになっています。
・初期状態:small
・変更後:16px
このように、結構フォントサイズに差がありますね。本記事では、フォントサイズを16pxに変更していきますが、フォントサイズはあなたのお好みで変えてくださいね。
まず、この記事でどのような環境を使用しているかを説明します。OSやブラウザが異なると若干の見た目の違いはあるかもしれませんが、設定方法には違いはないので、参考にして下さい。
【環境】
端末 | パソコン |
OS | Windows 10 |
ブラウザ | Chrome |
スポンサードリンク
【目次】
1. フォントサイズを変更する
では、フォントサイズを変更していきましょう。まずSo-netブログの管理画面を開きましょう。
上記のような画面が開いたと思います。
[デザイン]を左クリックする
上部にメインメニューが並んでいます。そこから、[デザイン](上記画像の赤丸の箇所)を探し、左クリックしましょう。
[テンプレート管理]を左クリックする
デザインの画面が開いたら、サブメニューから[テンプレート管理](上記画像の赤丸の箇所)を探し、左クリックしましょう。
[編集]を左クリックする
テンプレート管理の画面が開いたら、テンプレートの一覧が表示されます。使用しているテンプレートの名前の右側に[編集]というリンク(上記画像の赤丸の箇所)があるので、左クリックしましょう。この例では、一番人気の「デフォルト」テンプレートを編集していきます。
"articles-body"を検索する
上記画像のように、スタイルシート編集の画面が開いたと思います。キーボードで Ctrl+f を押しましょう。(Ctrl+fとは、コントロールキーを押しながらアルファベットのfキーを押すことです)
ブラウザの右上(上記画像の赤丸の箇所)に、検索用のキーワードを入力するエリアが表示されたと思います。ここに "articles-body" と入力して、エンターキーを押しましょう。
上記画像のように、編集エリアに、articles-bodyの箇所が表示されたと思います。
フォントサイズを記入する
この"articles-body"の設定の中に、フォントサイズの設定を記入しましょう。上記画像の例では、最後の行に設定を記入しています。(どこでも構いません)
記入するコードは、下記のとおりです。
font-size:16px;
上記の例では、16ピクセルを指定しています。お好みでサイズは変更して下さい。
[保存]ボタンを左クリックする
最後に、[保存]ボタン(上記画像の赤丸の箇所)を左クリックしましょう。
これで、フォントサイズの変更は完了です。
再度あなたのブログを表示し直してみてください。フォントサイズが変わっていると思います。
さて、今回は、ブログ本文のサイズを変更しました。他にもタイトルなど、本文以外の文字もサイズ変更できます。もし、変更したい箇所があれば、コメントください。コメントに合わせて記事を書いていきますよ。
では、かっこいいサイトを作ってください!
スポンサードリンク
【So-netブログ】ブログにソースコードを表示させる方法(デザイン変更も可) [So-netブログ]
So-netブログにソースコードを表示させる方法
デザイン変更もできます
デザイン変更もできます
So-netブログを使っている方も、ブログにソースコードをきれいに載せたいって思いますね。もちろん、私もそうでした。
調べてみると、So-netブログでも可能です。下記の2つの方法が出てきました。
方法1: Syntax Highlighter を使う方法
方法2: google-code-prettify を使う方法
この記事では、方法2のgoogle-code-prettify を使う方法を紹介します。google-code-prettifyは見栄えが地味だという記事も見かけますが、デザイン変更も可能ですので安心して下さい。後半で、デザイン変更の仕方についてもお伝えしますね。また、既存のデザインから選ぶだけでは満足できない方には、カスタマイズも可能です。この記事では、ちょっとだけカスタマイズも扱います。
本記事で使用している環境は以下のとおりです。
【環境】
端末 | パソコン |
OS | Windows 10 |
ブラウザ | Chrome |
スポンサードリンク
【目次】
1. google code prettifyの導入する
2. ブログにソースコードを載せる
3. デザインを変更する
4. ちょっとだけカスタマイズ
4-1. 長いコードを改行する(はみ出さないようにする)
4-2. 行番号を表示する
2. ブログにソースコードを載せる
3. デザインを変更する
4. ちょっとだけカスタマイズ
4-1. 長いコードを改行する(はみ出さないようにする)
4-2. 行番号を表示する
1. google code prettifyの導入する
では、早速 google code prettify を導入しましょう。
安心してください。とっても簡単です。下記のように編集画面を開いたら、タイトルを付けて、たったの1行をコピペするだけです。
[デザイン]タブを左クリックする
So-netブログの管理ページで、[デザイン]タブ(上記画像の赤丸の箇所)を左クリックしましょう。下記画像のようなページが開きます。
[テンプレート管理]を左クリックする
[テンプレート管理](上記画像の赤丸の箇所)を左クリックしましょう。下記画像のようなページが開きます。
[HTMLの追加]を左クリックする
ページを下にスクロールさせましょう。[HTMLの追加](上記画像の赤丸の箇所)が見えてくるのでこれを左クリックしましょう。
HTMLにタイトルをつける
google code prettify用のHTMLにタイトルを付けましょう。ここでの例では「google code prettify」とつけてみました。
google code prettifyを読み込むためのコードを貼り付ける
まずソースコードの中から</head>という箇所(上記画像の赤丸の箇所)を探しましょう。
次に、下記のソースコードをコピーして、</head>の直前に貼り付けましょう。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
たったこれだけで、google code prettifyの導入は完了です!
2. ブログにソースコードを載せる
では、実際にブログ記事の中にソースコードを載せてみましょう。まず、下記の画像をご覧ください。
こちらは、記事内にソースコードをそのまま記述した場合の画面です。
ソースコードを<pre>タグで囲む
下記のソースコードのように<pre>タグでソースコードを囲みましょう。その際に、下記のようにクラスとして "prettyprint" を指定しましょう。
<pre class="prettyprint"> /** * Enqueue scripts and styles. */ function mytheme_scripts() { wp_enqueue_style( 'mytheme-fonts', mytheme_fonts_url(), array(), null ); wp_enqueue_style( 'mytheme-animate', get_template_directory_uri() .'/assets/css/animate.min.css', array(), '1.0.0' ); wp_enqueue_style( 'mytheme-fa', get_template_directory_uri() .'/assets/css/font-awesome.min.css', array(), '4.4.0' ); wp_enqueue_style( 'mytheme-bootstrap', get_template_directory_uri() .'/assets/css/bootstrap.min.css', false, '4.0.0' ); wp_enqueue_style( 'mytheme-style', get_template_directory_uri().'/style.css' ); </pre>
<pre>タグで囲むだけで、ソースコードを表示できました。簡単でしたね。
ただし、いくつか問題が有ります。
問題1:デザインが地味(好みですけど・・・)
問題2:行番号が表示されない
問題3:ソースコードが枠からはみ出ている
次はこのあたりを解決していきましょう。
3. デザインを変更する
では、デザインを変更してみましょう。
ここでは、既存の用意されているデザインを適用する方法をお伝えしますね。
スタイルシートを読み込むためのコードを貼り付ける
code prettifyのテーマギャラリーにおいて、既存のデザインが公開されています。このデザインを既定したスタイルシートをSo-netブログに適用します。ここでは、私が気に入った「Sons-Of-Obsidian」を適用してみます。
1. google code prettifyの導入するにおいて、google code prettifyを読み込むためのコードを貼り付けましたね。その直後(次の行)に以下のソースコードを挿入しましょう。
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css" type="text/css" />
デザインを適用した結果、下記の画像の様になりました。
※別のデザインを適用される方は、貼り付けるコードの中にあるURLをそのデザインのものに変更しましょう。
4. ちょっとだけカスタマイズ
ここまでは、既存のものを適用するだけでしたが、ちょっとだけカスタマイズしてみましょう。ここでは、「長いコードの改行」と「行番号の表示」についてのみ紹介しますね。
4-1. 長いコードを改行する(はみ出さないようにする)
今までのものだと、長いコードがはみ出してしまっていましたね。こちらは、CSSを追記することで解決できます。
※http://10251.net/google_code_prettify_customize#chapter-7を参考にしました。ありがとうございました。
自動改行するためのコードを貼り付ける
3. デザインを変更するにおいて、スタイルシートを読み込むためのコードを貼り付けましたね。その直後(次の行)に以下のソースコードを挿入しましょう。
<style type="text/css"> pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } </style>
上記の画像のように、ソースコードが自動改行されました。
4-2. 行番号を表示する
行番号を表示するのはとっても簡単です。
2. ブログにソースコードを載せる
において、<pre>で囲むというのをお伝えしました。そこで、クラス("prettyprint")の指定をしたと思いますが、そこにさらに、行番号の指定を追加するだけです。下記のコードをみてください。
<pre class="prettyprint linenums:1">
このように "linenums" を指定します。1を指定しているので1行ごとに行番号が表示されます。5を指定すれば、5行ごとになりますよ。
上記の画像のように行番号が表示されました。
最後に、ここまでで So-netブログ に設定してきたソースコードをまとめて以下に示します。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css" type="text/css" /> <style type="text/css"> pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } </style>
これで、あなたのブログがかっこよくなりますように