So-net無料ブログ作成

【WordPress】スタイルシート(CSS)を特定のページに読み込む方法 [WordPress]

 
 
 
特定のページにだけ独自のスタイルシートを適用したい




WordPressでは、テーマを選ぶことで自分のサイトのデザインを変えることができますね。しかし、既存のテーマがあなたの要望に完全にピッタリとは限りませんね。レイアウトを調整したい、色を変えたいといったこともあると思います。

そんなときは、スタイルシート(CSSファイル)を作成し、追加で読み込ませましょう。

この記事では、サイト内の特定のページにだけ、スタイルシートを適用する方法をお伝えします。



※サイト全体にスタイルシートを適用する方法は、下記の記事を御覧ください。
【WordPress】スタイルシート(CSS)を読み込む方法



まず、この記事でどんな環境を使用しているかを説明します。あなたのものと同じ、または、似ている場合は、ぜひこの記事を参考にしてくださいね。



【環境】

端末パソコン
OSWindows 10
ブラウザChrome





スポンサードリンク





【目次】






1. テーマのための関数(functions.php) を編集する




今回は、スタイルシートを読み込むための設定を、wordpressの管理画面から行う方法をお伝えします。

※詳しい方は、FTPを利用して、functions.phpファイルをダウンロードして編集するという方法のほうがオススメです。


それでは、WordPressの管理画面で「テーマのための関数」を開いていきます。


では、まずWordPressにログインしましょう。

画面左側にメニューが並んでいます。



wordpress1.png

[外観]にマウスカーソルを重ねる(上記画像の左の赤丸の箇所)

[テーマの編集]を左クリックする(上記画像の下の赤丸の箇所)


 左側のメニューから、[外観]を探しマウスカーソルを重ねましょう。すると[外観]に関連するメニューが開くので、そこにある[テーマの編集]を左クリックしましょう。



テーマの編集1.png

 上記のように「スタイルシート(style.css)」というファイルが開いたと思います。



テーマの編集2.png

テーマのための関数(functions.php)を左クリックする


 右側のメニューから「テーマのための関数(functions.php)」を探し、左クリックしましょう。



テーマの編集3.png

 上記のように、テーマのための関数(functions.php)が開いたと思います。





 テーマのための関数が開いたら、スタイルシートを読み込むコードを追記する場所を探しましょう。



wp_enqueue_scriptを検索する


 ブラウザの機能を利用して、"wp_enqueue_script"というキーワードを検索しましょう。



検索1.png

 Chromeでは、Ctrl+Fで検索ができます。
 検索すると、上記画像のように、いくつかヒットすると思います。

 今回の例では、テーマに「OnePress」を使用していますが、5件ヒットしました。このテーマの場合、onepress_scriptsというファンクションに、スタイルシートの読み込みコードが記述されています。テーマによって記載箇所が異なると思うので、検索してみてください。

/**
 * Enqueue scripts and styles.
 */
function onepress_scripts() {
	wp_enqueue_style( 'onepress-fonts', onepress_fonts_url(), array(), null );
	wp_enqueue_style( 'onepress-animate', get_template_directory_uri() .'/assets/css/animate.min.css', array(), '1.0.0' );
	wp_enqueue_style( 'onepress-fa', get_template_directory_uri() .'/assets/css/font-awesome.min.css', array(), '4.4.0' );
	wp_enqueue_style( 'onepress-bootstrap', get_template_directory_uri() .'/assets/css/bootstrap.min.css', false, '4.0.0' );
	wp_enqueue_style( 'onepress-style', get_template_directory_uri().'/style.css' );




上記のコードを良く見てみましょう。wp_enqueue_styleで始まる各行の中に、xxx.cssという記述がありますね。次は、ここにあなたの独自のスタイルシートのファイル名を書いていきますよ。

追加コードを記述する箇所は、複数見つかったwp_enqueue_styleのうち、最後のものの後です。



3. コードを追記する


 では、コードを追記しましょう。



wp_enqueue_style( 'my-style', get_template_directory_uri().'/mystyle.css' );


 では、wp_enqueue_styleの各引数を見ていきましょう。
 
 ・第1引数:スタイルシートを区別するハンドル名を指定します。上記の例では、my-styleを指定しました。

 ・第2引数:スタイルシートのURLを指定します。ここで、get_template_directory_uri()という関数を使用しています。この関数は、使用しているテーマのディレクトリを返します。末尾にスラッシュ( / )が含まれないことに注意してください。上記の例では、OnePressというテーマのディレクトリをget_template_directory_uri()で取得し、'/mystyle.css'という文字列と連結することで、スタイルシートのURLを指定しています。



 ※get_template_directory_uri()の詳しい説明はこちら↓
  関数リファレンス/get template directory uri



 ※本記事では、wp_enqueue_styleに対して最低限の引数を指定した例を紹介しました。詳しく知りたい方はこちら↓
  関数リファレンス/wp enqueue style



3-1. 特定の固定ページにスタイルシートを適用する


 スタイルシートを読み込む方法がご理解いただけたところで、ここでは、特定の固定ページにのみ、スタイルシートを適用する方法をお伝えします。



 3. コードを追記する において、追記したコードに条件分岐を追加しましょう。



if ( is_page(array(2, 5, 8)) ) {
    wp_enqueue_style( 'my-style', get_template_directory_uri().'/mystyle.css' );
}




 固定ページかどうかを判別する関数は "is_page" です。
 
 引数には、ページIDを指定します。(固定ページIDを調べる方法
 複数のページに適用したい場合は、上記の例のように配列にIDを入れて指定します。上記の例では、ページIDが2、5、8のページにのみスタイルシート(mystyle.css)が適用されます。
 全ての固定ページに適用したい場合は、引数を省略しましょう。
 
 
 
 ※is_pageの詳しい説明は下記サイトをご覧ください。
  関数リファレンス/is page
  is_page の引数には、ID以外も指定できます。



3-2. 特定の投稿ページ(記事)にスタイルシートを適用する




 特定のブログ記事にのみスタイルシートを適用したいときもあると思います。このような場合は、下記のように判別式を追加しましょう。



if ( is_single(array(3, 6, 9)) ) {
    wp_enqueue_style( 'my-style', get_template_directory_uri().'/mystyle.css' );
}




 投稿ページかどうかの判別に使用する関数は "is_single" です。
 
 引数には、投稿IDを指定します。(投稿記事IDを調べる方法
 複数のページに適用したい場合は、上記の例のように配列にIDを入れて指定します。上記の例では、投稿IDが3、6、9のページにのみスタイルシート(mystyle.css)が適用されます。
 全ての投稿ページに適用したい場合は、引数を省略しましょう。
 
 
 
 ※is_singleの詳しい説明は下記サイトをご覧ください。
  関数リファレンス/is_single
  is_single の引数には、ID以外も指定できます。




スポンサードリンク






4. 読み込みを確認する


 設定が正しいか確認してみましょう。



ページを右クリックする


 判別式で指定したページをブラウザで開いたら、ページ上で右クリックをしましょう。下記画像のようにメニューが表示されます。

source0.png



「ページのソースを表示」を左クリックする


 表示されたメニューから、「ページのソースを表示」(上記画像の赤丸の箇所)を左クリックしましょう。ページのソースが表示されます。



source1.png

 ソースの中から、スタイルシートの記述を探しましょう。検索機能を使用して探しても良いです。上記画像のように、追加したスタイルシートのファイル名がソースに記述されていることが確認できれば成功です。



 また、判別式で指定しなかったページについても、ページのソースを表示してみましょう。今度は逆に、追加したスタイルシートのファイル名がソースに記述されていないことが確認できれば成功です。



では、かっこいいサイトを作ってください!





スポンサードリンク


【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は見栄えが地味だという記事も見かけますが、デザイン変更も可能ですので安心して下さい。後半で、デザイン変更の仕方についてもお伝えしますね。また、既存のデザインから選ぶだけでは満足できない方には、カスタマイズも可能です。この記事では、ちょっとだけカスタマイズも扱います。



 本記事で使用している環境は以下のとおりです。

【環境】

端末パソコン
OSWindows 10
ブラウザChrome





スポンサードリンク





【目次】






1. google code prettifyの導入する




 では、早速 google code prettify を導入しましょう。

 安心してください。とっても簡単です。下記のように編集画面を開いたら、タイトルを付けて、たったの1行をコピペするだけです。



[デザイン]タブを左クリックする


blog_top1.png

 So-netブログの管理ページで、[デザイン]タブ(上記画像の赤丸の箇所)を左クリックしましょう。下記画像のようなページが開きます。



design_top1.png



[テンプレート管理]を左クリックする


 [テンプレート管理](上記画像の赤丸の箇所)を左クリックしましょう。下記画像のようなページが開きます。



temp_top1.png



[HTMLの追加]を左クリックする


 ページを下にスクロールさせましょう。[HTMLの追加](上記画像の赤丸の箇所)が見えてくるのでこれを左クリックしましょう。



HTMLにタイトルをつける


mod_html1.png

 google code prettify用のHTMLにタイトルを付けましょう。ここでの例では「google code prettify」とつけてみました。



google code prettifyを読み込むためのコードを貼り付ける


mod_html2.png

 まずソースコードの中から</head>という箇所(上記画像の赤丸の箇所)を探しましょう。

 次に、下記のソースコードをコピーして、</head>の直前に貼り付けましょう。



<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>




たったこれだけで、google code prettifyの導入は完了です!



2. ブログにソースコードを載せる




 では、実際にブログ記事の中にソースコードを載せてみましょう。まず、下記の画像をご覧ください。



result0.png



こちらは、記事内にソースコードをそのまま記述した場合の画面です。



ソースコードを<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>




result1.png

 <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" />




 デザインを適用した結果、下記の画像の様になりました。



result2.png



 ※別のデザインを適用される方は、貼り付けるコードの中にある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>




result3.png



 上記の画像のように、ソースコードが自動改行されました。



4-2. 行番号を表示する




 行番号を表示するのはとっても簡単です。
 2. ブログにソースコードを載せる
において、<pre>で囲むというのをお伝えしました。そこで、クラス("prettyprint")の指定をしたと思いますが、そこにさらに、行番号の指定を追加するだけです。下記のコードをみてください。



<pre class="prettyprint linenums:1">




 このように "linenums" を指定します。1を指定しているので1行ごとに行番号が表示されます。5を指定すれば、5行ごとになりますよ。



result4.png



 上記の画像のように行番号が表示されました。



 最後に、ここまでで 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>




これで、あなたのブログがかっこよくなりますように

nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:blog

【WordPress】スタイルシート(CSS)を読み込む方法 [WordPress]

 
 
 
WordPressで作ったページに独自のスタイルシートを適用したい




WordPressでは、テーマを選ぶことで自分のサイトのデザインを変えることができますね。しかし、既存のテーマがあなたの要望に完全にピッタリとは限りませんね。レイアウトを調整したい、色を変えたいといったこともあると思います。

そんなときは、スタイルシート(CSSファイル)を編集しましょう。

あなたの使用しているテーマに用意されているスタイルシートを直接編集する方法もあります。もう1つの方法は、独自に作成したスタイルシートを追加で読み込ませる方法です。

今回はスタイルシートを追加で読み込ませる方法をお伝えします。


 ※ここでは、サイト全体にスタイルシートを適用する方法をお伝えします。
  特定のページにのみスタイルシートを適用したい場合は、下記の記事を御覧ください。
  【WordPress】スタイルシート(CSS)を特定のページに読み込む方法



まず、この記事でどんな環境を使用しているかを説明します。あなたのものと同じ、または、似ている場合は、ぜひこの記事を参考にしてくださいね。



【環境】

端末パソコン
OSWindows 10
ブラウザChrome





スポンサードリンク





【目次】






1. テーマのための関数(functions.php) を編集する




今回は、スタイルシートを読み込むための設定を、wordpressの管理画面から行う方法をお伝えします。

※詳しい方は、FTPを利用して、functions.phpファイルをダウンロードして編集するという方法のほうがオススメです。


それでは、WordPressの管理画面で「テーマのための関数」を開いていきます。


では、まずWordPressにログインしましょう。

画面左側にメニューが並んでいます。



wordpress1.png

[外観]にマウスカーソルを重ねる(上記画像の左の赤丸の箇所)

[テーマの編集]を左クリックする(上記画像の下の赤丸の箇所)


 左側のメニューから、[外観]を探しマウスカーソルを重ねましょう。すると[外観]に関連するメニューが開くので、そこにある[テーマの編集]を左クリックしましょう。



テーマの編集1.png

 上記のように「スタイルシート(style.css)」というファイルが開いたと思います。



テーマの編集2.png

テーマのための関数(functions.php)を左クリックする


 右側のメニューから「テーマのための関数(functions.php)」を探し、左クリックしましょう。



テーマの編集3.png

 上記のように、テーマのための関数(functions.php)が開いたと思います。





 テーマのための関数が開いたら、スタイルシートを読み込むコードを追記する場所を探しましょう。



wp_enqueue_scriptを検索する


 ブラウザの機能を利用して、"wp_enqueue_script"というキーワードを検索しましょう。



検索1.png

 Chromeでは、Ctrl+Fで検索ができます。
 検索すると、上記画像のように、いくつかヒットすると思います。

 今回の例では、テーマに「OnePress」を使用していますが、5件ヒットしました。このテーマの場合、onepress_scriptsというファンクションに、スタイルシートの読み込みコードが記述されています。テーマによって記載箇所が異なると思うので、検索してみてください。

/**
 * Enqueue scripts and styles.
 */
function onepress_scripts() {
	wp_enqueue_style( 'onepress-fonts', onepress_fonts_url(), array(), null );
	wp_enqueue_style( 'onepress-animate', get_template_directory_uri() .'/assets/css/animate.min.css', array(), '1.0.0' );
	wp_enqueue_style( 'onepress-fa', get_template_directory_uri() .'/assets/css/font-awesome.min.css', array(), '4.4.0' );
	wp_enqueue_style( 'onepress-bootstrap', get_template_directory_uri() .'/assets/css/bootstrap.min.css', false, '4.0.0' );
	wp_enqueue_style( 'onepress-style', get_template_directory_uri().'/style.css' );




上記のコードを良く見てみましょう。wp_enqueue_styleで始まる各行の中に、xxx.cssという記述がありますね。次は、ここにあなたの独自のスタイルシートのファイル名を書いていきますよ。

追加コードを記述する箇所は、複数見つかったwp_enqueue_styleのうち、最後のものの後です。



3. コードを追記する


 では、コードを追記しましょう。



wp_enqueue_style( 'my-style', get_template_directory_uri().'/mystyle.css' );


 では、wp_enqueue_styleの各引数を見ていきましょう。
 
 ・第1引数:スタイルシートを区別するハンドル名を指定します。上記の例では、my-styleを指定しました。

 ・第2引数:スタイルシートのURLを指定します。ここで、get_template_directory_uri()という関数を使用しています。この関数は、使用しているテーマのディレクトリを返します。末尾にスラッシュ( / )が含まれないことに注意してください。上記の例では、OnePressというテーマのディレクトリをget_template_directory_uri()で取得し、'/mystyle.css'という文字列と連結することで、スタイルシートのURLを指定しています。



 ※get_template_directory_uri()の詳しい説明はこちら↓
  関数リファレンス/get template directory uri



 ※本記事では、wp_enqueue_styleに対して最低限の引数を指定した例を紹介しました。詳しく知りたい方はこちら↓
  関数リファレンス/wp enqueue style




スポンサードリンク






4. 読み込みを確認する


 設定が正しいか確認してみましょう。



ページを右クリックする


 ブラウザであなたのページを開いたら、ページ上で右クリックをしましょう。下記画像のようにメニューが表示されます。

source0.png



「ページのソースを表示」を左クリックする


 表示されたメニューから、「ページのソースを表示」(上記画像の赤丸の箇所)を左クリックしましょう。ページのソースが表示されます。



source1.png

 ソースの中から、スタイルシートの記述を探しましょう。検索機能を使用して探しても良いです。上記画像のように、追加したスタイルシートのファイル名がソースに記述されていることが確認できれば成功です。



では、かっこいいサイトを作ってください!





スポンサードリンク


【マイクラ】「パソコン初心者でもわかる!」動きが重たいときに次にやること(軽量化MOD) [ゲーム]

 
 
設定変えたけど、まだ重いよー



という方に読んでいただきたいです。


・マイクラのビデオ設定で描画距離も短くしたのに・・・
・どうにかなんないの?
・PC買い換えるしかないの?


そんなあなた、まだ、あきらめないで。

「OptiFiine」という軽量化MODをインストールすれば、描画処理を軽くできるだけでなく、さらに細かいビデオ設定ができるので、あなたの環境にあったお好みの設定をすることが出来ます。


ここでは、パソコン初心者でも分かるように、丁寧に説明しますね。




スポンサードリンク





まず、この記事でどんなパソコンを使っているか、マイクラのバージョンは何かを説明します。あなたのものと同じ、または、似ている場合は参考にしてくださいね。

※Macを愛用している方はナポアンさんの記事を参考にしてください。
[Minecraft] 1.11/1.10に対応した軽量化MOD「Optifine」の導入方法とおすすめの設定を解説 (Mac対応)




【環境】

端末パソコン
OSWindows 10
マイクラ1.12




【目次】







スポンサードリンク







1. OptiFine を導入する



 まず初めに OptiFine をパソコンに導入します。OptiFine のインストールには、Javaが必要ですが、今は何も気にしなくて大丈夫。手順に従って作業すればOK。



1-1. OptiFineをダウンロードする



 OptiFineのダウンロードを行います。

OptiFineのダウンロードページを開く 「OptiFineのダウンロードページ



optifine_download.png


最新バージョンの[Download]をクリック

 上記の画像の [Download](赤丸の箇所)をクリックします。





5秒待ってから、[SKIP AD]をクリック

optifine_skipad.png

 上記の画像の赤丸の箇所は、5秒待つと[SKIP AD]に変わります。[SKIP AD]になったら、クリックします。





ファイルをダウンロードするリンクをクリック

optifine_download2.png

 広告がたくさん表示されてますが、気にせずに、上記の画像の赤丸の部分をクリックします。ダウンロードが始まります。後で実行するので、ダウンロードしたファイルが保存される場所を覚えておいてください。





1-2. OptiFineをインストールする



 ダウンロードが完了したら、インストールをしましょう。




ダウンロードしたOptiFineファイルを実行

downloaded_file.png

 OptiFineのファイルは、「OptiFine_XXXXXX.jar」というファイル名です。このファイルをダブルクリックします。



 もし、下記のようなウィンドウが表示されたら、Javaのインストールが必要です。

jar_openmethod.png

このウィンドウが表示されたら、[OK] ボタンを押して、ウィンドウを閉じましょう。そして、1'. Java を導入するを、先に行いましょう。Javaの導入が終わったら、この作業に戻ってきます。

 すでにあなたのパソコンにJavaが導入されていれば、上記のウィンドウは表示されず、下記のウィンドウが開きます。





[Install] ボタンをクリック

optifine_setup.png


 通常、何も設定する必要はなく [Install] ボタン(上記の赤丸の箇所)をクリックするだけでOKです。

 ※ここでは触れませんが、マイクラのインストール先を自分で変更していたり、複数インストールしている方は、インストール先のフォルダを設定してから [Install] ボタンをクリックしましょう。





[OK] ボタンをクリック

optifine_setup2.png

 インストールが成功したら、上記のウィンドウが表示されます。[OK] ボタンをクリックしましょう。

 これで、OptiFine の導入は完了です!
 「1'. Java を導入する」は不要なので、「2. マイクラの設定をする」に進みましょう。






スポンサードリンク







1'. Java を導入する



 「1-2. OptiFineをインストールする」において、OptiFineのファイルを実行できなかったら、Javaを導入しましょう。





1'-1. Javaをダウンロードする




 Javaのダウンロードを行います。

Javaのダウンロードページを開く 「Javaのダウンロードページ

jar_download.png

 上記のようなページが開くと思います。





ダウンロードボタンをクリック


 上記の画像の [無料Javaのダウンロード] をボタンをクリックします。





ダウンロード開始ボタンをクリック

jar_download2.png

 上記のページが表示されたら、[同意して無料ダウンロードを開始] ボタンをクリックします。





ダウンロード先を指定して [保存] ボタンをクリック

jar_download3.png

 ダウンロードしたファイルを保存する先を選びましょう。上記の例では、保存先に[ダウンロード]フォルダを選んでいます。保存先が決まったら、[保存]ボタンをクリックします。



jar_download4.png

 ダウンロードに成功したら、上記の画像の赤丸の箇所ように「jre-XXXX.exe」というファイルが保存されているはずです。





1'-2. Javaをインストールする


 ダウンロードに成功したら、インストールしましょう。

ダウンロードしたJavaファイルを実行

jar_download4.png

 Javaのファイル「jre-XXXX.exe」(上記画像の赤丸の箇所)をダブルクリックします。





[インストール] ボタンをクリック

java_setup.png

 上記のウィンドウが表示されたら、[インストール] ボタンをクリックしましょう。





[閉じる] ボタンをクリック

java_setup2.png

 インストールが成功したら、上記のウィンドウが表示されます。[閉じる] ボタンをクリックしましょう。



 これで Java の導入は完了です!

 「1-2. OptiFineをインストールする」に戻って、OptiFineのインストールをしましょう。






スポンサードリンク







2. マイクラの設定をする


 OptiFine の導入に成功したら、次はマイクラの設定をしましょう。





2-1. 起動オプションを設定する


 OptiFine 専用の起動オプションを設定しましょう。OptiFine を使用して遊ぶときは、ここで設定した起動オプションを使います。





ランチャーを起動する


 いつも通りマイクラを起動しましょう。
 下記の画像のように、ランチャーが立ち上がります。




起動オプションを開く

micra_setting1.png

 起動オプションは、「起動オプション」(上記画像の赤丸の箇所)をクリックすると開きます。





OptiFineを開く

micra_setting2.png

 起動オプションに、「OptiFine」という名前のものが出来ていると思います。

 この「OptiFine」(上記画像の赤丸の箇所)をクリックしましょう。

 ※もし、「ない」という場合は、[新規作成] をクリックして、名前に「OptiFine」などと付けましょう。





バージョンを確認する

micra_setting3.png

 起動オプション「OptiFine」を開くと、上記画像の赤丸の箇所のようにバージョンが表示されています。今回インストールした OptiFine のバージョンと等しいか確認しましょう。もし、違うバージョンが表示されていたら、赤丸の箇所の右端の▼をクリックして、インストールした OptiFineを選びましょう。





ゲームディレクトリを設定する


 OptiFineを使って遊ぶときに、あなたのワールドを保存する場所、いわゆる「ゲームディレクトリ」を設定します。





ゲームディレクトリの設定をオンにする


 上記画像の左下の赤丸の箇所(「ゲームディレクトリ」の左側)をクリックします。





ゲームディレクトリの場所を設定する


 上記画像の右下のフォルダアイコンをクリックします。すると、下記のダイアログが表示されます。

micra_setting4.png





新しいフォルダを作る


 フォルダツリー(上記画像の中央部分)を使って、ゲームディレクトリを作るフォルダをクリックしましょう。そして、[新しいフォルダの作成] ボタンをクリックしましょう。選んだフォルダの中に、ゲームディレクトリが作られます。

micra_setting5.png

 新しいフォルダを作成すると上記画像のようになります。





フォルダ名を設定する

micra_setting6.png

 フォルダ名を入力しましょう。上記の例では、「minecraft_optifine」と入力しています。





[OK] ボタンをクリック


 ゲームディレクトリの設定が完了したら、[OK]ボタンをクリックします。





[保存] ボタンをクリック


 これで起動オプションの設定は完了です!
 [保存] ボタンをクリックしましょう。





OptiFine の起動オプションを選ぶ

micra_setting7.png

 ▲(上記画像の右下の赤丸の箇所)をクリックしましょう。選択できる起動オプションが表示されます。
 ここで、先程設定した OptiFine の起動オプション(上記画像の中央下の赤丸の箇所)をクリックしましょう。





マイクラを起動する

micra_setting8.png

 OptiFineの起動オプションを選択すると、上記画像のように緑色のボタン(赤丸の箇所)にOptiFineのバージョンが表示されます。この緑色のボタンをクリックしましょう。

 これでマイクラが起動します。
 マイクラが起動が完了すると、起動オプションに設定したゲームディレクトリに自動的にフォルダやファイルが生成されます。

micra_setting9.png

 私の場合、上記画像のように生成されました。
 エクスプローラーを使用して、起動オプションで設定したゲームディレクトリを開きましょう。赤い下線の部分を見てください。起動オプションで設定したゲームディレクトリの場所になっています。
 赤丸の箇所に、自動生成されたフォルダやファイルが表示されています。





2-2. ワールドをコピーする


 今まで遊んでいたワールドがある場合は、OptiFineのゲームディレクトリにコピーします。この作業により、今までのワールドに OptiFine を適用できます。

 もし、新しいワールドを作成する場合は、この作業は飛ばして、ワールドを新規作成し、2-3. ビデオ設定をするに進んでください。






今までのゲームディレクトリを開く

micra_setting11.png

 エクスプローラーを使用して、今まで遊んでいたゲームディレクトリを開きます。ゲームディレクトリの場所が分からないよー、という方は、起動オプションを見るとわかりますよ。通常は、Windowsのユーザフォルダの中にある [AppData] フォルダの中にあります。上記画像の赤い下線を参考にしてみてください。

 マイクラのフォルダの中に [saves] フォルダがあるので、このフォルダを開きましょう。




ワールドのフォルダをコピーする


 [saves] フォルダの中に、各ワールドのデータが保存されています。OptiFine で遊びたいワールドをコピーしましょう。コピーしたいワールド名のフォルダを右クリックして、表示されたメニューからコピーを左クリックするとコピーされます。





OptiFine の起動オプションのゲームディレクトリを開く

micra_setting12.png

 エクスプローラーを使って、OptiFine 用のゲームディレクトリを開きましょう。上記画像の赤い下線を見てください。起動オプションで設定したゲームディレクトリの場所とおなじになっています。先ほどと同じように、[saves] フォルダを開きます。





ワールドを貼り付ける


 [saves]フォルダの中で、右クリックするとメニューが表示されます。メニューから[貼り付け](上記画像の赤丸の箇所)を選んで左クリックしましょう。先程コピーされたワールドが貼り付けられます。

micra_setting13.png

 ワールドのコピーに成功すると、上記の画像のようにワールドのフォルダが表示されます。





2-3. ビデオ設定をする




 改めて、マイクラを起動しましょう。ランチャーでは、もちろん OptiFine の起動オプションを選択して起動しましょう。

 マイクラが起動したら「シングルプレイ」を選択します。

micra_setting14.png

 ワールドのコピーが成功していたら、上記画像のようにコピーしたワールドが表示されます。赤丸の箇所がワールド名です。

 ※ワールドをコピーせず、新規作成した方はここに新規作成したワールドが表示されます。




[Esc]キーを押す

Esc.png

 ワールドを立ち上げたら、キーボードの [Esc] キー(上記画像の赤丸の箇所)を押しましょう。ゲームメニューが開きます。





設定画面を開く

setting.png

 ゲームメニューが開いたら、[設定]ボタン(上記画像の赤丸の箇所)をクリックしましょう。設定画面が開きます。





ビデオ設定を開く

VideoSetting.png

 設定画面が開いたら、[ビデオ設定](上記画像の赤丸の箇所)をクリックしましょう。ビデオ設定が開きます。





グラフィックス設定を【処理優先】にする

video_setting1.png

 ビデオ設定が開いたら、グラフィックスにマウスカーソルを重ねてください。上記画像の下半分のように、グラフィックス設定の説明が表示されます。ここで、[グラフィックス] ボタン(上記画像の赤丸の箇所)をクリックして【処理優先】に設定しましょう。これだけで、パソコンへの負担が低くなり、動作が軽くなります!

※設定が終わったら、再び【Esc】キーを押してね。設定画面が消えます。





これで、OptiFine の導入からマイクラの設定まで全て完了です!





動作は軽くなったでしょうか。

軽くなったかどうか、確認する方法は、下記の記事を見てくださいね。
【マイクラ】「パソコン初心者でもわかる!」動きが重いときにまずやること




 コージーは、他にもマインクラフトの記事を書いています。マインクラフトの記事を下記のページにまとめているので見てみてくださいね。



【マイクラ】マインクラフト(PC版)の記事まとめ



では、楽しいマイクラライフを!






スポンサードリンク


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:ゲーム

【マイクラ】「パソコン初心者でもわかる!」動きが重いときにまずやること [ゲーム]

 
 
動きが重いよー、どうにかしてー



マイクラが大好きなみなさん、マイクラやっててこう思うことありますよね。


・どうにかならないの?
・パソコンがしょぼいから?
・買い換えるしかない?


まだ、あきらめないで。
なんとかなるかもしれませんよ。


しかも、とっても簡単。

まずこの2つだけやってみて。


それでもだめならちょっとむずかしくなるけど、他の方法もありますよ。
そんなあなたは下記の記事を読んでみてね。
【マイクラ】「パソコン初心者でもわかる!」動きが重たいときに次にやること(軽量化MOD)


※この記事はWindowsパソコンでマインクラフトをやっている方向けに書いています。



(1) どのくらいの速さで動いているの? を調べる


 マイクラの動作が重いとき、

 「今、わたしのパソコンはどのくらいの速さで動いているの?」

 それを教えて。

 と思いますよね。そしたら、


【F3】キーをおす


 をやってみてください。

Keyboard.png


 そうすると画面に文字がたくさん表示されます。
 画面の左上を見てください。下の画像のように、【 ○○ fps 】と書かれていると思います。


FPS.png


 これは、1秒間に何回画面を書き換えているかを表しています。
 1fps の場合は、1秒間に1回しか画面が書き換わらないので、とても重たく感じます。逆に30fpsだとスムーズに感じます。平均して 20fps 以上であれば重たく感じないでしょう。

 ※画像の例では 14fps なので、少し重く感じると思います。


 ※画面をもとに戻すときは、もう一度【F3】キーを押してね


 では、これをどうしたら軽くできるでしょうか。




スポンサードリンク





(2) 更新するエリアを限定する

 はい、それがこれです。

 マイクラは、プレイヤーの周りの近いところだけを更新しています。だから、とても遠い村は、久々に行ってみると、前に来たときと同じで、村人も増えてないし、野菜も育っていませんよね。

 逆に「近い」エリアに含まれている場所は、常に更新されています。だから、近い場所は、村人が増えたり、野菜が育ったり、敵が湧いたりします。

 この「更新されているエリア」が広ければ広いほど、パソコンは頑張って働かないといけません。あっちの村もこっちの村も、あの洞窟も更新しなきゃ・・・と頑張っているのです。だから、重くなります。

 じゃぁ、動作を軽くするにはどうするか・・・

 そうです、「更新されているエリア」を狭くすればいいのです。


 では、どうすれば更新されているエリアを狭くできるのか?

 簡単です。下記の4ステップで完了。


1.【Esc】キーをおす


Esc.png

2.【設定】をクリック


setting.png

3.【ビデオ設定】をクリック


VideoSetting.png

4.【描画距離】を小さくする


PaintDist.png



描画距離は、最小で2チャンクにできます。
2チャンクなら、とても軽くなると思います。



試してみてください。


そして、再び fps を確認してみてください。


軽くなりましたか?

※設定が終わったら、再び【Esc】キーを押してね。設定画面が消えます。


 コージーは、他にもマインクラフトの記事を書いています。マインクラフトの記事を下記のページにまとめているので見てみてくださいね。



【マイクラ】マインクラフト(PC版)の記事まとめ



では、楽しいマイクラライフを!





スポンサードリンク


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:ゲーム

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。