• 編集プロダクション・リブロワークスのWebサイト

    そろマンガブロックプラグイン(lw-soromanga-block)のご紹介

    難しい話もマンガにするとわかりやすくなるってホントなの?
    疑問だったら、自分で試してみるというのはどうかな?
    手軽にマンガ

    そろマンガブロックプラグイン(lw-soromanga-block)は、『そろそろ常識? マンガでわかる』シリーズの組版用CSSを転用し、WordPress上で簡単にマンガ風表現を実現可能にしたものです。セリフのテキストを書くだけで、マンガ風にすることができます。

    そろマンガシリーズ
    そろマンガLinuxカバー
    そろそろ常識? マンガでわかる「正規表現」
    そろマンガLinuxコマンド
    そろそろ常識? マンガでわかる「Linuxコマンド」

    以降続刊予定

    ※本プラグインのスマホ対応は暫定のものです。CSSを改訂する必要があります(2021/05/24)。

    インストール方法

    インストール方法は4ステップ!
    まずはZIPファイルを2つダウンロード
    ZIPファイル2つ
    次にCSSファイルと関連画像ファイルをWordPressサイトにアップロード
    CSS
    さらに別のプラグインを使って、CSSファイルを有効化する
    Code Snipets
    CSSがないとどうなるの?
    マンガ風に表示させるのはCSSの働きだから、CSSがない場合はただ文字だけ表示される
    意味ないね
    最後にそろマンガブロックプラグインをインストールして終わり
    プラグイン
    公式プラグインディレクトリからじゃなく、昔ながらの手動インストールなのであしからず
    諸事情により

    ZIPファイルのダウンロード

    まずはGitHubにから2つのZIPファイルをダウンロードしよう。lw-soromanga-block.zipとsoromanga.css

    ぎっとはぶの画面って何だかむずかしそうだね

    リンクをクリックしてダウンロードするだけだから、そこは気にしなくても大丈夫だよ

    下の「Assets4」ってところからダウンロードできるね

    https://github.com/libroworks/lw-soromanga-block/releases

    CSSファイルのアップロード

    次にsoromanga.zipを展開して、自分のWordPressサイトにアップロード。FTPソフトかレンタルサーバのファイル管理機能を使えば簡単だよ

    うちは確かさくらのレンタルサーバだったよね?

    さくらのレンタルサーバだったら、管理画面(コントロールパネル)からファイルマネージャーを開き、「wp」フォルダの下に「soromanga_css」というフォルダを作ってそこにファイルをアップロードする

    ファイルが多いと時間がかかりそうだねー

    サイズ小さいから時間はそうかからないけど、「img」フォルダの中に画像がたくさんあるんで、そこはちょっと手間かもね

    アップロードしたら、WebブラウザにCSSのURLを入力してみて、CSSの中身が表示されるか確認しよう

    追加CSSファイルを有効にする

    CSSがアップロードできたら、それを有効にする必要がある。追加CSSを有効にする方法はいくつかあるけど、自分はCode Snipetsというプラグインを使っているよ

    こーどすにぺっつ?

    うん。Code Snipetsのプラグインをイントールしたら、新規Snippetを追加して、CSSをWordPressに読み込ますためのコードを実行するんだ。それでテーマのCSSに別のCSSを追加できる

    すごいムズカシそー

    そうでもないよー。間違えずに次のように入力するだけだよ~

    wp_enqueue_style('soromanga-css', 'https://独自ドメイン/soromanga_css/3_frame_wp.css')
    独自ドメイン+フォルダ名+CSSファイル名だね
    アップロード先のフォルダ名か、Code Snippetsに入力するURLかどっちかがちょっとでも間違ったらダメだからそこは注意してね
    要注意だね

    そろマンガブロックプラグインのインストール

    最後にプラグインのインストール。プラグインの新規インストール画面を出したら「プラグインのアップロード」をクリックして、lw-soromanga-block.zipをアップロードしよう

    これで終わりだよね

    ですよ。ここまでの作業が成功したら、記事の投稿画面でlw-soromanga-blockが使えるようになっているはずだよ