こんにちは、ろっしーです。
ここ最近ではブロガーさんも増え、記事の差別化が難しくなってきました。
私のブログもう少し目立たせたいんだけど・・・
デザイン変えてみたいけどプログラミングの知識ないし・・・
ブログを簡単にカスタマイズできる便利なものがありますよ！
他のブログ・サイトと差別化をしたい方は必見！
Nomad Code（ノマドコード）でブログ内のデザインをオシャレでスタイリッシュに変化させちゃいましょう。
Nomad Code はプログラミングの知識も必要ありませんし、もちろん無料です。
ブログやサイトを運営している方なら分かる基礎知識だけでOK。
パソコン初心者の僕でも簡単にできました！
使い方はサイト内を見ていけば簡単にわかる内容で丁寧に説明されています。
今回は実際に僕が使ってみて分かりにくかった所もありましたので、全て１つ１つ図解も入れて説明しています。
この記事を読んでサイトを見てもらえればバッチリ使って貰えます。
- Nomad Code でデザインをカスタマイズする方法
- AddQuicktagを使って簡単にコードを使う方法
- 簡単にカスタマイズ出来るサイトをもう一つ紹介
早速いきましょう。
Nomad Code でデザインをオシャレに変身
Nomad Code はデータSIMやポケットルーターのレンタルなどを手掛けている会社
こちらの運営するサイトです。
使用できるデザインはこちら。
- 見出し
- ボックス
- CVボックス
- リスト
- ボタン
- カエレバ
- アプリーチ
どれもシンプルなデザインで柔らかい色彩。サイトを非常に見やすくしてくれます。
カスタムできるブログデザインも実に豊富。
まずは無料ブログ。
- はてなブログ
- アメブロ
- Blogger
WordPress のテーマはこちら。
- JIN
- Cocoon
- Affinger
- SANGO
幅広く適用できるようになっています。
WordPressはカスタムやデザインが自由にできますが、はてなブログやアメブロも使えるのには驚きました。
では実際の使用方法を見て行きましょう。
Nomad Code の使用方法
Nomad Code の使用方法はとても簡単です。
※今回は僕が WordPress の Cocoon を使っているので、Cocoon での説明になります。
他のテーマでも基本的な使用方法は変わりません。
- 使用するデザインを選ぶ
- CSSコードをコピー
- テーマのスタイルシートにペースト
- HTMLコードをコピー
- デザインを使う所にHTMLコードをペースト
この順番でコピーとペーストで使えちゃいます。
他のブログデザインも使用方法はカラーページで非常に分かりやすく説明があるので、順番にやっていけば問題なく使えます。
シンプルボックスデザインをCocoonに追加してみよう
WordPress のテーマ Cocoon にシンプルボックスデザインを追加してみましょう。
他のテーマやデザインも基本的には方法は同じです。
①最初にサイトで自分の使っているブログデザイン、もしくは WordPress のテーマの項目から使いたい項目を選びます。
②次に色を選びます。色のアイコンをクリックすればサンプルの色が変わります。今回は僕のテーマが青色をベースにしているので青色を選択します。
③次に「コードを表示をクリック」します。
④コードは左が HTMLコード、右が CSSコード が出てきます。まず最初にCSSコードをコピーします。赤い丸の部分をクリックすればコピーできますが、うまくいかない時はコードを全選択してコピーしてください。
⑤ 続いてWordPress のダッシュボードにいきます。左のタスクバーから外観をクリック。
⑥続いてカスタマイズをクリック。
⑦一番したにある、追加CSSをクリック。
⑧ コピーしてきたCSSコードをペースト（貼付け）します。
⑨ペースト（貼付け）できたら公開をクリックして作業は完了です。
これで作業完了です。もう記事の中で使う事ができます。
追加したデザインコードを使ってみよう
追加したデザインの使い方はこちらです。
- 記事の中の使う場所を選ぶ
- ブロックの「カスタムHTML」を選択
- Nomad Code の HTMLコード をペースト
- コードの中の文章を記事の文章に変える
では実際に使ってみましょう。
HTMLコードの入力
①記事の中の使う場所を選んでブロックを追加して、「カスタムHTML」を選びます。
②次にNomad Codeの方から、先程使えるようにしたシンプルボックスのHTMLコードをコピーします。右下の COPY をクリックすれば一発でコピーできますが、うまくいかない時はコードを全選択してコピーです。
③ブロックの「カスタムHTML」の中にペースト（貼付け）します。
④プレビューで確認してみて、シンプルボックスができていれば完成です。「ここに文章」は下書きに戻り、コード内の「ここに文章」を好きな文章に変えればOKです。
⑤文章を変えたのがこちら。これで完成です。
他のカスタム素材も全て同じ手順になります。
貼り付ける場所さえ間違えなければ、全く難しい所は有りません。
アイコンの設定
一部のカスタム、Cocoon だと「CVボックスデザイン」にアイコンが使われています。赤丸で囲まれている部分がそうです。
これを反映させるのに、アイコンフォントの設定が必要となります。
アイコンフォトの設定が必要なカスタムは、左下に「アイコンの設定が必要です」と注意書きがしてあります。
詳しい方法はリンクが貼ってあるので、リンクから飛べば詳しい方法は読むことができます。
アイコンフォトの設定は指定の場所、WordPress のテーマでは <head>〜</head>内 にコードを貼り付けて反映させればOKです。
Cocoonの中のどこに <head>〜</head>内 があるのか分かりませんでした。
Cocoonでは Cocoon設定の「アクセス解析・認証コード設定」の中にある「ヘッド用コード」の部分に貼り付けて、保存すればOKです。
アクセス解析・認証コード設定の中で下にスクロールすればあります。
その他のテーマも <head>〜</head>内 を探して貼付けすればOKです。
AddQuicktag で簡単に使おう
これは WordPress のみになります。
AddQuicktag （アドクイックタグ）はHTMLコードをショートカットとして記憶させておいて、記事にクリックだけで使えるようにできる便利なプラグインです。
- AddQuicktag プラグインをインストール
- 有効化する
- 設定からAddQuicktag をクリック
- HTMLコードを登録
- クラシックエディタ（旧エディタ）で使う
プラグインのインストールから有効化まではご存知と思いますので省略します。
④HTMLコードを登録。
- 左から、登録するコードの名前を入れます
- 次にNomad Code で左側のHTMLコードを開始タグにコピペ
- 最後に右のチェックリストを全てチェック入れます。（一番右のボックスにチェック入れると全部チェック入ります）
終わったら下にスクロールして「変更を保存」で登録完了です。
注意点として、AddQuicktag はクラシックエディタ（旧エディタ）でしか使えません。
現行のブロックエディタで使う場合は、ブロックの段落を「クラシック版の段落」にすればその１つの段落で使うことができます。
詳しくは他サイトで分かりやすく書いてありますので、こちらを参考にされてください。
おすすめのカスタム
WordPress テーマであれば、各テーマで使えるデザインでも満足できるのではと思います。
ここで特におすすめのカスタムは CVボックス、カエレバ、RINKER，アプリーチなどです。
かなりスタイリッシュでかっこよくなります。
CVボックス
左がパソコン、右がモバイルでの表示
CVボックスを使った参考記事はこちら。
RINKER、カエレバ
アプリーチ
商品の比較説明や、まとめサイトにCVボックスはかなり使えると思います。
RINKERやカエレバは通常使われていると思いますが、よりスタイリッシュで他よりもカッコよく。
アプリの案内をされている方にはアプリーチも使いやすいと思います。
もっとカスタムしたい人
もっと他サイトと差別化したい方にオススメなのが、ぽんひろさん@ponhiro がたくさんカスタムコードを作って案内してくれています。
なんとこちらも無料で使えます！こちらも参考にされてみてください。
カスタマイズについて
Nomad Code、ぽんひろさん の案内してくれているデザインを追加することで他のブログよりも綺麗で読みやすい記事にできると思います。
しかし、それにハマって時間をいたずらに浪費したり記事をかえってゴチャゴチャにして読みにくくならないように気をつけるようにしたいですね。
僕自身もハマりそうになりましたが、未経験者にとってデザインは沼です。
「あれもいい」、「これもいい」となって色々やりすぎてしまいます。
最後に注意点です。
バックアップをとっておかないと、もしも間違えてしまった場合にブログ自体がうまく表示されなくなったり不具合が出ます。そうなった時は素人では修復ができません。
これだけは注意しましょう。
あなたのブログがお洒落で読みやすいものになりますように。
おわり
コメント