ここあです。
私はデザイナーなのでブログのデザインに関しては
かなり細部にまでこだわってカスタマイズしています。
なので、これまで…
私が使っているテーマ「STORK」の
カスタマイズ方法に関しては
かなりいろいろと書いてきました。
ですが、それでもまだまだ記事として
書いていない部分もたくさんあります。
ただ、どうして今までそれをずっと書かずに
放置してきたかと言うと…
おそらく需要が全くないぐらい
超マニアックなカスタマイズだから…（笑）
とは言え、みんなが書いているような
カスタマイズ方法を書いたところで…
と、いろいろな葛藤があるんですね＾＾；
ただ…それでも…、やっぱり…
「書いてみないことには分からない！」
ということで、今回は…
「俺はみんなと同じは嫌だ！」という
超こだわり屋さんのためのSTORKカスタマイズ
「マニアック編」の小ネタ集として
ご紹介したいと思います＾＾
おそらく今回のカスタマイズは、微妙すぎて…
- 「別にそこまでしなくてもいいかな…」
- 「え〜、そんな所までしてたの？」
みたいなところですが…（笑）
そんな私のこだわりが「好きだ」という
ホットな「ここあファン」のあなたは
ぜひ生温かく見守りながら読んでやってください＾＾
他のSTORKユーザーと差別化したい人は必見です！
STORKをカスタマイズする時は…
毎度のことながら、最初に書いておきます＾＾
テーマをカスタマイズする時は
必ずバックアップを取ってください。
また、STORKのカスタマイズは基本的に
全て「子テーマ」の方で行ってください。
そして、この記事で紹介する
CSSコードの記述先は…
ダッシュボードメニューから
外観 → カスタマイズをクリック
以下、追加CSSの部分に
CSSコードを記述してください。
私がなぜいつもCSSコードの記述先を
追加CSSの部分に書くことを勧めるのかというと…
ライブビューで確認しながら作業ができ
非常に分かりやすいからです。
なので、CSSコードはこちらに記述することを
いつもおすすめしています＾＾
ということで…
カスタマイズ方法をご紹介していきます。
この記事を書いた人をカスタマイズする方法
通常、STORKで表示される
「この記事を書いた人」というのは
このように表示されますが…
ちょっと存在感が薄くて残念ですよね…
せっかくがんばって記事を書いてるんだから
「俺が書いてるんだぜ！」と
もう少し主張させてもいいのでは…と
思ったりもしませんか？（笑）
なので、私は枠線と背景色をちょっとだけ加えて
このようにしています。
そうすることで、存在感も
視覚的なメリハリも出ます＾＾
そもそもSTORKって…
「オシャレでキレイなテーマ」と言われている割に
「フッター付近が雑！」と思うのは私だけ？（笑）
だから、もう少し何とかしてキレイに整えたいって
思ったんですよね…＾＾
ということで、「この記事を書いた人」に
枠線や背景色をつける場合は
以下のCSSコードを記述しましょう。
- 追加CSSに
.profile{display: block;border:solid 1px #ccc;padding:0 25px 0 25px;background:#ffffe9;}
簡単にコードの説明をしておくと…
border:solid 1px #ccc;が枠線の種類・線幅・色になります。
なので…
1pxを2pxにすれば、線幅は太くなるし
#cccを#000にすれば、黒になります。
※#cccの部分は好きなカラーコードを入れてください。
さらに…
solidの部分をdottedにすれば点線に
dashedにすると破線になりますので試してみてくださいね。
また…
background:#ffffe9;のカラーコード#ffffe9を変えることで
背景の色が変わりますので、お好みの色を設定しましょう。
背景色を黒にして、文字を白にすると
ちょっとだけ格好良くなります＾＾
今回は文字色のカスタマイズ方法は、あえて記載しませんが
反響があれば追記するかもしれません…。
RECOMMEND記事を見やすくする方法
次にご紹介するのは…
RECOMMEND記事を見やすくする方法です。
通常、STORKで表示される「RECOMMEND記事」というのは
以下のように表示されますが…
文字も太くて読みにくいし
それぞれのリンクカードがくっついてて
非常に分かりにくいですよね…
だから、それも思い切って解消しました。
こんな感じに…＾＾
何をしたかと言うと…
リンクカードの右側に細い罫線を入れて
文字も細く見やすくしています。
また、英文字や（ ）が入ってて
少し分かりにくいですが
タイトルの文字は
両端揃えになるよう設定してあるので
英字や（ ）を使ってなければ
さらにキレイに見やすくなります＾＾
これと同じ設定にする場合は
以下のCSSコードをコピペしてください。
- 追加CSSにコピペ
@media only screen and (min-width: 766px) {.related-box li {border-right:solid 1px #ccc;}.related-box li:nth-child(4n){border-right: none;}.carouselwrap .cat-name, .eyecatch .cat-name{margin-right:7px;}.related-box li .eyecatch{margin-right:7px;}.related-box li .ttl{text-align:justify;margin-right:7px;font-weight:normal;}
}
ただし、今回ご紹介するCSSコードは
PC版のみのコードとしているので
スマホ版には対応してません。
あらかじめご了承ください。
こちらは特にカスタマイズする必要はないと思いますが…
CSSコードのborder-right:solid 1px #ccc;の部分で
罫線の種類や色、太さを変えることができます。
お好みでどうぞ…＾＾
NEW POST記事を見やすくする方法
続いてNEW POST記事を見やすくする方法ですが
こちらも先ほどのRECOMMEND記事と全く同じです。
通常、デフォルトで表示される「NEW POST記事」は
このように表示されますが…
CSSコードを追加することで
RECOMMEND記事と同様
スッキリ見やすくすることができます。
こちらのCSSコードもPC版のみとしていますが
同じように変更する場合は…
以下のCSSコードをコピペしてくださいね。
- 追加CSSに
@media only screen and (min-width: 766px) {.author-newpost li{border-right:solid 1px #ccc;}.author-newpost li:nth-child(4n){border-right:none;}.author-newpost .eyecatch{margin-right:7px;}.author-newpost li .ttl{font-weight:normal;}}
こちらも設定はお好みでどうぞ…＾＾
検索ボックスをカスタマイズする方法
お待たせしましたっ！
本当にどうでもいいカスタマイズ…（笑）
私のサイトは何となくWordPressテーマ「SANGO」風が
可愛くていいなと思い、SANGOの雰囲気を
一部取り入れているのですが…
そのために行ったカスタマイズというのが
検索ボックスなんですね。
通常、STORKの検索ボックスは
このように非常にシンプルなデザイン。
なので、これをSANGO風にするために
CSSコードでカスタマイズしました。
まぁ、ほんと些細なことですけど…
こうして見比べると印象が違って見えますよね？＾＾
正直「どうでも良い！」と思われる方が
9割ぐらいいるとは思いますが…（笑）
一応CSSコードを載せておきます！
- 追加CSSにコピペ
.widget.widget_search button {background:#a7cff3;border-radius:0px;margin-top:2px;height:110%;}.fa-search::before{color:#fff;}
CSSコードのカスタマイズ方法は…
background:#a7cff3;のカラーコードで水色の変更
color:#fff;のカラーコードで虫眼鏡の色が変更できます。
ということで、他のSTORKユーザーと差別化したい場合は
ぜひご活用ください！＾＾
STORKの記事にルビを付ける方法
テンプレートのカスタマイズとは少し離れますが
ブログを運営する場合…
あまり難しい漢字などを使うと
読者が記事に集中できず
離脱してしまう場合があります。
しかし、だからと言って
葛藤（かっとう）みたく漢字のあとに（ ）で入れるのも
何となく同じことを2回言ってる気がして
気持ち悪いですよね…＾＾；
そんな時に使えるのが「ルビ」の表示です。
ルビさえ使えるようになれば
例え難しい漢字があっても、葛藤と…
このように自然な感じで読んでもらうことができます。
また、私の場合に限って言えば…
例え一般的に読みにくそうな漢字であっても
ひらがなで書くよりは漢字で書く方が
視覚的に伝わりやすく感じる時があるので
そんな時はあえてルビを使って
誰でも読めるように分かりやすい記事に
なるよう心がけています。
だから、ルビに関しては使う使わないに関わらず
まずは「ルビを付ける方法がある」という知識だけ
インプットしておいて…
いざ「使おう！」と思った時に
私のサイトまで戻ってきてください（笑）
ということで、ルビの表示方法を記載しておきます！
- ルビのHTMLコード
<ruby>葛藤<rt>かっとう</rt></ruby>
ルビを表示させたい場合は
<ruby>と</ruby>の中にルビを表示させたい漢字を入れて
さらに<rt>と</rt>の間にルビとなる「ふりがな」を入力します。
ルビの表示方法は一見難しいそうに見えますが
分かってしまうと実は意外と簡単なんですね…。
また、私は漢字とルビの位置がちょうど良いところに来るように
CSSコードで位置調整もしています。
- ルビ位置調整のCSSコード
ruby {position: relative;}ruby rt {position: relative;top: 1ex;}
CSSコードの解説はあえて致しませんが…（笑）
ルビを使ってみようと思う場合は
HTMLコードの書き方を覚えつつ
CSSコードも追加CSSにコピペしてくださいね。
STORKカスタマイズ！〜番外編小ネタ集まとめ
今回はあまり必要性のない
マニアックなカスタマイズ記事を
あえてご紹介致しました＾＾
しかし、私が思うに…
- これは必要じゃないかも…
- これは当たり前のようにみんな知っているだろう
ということでも
実は意外とそうでもなかったり
する場合があるんですね。
なので、当然記事を書く時は
検索数の見込みが全くない記事を
ただ一生懸命書いても無駄にしかなりませんが
仮にそうでない場合は、とりあえず
記事を書いてみても良いかな…と
私は思っています。
特にネットの場合は
アクセス解析というカタチで
データ分析することもできるし
ある意味それが、ネットを使うことの強みなので
ちゃんと分析さえすれば、どんな記事も
無駄になるようなことは決してありません。
つまり、気になったことをとりあえず記事にしてみると
「これって意外と需要あるかも？」なんて
新たな発見ができることもあったりします。
いずれにしても記事を書く時は…
何かしら差別化をしていかないと
「この人の書いてる記事全然つまんない」とか
「全く役に立たない」と思われる
ただの悲しいブログになってしまいます＾＾；
なので、需要があるかないか分からない内容でも
他の人と切り口を変えて
まずは自分が楽しんで書くことで…
「この人の記事なんか面白い」と
思ってもらえる可能性も高くなるし
そうすることで少しずつファンを増やすことも
できるようになってきます。
だから、どうしても書く事が
見つからないという時は…
※私はそんなことないですよ…＾＾
あなたが「当たり前だ」と思っていることや
「まぁ、書くだけ無駄かな？」と
思うようなことでも
とりあえず書いてみましょう！（笑）
なにげない記事でもあなたの個性がちゃんと出れば
記事としては十分に生きます＾＾
なので、あなたの個性も大事にしましょう！
正直、機械が書いたような心のない記事
Wikipediaのような情報を載せただけの記事では
あなたにファンがつくことがありません。
今回はある意味、私にとっては
本当に試験的に書いたようなものですが…
それでも「良かった」と思ってくれる読者がいれば
私にとっては嬉しいし、書いてみて良かったと
思える時もくるんじゃないかな？と信じています＾＾
だからこそ、わたしは
こんなマニアックなカスタマイズ方法でも
書くことに意味があると思っているので…
これまで放置しながら温めていたネタを書きました。
もちろん、記事を書く以上は１人でも多くの方に
「役に立った」と思われる方が嬉しいので…
適当なことを書いたつもりはありません。
しかし、いつもいつも
「読者に役立つ記事は何だろう？」と
そればかり気にして書いていたら
正直、私はものスゴくしんどいし
ブログを書くのも全然楽しくなくなるので…
たまには1つぐらい自分が書きたい記事を
自由に書いてもいいんじゃないか…と思って
今回のような記事を書いたワケです。
少し話がそれてしまいましたが…
そんな私の想いも一緒に感じてもらえると嬉しいです＾＾
実は今回一番お伝えしたかったのは
そこなんですけどね…（笑）
カスタマイズはどうでもいいんかいっ！
一見カスタマイズ記事紹介のように書いてますが…
実は要点がそこじゃないというのも
ブログ運営の楽しさです…。
あなたは何を感じましたか？
せっかくブログを運営するなら
まずは自分がしっかり楽しみましょう＾＾
ということで…
最後までお読みいただきありがとうございました！
