SIMPLESTERとSTINGER5のカスタマイズ7つまとめ

スポンサードリンク

今日はずっとやりたくてたまらなかった、ブログのカスタマイズをしていきます!

デザイン性を高めるトピックスまとめ7つ

まずは準備!インストールしておくべきソフト!

Mac用エディタ

CotEditor 2.1という、OS X 専用 プレーンテキストエディタをインストールしました。
エディタがないと、さすがにphpの編集は怖いなぁ、、と思いさっそく導入しました。

説明用画像を簡単につくれてしまうソフト

Skithというスクリーンショットを撮って、その画像に矢印などを描写できるソフトをインストールしました。
画像で説明をするのに超便利ですね。教えていただいて本当によかった!

簡単なところからデザインを整えていきました!

デザインで差がつく!おされな背景画像を設定!

こちらのサイト様よりシームレス画像を入手しました!
がっつり柄が入っているものより、さりげなくテクスチャ感がある背景がクオリティーの高いサイトに見せてくれるといいなぁ、、と思い、以下の画像をチョイスしました!

concrete_seamless

SIMPLESTERでデフォルトのハートのアイコンをベルのアイコンに変更

こちらの【SIMPLESTERで記事をマウスホバー(マウスオーバー)時に表示されるハートのアイコンを変更する方法】という記事を参考にして変更しました。記号の番号を変えるだけで簡単に変わったので嬉しかったです!

[browser-shot url=”http://asitanokaze.com/post-440/” width=”200″ target=”_blank”]

Font Awesomeにアクセスしてびっくりしました。

アイコンめっちゃある!これらを文字として認識させるとかおもしろいなぁ、、、

こちらのベルに設定しました!

スクリーンショット_2015-07-12_14_50_00

トップページに新着記事一覧をサイドバーに表示させないように変更

こちらのキャリコさんの記事を参考に、STINGER5のsidebar.phpを編集しました。。。
怖かった、、素人なもので、意味わからずにエディタにコピーしもって更新しました。

 

サイドバーにプロフィールを追加

こちらのガジェニューさんの記事を参考に、サイドバーにプロフィールを追加しました。
実際には子テーマに追加したかったのですが、方法がわからず、直接STINGER5のsideber.phpに記入しました。

記事のアイキャッチがほとんどイラストになっていくことが想定されたので、差別化したくて写真を加工して使用しています。こういう加工はPhotohsopではとても簡単なので、またやり方をまとめていきたいなーと思っています。

スクリーンショット_2015-07-12_16_00_22

 

メニューバーにアイコンを設定

変更の仕方は簡単。項目を開き、タイトルの属性部分に[home/link/cate/page/envelope]のいずれかを入力し保存していきます。

とのことでしたので、さっそく属性部分を入れてみました!

aa

ナビゲーションバーはまだまだ改善の余地ありですが、一旦は満足。
カテゴリ分けもしっかりと考えてやっていかなくちゃいけないなーと反省。

 滞在時間を高めるためのデザイン変更

もくじを導入して読みやすい記事作り!

超有名どころTable of Contents Plusというプラグインを導入してみました。
設定に大変悩み中です。記事を増やしていきながら、設定について検討していこうと思っています。

今現在はこんな感じ↓
スクリーンショット 2015-07-12 16.51.49超簡単でびっくりなんですが、デザイン的にはなんかしっくりこないです。あとあと整えていきたいです。

コメント欄を削除!関連記事表示優先!

正直、私のブログは何か言いたいことがある人は、コメントじゃなくてお問い合わせフォームを使うんじゃないかなーと思っていました。

それより何より関連記事までがこのコメント欄のおかげで遠くなっちゃうので削除しました。

非表示の方法はこちらのサイト様の記事を参考にしながら、single.phpをおっかなびっくり編集しました。

まとめ

やりたいことはいっぱいあるし、書きたい記事もたくさんある。
だったら、やりたいことをやりやすく、書きたい記事を書きたいようにかける準備が必要だということがよくわかりました!

少しずつ勉強していきます!

スポンサードリンク