投稿の手順を簡単解説

自分の記事のレイアウトを自由に最高のモノにしていきましょう!
 

◆簡単3ステップ!

ログイン→記事を編集→投稿
この流れで記事を書いていきます!

 

◆要する時間(目安)

・最初の投稿(テンプレート作りを含む)
 →約2~3時間(目安)
・二回目以降の投稿
 →約30分~2時間(目安)

 

ログインからプロフィール設定

 

1⃣ログインの方法

記事はwordpressというサイトで書いていきます!まずは、wordpressにログインをしましょう!

ログイン画面のURLは、https://nan-life24.com/wp-adminです。

ここに貴方の「ユーザー名(orメールアドレス)」と「パスワード」を入れて、ログインをしてください。(→ユーザー名とパスワードはこちらからお送りしたものを使ってください。)

 

2⃣基本情報の設定

まずはじめに、プロフィールの設定を行っていきましょう!
 
①管理画面の「プロフィール」を押す。
 

②プロフィール情報を入力してください。

▽参考▽
・「ビジュアルリッチエディター」~「言語」…自由
・「名」「姓」…本名を入れてください。
・「ニックネーム」…自由に設定
・「ブログ上の名前」…これがブログに載る名前になります。
・「サイト」…自分のサイトがある場合は載せてください
・「FacebookURL」…自分のプロフィール欄の共有からリンクを取得できます。
「Twitter」…[ https://twitter.com/◯◯◯ ]←○○〇に自分のユーザー名(@○○)の○○を入れてください。
・「Instagram」…[ https://www.instagram.com/○○〇 ]←○○〇に自分のユーザー名(@○○)の○○を入れてください。
・「プロフィール情報」…自己紹介を書いてください。これがブログの執筆者情報に載ることになります。
・「プロフィール写真」…正方形の自分の画像を載せてください。できれば後ろ姿だけでもいいので自分の姿が映っているものを載せてください。
・「役職・所属」…自分の所属先を記入してください。
・「新しいパスワード」…自分だけのパスワードが欲しければ、ここで設定してください。

これで記事を書く準備が整いました!
 ではでは、記事を書いていきましょう!

 

記事の編集から公開まで

 

3⃣タイトルとメイン画像(必須)

wordpressの記事を書く画面の簡単な説明をします!
まず、管理画面の左側にある「投稿」の「新規追加」を押してください。
場所などを確認しながら、次の①~③を行ってみてください。

 

①タイトルを書く。(必須)


(あとで変更できます。)

 

②記事のメイン画像をアップロード(必須)


(あとで変更できます。)

 

③カテゴリーにチェックを入れる。(必須)

・自分のコーナー名
・次の中から今から書く記事に関わりのある項目→「こころ」「スポーツ系」「国際系」「環境系」「社会系」「音楽系」

これら(2つ以上)は必ずチェックしてください。

ここまでの①~③は、毎回投稿する際は必ず行ってください。
ここから先の記事の書き方は自由です。色々いじりながら、自分の好きなレイアウトを作ってみてください!
(最初の投稿の時は、ここから先の解説を参考にしてみてください。)

 

Point「文章の書き方」

(初めての投稿の時はここは読み飛ばして4⃣に飛んでください。)

記事を作成する前に、文章の書き方のオススメをいくつか紹介します。自分が好きなやり方で書いてください。一番最初の投稿は、①でやるといいと思います!

①Elementorで書く←1番オススメ
 「Elementor」というツールの中で文章を書きます。(詳しくは後述)
 メリット:レイアウトをアレンジしながら書けます。
 デメリット:慣れるまでちょっと難しいかも。

②wordpressの新規投稿で書く←オススメ
 これまで見てきたwordpressの新規投稿の画面で文章を書いていきます。
 メリット:一気に書けるので筆が捗りやすいです。
 デメリット:そのまま投稿してしまうと自由にページのレイアウトができません。。(ここで文章を全部書いた後に「Elementor」で自由にレイアウトをアレンジすることはできます!)

③スマホのメモ帳で書く
 スマホで文章を書いて、それをElementorにコピペしながらレイアウトをアレンジしていくやり方です。
 メリット:いつでもどこでも超簡単に記事を書いていけます。
 デメリット:パソコンなどで記事を投稿する時に、スマホからパソコンに送らなきゃいけない。(ちなみに、パソコンにLINEのアプリを入れて、自分一人だけのグループを作って、そこにスマホで文章や写真を送るとめっちゃ便利です。)

④Wordなどで書く
 Wordで文章を書き、それをElemantorにコピペしながらレイアウトをアレンジしていくやり方です。Wordで文章を書くことに慣れている人におススメです。
 メリット:「游明朝」の書体を使えます。(コピペするときにスペースが含まれているとできない&文字の大きさや太さなどはwordで変えてからコピーするべし)
 デメリット:コピペがめんどくさい

⑤その他のやり方(自由)

 

 

▽とりあえず最初は下記のやり方をオススメします!▽

 

4⃣「Elementor」で記事を編集

最初の投稿は、できれば「Elementor」というツールで文章を書きながらレイアウトをアレンジしていくことをオススメします!そちらの方が、簡単にオシャレな記事を書けます。二回目以降そのテンプレが使えるのでめっちゃ便利です!とりあえずこれで作っていきましょう。

 

❶記事を書く前の準備

①上にある「Elemantorで編集」を押す。

②左下の緑色の「公開」の横の△を押す。

③「テンプレートとして保存」を押す。

④左上の「ライブラリ」を押す。

⑤上の「テンプレート」を押す。

⑥色々あるテンプレートから自分が使ってみたいものを選んで「挿入」を押す。(二回目以降は自分で作ったテンプレートを選択できます。)

 

❷記事を書いて編集する

⑦(カラムや)要素を消したり追加したりしてみる。(「追加」はドラッグ&ドロップ、「削除」は要素の中の右上や左上に出てくる小さいとこを右クリックで削除)

⑧自分の文章を書いていく。

→wordやスマホのメモ帳ですでに文章を書いている場合はそれをコピペしていけばいい。

⑨サイズを変えたり細かいレイアウトを考える。

※注:一つ一つの要素を、「パソコン」「タブレット」「モバイル」それぞれでしっかりレイアウトできているかを確認しながら進めたほうが良いです。↓

 

❸「公開」を押して公開する

記事ができたー!と思ったら、左下の「公開」を押すと、公開されます。公開後もレイアウトや文章の変更は可能です。

 

❹テンプレートに保存する

次からもそのレイアウトを使いたい場合は、左下の「公開」の横の△を押して、「テンプレートに保存」に自分のコーナー名を入力して、保存してください。次からそれを使って、同じレイアウトで素早く記事を作成できます!

 

コツやヒント

 

背景画像の変更

まず、wordpressの新規投稿の画面の下にある「Custom CSS」に下記のコードを入力してください。(Elementorの画面からwordpressに戻る場合は、画面左上の三本線を押して、「ダッシュボードに戻る」を押します。戻る前に「下書き」を忘れずに!(左下の「更新」の横の△からできます。))  ココに↓

body::before {
  background: url() no-repeat center;/* 背景 */
  background-size: cover;/* cover指定できる */
  content: "";
  display: block;
  position: fixed;/* 擬似要素ごと固定 */
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;/* 横幅いっぱい */
  height: 100vh;/* 縦幅いっぱい */
}

①背景を画像にしたい場合

上のコードの、「background」のurl()のカッコの間に「画像のURL」を入れてください。
▽「画像のURL」とは▽
1,画像をアップロードする…wordpress管理画面にある「メディア」か、wordpress新規投稿の右にある「アイキャッチ画像」から写真をアップロードします。
2,アップロードしたら右下に写真のurlが出てきます。それをコピーして貼り付けてください。

②背景を色にしたい場合

好きな色を、下記のページなどで調べてください。
WEB色見本 原色大辞典 – HTMLカラーコード (colordic.org)
Web Safe Color一覧表/カラーチャート (scollabo.com)
上のコードの、「background」の後ろの「url~center」までを全部消して、
「#○○〇」か、「rgba(〇,〇,〇,〇)」を入れてください。

Point:色を透過させたい場合、rgbaの四個目の〇に0~1までの数字を入れてください。例えば、0.1とか。0に近づくほど透過度があがります。

背景をグラデーションにしたい場合などは上のコードの赤字の部分を消して、liner-gradientなどのグラデーション用のコードを入れてください。(参考:美しいグラデーションをCSSで実装!配色に使える便利ツールや実例も! | Webクリエイターボックス (webcreatorbox.com)

 

要素のサイズや位置を自由に変える

Elementorでは、こんな風に、サイトを開いたときの見た目をより素敵にできます。

これは、「Elementor」で、「画像」の要素を記事の一番上にドラッグ&ドロップして、そのサイズを大きくして、周りのマージン(空白)を消してやっています。↓ここを触ってみて!

「パソコン」や「タブレット」や「モバイル」でどうなってるかを確認しながらやるといいです。注意点としては、marginの「右」と「左」を「-20px」にすると、スマホで画像の横幅が画面の幅ぴったりになります。

 

画像使用の注意点と作り方

※注意※【著作権には配慮してください。】

使用する画像は、著作権や肖像権をしっかり守ってください。画像のフリーサイトでダウンロードしたもののみ、引用元の記載なしで使って大丈夫です。それ以外のものは、必ず引用元を示してください。

おススメのフリー画像サイト
Unsplash | Beautiful Free Photo Community

メイン画像を自分で作成したい方

基本的にはメインの画像などは、南大樹が制作することも可能です。

もしも自分でやってくださる場合は、こちらのアプリをお勧めします。
画像加工①app store:‎「SNOW スノー」をApp Storeで (apple.com)
google play: SNOW スノー – Google Play のアプリ
画像加工②app store:‎「PicsArt 写真&動画編集アプリ」をApp Storeで (apple.com)
google play:snow – Google Play の Android アプリ
画像加工③app store:‎「Artleap – 写真加工アプリ、Lightricksから」をApp Storeで (apple.com)

画像文字入れ app store:‎ Phonto 写真文字入れ」をApp Storeで (apple.com)
google play:Phonto 写真文字入れ – Google Play のアプリ

 

Elementorの基本的な編集

 

Elementorでは、自由に自分のページを作っていけます!

参考に基本的なやり方だけ解説します。

①要素のアレンジはここ!↓

②要素の複製と並べ替えはここ!↓

③「カラム(要素の集合)」の編集はここ!↓

④「セクション(カラムの集合)」の編集はここ!↓

 

基本的にはこの4つが分かってればなんでもできます!
⑤目次を消すのはここ!↓

 

タイトルを黒文字にする

タイトルを黒文字にするには、下記のコードをwordpressの投稿編集画面の下にある「Custom CSS」の欄にコピペして下さい。

.heading.heading-singleTitle{color: #000 !important; text-shadow: none !important;}

 
タイトルを黒文字にして且つ、游明朝にしたいときは、下記のコードをコピペして下さい。
.heading.heading-singleTitle{color: #000 !important; text-shadow: none !important; font-family:’游明朝’ !important;}